Square Beat Engine

Blog for variety of things…

WordPress

WordPress テーマのカスタマイズ その2

投稿日:2015-09-20 更新日:

ブログのデザインを変更した。
以前の記事と重複するため、どのようにまとめようか悩んだが、「迷ったときはまず投稿」ということで、今回行った作業を記しておく。

方針

  • 記事部分がうまく整列されておらず、ガタガタしていたのを修正。
  • 全体的に色使いを修正。
  • フォントサイズを調整し、メリハリのきいたレイアウトに修正。

各フォントサイズ

font-sizeだけでなく、line-hightも一緒に設定することで、改行のときに文字が重なってしまうのを防ぐ。(スマホ対策にもなる)
今回は、line-heightはfont-sizeプラス2pxで設定。

  • タイトル 48px
  • 記事タイトル 26px
  • h2 22px
  • h3 20px
  • h4 18px
  • p 15px

具体的な変更点

テーマのカスタマイズ

背景色

#f2f2f2に変更。

Style.cssの修正

基本の文字

本文の文字サイズを少し小さくして、行間を狭めた。

セレクタ section

font-size: 15pxのまま。(小さくしようとしたが変更なし)
line-height: 25pxに変更。(元は27px)

さらに、セレクタpからfont-sizeline-heightの設定を削除。(重複しているので)

RSSの色

セレクタ .rssbox

background-color: #ffa500に変更。RSSらしくオレンジにしてみた。

検索BOX

検索BOXは、すぐ上のRSSボタンに合わせ、オレンジにした。

セレクタ #s

background-color: #ffdeadに変更。入力部分。淡いオレンジに設定。

セレクタ #serachsubmit

background-color: #ffa500に変更。検索ボタン。RRSと同じ色。

タイトルのフォントサイズを巨大化

セレクタ header .sitename

font-sizeline-heightを変更。

記事のタイトル

セレクタ .entry-title

font-size: 28pxに変更。(元は24px)

また、下のバーが左右の余白がガタガタの原因となっていたので、削除。

セレクタ .blogbox

marginpaddingを調整し、ガタガタを解消。

見出しの調整

セレクタ h2, .post h3, .post h4

それぞれmarginを調整し、他のアイテムと左側を揃えた。
またfont-sizeline-heightも調整。

記事のレイアウト

セレクタ main

paddingを調整し、左右の幅を少し狭めた。
レスポンシブ対応のため、mainセレクタは複数ある点に注意が必要だ。

おわりに

WordPressのテーマをカスタマイズするのは久しぶりだった。
デザインも苦手で、CSSにも慣れていないため、非常に時間がかかった。

まだ改善の余地はたくさんありそうだが、今回はこの辺で一区切り。

以上!

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPressへのドメイン設定

さて、今回はいよいよWordPressへのドメイン設定だ。 この設定をしないと、http://sbe.tokyo/blog/のような、ちょっと格好悪いURLになってしまう。 そこで、http://bl …

テーマのカスタマイズ

テーマのカスタマイズを進めて、色の設定や見出しの変更などを実施した。 テーマの理解 Stinger5では、色の変更はカスタマイズから行うことができる。 「基本色(キーカラー)」という項目があり、4箇所 …

Googele Analyticsとテーマのインストール

今日もブログ構築を少し進めた。知らないことばっかりで、一つ一つに時間がかかってしょうがない。だがしかし、その経験が必要なのだ。 Google Analytics 設置 実は昨夜ちょろっと設置してみたん …

プロフィール作成

今日は時間がなかったので、プロフィール作成に着手。 だだっと書いてみた。 でもHN(ハンドルネーム)は決まらない。というか、今時HNとか必要なのか?どうなのか? しかし、HN以外はいい感じにできあがっ …

WordPress サーバー移行完了

VPSをWebアプリに流用するため、ブログはさくらのレンタルサーバー(スタンダード)に移行しました。 単にSQLのエクスポート・インポートではうまくいかなかったので、投稿とコメントをSQLでINSER …