シヌヤルブログ

死ぬまでに、やりたいことを、やるブログ

【初心者が挑戦】メニューバー追加カスタマイズ

最近いろんな方のブログを読んでいるのですが、

ふと「メニューバーがあると、一気に見やすくてちゃんとしたブログ感が出る。」

と感じて、

 

今日はメニューバーの追加カスタマイズに挑戦してみることにしました。

 

挑戦といっても、本当にコピペだけです、はい。

コードとか難しそうなので。はい。

 

得意なことは得意な人に任せるのが一番良いと思うんです、はい。

だからわたしはGoogle 先生に聞いて、得意な人が書いたものをコピーするんです、はい。

 

「はい」は一回で良い!って言われそうですね、はい。

 

はい、すいません。(笑)

 

 

Google先生に聞いてみたところ、

なんとわたしが使い始めたブログデザインのオーナー様のページを発見。

 

hitsuzi.hatenablog.com

 

完コピしました。

まるっきり完コピしました。

 

すると、やはりさすがです。

HTMLコード等パソコンのこと何も知らないわたしでも、メニューバー追加できちゃいました。

f:id:shinuyaru:20171112210033p:plain

 

おおおおおおおおおおおおお

これだ。わたしが出したかったのはこれだ。。。

 

もう、うはうはです。

 

しかし、ここで問題発生です。

「TIPS」とか「 DESIGN」のところ何書けば良いんだろう、、、?

 

これは何か自分がかける記事のテーマになりそうなものに変更する必要がありそうです、、、、

 

ということで、カスタマイズのカスタマイズを決行!

 

わたしがコピーしたコードはこれ。

f:id:shinuyaru:20171112213114p:plain

この、赤線の部分と青線の部分を変更しました。

 

まず、赤線の部分

もともと6個のメニューがあるのですが、わたしは5個で良かったので、

初めの「HOME」の部分を消しました。

 

そして、

「TIPS」「STUDY」「DESIGN」となっているところを、

「TRIP」「GUIDE」「STUDY」に変更。

 

ただ、それだと横にあるアイコン(絵文字みたいなやつ)と

かみ合いません。

 

「⚡️TRIP」ってなってしまっているので、

今度は横の絵文字を変更させます。

 

そこで変更させるのが、青線部分とのこと。

f:id:shinuyaru:20171112213114p:plain

 

青線のところには、「Fontawsome」というサイトに載っているコードを貼付けるらしいです。

 

メニューバー左から4番目の「Icons」を選択し、

f:id:shinuyaru:20171112213527p:plain

 

検索のところに自分の入れたいアイコンの名前をうちます。

この場合だと、鉛筆。

 

なので、「Pencil」と入力してみます。

 

f:id:shinuyaru:20171112213854p:plain

すると、このようにコードが出てきました!!

 

これを青線部分にコピペ。

 

結果、こうなりました。

f:id:shinuyaru:20171112214019p:plain

 

そして、メニューバーカスタマイズのカスタマイズが終了!!

 

まだ、リンクは貼付けられていないので、

メニューバーをクリックしても

「ページが見つかりませんでした。」と表示されてしまいますが、

 

徐々にその貼付け方も勉強していきます。。。

 

2017.11.12 ツナ

(今日は劇団四季でアラジンのミュージカル鑑賞をしてきました。

心が洗われました。)