はてなブログのカスタマイズを詳しく紹介【UnderShirt】

こんにちは。青です。

 

はてなブログの皆さん、ブログのデザインにこだわっていますか?

WordPressのようには自由にはできないですが、はてなブログでも色々とカスタマイズできますよ。

基本CSSをコピペしていくだけなので、初心者の方も是非参考にしてくださいね。

 

(※2021.1.10、テーマを「UnderShirt」から「Brooklyn」に変更しました。紹介しているカスタマイズは現在の当サイトのデザインとは異なります。)

 

はてなブログのカスタマイズを詳しく紹介【UnderShirt】

f:id:aomamadiary:20210112005230j:plain

 

 

 

はてなブログのテーマストアからデザインを選ぶ

テーマストアから新しく選んだのは「UnderShirt」です。UnderShirt - テーマ ストア

人気上位なので、使っている方もとても多いです。

特徴
  • 記事一覧は2列のカード型レイアウト
  • アイキャッチ画像を大きく表示できる
  • 自分でカスタマイズしやすいシンプルなデザイン

 

▽UnderShirtを使った私のTOPページです。アイキャッチ画像が大きくて見やすいですね。

f:id:aomamadiary:20210112005731j:plain

 

今から紹介するものは「UnderShirt」以外のテーマでも使えますので、是非参考にしてくださいね!

 

ブログのヘッダーを作る

「八方美人ママの日常」というタイトルをPhotoshop で作りました。

f:id:aomamadiary:20210112010101p:plain

 

「UnderShirt」のヘッダー画像についての注意点はこちらに詳しく記載してあります。

はてなブログテーマ「 UnderShirt 」を公開しました - LOGzeudon with はてなブログ

 

ヘッダーのサイズは1000px×200pxです。

f:id:aomamadiary:20210112010303p:plain

 

でもこのままでは、スマホから見た時にはみ出してしまいます!

参考サイト

「1000×200サイズのヘッダー画像をスマホでも正常に表示させるコード」を参照

https://blog-support.jp/hatenablog-header-picture/

こちらのコードをCSSに貼り付けると、スマホでも正常に表示されました。

 

元のCSSだと、背景がうっすらグレーでした。

私は白にしたかったので、CSSで変更しました。

参考サイト

「ページ全体の背景色を変えるには」を参照

CSSで背景色を指定する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

 

ヘッダー下にグローバルメニューを表示 

グローバルメニュー(グローバルナビゲーション)とは、各ページに共通して設置されるメニューのことです。

これがあると、とても分かりやすいサイトになります。

この2つを組み合わせて作りました。

 

「ホーム、プロフィール、カテゴリーの子育て/主婦/ブログ、プライバシーポリシー、お問い合わせフォーム」を入れました。

 

▽パソコンver

f:id:aomamadiary:20210112011618p:plain

 

▽スマホは横スクロールのメニューになります。

f:id:aomamadiary:20210112011642j:plain

 

ヘッダー下におすすめ記事を表示

通常、TOPページの一番上には最新の記事がきますよね。

自分の一番おすすめの記事を読んでもらうために、ヘッダーのすぐ下にイチオシの記事を固定で表示させます。

 

こんな感じになりました↓

f:id:aomamadiary:20210112013638j:plain

 

TOPページ記事のスターとブックマークを外す

ここからは少し細かいです。

通常はTOPページの記事一覧にも、スターとブクマが表示されていますよね。

ごちゃごちゃして見えるので、非表示にしました。

 

TOPページ記事「カテゴリー」の位置を移動

記事タイトルや概要、スターの下にあった「カテゴリー」をアイキャッチ画像の上に移動します。

 before

f:id:aomamadiary:20210112014142j:plain

 

 after スッキリしました。

f:id:aomamadiary:20210112014157j:plain

 

ソーシャルボタンを可愛く変更

ほとんどの方が記事上か下に置いているソーシャルボタン。

通常は、「デザイン→カスタマイズ→記事」からソーシャルパーツを選びます。

f:id:aomamadiary:20210112014342p:plain

 

このソーシャルボタンも一工夫加えます。

 

背景のストライプは外しました。ガーリーで可愛いです!!

f:id:aomamadiary:20210112014542p:plain

 

TOPページへ戻るスクロールボタンを配置

私のサイトの右下に2つマークが付いていますよね。

f:id:aomamadiary:20210112014617p:plain

左のボタンを押すとスクロールして一番上へ、右のボタンを押すとホームへ戻ります。

 

このままコピペすると一つ問題が!

携帯のアプリから見ると、下のバーナーに被ってしまいます。

 

CSS内の「bottom: 10px; 」を「bottom: 50px;」に変更しました。

f:id:aomamadiary:20210112014843j:plain
f:id:aomamadiary:20210112014845j:plain

アプリで表示した時、 左が「bottom: 10px 」右が「bottom: 50px」です。

 

 

いかがですか?

CSS、HTMLなどさっぱり分からない私。

みなさんの記事をほぼコピペするだけで、初心者の私でもこんなに色々と設定することができました。 

 

これだけCSSが増えてくると全部コピペした時に、うまく反映されない時があります!

CSSは適切な順番に貼らないと上手く反映されないことがあるのです。

困ったら順番を入れ替えてみるといいかもしれません。

 

その他のデザイン

目次のカスタマイズ
f:id:aomamadiary:20210112015219p:plain

 

はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 - フジブロっ!

 

カテゴリ記事一覧ページの見出しをカスタマイズ

下にラインを入れました。

f:id:aomamadiary:20210112015301p:plain

カテゴリアーカイブ(記事一覧)ページの見出し表示をCSSで変更してみました。 - FOCUS

 

「次ページ」ボタンのカスタマイズ

下にうっすらグレーの背景をつけました。

f:id:aomamadiary:20210112015351p:plain

「前ページ、次ページのボタン」を参照

ブログデザインをリニューアルしました!カスタマイズまとめ。 | Migaru-Days

 

カテゴリーをタグっぽくする

f:id:aomamadiary:20210112015407p:plain

はてなブログテーマ「Naked」のカテゴリをタグ表示っぽくする | あっちこっちにーち

 

画像を丸くする

はてなブログをカスタマイズ - 角丸編 - ポケットにチョコレート

 

吹き出し

はてなブログでの「吹き出し」の作り方を、どこよりも丁寧に解説!(これで出来なかったら逆にあきらめましょう) - ストレスフリー生活研究ラボ

 

蛍光マーカー

はてなブログでアンダーラインを蛍光ペン風にする方法 - Random Life Blog

 

ボックスデザイン

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

 

読者になるボタンのカスタマイズ
f:id:aomamadiary:20210112015449p:plain
f:id:aomamadiary:20210112015446p:plain

左が標準仕様で、右が大きくカスタマイズしたものです。

はてなブログの読者登録ボタンの設置やカスタマイズ - No Name

 

 アイコンの変更

アイコンも変更しました。

最近ありがたいことに検索流入が増えていまして。

携帯からGoogle検索をすると、左端にアイコンが表示されますよね。

 

↓これが私のサイトなのですが、何かよく分からないですよね。

f:id:aomamadiary:20210112015623j:plain

 

ヤフーなら「Y」みたいにババン!と一つ大きい方が分かりやすいなと思いまして。

名前が青なので、「AO」にしました。

f:id:aomamadiary:20210112015659p:plain
f:id:aomamadiary:20210112015656j:plain

左が旧アイコン、右が新アイコンになります。

 

変更したのに反映されない!?

前回変更した時もそうでしたが、アイコンは反映されるまでに時間がかかることがあります。

今回もブログアイコンはすぐに反映されたのですが、プロフィールアイコンがなかなか変わりません。

 

反映されない時はキャッシュを削除

早く反映させたい時は、とりあえずキャッシュを削除します。

キャッシュとはブラウザが表示したウェブページのデータをコンピューターに保存する機能のことです。

キャッシュを削除すると、最新の情報が表示されることがあるそうです。

キャッシュと Cookie の消去 - パソコン - Google アカウント ヘルプ

 

カスタマイズしすぎると、はてなブログは遅くなる!?

 ※2021.1.12の追記になります

実は色々とカスタマイズをしたら、サイトがめちゃくちゃ遅くなりました!

 

私はレビュー記事が多く、写真をたくさん使うということもありますが、読み込むまでにすごく時間がかかっていました。

自分のサイトの速度を知りたい方はこちらを試してみてください。

PageSpeed Insights

 

サイトの速度が遅くなるとGoogleの評価も下がりますし、読者の離脱率も上がってしまいます。

クリックしてから数秒たっても読み込まれないと、他のサイトに行ってしまいませんか?

 

そこで、今回サイトのデザインを一から作り直しました。

結果、現在はテーマを「UnderShirt」から「Brooklyn」に変更しています。

Brooklyn - テーマ ストア

 

 

 

まとめ

CSSなんてさっぱりわかりませんが、ネットに落ちている情報でここまでカスタマイズすることができました。

皆さんも、素敵なブログになるといいですね!