難病女子の心の裏側日記

難病女子の心の裏側をたれ流すブログ。

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

 

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

 

 

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

 

 

というのも、

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

 

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

 

 

どうやって作ったのか聞かれることも多かったので、その都度前回書いた記事を貼ったのですが

www.kinoshitakonoki.com

これは運営日記の一部として載せたものだったので、今回新たに記事にしていきます。

 

 目次

 

スマホ用カテゴリ一覧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>は、画面の中央に寄せる役割があるのでアイキャッチ画像や広告を貼る時にも便利です。

 

カテゴリ一覧(見出し)のCSS

f:id:kinoshitakonoki:20190205111627p:plain

 これは画像ではなくてCSSで作っています。(記事内では作れません)

 

はてなブログの場合「デザイン編集」→「スマホ」「フッタ」を開き

<style>

.box30 .box-title {
font-size: 1.2em;
background: #5fc2f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}

</style>

を入れ、

 

ヘッダのタイトル下に


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<center><div class="box30">
<div class="box-title">カテゴリ一覧</div></center>

 を貼ります。

 

最後の行のカテゴリ一覧の文字は変えられます。

 

<div class="box-title">お好きなタイトルで</div>

 

バナー(画像)リンクを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段のを組み合わせれば何段でも可能です。

 

貼りたい画像のURLの調べ方

貼りたい画像のURLの調べ方は前回記事をご覧ください。

www.kinoshitakonoki.com

そしてこの記事でも説明していますが、スマホ用の画像は幅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すべてに関することのお問い合わせには反応しかねる場合がありますのでご了承ください。

 

 

読者登録、励みになります!

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

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

 ↓ ↓ ↓

にほんブログ村 病気ブログ 難病(特定疾患)へにほんブログ村 恋愛ブログへ
にほんブログ村

スポンサーリンク

 

 ホーム   お問合わせ   プライバシーポリシー   サイトマップ