人生の落し物を探して

留学中にあったこと帰ってきてからのことをおもしろく

MENU

デザイン変更しました!テーマ変更・色付け・グローバルメニュー

【AD】

こんにちはゼリー(@taka_sabuaka)です。

 

ブログのデザイン変更をしました。

 

したことはテーマを変えて、見出しに色つけて、グローバルメニューを追加しました。

よくわからないボクでも上手くできて一安心です。

 

ということで参考にさせていただいたものをありがとうございますの意味も込めて紹介します。

目次

 テーマ

ピンクから濃い青(?)になりました。雰囲気がガラリと変わりました。

 

今回使わせていただいのはこの方のテーマ。ありがとうございます。

www.gamehuntblog.com

 

ひと目見てすごく気に入りました!

いわゆる一目惚れってやつですw

 

前のテーマは公式から出ているピンクのやつです。

f:id:jelly3:20161220182852p:plain

Journal-Pinkです。

あれも結構気に入ってたんです。ですがパソコン版のサイドバーが一番下にあってちょっと使いづらかったり、あんまり味気ないのでインパクトに残りにくいなってことも感じてました。

 

これだと、パソコン版のサイドバーが横についてるし、なによりレスポンシブデザインなのがいいです!

 

時代はスマホです。

ですが、このブログのスマホ用のカスタマイズは全くいじってません。そして多分これからもいじらないと思うので、レスポンシブデザインのもは非常にありがたいです。

 

ちなみにですが、ナビゲーションメニューのカスタマイズも一緒に公開されています。

わざわざ探す手間が省けます。

h2タグに色を付ける

今回使わせていただいてるテーマだと、h2の見出しを使うと色がつきませんでした。ただ大きい太文字になって見出しだとわかりにくかったのでカスタマイズを行いました。

運営がh3から使うようにしてるのでその影響だと思いますが・・・・

 

参考にしたのがこれ!

mudaide.hatenablog.com

ここに載ってるコードはh3になってますが、h2に書き換えて使っています。

 

 

ですが、ここで事件発生!ワーニング、ワーニング

使っているテーマのカラーコードがわかりませんでした。

コード表で調べたりしたんですが、いまいち違うなってものばかりで苦労しました。

 

ただ、一発で分かる方法があるんですね!

グーグルクローム拡張機能ColorPick Eyedropperが使いやすいみたいです。

この色のカラーコードが知りたいって方は是非!

グローバルメニュー

一緒に公開されているものを使えばよかったんですが、横スクロールになるのはちょっと嫌だったので違うものを使いました。

www.yukihy.com

 

コピペしました。ありがとうございます。

レスポンシブデザインに対応してて、スマホ版だとメニューの折り畳みも出来ます。

 パソコン版

f:id:jelly3:20161220194124p:plain

スマホ

 
f:id:jelly3:20161220194347j:image

 

ただ、これはちょっと苦労しました。一つ一つ自分でURLとか追加したんですがどこかで何かを間違ったらしくちゃんと働きませんでした。初めからやり直しでした・・・背景の色とかを変えてたのでめんどくさかった。

バックアップは必ずとっておきましょう。

最後に

参考にさせていただいたみなさま、ありがとうございます!

 

ほとんどわからないボクでもなんとかカスタマイズできました。時間はかかったけどね(笑)自分のやりたいようにカスタマイズできるって最高ですね。

今後ともこのブログをよろしくお願いします。

 

読んでくれた方ありがとう。じゃあまたねー