Simplicityをコピペだけでカスタマイズする4つの方法を図解付きで解説していきます♪

今回の設定は、Simplicity子テーマを有効化した状態で行ってください。

子テーマの導入方法はコチラ

WordPressに無料テーマ「Simplicity」をインストールする方法を図解付きで解説していきます♪
※この記事は、Windows10を作業環境に例えて作成されています。 こんにちわ。サクさんです。 今回は、僕がこのWordPre...

こんにちわ、サクさんです。

サクさんのブログは、無料テーマの「Simplicity」を使用しています。

Simplicityってシンプルで使いやすいんですが、
シンプルがゆえ面白みがないってのもたまに傷なテーマなんですよね。。

なので今回は、Simplicityをコピペだけでカスタマイズする4つの方法を

図解付きで解説していきます♪

コピペする場所

最初に、カスタマイズコードをコピペする場所をお伝えします。

WordPressダッシュボードから「外観」内の「テーマを編集」を開きます。

「Simplicity2 child: スタイルシート (style.css)」が開かれていますか?
今回は、画像の赤枠の中にカスタムコードを打ち込んでいきます。

この空欄に下記で解説しているカスタマイズコードをコピペすることで、
ちょっとしたカスタマイズができますよ♪

では早速、解説していきますね(‘◇’)ゞ

サイトの「キャッチフレーズ」を非表示にする

WordPressブログのサイトタイトルの下に「キャッチフレーズ」が表示されていますね。

このキャッチフレーズは、

僕のようにサイトタイトルをロゴ化していたりすると非常に邪魔です。

しかし、記載なしにしておくとSEO的にも問題があるので、
非表示にするカスタムをしていきます。

作業手順

カスタム方法は、上記で解説したstyle.cssの赤枠内に、下記のコードをコピペしてください。

コピペしたら「ファイルを更新」ボタンをクリックして、
別ブラウザで適応確認をしてみてください。

デフォルトだとこうですが、

更新後はこうなっているはずです。

トップ記事一覧に線を入れる

Simplicityデフォルトだと、トップページの記事の間隔が区別されていません。

せっかく訪れた読者さんにもっと見やすく記事を提供するために、
トップ記事一覧に線を入れて、記事を区別していきましょう。

作業手順

先ほどと同じく「style.css」を開き、上記画像の赤枠内に下記のコードをコピペします。

コピペしたら「ファイルを更新」ボタンをクリックし、また別ブラウザで確認してみてください。

こんな感じになっているはずです。

これで記事ごとに区別が付くようになりました!

サムネイル画像にエフェクト

つづいて、ブログのサムネイル画像にエフェクトを付けていきます。

このカスタマイズはパソコンでの表示のみの適応になりますが、

読者さんがマウスカーソルをサムネ画像に合わせたときに動きが出るので

読者さんの注目を集める効果があるので、ぜひ導入してみてください。

作業手順

またまた「style.css」の赤枠に下記のコードをコピペしてください。

画像ではどんなふうになるのかお伝え出来ませんが、
「ファイルを更新」ボタンを押したのち、別ブラウザからブログを開き
サムネ画像にマウスカーソルを合わせてみてください。

「おぉ!」って思いますよ♪

人気記事一覧の表示をカスタマイズ

ブログに人気記事を表示するプラグインは導入されていますか?

せっかく人気記事を導入していても、残念なことにデフォルトだとこんなさみしい表示なんですよ・・・
(×印の記事は、画像の設定をしていない記事です)

なので、ここもカスタマイズしちゃいます!

作業手順

いつものごとく「style.css」に下記コードをコピペしてください。

すると・・・・
こんな感じに順位が分かりやすく表示されるようになります!

可愛い感じに表示されるようになり、読者さんからも順位が分かりやすくなりましたね♪

最後に

以上4つのコピペだけでできるカスタマイズをご紹介しました!

これはとても簡単なカスタマイズ方法になりますが、Simplicityはシンプルがゆえ
もっとカスタマイズしていくことが可能なテーマです。

もっと学び、もっと個性的にカスタマイズして、ブログライフを楽しんでくださいね♪

ここまでお読みいただき、ありがとうございました。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする