頑張るえびのブログ

年に1回は中国行って3回は海外旅行すると決意した人のブログです!人生やろうと思えば出来る!

ブログのデザインやタイトルを変えてみました!!

ちょっと今日は余裕があったので、ブログのデザインをいじってみよう!と一念発起!

タイトル画像からメニューバーまで作成してみました!

まずタイトルこのブログを作って何回かタイトルを変えてきたけど…

その度に思う事…

ブログの内容しぼらなければ…

内容をしぼることでやっぱり必要としている人に見つけてもらいやすくなるのでは…と思うのですがね…

けどね…

旅行の事も書きたいし、ゲームの事も書きたいし、中国語のことだって書きたいし、仕事や人生の悩みだって書きたいし、たまには日記だって書きたいの!!

よし、開き直って迷走してることにしよう(笑)

と、いうことでこんなタイトルになりました。

 

次にTOP画像を作りたいなと思い、Canvaを使って作成してみました~♪

Canvaは仕事でも使っていますが本当に便利でオシャレに作成できるので大好きです!

 

ちなみにPC用ヘッダ画像の推奨サイズは、幅1000px、高さ200px。
スマートフォン用ヘッダ画像の推奨サイズは、幅720px、高さ240pxだそうです!

Canvaの有料版だとサイズもサクッと変えれちゃうので便利です!

(ちなみに30日間お試し出来ます!)

 

そしてその次はカテゴリーごとにメニューを作ろう!と考えました。

参考にさせていただいたのはこのサイト!

www.blog.biz-thinking-k.com

本当に3分で作成出来ました!

しかし…なんか文字だけだと見づらい…括弧で囲むのもなんかダサいし…

そんな時に見つけたのがこのサイト!

www.3939life.com

このアイコンみたいなのつけてみたい!!!

と、いう事で頑張って設定しました!

このサイト様、非常に分かりやすく書いてあったのですが2か所つまづいたので他の方の役に立てば…

5.変更したいメニュー行の緑字の部分を書き換えます。

緑色の部分が最初どこか分かりにくくて???となりました。

これは例として出されている以下のコードの太字になっている所です!

<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="ここにリンク先のアドレス"><i class="fa fa-home" aria-hidden="true"></i> ここにメニューの名前</a></div>

太字にしたら緑って分かった(笑)

 

もう一つがFontAwesomeを使う準備で以下のコードを入力するという部分。

<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet">

私の場合、このままではブランクが表示されてしまっていました。

URLを見るとv5.9.0と書いてあるのでバージョンの問題か?と思いFontAwesomeのサイトを見てみるとどうやらメールで登録が必要なようです!

ここでメールを入力して、自分のアカウントを作ったらコードが発行されたので、それを設定したら無事にアイコンが表示されるようになりました~!!

可愛い!!

さらにスマホ版にも設定できたので非常に満足です!

アイコンがあるだけでこんなにも見た目って変わるんですね~!

めっちゃ満足です!(^^♪

後はカテゴリの整頓をしなければ…!