Simplicityの当ブログのデザインを刷新。その際に参考にしたサイトまとめ！

Simplicityのテーマのデザインを変更したいけど

どう手をつけていいのかも分からない

調べていくのも時間がかかるし面倒臭い

デザイン変えるに当たってオススメのサイトなんか教えてくれる人がいたら

なんてこと思っている人向け

お盆休みの一週間を利用して

K.LOGのブログのデザインを刷新しました。

自分のブログデザインができるまでをまとめています。

K.LOGのデザインを興味を持ってくれて真似してみたい人向けに

参考になるようにまとめてみました。

この記事を見ることで

このようなデザインを作ることができます。

という人にオススメ！

子テーマのダウンロード

子テーマのダウンロードは必ず行ないましょう。

下部に重要性が書いてあります。

子テーマのダウロードを一番はじめに取り組むべきです。

少ない時間を見つけては親テーマに色々編集を加えて、それがアップデートで全て消える

なんてことがあったらショックすぎです。

SNSボタンの設置

ブログトップページ右上に

RSSのフォローボタンを表示させています。

RSSボタンがあるとどのSNSを使用しているか一目でわかるし、

なんとなくデザイン的にカッコよくなります。

同様のマークが投稿した記事下部にも表示されます。

この部分を参考にしてみてください。

グローバルナビのデザインと色の変更

PHOTOGRAPHY、TRAVELなど書いてあるところがグローバルナビです。

Simplicityはこの部分のデザインと色を変更できます。

Appleのサイトを参考に、デザインと色を真似るように変更しました。

ここに書いてある方法であなた好みの

デザイン、色みにして自分だけのブログにしてみてください。

デザインの変更について

グローバルナビのデザインの変更は「スキン」で行います

外観→カスタマイズを選択

そしたら下の画面に移動します。

スキンを選択

K.LOGでは「シック」にしてます。

シンプルな感じが惹かれました。

好みで色々選んでみて

好きなデザインにしてください。

色の変更について

スキンと同様

外観→カスタマイズを選択

そしたら下の画面に移動します。

今度は「色」を選択

グローバルナビにあるSONY a７II、SEL1635Zの部分の色は

「グローバルナビ色」で

変更しましょう。

PHOTOGRAPHYの部分が青っぽい色になっています。

ここは「グローバルナビリンクホバー色」で変更です。

青は個人的に好きな色だったので

サイトのテーマカラーとするため導入してます。

以上変更できていると

このような外観になります。

グローバルメニューにFont Awesomeアイコンを追加

上写真のように

グローバルナビのカテゴリーの横に付いてある

カメラのマークや飛行機のマークを付ける作業です。

これを付けるだけで

なんかマークが付いてると思って

カーソルを動かしてみたくなります。

各カテゴリーから記事を見てもらいやすくなるかもしれないし

見た目もかっこいいのでオススメです。

下記のブログが大変参考になったので

是非ご覧いただいてSimplicityのカスタマイズをしてください。

見出しのカスタム

下記ブログを参考に

この見出しデザインを採用しています。

やり方も簡単で

CSSコードをコピーして

子テーマのstyle.HTMLに貼り付けるだけ。

まとめ

なんか自分のブログデザインを作っていくにつれて

「自分のブログ作っている！！！」

感覚になって人に見せたくなっていきます。

かっこいいブログを作ろうとしていくことは

とても楽しい過程でした！

是非みなさんもブログカスタマイズを楽しんでくださいね！

合わせて読んでみてね！