Selenastyle Japón

音楽、グルメ、旅行、格闘技 etc... ラテンなライフスタイルブログ

超初心者でもできた!はてなブログにグローバルナビゲーション(PC)を設置

私はHTMLとかCSSとかさっぱりで自分じゃ何もできないんですが、ブログの見た目には人一倍こだわりたいちょっとしたワガママ子なんです。少し記事も増えてきたのでそろそろグローバルナビゲーションを設置したいなと思い始めてたのですが、でも結局やりたいなら自分でやるしかなく・・・。けっこう孤独な作業でした。たぶん簡単なことなのかもしれないですが、ちょっとつまづいたりもしたので、備忘録としてここに残しておきたいと思います。

● 設置をはじめる前に

まずは記事のカテゴリ分けをきちんとしておきました。カテゴリが増えてきてしまってたので、グローバルナビゲーションに設置したい大きなカテゴリを作成して振り分けました。

● 設置はまずHTMLからコピペ

グルーバルナビゲーションの設置に入ります。いろいろ検索して参考になりそうな記事を探したのですが、こちらの(チップの日常)さんの記事がいちばんシンプルで、超初心者の私でもできそうだなと思って参考にさせてもらいました。

chipspd.hatenadiary.jp

HTMLとCSSが別々にわかりやすく書かれていたのが、初心者の私には混乱することなく理解できたのだと思います。

こちらで紹介されているタグをブログ管理画面にある以下の場所へペタッと貼り付けしました。

デザイン→カスタマイズ→ヘッダ→タイトル下(HTMLを記述できるところ)

貼り付けはまずHTMLの部分だけにしました。プレビューで確認しながらカテゴリ名とリンク先URLを変更していきたかったからです。 

● カテゴリ名が日本語のため、URL取得につまづいた

ここでつまづいてしまいました。

<a href="カテゴリのURL">の""の間にリンクさせたい自分のブログのカテゴリ先URLを貼り付けるわけですが、カテゴリ名が日本語の場合そのまま貼り付けてしまうとうまくリンクされません。

 

日本語表記のカテゴリ先URLとはこんな感じです(最後の部分が日本語になっている)

http://selenastyle.hatenablog.com/archive/category/ラテンなニュース」 

このまま貼り付けてみたところ、カテゴリ名をクリックしてみてもこのように表示されてしまいます。

f:id:soymaquita:20171126212836p:plain 

どうすればいいのかわからなくなってしまい、焦りました。『はてなブログPerfect GuideBook』という書籍も参考にしてたのですが、そこには「カテゴリが日本語表記の場合は(日本語表記の部分が数字やアルファベットに)変換されてペーストされます」

というようなことだけ書かれていました。ところが、いくらURLをそのままペタッと貼り付けてもまったく変換されないんです。ほんとに困ってしまいました。

 

そこでまたネットでの検索が始まりました。本当によくわからないことにつまづいてしまうと、先が見えなくなって凹みますね。

そして見つけたのがこちら。日本語URL変換ツールというものでした。

n7.com

こんなことをしなくちゃいけなかったんですね。

日本語表記のURLを1番のスペースに貼り付けたところ、瞬時に変換されたものが表示されました。その変換されたURLをはてなブログの先ほどのHTMLに貼り付けたら今度は上手くいきました!

● あとはCSSを貼り付けてデザインしていくだけ

今度はCSSの部分<style>から</style>までを貼り付けます。

貼り付け先「デザイン→カスタマイズ→デザインCSS」でも丈夫なようですが、私はHTMLと同じ場所にあった方が後あと迷子にならないかなと思ったので、先ほどと同じ場所のヘッダーから入っていくHTML下の部分に貼り付けました。

タグもわりとシンプルで少ないので、内容がよくわからなくてもプレビューしながら数字の入ってるところをいろいろ変えてみると分かりやすかったです。勉強にもなりそうだなと思いながら色や文字の大きさなどを自分の好みに変えていきました。

まだまだブログ工事中状態ですが、地道にカスタマイズしていこうと思います。

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