Simplicityのおすすめカスタマイズの方法を8つピックアップ

Simplicityのカスタマイズ

Simplicityのカスタマイズ面白いです。

このブログは「寝ログ」管理人わいひらさん作のwordpressのテンプレートSimplicity2.0を独自でカスタマイズをして運用しています。

カスタマイズに熱中すると、どうでもいいことに拘ったりして気が付いたら物凄く時間が経っていたりする。

カスタマイズの汎用性やクセの無さからSimplicityを使用している人は非常に多く、ネット検索をするとカスタマイズ内容の記事を書いている人も結構いますが、私もその波に乗ります。

このブログも色々細かい所をかなりカスタマイズしているのですが、この記事ではその中からおすすめのカスタマイズをピックアップして紹介します。

基本的に子テーマのstyle.cssにそのままコピペするだけでOKな簡単なカスタマイズです。

カスタマイズの仕方がわからん、とか子テーマって何?という人まずこちらを熟読してください。作者のわいひらさんが懇切丁寧に解説しています。

要はオリジナルのテーマを直接カスタマイズするとバージョンアップした時に上書きされて消えてしまうので、別に子テーマというものを用意してそこにスタイルを書いてね、という話です。

!importantルールは必須事項です

本題に入る前にちょっと一つ。
ブログを改造するに当たって凄く便利で知らない人に是非覚えておいて欲しいのが、!importantルール。

これをCSSに書き込むことで、任意のスタイルを優先することができます。

このように優先させたいスタイルの後、セミコロンの前に書いてあげる。

スタイルの適用は通常優先順位が決まっているのですが、!importantルールにより問答無用でhtmlに適応することができます。

ブログのカスタマイズをしていてスタイルシートに書き込んだスタイルが適応されない時は!importantルールを導入してみてください。

以下のサンプルCSSにも!importantルールを適応させているものがいくつかありますが、ブログのCSSやら設定やらよっては必要なかったりするのでそこのところはご容赦ください。

後、基本ですがバックアップは必ずとること。

※この記事を書いた時と、現在では少々デザインが変わっていたりします。

1.見出しをカスタマイズする

見出し2

見出し3

見出し4

見出し5
見出し6

このブログは画像が多いです。そのためもありますが、管理人の好みでシンプルな配色になっています。基本的に白黒で構成されていて、文字色等アクセントとして緑色を織り交ぜてします。

そのため見出しは見出しとわかるぐらいであまり自己主張しないデザインになっています。
チェックマークだけはどうしても使いたかったので、見出し3に使用。

チェックマークの見出しCSS(この見出し)

2.タグクラウドのデザイン変更

タグクラウドのデザインをカスタマイズ

デフォルトのタグクラウドのデザインが嫌だったので、タグクラウドの見た目を変更。
各タグを枠で囲い、更に記事数によってフォントの大きさが変わる機能を無効化しています。

3.リンクのホバーにCSS3でエフェクトをかける

CSS3になったことでマウスオーバーの挙動に動きを持たせることが可能になりました。
このブログではリンクや画像にマウスカーソルを当てた際は、時間差で少し遅れてエフェクトがかかるようになっています。

数字を大きくすればするほどエフェクトが長くなる。

4.画像の上に記事タイトルをホバーで表示させる

サイドバーの人気記事ウィジェットは、記事画像にマウスカーソルを当てることで記事タイトルが画像の上に浮き上がるようになっています(あと若干明るくなる)

画像の上にホバー文字を浮かべる前

画像の上にホバー文字を浮かべた後

この挙動は、Simplicityの記事紹介の表示形式の「タイトルを重ねた大きなサムネイル」を改造したものになります。

popular

「タイトルを重ねた大きなサムネイル」にはウィジェットメニューの指定のウィジェットから変更できます。

ちなみに順位の数字もカスタマイズしました。

人気記事カスタマイズ前

人気記事カスタマイズ後

前と後。かなり見栄えがよくなったと思います。
ちなみに記事タイトルが白文字のままだと読みにくいので、text-shadowで文字の縁取りをしています。
画像が少し明るくなったように見せているのは、opacityを利用しています。

5.ページTOPへ戻るボタンを画像を使わずカスタマイズ

デフォルトだとある程度スクロールすると右下に登場する、上部にスライドするボタンです。
もし表示されていなかったら「カスタマイズ」⇨「レイアウト(全体・リスト)」から設定しましょう。

もともとある機能でこのボタンに任意の画像を使うことができますが、ここではその機能は使わず、CSSを書き換えることにより、中身や位置、大きさを変えます。

これの中身はどういったものがオシャレなのかよくわかりません。
画像の方がいいんすかね?

6.グローバルナビを常に上部にスクロール表示させる

グローバルナビを常時上部に固定させる

グローバルナビを常にブラウザの上部に表示されるようにスクロール追従するようにしました。
ワードプレスにログインしていると、管理者メニューにクローバルナビが隠されて見えなかったりする。

ちなみにホバー時のフォントの色や背景色等はこのサイトのものとなっていますので、各自、自由に変更してください。

7.関連記事のサムネイル表示を2列にする

relate1

Simplicityでは「カスタマイズ」⇒「メニュー(投稿・固定ページ)」から関連記事表示のサムネイルの列数を変えることができますが、3列あるいは4列でしか表示されません。

それをこのように、

関連記事のサムネイルを二列にする

二列にしました。
例によって文字色等はこのブログの仕様になっています。
四列の状態でCSSを適応します。

このままだと元画像のサイズにもよりますが、

関連記事を二列にした後の画像比がおかしい

⇧このように画像が引き伸ばされたような状態になると思うので、上のCSSに加えて画像が正しく表示されるようにします。

このサムネイルを適した大きさにするためにテーマのphpファイルを修正します。
親テーマのphpファイルを子テーマに持ってきてそれを編集する形になりますね。
(よくわからなかったら下の黒太字のところまで飛ばしてください)

ワードプレスがインストールされているサーバーにFFFTP等を使ってアクセスし、
自分のブログのディレクトリのwp-content/themes/simplicity2からrelated-entries-thumbnail.phpを探して、
wp-content/themes/simplicity2-childにコピーしてください(絶対に切り取ってはダメです)

そうすると、 関連記事の画像に関係するテーマを編集する

related-entries-thumbnailが子テーマで編集できるようになります。

その後、10行目あたりにある’thumb100’を’thumb320’にしてあげましょう。
これでサムネイルの大きさがレイアウトにあったものとなり、画像が正しく表示されるはずです。

本当は推薦されませんが、よくわからなかったら親テーマのrelated-entries-thumbnail.phpを直接いじっても大丈夫です。数字をちょっと直すだけですからね。

「テーマの編集」で「Simplicity2」を選択して、そこからrelated-entries-thumbnailを探して編集してあげましょう。

8.スマホ表示のメニューを常に右上にスクロール追従させる

スマホのメニュー表示(アコーディオンツリー)をスクロール追従型にしました。

スマホのメニュー表示は「カスタマイズ」⇒「レイアウト(全体・リスト)」から変更することができます。

モバイルメニュータイプを変更する

このブログではアコーディオンツリーにしています。アコーディオンやモーダルでも可能なのですが、アコーディオンツリーが一番よかったので。

設定すると、通常はページの右上にメニューが表示されるのですが、ブラウザの右上部に常に追従させるようにしました。

モバイルメニューカスタマイズ前

⇧通常はページ右上に固定されていて追従しませんが、

モバイルメニューカスタマイズ後

⇧スクロールしても右上部分に追従します。

モバイルメニューをカスタマイズ後メニュー開く

⇧メニューを開いたままスクロールも可能です。

このCSSはスマホ表示用なのでstyle.cssではなくmobile.cssに書き込んでください。