ブログのデザインを変更!Simplicityの子テーマで追記したCSSを紹介

こんにちは、西松(@output_log)です。

2015年11月11日、当ブログのデザインを変更しました。

Simplicityのデフォルトテーマを使用していましたが、オリジナリティを出したいと思い変更しました。

子テーマのstyle.cssを編集することで、思い通りになりました。

Simplicityを使っていて、デザイン変更してみたいと思う方の参考になれば思い、一部紹介します。

コードも載せるので、コピペでなんとかなるはず・・・です。

※Simplicityのバージョンは 1.9.2 を使用しています

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

全体的なレイアウト

サイトタイトル

1122_9

ヘッダーのサイトタイトルです。オンカーソルで半透明にしました。

メニュー

1122_1

メニューそれぞれの間隔を調整。

オンカーソル時の色は徐々に変更するようにしました。

リンク文字

リンク文字のオンカーソル時についてです。

記事一覧のレイアウト

下線の追加とレイアウト調整

1122_5

間隔を開けたいなって思ったので、下線を挿入しレイアウト調整を行いました。

記事一覧の画像

1122_3

オンカーソル時、枠線が浮かび上がるようにしました。

画像は半透明になります。

続きを読む

1122_2

枠線の追加、オンカーソル時の設定。

左端だったものを右端に表示するようにしました。

記事内のレイアウト

見出し H2

1122_6

シェアメッセージ

記事の本文と間隔を開けたかったので調整しました。

サイドバー

見出し H4

1122_7

下線を引きました。

新着記事と人気記事

1122_8

記事一覧の画像と同じ設定です。

合わせて下線を挿入しています。

入力フォーム

1122_0

文字を入力しているときの色を変更しています。

おわりに

以上になります。

自分のブログに合わせて色を変更するだけでも、使えるものがあるのではないでしょうか。

ぜひ参考にしていただければと思います!

ちなみに、2015年11月22日時点のものになりますので、今後変更する可能性は大いにあります。ご容赦ください。

では、また。

ブログのデザインを変更!Simplicityの子テーマで追記したCSSを紹介
この記事をお届けした
Output Logの最新ニュース情報を、
いいねしてチェックしよう!
Twitter
スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

▼この記事をみんなに教えよう!

スポンサーリンク