こんにちは。青です。
はてなブログの皆さん、ブログのデザインにこだわっていますか？
WordPressのようには自由にはできないですが、はてなブログでも色々とカスタマイズできますよ。
基本CSSをコピペしていくだけなので、初心者の方も是非参考にしてくださいね。
(※2021.1.10、テーマを「UnderShirt」から「Brooklyn」に変更しました。紹介しているカスタマイズは現在の当サイトのデザインとは異なります。)
はてなブログのカスタマイズを詳しく紹介【UnderShirt】
- はてなブログのカスタマイズを詳しく紹介【UnderShirt】
はてなブログのテーマストアからデザインを選ぶ
テーマストアから新しく選んだのは「UnderShirt」です。UnderShirt - テーマ ストア
人気上位なので、使っている方もとても多いです。
- 記事一覧は2列のカード型レイアウト
- アイキャッチ画像を大きく表示できる
- 自分でカスタマイズしやすいシンプルなデザイン
▽UnderShirtを使った私のTOPページです。アイキャッチ画像が大きくて見やすいですね。
今から紹介するものは「UnderShirt」以外のテーマでも使えますので、是非参考にしてくださいね！
ブログのヘッダーを作る
「八方美人ママの日常」というタイトルをPhotoshop で作りました。
「UnderShirt」のヘッダー画像についての注意点はこちらに詳しく記載してあります。
はてなブログテーマ「 UnderShirt 」を公開しました - LOGzeudon with はてなブログ
ヘッダーのサイズは1000px×200pxです。
でもこのままでは、スマホから見た時にはみ出してしまいます！
こちらのコードをCSSに貼り付けると、スマホでも正常に表示されました。
元のCSSだと、背景がうっすらグレーでした。
私は白にしたかったので、CSSで変更しました。
ヘッダー下にグローバルメニューを表示
グローバルメニュー(グローバルナビゲーション)とは、各ページに共通して設置されるメニューのことです。
これがあると、とても分かりやすいサイトになります。
この2つを組み合わせて作りました。
「ホーム、プロフィール、カテゴリーの子育て/主婦/ブログ、プライバシーポリシー、お問い合わせフォーム」を入れました。
▽パソコンver
▽スマホは横スクロールのメニューになります。
ヘッダー下におすすめ記事を表示
通常、TOPページの一番上には最新の記事がきますよね。
自分の一番おすすめの記事を読んでもらうために、ヘッダーのすぐ下にイチオシの記事を固定で表示させます。
こんな感じになりました↓
TOPページ記事のスターとブックマークを外す
ここからは少し細かいです。
通常はTOPページの記事一覧にも、スターとブクマが表示されていますよね。
ごちゃごちゃして見えるので、非表示にしました。
TOPページ記事「カテゴリー」の位置を移動
記事タイトルや概要、スターの下にあった「カテゴリー」をアイキャッチ画像の上に移動します。
before
after スッキリしました。
ソーシャルボタンを可愛く変更
ほとんどの方が記事上か下に置いているソーシャルボタン。
通常は、「デザイン→カスタマイズ→記事」からソーシャルパーツを選びます。
このソーシャルボタンも一工夫加えます。
背景のストライプは外しました。ガーリーで可愛いです！！
TOPページへ戻るスクロールボタンを配置
私のサイトの右下に2つマークが付いていますよね。
左のボタンを押すとスクロールして一番上へ、右のボタンを押すとホームへ戻ります。
このままコピペすると一つ問題が！
携帯のアプリから見ると、下のバーナーに被ってしまいます。
CSS内の「bottom: 10px; 」を「bottom: 50px;」に変更しました。
アプリで表示した時、 左が「bottom: 10px 」右が「bottom: 50px」です。
いかがですか？
CSS、HTMLなどさっぱり分からない私。
みなさんの記事をほぼコピペするだけで、初心者の私でもこんなに色々と設定することができました。
これだけCSSが増えてくると全部コピペした時に、うまく反映されない時があります！
CSSは適切な順番に貼らないと上手く反映されないことがあるのです。
困ったら順番を入れ替えてみるといいかもしれません。
その他のデザイン
目次のカスタマイズ
はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 - フジブロっ！
カテゴリ記事一覧ページの見出しをカスタマイズ
下にラインを入れました。
カテゴリアーカイブ（記事一覧）ページの見出し表示をCSSで変更してみました。 - FOCUS
「次ページ」ボタンのカスタマイズ
下にうっすらグレーの背景をつけました。
「前ページ、次ページのボタン」を参照
ブログデザインをリニューアルしました！カスタマイズまとめ。 | Migaru-Days
カテゴリーをタグっぽくする
はてなブログテーマ「Naked」のカテゴリをタグ表示っぽくする | あっちこっちにーち
画像を丸くする
はてなブログをカスタマイズ - 角丸編 - ポケットにチョコレート
吹き出し
はてなブログでの「吹き出し」の作り方を、どこよりも丁寧に解説！（これで出来なかったら逆にあきらめましょう） - ストレスフリー生活研究ラボ
蛍光マーカー
はてなブログでアンダーラインを蛍光ペン風にする方法 - Random Life Blog
ボックスデザイン
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
読者になるボタンのカスタマイズ
左が標準仕様で、右が大きくカスタマイズしたものです。
はてなブログの読者登録ボタンの設置やカスタマイズ - No Name
アイコンの変更
アイコンも変更しました。
最近ありがたいことに検索流入が増えていまして。
携帯からGoogle検索をすると、左端にアイコンが表示されますよね。
↓これが私のサイトなのですが、何かよく分からないですよね。
ヤフーなら「Y」みたいにババン！と一つ大きい方が分かりやすいなと思いまして。
名前が青なので、「AO」にしました。
左が旧アイコン、右が新アイコンになります。
変更したのに反映されない！？
前回変更した時もそうでしたが、アイコンは反映されるまでに時間がかかることがあります。
今回もブログアイコンはすぐに反映されたのですが、プロフィールアイコンがなかなか変わりません。
反映されない時はキャッシュを削除
早く反映させたい時は、とりあえずキャッシュを削除します。
キャッシュとはブラウザが表示したウェブページのデータをコンピューターに保存する機能のことです。
キャッシュを削除すると、最新の情報が表示されることがあるそうです。
キャッシュと Cookie の消去 - パソコン - Google アカウント ヘルプ
カスタマイズしすぎると、はてなブログは遅くなる！？
※2021.1.12の追記になります
実は色々とカスタマイズをしたら、サイトがめちゃくちゃ遅くなりました！
私はレビュー記事が多く、写真をたくさん使うということもありますが、読み込むまでにすごく時間がかかっていました。
自分のサイトの速度を知りたい方はこちらを試してみてください。
サイトの速度が遅くなるとGoogleの評価も下がりますし、読者の離脱率も上がってしまいます。
クリックしてから数秒たっても読み込まれないと、他のサイトに行ってしまいませんか？
そこで、今回サイトのデザインを一から作り直しました。
結果、現在はテーマを「UnderShirt」から「Brooklyn」に変更しています。
まとめ
CSSなんてさっぱりわかりませんが、ネットに落ちている情報でここまでカスタマイズすることができました。
皆さんも、素敵なブログになるといいですね！