Welcome to Haiji Life!

Thank you for coming for my blog.

素人でも出来た!はてなブログのスマホ版カスタマイズを5つ紹介


follow us in feedly

  当サイトの記事には、広告・プロモーションが含まれます

はてなブログProにしたのでスマホでのデザインが色々変えられる様になりました。

なので今回もど素人の私が色々カスタマイズしたので紹介します。

今回も色々な方のブログを参考にして作りました。

この場を借りてお礼を申し上げます。

変更前のスマホ表示はこんな感じ。

f:id:haijimama:20160504140015j:plain

何一ついじっていません。

ハッキリ言ってダサイ。

アクセス解析を見たら大半はスマホでブログに来てくださっているのに今まで何もスマホ対策をしていませんでした。

反省ですね。

ちなみにパソコン用のデザインはDUDEを使っています。

DUDE - テーマ ストア - はてなブログ

レスポンシブ対応ではないので一つ一つ変えていく形をとっています。

 

 ヘッダー画像を入れる

これはProにしなくても出来るみたいですね(よくわかってません)

やり方はデザイン→スマートフォン→タイトル画像

 『スマートフォン用に画像を設定する』にチェックをいれて画像をアップロードします。

ブログアイコンが邪魔だったので表示設定で『画像だけ表示』にチェックを入れてブログタイトルとともに消しました。

(ブログアイコンもダサイですよね、いつか変えよう)

その代わり画像そのものにブログタイトルを入れています。

私が使っている画像サイズは横幅640×高さ約360pxです。

 

ヘッダーを消す&グローバルメニューを入れる

 Proにするとパソコン版のヘッダーとフッターを表示しない設定が出来ますが、スマホ版は何故かありません。

ちなみにココの部分です。

f:id:haijimama:20160504155244j:plain

必要性が感じられないので表示しないように設定します。

参考ブログはコチラ↓

www.junpeihazama.com

ヘッダーとヘッダーを消すとその部分が余白として残るのでその余白を消す設定が載っています。

グローバルメニューの入れ方も最後の方に載っています。

シンプルなグローバルメニューなので使いやすいかと思います。

ただ、私の場合は色を黒からグレーに変えました。

 

見出しと記事一覧のデザインの変更

見出しはそのままだと味気ないのでメリハリを付けるためにも変更しておきたいところです。

参考ブログはコチラ↓

tsukuruiroiro.hatenablog.com

パソコン用のデザインDUDEを作ってくださった方です。

記事の中の中見出しのCSSなので大見出しのh3で使いました。

あと記事一覧のデザインの変更は画像サイズを大きくなりいい感じになるので取り入れました。

いずれ色みを変える予定です。

 

目次を自動で表示する

やっぱり目次があった方がいいのかなと思って入れています。

はてなブログには簡単に目次を入れる方法がありますが、記事を書くたびに自分で入力する必要があるので正直面倒くさい。

staff.hatenablog.com

それに目次を追加できるようになる前からPCでは自動で出るように設定していた為、スマホでも同じように設定しました。

自動で目次が出る入れ方ですがどこを参考にしたか忘れました。スイマセン。

はてなブログ検索したら簡単に出ますが、だいたいが目次が一番上に出てくるように設定されているものです。

私が使っているのは最初の見出しの前に入るように設定されています。

記事上に入力するコードの一部分を赤字のようにすると最初の見出しの前に入ると思います。(違ってたらスイマセン)

//大見出しが2つ以上あったら目次を表示する
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ボタンが付けたかったわけではないですが、たまたま見かけて一目惚れでつけました。

何が良いってスマホの画面下ずっとにあるのにあまり気にならないところ。

付け方はこちら↓

bloglab.naenote.net

 feedlyのボタンは記事上に設置。

ボタンはここから作成出来ます。

www.feedly.com

スマホに設置するので小さいボタンにしましたが、押しずらいのが難点。

 

出来上がり

カスタマイズした後のブログはこちら。

↓トップページ↓

f:id:haijimama:20160829112524p:plain

↓記事ページ↓

f:id:haijimama:20160829112553j:plain

アドセンス広告の部分は念の為モザイク入れています。

素人がいじったにしてはいい感じかと思います。

よければ参考にしてみて下さい。

 

◎関連記事

haijimama-life.hateblo.jp