チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

【はてなブログ】スマホ用ページで横スクロール出来るカテゴリ一覧を作ってみました

 スポンサード リンク

 だいぶ前に、はてなブログのスマホページ用のカテゴリ一覧を作りました。

f:id:chipsforest:20160312183348j:plain:w300

 ↑こんなやつ

 これが結構好評だったようで、設置しているブログをちょくちょく見かけます。

 自分が作ったものを他の方が使っているのを見ると嬉しくなります^^

 使ってくださっている方々に感謝です^^

 今回は少し違ったデザインのスマホページ用カテゴリ一覧を作成してみました。

f:id:chipsforest:20160312183415j:plain:w300

 ↑こんな感じです。

 横スクロール出来るので、カテゴリ数が多くなってもコンパクトに設置することが出来ます。

設置方法

HTML

 「カテゴリ○のURL」「カテゴリ○の画像URL」「カテゴリ○」の部分をご自分のものに変更して、スマホページの設置したい場所(フッタ等)に貼り付ければOK。

画像に関して

 縦横比1:1のものを使用してください。

f:id:chipsforest:20160312183428j:plain

 ↑画像URLの取得方法は「はてなフォトライフ」を使用している場合は、使用したい画像をアップロードした後に画像ページに行き、画像を右クリック「画像アドレスをコピー」で取得可能です。

 その後、上のHTMLコードの「カテゴリ○の画像URL」部分に貼り付ければ完了です。

 ↑この部分を追加、もしくは削除することで、カテゴリ数を増やしたり減らしたりすることができます。

CSS

 これは先程のHTMLコードの真上に貼り付ければOK。

 「width」「font-size」の数値や文字色等はお好みで変更してください。

完成したもの


 スマホで確認してみて、横スクロール出来ていれば完成。

 設置後はタップして、該当するカテゴリページに移行するか確認することをおすすめします。


 ここで使っている画像は私がGIMPで適当に作ったものを使用しているので、センスのある人だったらもっとオシャレなカテゴリ一覧になるんじゃないかなと思います(汗。

広告を非表示にする

PAGE TOP