コピペで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 4px;
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: 10px;
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>

ちょっとわかりにくいかもですが、<ul>タグのクラスで色を切り替えています。白ベースを利用される際にはnormalを、黒ベースを利用される際にはblackを指定してください。

アイコンを変えて使いたいといっていただける方は、

fontawesome.io

こちらからお好みのアイコンをお探しください。<i>タグのクラスを修正すれば変更されるはずです。アイコンを表示させるためのCSSの読み込みもお忘れなく。

さいごに

とりあえず、シンプルバージョンということで今日はここまで。

実際にPro契約したらもっとしっかりしたデザインのものをご紹介したいと思います。

ではでは、最後までお付き合いいただきありがとうございました。

関連記事

コピペでどうぞ。CSSでカエレバ・ヨメレバのデザインをカスタマイズしました

スマホサイト対応完了!はてなブログ公式目次のデザインカスタマイズ

レスポンシブデザイン向け、はてなブログ公式目次のデザインカスタマイズ