photo by Takamorry
miyamoです。
僕のブログでは、WordPressのテーマとしてSimplicityを使っています。細かくカスタマイズすることができて、使いやすいテーマです。
スタイルシートに手を入れなくても、そこそこ見た目を変えることができます。しかし、カスタマイザーでできないところのデザインを変更したいときは、スタイルシートを修正する必要があります。
僕もスタイルシートに手を入れています。実は、少し試してみたテーマのマテリアルのデザインが忘れられず、無理しない範囲でマテリアルに近づけることができないかと挑戦してみました。
凝った変更はカスタマイザーではできないので、スタイルシートを修正していきます。
Simplicityはもともと、カスタマイズを前提としていところもあるので、標準のデザインはシンプルですが、その分見た目を大きく変えることができます。
今回はSimplicityをマテリアル風に変更した方法をまとめてみたいと思います。
Special Thanks to マテリアル by Nobuo（@Nobuo_Create）さん
それでは、いってみよー。
目次
Simplicityのデザイン変更について
Simplicityはカスタマイザーでデザインを細かく変更することができます。
カスタマイザーで変更できるもの
Simplicityのカスタマイザーでは次のようなものを変更することができます。
- 画面の色（背景、リンク、ヘッダー、メニュー、フッター等）
- 各種画像設定（ヘッダー画像、背景画像等）
- スキンの利用
- トップページ、個別記事ページのレイアウト変更
- SEO関連設定
- SNS関連設定
- Analytics、ウェブマスターツール連携
- Google Adsense関連設定
- ブログカード設定
簡単に書き出してみただけでもこれだけありますし、まだ他にもあります。もちろん、それぞれの項目は細かく設定することができます。
それでもカスタマイザーで用意されてないところを変更したい場合は、自分でスタイルシートやテーマ内のPHPファイルを直接修正する必要があります。
Simplicityには、標準で子テーマが用意されています。テーマのカスタマイズは、子テーマに対して行います。そうすると、親テーマをアップデートしても、カスタマイズしたものを残すことができます。
スタイルが適用される順番
Simplicityで各スタイルシートが読み込まれる順番は次のようになっています。テーマによって構造が違うと思いますので、あくまでSimplicityの時はということで見てください。（3と4はスマホの時だけ読み込まれます。）
- 親テーマのstyle.css（子テーマのstyle.cssの冒頭で読み込まれる）
- 子テーマのstyle.css
- 親テーマのmobile.css（子テーマのmobile.cssの冒頭で読み込まれる）
- 子テーマのmobile.css
- カスタマイザーで設定した内容
スタイルシートで記載されている内容は、この順番で有効となっていきます。そのため、カスタマイザーで設定した内容が、style.cssやmobile.cssよりも優先されます。
style.cssに記載しても変更されずおかしいなと思ったら、カスタマイザーで同じような項目があったということがありました。
カスタマイザーでデフォルト値となっているものは、５の段階で出力されません。デフォルト値から変更したものだけが、５でスタイルシートとして出力されます。
すあろぐ！で変更している内容
それでは、このブログで変更しているところをお伝えします。
カスタマイザーでの変更部分
カスタマイザーの見た目に関わる部分で、デフォルトから変更しているものです。
色
- 背景色 #f1f1f1
- リンク色 #2222aa
- ヘッダー外側背景色 #0693cd
- サイトタイトル色 #ffffff
- サイト概要食 #ffffff
- モバイルサイトタイトル色 #ffffff
- モバイルサイト概要食 #ffffff
- グローバルナビ色 #414852
- グローバルナビを横幅いっぱいにするにチェックを入れる
- グローバルナビリンク色 #ffffff
- グローバルナビリンクホバー色 #bc4242
- メニューボタン色 #ffffff
- フッター色 #414852
レイアウト（全体・リスト）
- 完全レスポンシブデザインにするにはチェックを入れない
- グローバルナビを表示にチェックを入れる
- サイドバーの背景を白色ににはチェックを入れない
「サイドバーの背景を白色に」にチェックを入れてしまうと、前に書いた「5.カスタマイザーで設定した内容」で、サイドバーの背景を白色にするスタイルシートが出力されてしまいます。
今後行うstyle.cssの修正が上書きされてしまいますので、サイドバーの背景色設定はstyle.cssに書くことにします。
PCビューのstyle.cssの追記部分
カスタマイザーで修正できないところをStyle.cssに書いていきます。
全体的な見た目の変更
/* 全体デザイン */
/*ヘッダーに影をつける*/
#header {
box-shadow: 0 2px 5px #999;
}
/*サイドバーの背景を白にして影をつける*/
#sidebar {
background-color: #fff;
box-shadow: 0 2px 5px #999;
border-radius: 0px;
border: 1px solid #ccc;
padding: 5px 8px;
margin-bottom: 30px;
}
/*記事エリアの角を四角にし影をつける*/
#main {
box-shadow: 0 2px 5px #999;
margin-bottom: 30px;
border-radius: 0px;
border: 1px solid #ccc;
}
/*上部メニューに影をつける*/
#navi {
box-shadow: 0 2px 5px #999;
margin-bottom: 30px;
}
全体的な見た目を変更しているところです。
Simplicityは角を丸めていることが多いのですが、記事エリアとサイドバーの角を四角にしています。border-radius: 0px;を指定すると、親テーマでの角丸めを四角にすることができます。
マテリアルの見た目の特徴でもあった影をそれぞれの部分に追加してます。box-shadow: 0 2px 5px #999;で影をつけています。
記事内の見出しの変更
/* 記事内の見出し変更 */
.article h2 {
background: #0693cd;
color: #fff;
padding: 12px 0px 12px 14px ;
border-left: none;
box-shadow: 0 2px 5px #999;
}
.article h3 {
border-bottom: none;
border-left: 7px solid #0693cd;
padding: 8px 0px 8px 12px;
box-shadow: 0 2px 5px #999;
}
.article h4 {
border-bottom: 2px dotted #0693cd;
padding: 4px 0px;
}
/* コメントと関連記事の見出し変更 */
#comment-area h3, #related-entries h3 {
font-size: 23px;
border-bottom: 3px solid #0693cd;
padding: 5px 0;
}
見出し（h2〜h4）のデザインを変更しています。ここでも、h2とh3に影を使っています。（影好き）
h2は背景を青にして白抜き文字としています。h3は左側に青縦線をつけているだけですが、影効果で全体が四角に囲われているようになっています。h4は点線の下線を引いています。
また、コメントと関連記事の見出しの下線デザインも変更しています。
h2〜h3の青色はすべて同じ青色としていますが、ヘッダー部分の青色と同じ色を使い、統一感を出しています。
記事を読むリンクの変更
/* 記事一覧と関連記事の読むリンクの変更 */
.entry-read a, .related-entry-read a {
text-decoration: none;
padding: 4px 8px;
background-color: #0693cd;
color: #fff;
box-shadow: 0 2px 5px #999;
}
トップページや個別記事ページの関連記事のところにある、記事を読むリンクの見た目を変えています。
このようになります。
これでPCビューのデザインは、このブログのようになります。スマホビューに反映されるところもあれば、されないところもありますので、mobile.cssにも修正を加えていきます。
スマホビューのmobile.cssの追記部分
mobile.cssの修正内容です。
全体的な見た目の変更
#header {
box-shadow: 0 2px 5px #999;
}
#main {
margin-bottom: 30px;
box-shadow: 0 2px 5px #999;
border: 1px solid #ccc;
}
#sidebar {
margin-bottom: 30px;
box-shadow: 0 2px 5px #999;
border: 1px solid #ccc;
}
この変更はPCビューと同じように、ヘッダー、記事エリア、サイドバーに影をつけるものです。各エリア間の間隔を少し広げています。
記事を読むボタンを非表示にする
.entry-read, .related-entry-read {
display: none;
}
トップページの記事一覧や関連記事に「記事を読む」ボタンがついていますが、見た目をスッキリとさせるため、ボタンを非表示としました。display: none;とすると、該当のブロックを非表示にすることができます。
まとめ
ちょっと物足りないなと思っていた、Simplicityの見た目をスタイリッシュにできました。（と、自分では思っています。）
これも、マテリアルのデザインを参考にさせてもらったおかげです。ありがとうございます、Nobuoさん。
スタイルシートの修正にはCSSの知識が必要です。知っておいて損はないと思うので、機会があれば勉強をしておくのもいいと思います。以前にこちらの記事を書きました。
僕もブログを始めるまで、CSSについてほとんど知らなかったのですが、すぐ使えるようになりましたよ。
おしまい。miyamoでした。
