今回の設定は、Simplicity子テーマを有効化した状態で行ってください。
子テーマの導入方法はコチラ
こんにちわ、サクさんです。
サクさんのブログは、無料テーマの「Simplicity」を使用しています。
Simplicityってシンプルで使いやすいんですが、
シンプルがゆえ面白みがないってのもたまに傷なテーマなんですよね。。
なので今回は、Simplicityをコピペだけでカスタマイズする５つの方法を
図解付きで解説していきます♪
この記事では、こんなことが書かれています
コピペする場所
最初に、カスタマイズコードをコピペする場所をお伝えします。
WordPressダッシュボードから「外観」内の「テーマを編集」を開きます。
「Simplicity2 child: スタイルシート (style.css)」が開かれていますか？
今回は、画像の赤枠の中にカスタムコードを打ち込んでいきます。
この空欄に下記で解説しているカスタマイズコードをコピペすることで、
ちょっとしたカスタマイズができますよ♪
では早速、解説していきますね(‘◇’)ゞ
サイトの「タイトル」を非表示にする
WordPressブログには「サイトタイトル」が絶対にありますよね。
例えばカスタマイズでヘッダー画像を設定したいときに、サイトタイトルが邪魔になります。
しかし、記載なしにしておくとSEO的にも問題があるので、
非表示にするカスタムをしていきます。
作業手順
カスタム方法は、上記で解説したstyle.cssの赤枠内に、下記のコードをコピペしてください。
|
1 2 3 4 |
/*サイトタイトルの非表示*/ #site-title, #site-description { display: none; } |
コピペしたら「ファイルを更新」ボタンをクリックして、
別ブラウザで適応確認をしてみてください。
SEOに影響なく、サイトタイトルを消すことができているはずです♪
サイトの「キャッチフレーズ」を非表示にする
WordPressブログのサイトタイトルの下に「キャッチフレーズ」が表示されていますね。
このキャッチフレーズは、
僕のようにサイトタイトルをロゴ化していたりすると非常に邪魔です。
しかし、サイトタイトルと同じく、記載なしにしておくとSEO的にも問題があるので、
非表示にするカスタムをしていきます。
作業手順
カスタム方法は、上記で解説したstyle.cssの赤枠内に、下記のコードをコピペしてください。
|
1 2 3 4 |
/* キャッチフレーズの非表示 */ #site-description{ display:none; } |
コピペしたら「ファイルを更新」ボタンをクリックして、
別ブラウザで適応確認をしてみてください。
デフォルトだとこうですが、
更新後はこうなっているはずです。
トップ記事一覧に線を入れる
Simplicityデフォルトだと、トップページの記事の間隔が区別されていません。
せっかく訪れた読者さんにもっと見やすく記事を提供するために、
トップ記事一覧に線を入れて、記事を区別していきましょう。
作業手順
先ほどと同じく「style.css」を開き、上記画像の赤枠内に下記のコードをコピペします。
|
1 2 3 4 5 |
/* トップ記事一覧の間に線を入れる */ #main .entry { border-bottom: 1px dotted #ccc; padding-bottom: 15px; } |
コピペしたら「ファイルを更新」ボタンをクリックし、また別ブラウザで確認してみてください。
こんな感じになっているはずです。
これで記事ごとに区別が付くようになりました！
サムネイル画像にエフェクト
つづいて、ブログのサムネイル画像にエフェクトを付けていきます。
このカスタマイズはパソコンでの表示のみの適応になりますが、
読者さんがマウスカーソルをサムネ画像に合わせたときに動きが出るので
読者さんの注目を集める効果があるので、ぜひ導入してみてください。
作業手順
またまた「style.css」の赤枠に下記のコードをコピペしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* サムネイル画像にエフェクト */ .entry-thumb,.wpp-thumbnail{ overflow: hidden; } .entry-thumb img,.wpp-thumbnail img{ transition: 0.6s ; } .entry-thumb img:hover,.wpp-thumbnail:hover { opacity: 0.6; -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); } |
画像ではどんなふうになるのかお伝え出来ませんが、
「ファイルを更新」ボタンを押したのち、別ブラウザからブログを開き
サムネ画像にマウスカーソルを合わせてみてください。
「おぉ！」って思いますよ♪
人気記事一覧の表示をカスタマイズ
ブログに人気記事を表示するプラグインは導入されていますか？
せっかく人気記事を導入していても、残念なことにデフォルトだとこんなさみしい表示なんですよ・・・
（×印の記事は、画像の設定をしていない記事です）
なので、ここもカスタマイズしちゃいます！
作業手順
いつものごとく「style.css」に下記コードをコピペしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* 人気記事ランキングの順位をカスタマイズ */ ul.wpp-list li { border-bottom: 1px dashed #bbb; counter-increment: wpp-count; position: relative; } ul.wpp-list li:before { display: block; padding: 1px 11px; color: #fff; background-color: #333; content: counter(wpp-count); position: absolute; opacity: 1; z-index: 10000; border-radius: 6px; top: 6px; left: 6px; } ul.wpp-list li:last-child { border-bottom: none; } ul.wpp-list li:nth-child(1):before{ background-color: #FBCC54; } ul.wpp-list li:nth-child(2):before{ background-color: #B7BFC1; } ul.wpp-list li:nth-child(3):before{ background-color: #D47B16; } ul.wpp-list li img { margin: 5px 10px 5px 5px; padding: 3px; border: 1px solid #ddd; } ul.wpp-list li a.wpp-post-title { display: block; font-size: 15px; padding: 12px; text-decoration: none; color: #333; } |
すると・・・・
こんな感じに順位が分かりやすく表示されるようになります！
可愛い感じに表示されるようになり、読者さんからも順位が分かりやすくなりましたね♪
最後に
以上５つのコピペだけでできるカスタマイズをご紹介しました！
これはとても簡単なカスタマイズ方法になりますが、Simplicityはシンプルがゆえ
もっとカスタマイズしていくことが可能なテーマです。
もっと学び、もっと個性的にカスタマイズして、ブログライフを楽しんでくださいね♪
ここまでお読みいただき、ありがとうございました。