お世話様です。志乃です。
スマホ＆PC版ともに、ブログデザインを大幅リニューアルしました。
アクセス解析をチェックしたところ、90％のユーザーがスマホで御覧になっているということなので、スマホ表示に特化したデザインに変更しました。
以下に、やったことや参考サイトをメモしたいと思います。殆ど自分用のメモで、ある程度、HTMLやCSSなどカスタマイズに関する知識がある方向けの記事にはなっておりますが、基本的にはコピペでOKなものばかりです。
はてなブログを運営中の方の参考になれば幸いです。
- 1.はてなデザインテーマを「Innocent」に変更
- 2.メニューバーを追加＆色変更
- 3.タイトル画像の変更
- 4.Googleアドセンス広告の位置調整（記事中に表示）
- 5.「記事下」で、シェアボタンのすぐ上（記事中のラスト）に表示する方法
- 6.Amazon＆楽天リンクボタンのデザイン変更
- 7.サイドメニュー（サイドバー）のカスタマイズ
- 8.aboutページの編集
- 試したもののやめたやつ
1.はてなデザインテーマを「Innocent」に変更
レスポンシブデザイン対応のデザインテーマを、公式ストアからダウンロード＆インストールします。
管理画面→デザイン→左のメニューを一番下までスクロール→「テーマストアでテーマを探す」→「Innocent」を選択（人気のテーマにあると思います）→プレビューしてインストール
2.メニューバーを追加＆色変更
この記事に沿ってメニューバーを追加。色変更のため、RGBの参考にしたサイト。
カスタマイズ→デザインCSSに↓を記述。
.main-navigation,
.main-navigation ul ul {
background-color: #（変えたい色のコードを入れる）;
}
3.タイトル画像の変更
デザイン→カスタマイズ（スパナのマーク）→背景画像をアップロード
こちらの素材サイトからお借りしました。
カスタマイズ→ヘッダ→タイトル画像→アップロード「ファイルを選択」。
背景は透明のPNGを作成→画像をアップロード「ファイルを選択」をクリック。
タイトル画像の余白の調整
タイトル画像まわりの余白を調整。上のはてなメニューバーのせいか、余白が足りなかったり、下に余白ができすぎたりしたため処置（てきとう）。
上記サイトを参考に↓を、カスタマイズ→「デザインCSS」に。
#blog-title{
height:180px;
margin: 20px 0 0 0;
padding:0px;
}
4.Googleアドセンス広告の位置調整（記事中に表示）
はてなブログにGoogleアドセンス広告を設置する方法
affiliate-hatekun.hatenablog.com
5.「記事下」で、シェアボタンのすぐ上（記事中のラスト）に表示する方法
カスタマイズ→記事→「記事下」に以下をコピペ
<div id="my-footer">
※ここに書いたものが全記事のラスト（シェアボタンより上）に表示されるようになる
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
<!-- ここまで記事-->
6.Amazon＆楽天リンクボタンのデザイン変更
こちらを参考にさせていただきました。ありがとうございます。
7.サイドメニュー（サイドバー）のカスタマイズ
「レスポンシブデザイン」にした場合、スマホでは記事の下に並びます。
カスタマイズ→サイドバー→プロフィール編集。
はてなブログで画像を横並びにする方法（HTML編集）
アイコン画像や、バナー画像などを用意→「はてなフォトライフ」からアップロード
<a href="リンク先URL"><img src="アイコン画像URL①"></a><a href="リンク先URL"><img src="アイコン画像URL②"></a>…
…改行タグ<br>を挟まないで続けて書いているだけ…。もっといい方法があるよって方、教えていただけると助かります…。
記事の幅いっぱいに画像を横に2つ並べる方法
imgタグに width="50%" を入れると半々の大きさで画像が並ぶ。
<a href="リンク先URL"><img src="左に置くバナー画像URL" width="50%"></a><a href="リンク先URL"><img src="右に置くバナー画像URL" width="50%"></a>…
8.aboutページの編集
はてなブログで少し前に、aboutページが編集できるようになりました。
HTMLの知識があれば、結構好きなようにできるみたいです。
はてな記法の目次を利用しています。
試したもののやめたやつ
記事下「あわせて読みたい」の設置
Milliardを設置してみましたが、デザインテーマ「Innocent」なら、サイドバーの調整で「関連記事」を持ってきた方がスマート（フレームが邪魔臭い）。
スマホでは、記事のすぐ下にPCサイドバー一番上のモジュールがきますので「関連記事」を持ってくれば解決。私はバナーなど「プロフィール」を一番上に持ってきてみました。
普段、記事中に載せている関連記事は、はてなブログ関連記事ジェネレータを使わせていただいています。
SNSシェアボタンのデザイン変更
忍者おまとめボタンが便利で簡単です。
が、かなりページが重たくなるので、あまりお勧めしません…。
デフォルトのシェアボタンのデザインはいまいちですが、トップページの記事一覧でも表示されたり、メリットも大きいんですよね…。
公式のシェアボタンのデザインを選べるようになればいいですね。
その他にも色々やったような、やってないような。
試行錯誤を繰り返しているので、もはや何がなんだか分かるなくなるため、後々のために今回やったことをまとめてみました。何か参考になれば幸いです。
参考にさせていただいたサイトの管理人様方に、心より感謝申し上げます。
現場からは以上です。