八方美人ママの日常

30代主婦がイラストを挟みつつ、子育て情報や趣味を綴るブログ

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

こんにちは。青です。

ここ2日、ブログのカスタマイズに没頭していました!

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

f:id:aomamadiary:20201107050359j:plain

 

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

以前のデザインが使いにくくて、デザインテーマを変更しました。

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

人気第3位だったので、使っている方も多いですかね。

特徴

  記事一覧は2列のカード型レイアウト

  アイキャッチ画像を大きく表示できる

  自分でカスタマイズしやすいシンプルなデザイン

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

f:id:aomamadiary:20201107015755p:plain

 

今から紹介するものは【UnderShirt】以外にも使えますので、長いですが良かったら是非見てくださいね。

ブログのヘッダーを作る

「八方美人ママの日常」というタイトルをPhotoshop で作りました。「美」をピンクにしたのがポイントです!

f:id:aomamadiary:20201107025441p:plain

 

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

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

f:id:aomamadiary:20201107025455p:plain

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

  参考サイト

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

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

これでスマホでも正常に表示されました。

ちなみに、背景は元がうっすらグレーでした。私は白にしたかったので、CSSで変更します。

  参考サイト

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

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

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

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

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

  参考サイト

CSSとHTMLはこちらを参照

HTML内のアイコンはこちらを参照

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

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

f:id:aomamadiary:20201107041100p:plain

スマホだと横スクロールのメニューになります。↓

f:id:aomamadiary:20201107042612j:plain

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

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

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

  参考サイト

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

f:id:aomamadiary:20201107031824p:plain

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

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

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

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

  参考サイト

「トップページにスターを表示しない」を参照

タグの非表示はこちらを参照

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

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

  参考サイト

 before

f:id:aomamadiary:20201107034558j:plain

 after スッキリしました。

f:id:aomamadiary:20201107034315p:plain

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

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

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

f:id:aomamadiary:20201107040350p:plain

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

  参考サイト

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

f:id:aomamadiary:20201107040025p:plain

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

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

f:id:aomamadiary:20201107120221p:plain

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

  参考サイト

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

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

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

f:id:aomamadiary:20201107120914p:plain
f:id:aomamadiary:20201107120921p:plain
アプリ表示    左:bottom: 10px /右:bottom: 50px

 

いかがですか?

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

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

PointこれだけCSSが増えてくると全部コピペした時に、うまく反映されない時があります!CSSは適切な順番に貼らないと上手く反映されないことがあるのです!困ったら順番を入れ替えてみるといいかもしれません。
  参考サイト

その他のデザイン

目次のカスタマイズ

f:id:aomamadiary:20201107124733p:plain

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

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

そのままだと寂しいので、下にラインを入れました。

f:id:aomamadiary:20201107122537p:plain

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

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

下にうっすら背景をつけました。

f:id:aomamadiary:20201107124519p:plain

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

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

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

f:id:aomamadiary:20201107055144p:plain

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

画像を丸くする

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

吹き出し

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

蛍光マーカー

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

ボックスデザイン

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

読者になるボタンのカスタマイズ
f:id:aomamadiary:20201107122653p:plain
f:id:aomamadiary:20201107122017p:plain
左:標準  /  右:大きくカスタマイズ

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

 アイコンの変更

ついでに、アイコンも変更してしまいました。

コロコロ変えてすみません・・・

最近ありがたいことに検索流入が増えていまして。←こんなブログに!?

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

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

f:id:aomamadiary:20201107045346j:plain

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

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

f:id:aomamadiary:20201107011945p:plain
f:id:aomamadiary:20201107011942j:plain
左:旧アイコン/右:新アイコン
変更したのに反映されない!?

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

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

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

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

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

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

しばらくしたら今のイラストから「AO」に変わると思いますので、どうぞよろしくお願い致します。(キャッシュによって数日かかる可能性もあり)

 

 

頑張ったので是非HOME画面も見て行ってください〜

  合わせてどうぞ