スマホ用カテゴリ一覧が人気だったのでコピーするだけで出来るCSSとHTML貼っておくよ

こんにちは、木ノ下コノキ（@kinoshitakonoki）です。

今回は「コピーで簡単スマホ版のカテゴリ一覧の作り方」を書いていきます。

というのも、

先日作ったカテゴリ一覧が完成したので、スマホ版のみスクショしてツイッターに載せたところ反響が大きかったのです。

f:id:kinoshitakonoki:20190205105028p:plain

「こういうの作ってみたかった」って人、「どうやって作るのか」って質問も多かったので、今回はコピーするだけで出来るCSSとHTML貼っておきます。

f:id:kinoshitakonoki:20190205112301p:plain

ここのバナー（画像）サイズは幅200pxです。

高さは好きな高さでOKですがこの画像サイズは幅200px　×　高さ40pxです。

f:id:kinoshitakonoki:20190203220800j:plain

たてに中央寄せにしてバナー（画像）リンクを貼りたいときは、<table></table>で囲わなくてもバナーリンクは貼れます。

２段のままなら、下記の<center></center>で囲ったところをコピーして使えます。

コピーするところ

※「あなたのリンクしたい記事URL 」と「アップロードした画像のURL」はURL貼り付けた後そのまま残すと、HTMLが機能しないので必ず消してください

3段4段と増やす場合は

<p><a href="あなたのリンクしたい記事URL" target="_blank"><img src="アップロードした画像のURL" border="0" /></a></p>を

</center>の前に追加していってください。

ちなみに<center>リンクや文章</center>は、画面の中央に寄せる役割があるのでアイキャッチ画像や広告を貼る時にも便利です。

f:id:kinoshitakonoki:20190205121720p:plain

コピーするところ

f:id:kinoshitakonoki:20190205112008p:plain

を６回繰り返します。

６段に限らず、２列１段のを組み合わせれば何段でも可能です。

CSS途中にある、リンク先URLはリンクさせたいURLをコピー（ペースト）してこの場所に貼り付けます。

そして、アップロードした画像URLは記事に画像を貼り付けた際に付けられる画像の場所を指します。

例えば、この画像に「手作り」カテゴリをリンクさせたいとき、

f:id:kinoshitakonoki:20190128163208j:plain

画像を通常記事を書く時のように貼り付けたら

HTML編集画面に切り替え、

<p><img class="hatena-fotolife" title="f:id:自分のIDj:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kinoshitakonoki/20190128/20190128163208.jpg" alt="f:id:コノキのID" /></p>の青文字にした部分（https://～.jpg）をコピーし、

先ほどのアップロードした画像のURLに貼り付ける。

↑　これですね

すると、バナー（画像）をクリックしたらリンクさせたいページに飛ぶことができます。