WordPressテーマ「Simplicity」でカスタマイズしたとこ20個まとめました。

simplicity-customize00

前回の記事でブログデザインについて少し書きましたが、今回は実際にどんなカスタマイズをしたか紹介します。

テンプレートやスタイルシートにコピペしていただければ、同じようにカスタマイズできますので、よかったら参考にしてみてください。

スポンサーリンク
レクタングル(大)広告

1. 画面の大きさによって背景画像の拡大・縮小

現在、Wordpressの管理画面から背景画像の設定はできるのですが、背景画像を選んでもタイル状に並べることしかできません。

なので、スタイルシートに下記コードを記述して背景を設定しました。

ポイントは「background-size: cover;」です。これによって、背景画像は縦横比を保持したまま画面を完全に覆うように背景画像を拡大・縮小してくれます。

スマホで見てくれている人はわからないかもしれませんが、PCで見ている人は、ブラウザのウィンドウを拡大・縮小すると、それに合わせて背景画像を拡大・縮小するのがわかると思います。こんな感じ↓

Simplicity カスタマイズ 背景画像拡大縮小

2. 記事ごと、サイドバーウィジェットごとに枠線で囲む

この方法は前回の記事で紹介しました。実際に記述したコードは以下のとおりです。

前回紹介したものとは枠線の色を変えています。

Simplicityで記事ごと、サイドバーごとに枠線で囲む方法[Wordpress] | えむ氏のログSimplicityで記事ごと、サイドバーごとに枠線で囲む方法[Wordpress] | えむ氏のログ

3. 見出しのカスタマイズ

記事本文中に挿入する見出しタグ(h1タグ、h2タグ、h3タグ、h4タグ)とサイドバーの見出しタグ(h3タグ)、トップページの記事見出し(h2タグ)をスタイルシートでカスタマイズしました。

結果、こんな感じになりました↓。記事中のH4見出しタグについては、そんなに使うことはないとは思いますが。

Simplicity カスタマイズ 見出しタグ

4. グローバルメニューのカスタマイズ

タイトルの下にあるグローバルメニューも、スタイルシートで変更しました。

記事やサイドバーのデザインに合わせて、枠線で囲むようなデザインにしています。

Simplicity カスタマイズ グローバルメニュー

あとマウスオーバーすると、じんわりと色が変わるようなアニメーションを施しています(ブラウザによってはならないかも)。

Simplicity カスタマイズ グローバルメニュー transition

CSS的には「transition: all 1s;」ってところです。「1s」の数字をもっと大きくすればもっと時間をかけてじんわり変わっていきます。

5. サイトヘッダー部分のフォローボタンのカスタマイズ

ページトップのフォローボタンについても、グローバルメニューとデザインを合わせています。

Simplicity カスタマイズ フォローボタン

グローバルメニューと同じ感じです。色もじんわり変わります。

6. サイトロゴ画像のカスタマイズ

サイトのロゴ画像については、前回記事でも触れたように、変更しています。

Simplicity カスタマイズ ロゴ画像

さらにマウスオーバーすると少し透過する感じにしてみました。

「トップヘ戻る」ボタンや「モバイルメニュー」ボタンもマウスオーバーで透過しますよね。それと同じ仕様にしています。

7. トップへ戻るボタンのカスタマイズ

「トップへ戻る」ボタンは以前までFont Awesomeのアイコンを使っていましたが、画像に変更しました。

こんな画像です。

Simplicity カスタマイズ トップヘ戻るボタン

画像に変更すると言っても、Wordpressの管理画面から簡単に変えることができます。

Simplicity カスタマイズ Wordpess管理画面

そしてマウスオーバーすると、無意味に回転する仕様にしました。スタイルシートに少し書き加えれ簡単にできます。「transform: rotate;」がポイントです。

こんな感じ↓で回転しますよ。ほんと無意味ですよね。

Simplicity カスタマイズ transform: rotate

8. 引用部分のカスタマイズ

引用部分もカスタマイズをしました。スタイルシートで引用部分の枠に影が出るようにしています。

ポイントは「box-shadow」です。こんな感じ↓になります。

Simplicity カスタマイズ 引用部分

9. アーカイブタイトルのカスタマイズ

アーカイブタイトルとは、カテゴリ一覧ページやタグ一覧ページを表示した際の「○○のページです」と書かれたところです。記事を枠線で囲ったせいで、アーカイブタイトル部分は背景が白ではなくなり見えづらくなってしまいました。

また、パンくずリストも記事ページ等では問題ありませんが、カテゴリ一覧ページやタグ一覧ページでは枠線の外に出てしまい、見えづらくなってしまいました。

Simplicity カスタマイズ アーカイブタイトル

なので、スタイルシートで少し変更しています。

こうなりました↓。

Simplicity カスタマイズ アーカイブタイトル2

10. フッターのカスタマイズ

アーカイブタイトル同様、背景が画像になり文字が見えづらくなったので、少しカスタマイズしています。

11. 追従SNSボタンのカスタマイズ

Simplicityでは記事ページに追従SNSボタンを設置することができます。

Simplicity カスタマイズ 追従SNSボタン

こういうやつ↑ですね。ただ、記事のすぐ横にあるし、目立つし、威圧感があるので、もう少し控えめにカスタマイズしてみました。

まずはWordpress管理画面の「イドに追従シェアボタンを表示」にチェックをいれて表示して、それからスタイルシートに記述します。

その結果、こんな感じ↓になりました。

Simplicity カスタマイズ SNS追従ボタン

バルーン部分を非表示にしてシンプルにしました。これで拡散ボタンをクリックしてもらえるかは不明です。

12. 最初だけ大きなエントリーカード

ちょっとしたカスタマイズですが、Wordpress管理画面から、「一覧リストのスタイル」を「最初だけ大きなエントリーカード」にしてみました。

Simplicity カスタマイズ 最初だけ大きなエントリーカード

13. サムネイル画像のカスタマイズ

一覧のリストのサムネイル画像をマウスオーバーした時に、少し動きが出るようにしました。

こんな感じ↓で動きます。これはCSSのtransformの「scale(拡大・縮小)」と「rotate(回転)」を組み合わせた動きです。

Simplicity カスタマイズ サムネイル transform: scale rotate

14. ページネーションのカスタマイズ

ページネーションとはサイトの下の方にある次のページに行ったり前のページにもどったりするリンクです。

Simplicity カスタマイズ ページネーション

これのスタイルシートの変更とFont Awesomeのアイコンの変更を行いました。

スタイルシートには下記の通り記述しました。

擬似要素「before」と「after」を使って、CSSからFont Awesomeアイコンを変更しています。テンプレートをいじらなくても変更できるところがすごいですよね。

Simplicity カスタマイズ ページネーション Font Awesome

「<」、「>」の部分を「-」、「+」に変えてみました。無意味ですが。。。

15. カテゴリ別人気記事の設置

WordPressのプラグイン「WordPress Popular Posts」を使って、サイドバーのスクロール追従領域に「カテゴリ別人気記事」ウィジェットを設置しました。

Simplicity カスタマイズ Popular Post

僕のブログは扱っている内容が多岐に渡っているので、このウィジェットは良いと思います。続けて別の記事を読んでくれる人も増えそうです。

Simplicity カスタマイズ カテゴリ別人気記事

16. 404イメージの変更

今まで設定していなかった404イメージも設置してみました。自分ではほとんど見ることのないページですが、少し遊び心を加えて、ビッグフット君をあしらってみました。

Simplicity カスタマイズ 404ページ

17. ファビコンとアップルタッチアイコンの設置

ファビコンとアップルタッチアイコンもビッグフットで揃えました。

Simplicity カスタマイズ ファビコン

Simplicity カスタマイズ アップルタッチアイコン

18. モバイルメニューのカスタマイズ

モバイルメニュー(スマホから見た時右上に見える3本線のやつ)も少しだけカスタマイズしました。

デザインに合わせて枠線で囲っただけです。

19. モバイル画面時の続きを読む部分のカスタマイズ

モバイル画面時の「続きを読む」部分も少しカスタマイズしています。この部分だけ、画面幅によってスタイルが変わるなんてスマホとPCの両方で見ないと気づきませんでした。ボタンが丸みをおびていたので、デザインに合わせてカクカクにしています。

Simplicity カスタマイズ モバイル画面 もっと見る

20. モバイル画面のモーダルメニューのカスタマイズ

モバイル画面では、今まで「モバイルメニュータイプ」を使っていましたが、「モーダルメニュー」に変更しました。そして少しカスタマイズしました。

Simplicity カスタマイズ モバイル画面 モーダルメニュー

スポンサーリンク
レクタングル(大)広告
トップへ戻る