読者です 読者をやめる 読者になる 読者になる

技術を磨くだいぱんまん

ごはんと自由が大好き。

はてなブログのスマホ版にメニューバーを付けました

インターネット

f:id:donchan922:20150328144329p:plain

2016/8/14更新

スマホ版にメニューバーを付けました。はてな公式にはメニューバーをつける機能がなかったので、以下の記事を参考に実装してみました。

akiueo.hatenablog.com

サンプルコード

以下に、サンプルコードを載せます。
設定方法は、ダッシュボードの「デザイン」⇒「スマホ」⇒「タイトル下」のhtmlに以下のコードを貼り付けてください。
この設定は、はてなブログPro会員でないとできません。

<style type="text/css">

// メニューバーのテーブルスタイル
.g_nav ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    -webkit-padding-start: 0px;
}

// メニューバーの項目スタイル
.g_nav li {
    padding: 1px;
    display: table-cell;
    background-color: red;
    text-align: center;
    font-size: 80%;
    font-weight: bold;
}

// メニューバーの最終項目のみ右枠線削除するスタイル
.g_nav li:not(:last-child){
    border-right:1px solid #ffffff;
}

// メニューバーの項目のリンク色スタイル
.g_nav a {
    color:#ffffff;
}
</style>

<nav class="g_nav">
<ul>
<!-- 「a href="ここにカテゴリのURLを記述してください。"」 -->
<!-- 「<a href="">ここにカテゴリ名を記述してください。</a>」 -->
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>

まとめ

ご参考にどうぞ。

おしゃれなシェアボタンも作りました。

おしゃれなシェアボタンをCSS&Webフォントで作ってみた【はてなブログのPC&スマホ用】