(cache) コピペでOK。シンプルなスマホ用メニューを作成。カスタマイズのベースにもどうぞ

f:id:tsubasa123:20161214102834j:plain

こんにちは、つばさ（@tsubasa123）です。

そろそろはてなブログProを契約予定です。スマホデザインのカスタマイズがしたいのです。

それに先立って、メニューというか一覧のリスト表示のカスタマイズを考えました。まだまだ改良の余地はありますが、テンプレ的に貼っておきます。

メニューの作り方にお悩みの方の参考になれましたらこれ幸いです。

あんまりオシャレじゃないけれど

至ってシンプルなものなのでこれをベースに装飾していただければ捗る方もいるかと思います。

私はデザインが苦手ですのでWEBフォントアイコンを利用していますが、ご自身で作成できる方はよりオリジナリティの高いメニューになるはずです。うらやましい。

色は白ベースと黒ベースの2種類を用意しました。白だけでいいかな、とも思ったのですが、はてなブログのスマホデザインって全体的に白っぽいので黒でバチッと締めたい人もいるかもしれませんし。

サンプルはこちら

下記をペロッとコピペでどうぞ。

<style>
ul.category-menu {
    width: 94%;
    margin: 15px auto;
    padding: 0;
    list-style-type: none;
}
ul.category-menu:after {
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
    content: '.';
}
ul.category-menu.normal {
    border-top: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
}
ul.category-menu.black {
    border-top: 1px solid #111111;
    border-left: 1px solid #111111;
}
ul.category-menu li {
    width: 50%;
    float: left;
    text-align: center;
}
ul.category-menu li a {
    width: 100%;
    font-weight: bold;
    font-size: 18px;
    display: block;
    padding: 11px;
    text-decoration: none;
    box-sizing: border-box;
}
ul.category-menu.normal li a {
    color: #666;
    border-bottom: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    background: linear-gradient(to bottom, #ffffff 0%, #e8e8e8 100%);
}
ul.category-menu.black li a {
    color: #fff;
    border-bottom: 1px solid #111111;
    border-right: 1px solid #111111;
    background: linear-gradient(to bottom, #777777 0%, #333333 100%);
}
ul.category-menu li a:hover, ul.category-menu li a:active {
    text-decoration: none;
    opacity: .7;
}
ul.category-menu li a i {
    color: #333;
    padding-right: 14px;
    font-size: 18px;
}
ul.category-menu.black li a i {
    color: #fff;
}
</style>

<ul class="category-menu normal">
    <li><a href=""><i class="fa fa-bicycle" aria-hidden="true"></i>カテゴリ1</a></li>
    <li><a href=""><i class="fa fa-car" aria-hidden="true"></i>カテゴリ2</a></li>
    <li><a href=""><i class="fa fa-camera" aria-hidden="true"></i>カテゴリ3</a></li>
    <li><a href=""><i class="fa fa-gift" aria-hidden="true"></i>カテゴリ4</a></li>
    <li><a href=""><i class="fa fa-diamond" aria-hidden="true"></i>カテゴリ5</a></li>
    <li><a href=""><i class="fa fa-envelope" aria-hidden="true"></i>カテゴリ6</a></li>
</ul>

<ul class="category-menu black">
    <li><a href=""><i class="fa fa-bicycle" aria-hidden="true"></i>カテゴリ1</a></li>
    <li><a href=""><i class="fa fa-car" aria-hidden="true"></i>カテゴリ2</a></li>
    <li><a href=""><i class="fa fa-camera" aria-hidden="true"></i>カテゴリ3</a></li>
    <li><a href=""><i class="fa fa-gift" aria-hidden="true"></i>カテゴリ4</a></li>
    <li><a href=""><i class="fa fa-diamond" aria-hidden="true"></i>カテゴリ5</a></li>
    <li><a href=""><i class="fa fa-envelope" aria-hidden="true"></i>カテゴリ6</a></li>
</ul>