簡単にコピペ!!わたしがSimplicityで行ったCSSカスタマイズ10選をご紹介

ブログ運営

ブログのデザインについても早く記事を書きたいと思っていたのですが、なかなか時間がなく放置してしまっていました。すみません。

今回は私が使っているWordPressのテーマ(デザイン)「Simplicity」で行ったCSSカスタマイズをご紹介します。

簡単にコピペできるようにしていますので、気になる方は使ってみてください。

※2017年8月時点でのカスタマイズなので変更していく可能性がありますのでご了承下さい。
※2020年5月にcocoonにテーマを変更しました。

スポンサーリンク

まず初めに

WordPress初期設定の記事でも紹介しましたが、Simplicityのテーマをダウンロードするときにテーマのダウンロードを推奨しました。

今回はこの子テーマに全てCSSを記述しますので、お間違いのないように。
子テーマの必要性は下記のページで確認ください。

Simplicity2の子テーマ
テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

 

見出し

見出しとはこのことです。


記事を書く上で見出しはとても重要です。
ググれば沢山でてきますのでカッコイイものを選んでくださいね。
私のサイトはテーマカラーを決めているので合わせた見出し色にしています。
この辺りは調整ください。

 

サイドバーのフォントサイズ

PCページの右横にあるサイドバーのフォントサイズを小さくしました。
フォントサイズは14pxです。

 

 

 

グローバルナビを中央揃え

グローバルナビとはヘッダーの部分にあるナビゲーションです。
これを中央に揃えました。

 

 

トップページの記事の間に線を入れる

何気ないですが、サイトのバランスがかなり良くなるのでオススメです。

 

メインとサイドバーの枠線を消す

デフォルトだとメインとサイドバーに枠線が入っていましたが、これを消しました。

 

 

メタ情報の変更

メタ情報とは下の赤枠です。
この大きさを調整して、場所を移動させました。

 

「記事を読む」の編集

私で言うとトップページの「Read more」の部分です。
これを右に揃えてデザインをカスタマイズしています。
こちらも色などは調整してみて下さい。

文言を変更するのはメニューから
外観→カスタマイズ→テーマ内テキスト→「記事を読む」の変更で変えることができます。

 

サムネイル画像にエフェクトをかける

サムネイル画像にマウスオーバーすると拡大するエフェクトをかけています。

 

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

タグクラウドのデザインをシンプルなものに変更しました。

 

フォントの変更

フォントなのですが、私はWebフォントを使用しているので導入までにちょっとした手順があります。
これもまた時間があるときに書きたいと思いますね!!
なので、割と使っている方が多い、游ゴシックを入れる場合を記載しておきます。

 

カスタマイズのやりすぎも注意

カスタマイズってハマると楽しいのですが、やりすぎると逆にデザインがごちゃごちゃしてしまうので、個人的にはちょっと注意した方がいいと思います。

全体のバランスを見て少しずつ調整していく方がサイトが綺麗に作れるのではないかと思います。

 

コメント

Copy Protected by Chetan's WP-Copyprotect.
タイトルとURLをコピーしました