難病女子の心の裏側日記

難病と闘いつつ、好きなことを楽しむブログです☆

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

 

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

 

 

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

 

 

というのも、

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

 

f:id:kinoshitakonoki:20190205105028p:plain f:id:kinoshitakonoki:20190205105345p:plain

 

 

 

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

 

 

スマホ用カテゴリ一覧CSSとHTML

サイトマップとプロフィールのたて並び

f:id:kinoshitakonoki:20190205112301p:plain

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

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

f:id:kinoshitakonoki:20190203220800j:plain

 

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

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

 

コピーするところ

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

 

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

 

3段4段と増やす場合は

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

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

 

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

 

 

バナー(画像)リンクを2列にしたい時

f:id:kinoshitakonoki:20190205121720p:plain

 
コピーするところ

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

バナー(画像)リンクを2列を6段にしたい時

f:id:kinoshitakonoki:20190205112008p:plain



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

を6回繰り返します。

 

6段に限らず、2列1段のを組み合わせれば何段でも可能です。

 

ちっさな(バナー)画像にリンクを付ける方法

好きな場所にHTML編集で下記のCSSを使う

<table><tr><td> <a href="リンク先のURL" target="_blank"><img src="アップロードした画像のURL" border="0" /></a> </td></tr></table>

 

CSS途中にある、リンク先URLはリンクさせたい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に貼り付ける。

 

 <table><tr><td> <a href="リンク先のURL" target="_blank"><img src="アップロードした画像のURL" border="0" /></a> </td></tr></table>

 ↑ これですね


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

 

スマホ用画像の大きさ

 

スマホ用の画像は幅120px(ピクセル)で作ると2列にするときに丁度良いサイズになります。

 

120px

f:id:kinoshitakonoki:20190128210109j:plain

150pxだと2列入らないので、120~140までに収めることをオススメします。

f:id:kinoshitakonoki:20190128163208j:plain

 

どこに貼ればいいの?

 

質問の中で一番多かった、「どこに貼るのか」ですが、バナーリンクでしたらHTML編集のできるところならどこでも貼れます。

 

はてなブログ

ちなみにコノキははてなブログなので「デザイン編集」→「スマートフォン」→「ヘッダ」→「タイトル下」に貼っています。

 

アメブロ

記事内にしかHTML編集が施せない仕様となっていますので、ヘッダーの下に貼り付けるのは出来ませんが、記事内にはバナーリンクは可能です。

 

アメーバオウンド

「カスタマイズ」「CSSカスタマイズ」「スマートフォン」のCSSを書けるところに貼り付ける。

記事内でもHTML(ブロック)追加でそこに貼り付ければ可能です。

 

忍者ブログ

「記事を書く」から「ソースコード編集」を開き、そこに貼るのは可能。

ヘッダー下にはプラグインで既にあるナビゲーションに追加する形になるため、カスタマイズは不可能。しかし、サイドバーにあるプロフィールにはHTML編集が可能のため、ブログパーツとして入れるのは可能。

 

他のブログのやり方も分かり次第追記いたします。

 

バナー(画像)作成も承ります

そもそも画像作るのができないよ!って人は、コノキがバナー(画像)作成承ります♪

画像サイズ小っちゃいから

f:id:kinoshitakonoki:20190128210109j:plain

f:id:kinoshitakonoki:20190128205920j:plain

こんな感じのゆるいのしか描けませんが、気になる~って人いましたら作成期間や金額などご相談ください。

木ノ下コノキ (@kinoshitakonoki) | Twitter

お問い合わせフォーム 

 


さいごに

今回、ツイッターに載せたことでいろんな意見交換ができて自分も初心に戻ることができました。

 

CSSとかHTMLとか言われても、何をどこに貼るのか、自分が初心者だったころには同じくぜんっぜん分かりませんでした。

 

最初に勉強したのはネットショップの編集を任されたとき。

 

教えてくれる人もいないし、「プロに頼むのはお金かかるから」と会社から丸投げされてから本を買って猛勉強。使ってる間に覚えていきますが、会社を辞めてから約6年が経ち、ブログ始めた約2年前から再度勉強中です。

 

詳解 HTML&CSS&JavaScript辞典 第6版

その時買ったHTMLの本。あ、私が買ったのは第5版です。

 

そして今回の記事のこの説明を見てやってみても、いまいちよく分からない、貼り付けたのに機能しないという人いましたら、お問い合わせくださいませ。

 

木ノ下コノキ (@kinoshitakonoki) | Twitter

お問い合わせフォーム

 

でもコノキはCSSやHTMLの達人ではありませんので、CSS、HTMLすべてに関することのお問い合わせには反応しかねる場合がありますのでご了承ください。

 

読者登録励みになります。

 

ブログ村に参加しています。

よろしかったらポチッと応援よろしくお願いします(*´艸`*)

 ↓ ↓ ↓

にほんブログ村 病気ブログ 難病(特定疾患)へにほんブログ村 病気ブログ 高安動脈炎へ
にほんブログ村

 

スポンサーリンク

 

セキュリティ対策不要!今すぐ始める、はてなブログPro

Copyright © 2017-2019 木ノ下コノキ All Rights Reserved.