はてなブログProにしたのでスマホでのデザインが色々変えられる様になりました。
なので今回もど素人の私が色々カスタマイズしたので紹介します。
今回も色々な方のブログを参考にして作りました。
この場を借りてお礼を申し上げます。
変更前のスマホ表示はこんな感じ。
何一ついじっていません。
ハッキリ言ってダサイ。
アクセス解析を見たら大半はスマホでブログに来てくださっているのに今まで何もスマホ対策をしていませんでした。
反省ですね。
ちなみにパソコン用のデザインはDUDEを使っています。
レスポンシブ対応ではないので一つ一つ変えていく形をとっています。
ヘッダー画像を入れる
これはProにしなくても出来るみたいですね(よくわかってません)
やり方はデザイン→スマートフォン→タイトル画像
『スマートフォン用に画像を設定する』にチェックをいれて画像をアップロードします。
ブログアイコンが邪魔だったので表示設定で『画像だけ表示』にチェックを入れてブログタイトルとともに消しました。
(ブログアイコンもダサイですよね、いつか変えよう)
その代わり画像そのものにブログタイトルを入れています。
私が使っている画像サイズは横幅640×高さ約360pxです。
ヘッダーを消す&グローバルメニューを入れる
Proにするとパソコン版のヘッダーとフッターを表示しない設定が出来ますが、スマホ版は何故かありません。
ちなみにココの部分です。
必要性が感じられないので表示しないように設定します。
参考ブログはコチラ↓
ヘッダーとヘッダーを消すとその部分が余白として残るのでその余白を消す設定が載っています。
グローバルメニューの入れ方も最後の方に載っています。
シンプルなグローバルメニューなので使いやすいかと思います。
ただ、私の場合は色を黒からグレーに変えました。
見出しと記事一覧のデザインの変更
見出しはそのままだと味気ないのでメリハリを付けるためにも変更しておきたいところです。
参考ブログはコチラ↓
パソコン用のデザインDUDEを作ってくださった方です。
記事の中の中見出しのCSSなので大見出しのh3で使いました。
あと記事一覧のデザインの変更は画像サイズを大きくなりいい感じになるので取り入れました。
いずれ色みを変える予定です。
目次を自動で表示する
やっぱり目次があった方がいいのかなと思って入れています。
はてなブログには簡単に目次を入れる方法がありますが、記事を書くたびに自分で入力する必要があるので正直面倒くさい。
それに目次を追加できるようになる前からPCでは自動で出るように設定していた為、スマホでも同じように設定しました。
自動で目次が出る入れ方ですがどこを参考にしたか忘れました。スイマセン。
はてなブログ検索したら簡単に出ますが、だいたいが目次が一番上に出てくるように設定されているものです。
私が使っているのは最初の見出しの前に入るように設定されています。
記事上に入力するコードの一部分を赤字のようにすると最初の見出しの前に入ると思います。(違ってたらスイマセン)
if ($(".entry-content h3").length >= 2){
$("<div class='sectionList'><h3>目次</h3><ol>" + list + "</ol></div>").insertBefore(".entry-content > h3:eq(0)");
}
CSSは見出しの時にいれたものが反映されてるみたいでそのまま使っています。
邪魔しない画面下固定のSNSボタンとfeedlyボタンの設置
別に画面下にSNSボタンが付けたかったわけではないですが、たまたま見かけて一目惚れでつけました。
何が良いってスマホの画面下ずっとにあるのにあまり気にならないところ。
付け方はこちら↓
feedlyのボタンは記事上に設置。
ボタンはここから作成出来ます。
スマホに設置するので小さいボタンにしましたが、押しずらいのが難点。
出来上がり
カスタマイズした後のブログはこちら。
↓トップページ↓
↓記事ページ↓
アドセンス広告の部分は念の為モザイク入れています。
素人がいじったにしてはいい感じかと思います。
よければ参考にしてみて下さい。
◎関連記事