といった悩みを解決します。
・はてなブログをカスタマイズできます。
・カテゴリーを追加できます(スマホ)
・テーマを使うという手もあります
本日は、はてなブログのスマホページにてカテゴリーを追加する方法のご紹介記事となります。
何もいじっていなければ、はてなブログのデザインテーマは、Lifeといわれるシンプルなものになりますが、このテーマだとスマートフォンに表示されるトップページにカテゴリーがないんですよね。
なのでHTMLを少し追記するだけで、スマホ画面にカテゴリーを追加する事が可能となりますのでその手順をご紹介します。
HTMLと聞いて、焦った方ご安心ください!コピペで簡単に終わりますのでぜひぜひ試してみましょう!一度やってみたら、こんな簡単なものなんだとなりますよ。
はてなブログをカスタマイズしたい方は、ぜひ最後まで読み進めてみてください。
Contents
【はてなブログ】スマホページの下にカテゴリーを追加する方法。
スマホトップページにカテゴリーを追加する方法
①管理画面から、「デザイン」ー「スマートフォン」と画面遷移し、「フッタ」にHTMLコードを追加していきます。
②入力欄がもし表示されていない場合は、「スマートフォン用にHTMLを設定する」にチェックを入れます。
③こちらが追加するHTMLコードになります。※スマホで見ると崩れているかも・・・
<div class=”hatena-module hatena-module-category”>
<div class=”hatena-module-title”>
カテゴリー
</div>
<div class=”hatena-module-body”>
<ul class=”hatena-urllist”>
<li>
<a href=”http:XXXX – ここにURLを入力”>カテゴリー1</a>
</li>
<li>
<a href=”http:XXXX – ここにURLを入力”>カテゴリー2</a>
</li>
</ul>
</div>
</div>
<HTMLコードの解説>
“http:XXXX ⇒ ここにURLを入力” に表示したいカテゴリー一覧のURLを記述します。そして、その後に表示させたいカテゴリー名を記述します。
例として、「カテゴリー1」と「カテゴリー2」の2つを表示するようにしていますが、 <li></li>の部分をコピペして増やすことにより、「カテゴリー3」以降も追加できます。
④カテゴリー名とリンク先を設定する
カテゴリー名の決め方ですが、PCページを合わせるのがいいかなと思います。
ただあまりにもカテゴリーを多くしている人はしぼった方がいいかもしれませんね。スマホ画面はそこまでカテゴリーがずらっと並んでいてもちょっと困りますからね。
リンク先は、実際にPCページからURLをコピーしてきて設定しましょう。
一度張り付けてみて、実際にスマホ画面でページ下まで移動するとどう表示されるのかをチェックできますので、試してみましょう。
実際にやってみた(完成図あり)
スマホ画面下にカテゴリーが追加されたよ!
どうでしょうか。しっかりとカテゴリーが追加されましたね!あとはスマホ画面からカテゴリーをクリックしてみてきちんと画面が切り替わるかどうかチェックすればOKです。
サンプルなので、カテゴリー名はそのままですが自分のブログにあったカテゴリー名に変更しましょう。
カテゴリー名称ですが、PCページのカテゴリー名をもとに作るとバランス取れていいですよ!PCカテゴリー名からコピペしてくると楽です。
HTMLコードとかそうゆうのはいいから、もっと簡単にカテゴリーを追加したいっす。
そういった方もいらっしゃいますよね?
その場合は、テーマをかえてみよう!
上記のやり方ははてなブログの初期設定テーマ(Life)からの変更方法っす。
はてなブログのデザインテーマを変えてしまえば、もっと楽にいけますよ!おおよそどのテーマデザインでもスマホページにカテゴリーは入っていますね。プレビューもテーマをカスタマイズする画面でみれますので、チェックしながら自分の気に入ったデザインを探してみよう。
こちらの記事でオススメしていますが、ゲームブログを運営するなら、「ZENO-TEAL」をオススメしています!(※はてなブログPro版にする必要あり。)
▼詳しくはこちらからどうぞ!
あとがき
はてなブログ(スマホ画面)へのカテゴリー追加方法をご紹介しました!
きっとはてなブログのスマホトップページにカテゴリーを追加したい人って沢山いると思うんですよね。
はてなブログを運営している方向けの記事となりましたが、ご参考になれば幸いです。
最後まで読んで頂きありがとうございます!
これからもブログ運営にて役立つノウハウや実体験を交えて情報を配信していきますね。記事が良かったらこれからもご参考にどうぞ!
▼はてなブログを運営しているけど、まだPro化していない方はこの機会にどうぞ!
▼ブログ運営に役立つ記事。こちらもあわせてどうぞ!