Viva la Vida!〜メキシコのマソメノス生活〜

世界中を旅行し、オーストラリアでは英語学生、ワーキングホリデーを経験。今度はメキシコでの生活が始まります!好奇心旺盛な私とマソメノス(スペイン語でだいたい、おおよその意味)の国柄のメキシコ人との奮闘生活をご紹介。雑記ではオーストラリアでの生活から転職活動などを気の赴くままに投稿しています。

【はてなブログ】ブログをカスタマイズしたい!超初心者の私でもできた方法をご紹介

こんにちはAmyです。

 

全然読まれないブログですが(笑)、せっかくやるからには自己満でもブログを少しでも見やすく色々カスタマイズしたい!そしたら少しは誰か読んでくれるかも、、、ということでカスタマイズ方法を色々調べました!悪戦苦闘したなかでとても助かったブログがいくつもあったので今回はそれらをまとめてみました!!

 

まず、私が一番にやりたかったこと、、、それはよくブログで見る下のこれ!!

 

f:id:amysydney:20190803142646p:plain

カテゴリー別に分かれていて、クリックするとそれに関する記事たちのところに移動するやつです!!!!!!

 

そもそもこれ何て検索すれば良いの?名前何ていうの????

色々思いつく限り単語を並べ検索しましたが、これを作成する方法が説明されているブログに行き当たりませんでした。

 

結論から言うとこれは、『グローバルメニュー』というらしい!!!!!

「ブログ グローバルメニュー 設定」で検索すると色々出てきます。

 

まずはこのブログ↓ ↓はてなブログにおけるカスタマイズ方法が載っていて、自分がカスタマイズしたいコードをコピペするだけで超簡単。↓↓

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

 

私はあの『グローバルメニュー』を作成したいので、上のブログ内「スライドメニュー」欄のコードをコピペしました!

・メニュー1と書かれているところに自分の入れたいタイトルを書きます。私は自己紹介と書き換えました。私はカテゴリーが5つしかないのでメニュー6、メニュー7の列はdeleteしました。

 

f:id:amysydney:20190803151236p:plain

 

コピペして変更を保存するボタンを押してみると、、、おおおおおおお!反映されいるうううう!!カテゴリー分けされてるうううう!!

しかし!!みなさんもやってみるとお分かりの通り、グローバルメニューが黒背景の白文字で出てきます。私的にはもう少し背景は薄い色で文字は見やすい色でやりたい、、、ということで色を変えなきゃ。。。そこで、次に参考にしたのが下のブログ。↓↓

固定グローバルナビゲーションでアクセス倍増!コピペで簡単! - Bambi's BLOG @ hatena

この方もすごく分かりやすく解説してあります!私は色の変更を行いたかったので、上のブログ記事内、真ん中らへんまでスクロールしてもらうと

WEB色見本 原色大辞典 - HTMLカラーコードと書かれた箇所があります。これをクリックすると色とともにコードがズラーーーっと。好きな色を選びクリック。出てきたコードをコピペすればいいのです!

でもどこに?下の写真のところにコードを入れます。

f:id:amysydney:20190803152204p:plain

 backgroundのところに先ほどコピーしたコードをペースとしてください。そうすると、背景の色が変わります。

colorのところでは、グローバルメニューの文字の色を変更することができます。これも先ほどの色コード一覧からお好きなコードをコピペしてください。

 

変更を保存すると、おおおおお!!好きな色に変わってる!ということでカテゴリー分けと色の変更までできました。別タブで自分のブログを開くとちゃんとできてるという感動。あともう1作業で完了です!

それは、カテゴリーと記事をリンクさせること!!!今の状態だとカテゴリー名をクリックしてもカテゴリー内で何も記事が出てきません。そこで下のブログを参考にしてください。↓↓

【はてなブログ】グローバルメニューの設置方法を素人が0から解説してみた - カレー記念日

 

これで私の憧れであったグローバルメニューの設定完了です。

まだまだやりたいものありますが、こんな調子で’少しづつカスタマイズできたらと思います。

 

最後まで読んでいただきありがとう’ございました。