ブログにグローバルメニューを追加してみた！

前回のブログを書いてからグローバルメニューを設定してみました。
単純なHTMLとCSSで構成しているので、SEO的にはどうなのかは分かりませんが、画面遷移の補助となれば幸いです。

目次

PC版とスマホ版の違いについて

リンク色

HTML構造はほぼ同じですが、使用しているテンプレートのデフォルトでリンク色がスマホの場合は別途指定する必要があったので以下を記述しました。

スタイルシート

a.menu-link:link {
    color : #ffffff; 
}
a.menu-link:visited {
    color : #ffffff; 
}
a.menu-link:active {
    color : #ffffff; 
}
a.menu-link:hover {
    color : #ffffff; 
}

aタグに追加するclass

<li><a href="/" class="menu-link">ホーム</a></li>
<li><a href="/archive/category/田舎暮らし" class="menu-link">田舎暮らし</a></li>
<li><a href="/archive/category/ゲーム" class="menu-link">ゲーム</a></li>
<li><a href="/archive/category/漫画" class="menu-link">漫画</a></li>
<li><a href="/archive/category/雑記" class="menu-link">雑記</a></li>

まとめ

もう少し良い書き方があるとは思いますが、とりあえずこんな感じで作ってみました。

スポンサーリンク

はてなブログのヘッダーHTMLの表示先

PC、スマホ共に、デザインの「タイトル下」にHTMLを記述しましたが、表示の際にPCヘッダーの場合はメニューの下に広告が出るのですが、スマホの場合はメニューの上に広告が出てしまいます。
このあたりの調整が出来ていないですが、とりあえず後々調整しようかと思います。

レスポンシブ対応

していないです。
本当はレスポンシブ対応したいんですが、良さげなテンプレートがあれば乗り換えてしまいたいですね。
ただレスポンシブの場合だと、PCとスマホで出し分けしたい時に色々書かないといけないので、元から別れている方が楽だったりもします。。私の場合は。

おわりに

調整に結構時間がかかってしまいますね。
そもそもHTML、CSSの知識が少ないのでもう少し勉強したほうが良さそうです。。
それではまたー