こんにちは。青です。
ここ2日、ブログのカスタマイズに没頭していました！
はてなブログのカスタマイズを詳しく紹介【UnderShirt】
- はてなブログのカスタマイズを詳しく紹介【UnderShirt】
はてなブログのテーマストアからデザインを選ぶ
以前のデザインが使いにくくて、デザインテーマを変更しました。
テーマストアから新しく選んだのは、こちら「UnderShirt」です。
人気第3位だったので、使っている方も多いですかね。
記事一覧は2列のカード型レイアウト
アイキャッチ画像を大きく表示できる
自分でカスタマイズしやすいシンプルなデザイン
私のTOPページです。アイキャッチ画像が大きくて見やすいですね。
ブログのヘッダーを作る
「八方美人ママの日常」というタイトルをPhotoshop で作りました。「美」をピンクにしたのがポイントです！
「UnderShirt」のヘッダー画像についての注意点はここに詳しく記載してありました。
ヘッダーのサイズは1000px×200pxです。
でもこのままでは、スマホから見た時にはみ出してしまいます！
これでスマホでも正常に表示されました。
ちなみに、背景は元がうっすらグレーでした。私は白にしたかったので、CSSで変更します。
ヘッダー下にグローバルメニューを表示
グローバルメニュー(グローバルナビゲーション)とは、各ページに共通して設置されるメニューのことです。
これがあると、とても分かりやすいサイトになります。
この2つを組み合わせて作りました。
「ホーム、プロフィール、カテゴリーの子育て・主婦・ブログ、プライバシーポリシー、お問い合わせフォーム」を入れました。↓
スマホだと横スクロールのメニューになります。↓
ヘッダー下におすすめ記事を表示
通常、TOPページの一番上には最新の記事がきますよね。
自分の一番おすすめの記事を読んでもらうために、ヘッダーのすぐ下にイチオシの記事を固定で表示させます。
こんな感じになりました！↓
TOPページ記事のスターとブクマを外す
ここからは少し細かいです！
通常はTOPページの記事一覧にも、スターとブクマが表示されていますよね。
少しごちゃごちゃして見えるので、非表示にしました。
TOPページ記事「カテゴリー」の位置を移動
記事タイトルや概要、スターの下にあった「カテゴリー」をアイキャッチ画像の上に移動します。
before
after スッキリしました。
ソーシャルボタンを可愛く変更
ほとんどの方が記事上か下に置いているソーシャルボタン。
通常は、「デザイン→カスタマイズ→記事」からソーシャルパーツを選びます。
このソーシャルボタンも一工夫加えます。
背景のストライプは外しました。ガーリーで可愛いです！！
TOPページへ戻るスクロールボタンを配置
私のサイトの右下に2つマークが付いていますよね。
左のボタンを押すとスクロールして一番上へ、右のボタンを押すとホームへ戻ります。
このままコピペすると一つ問題が！
携帯のアプリから見ると、下のバーナーに被ってしまいます。
CSS内の「bottom: 10px; 」を「bottom: 50px;」に変更しました。
いかがですか？
CSS、HTMLなどさっぱり分からない私。
みなさんの記事をほぼコピペするだけで、初心者の私でもこんなに色々と設定することができました。
その他のデザイン
目次のカスタマイズ
はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 - フジブロっ！
カテゴリ記事一覧ページの見出しをカスタマイズ
そのままだと寂しいので、下にラインを入れました。
カテゴリアーカイブ（記事一覧）ページの見出し表示をCSSで変更してみました。 - FOCUS
「次ページ」ボタンのカスタマイズ
下にうっすら背景をつけました。
「前ページ、次ページのボタン」を参照
ブログデザインをリニューアルしました！カスタマイズまとめ。 | Migaru-Days
カテゴリーをタグっぽくする
はてなブログテーマ「Naked」のカテゴリをタグ表示っぽくする | あっちこっちにーち
画像を丸くする
はてなブログをカスタマイズ - 角丸編 - ポケットにチョコレート
吹き出し
はてなブログでの「吹き出し」の作り方を、どこよりも丁寧に解説！（これで出来なかったら逆にあきらめましょう） - ストレスフリー生活研究ラボ
蛍光マーカー
はてなブログでアンダーラインを蛍光ペン風にする方法 - Random Life Blog
ボックスデザイン
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
読者になるボタンのカスタマイズ
はてなブログの読者登録ボタンの設置やカスタマイズ - No Name
アイコンの変更
ついでに、アイコンも変更してしまいました。
コロコロ変えてすみません・・・
最近ありがたいことに検索流入が増えていまして。←こんなブログに！？
携帯からGoogle検索をすると、左端にアイコンが表示されますよね。
↓これが私のサイトなのですが、何かよく分からないですよね。
ヤフーなら「Y」みたいにババン！と一つ大きい方が分かりやすいなと思いまして。
名前が青なので、「AO」にしました。
変更したのに反映されない！？
前回変更した時もそうでしたが、アイコンは反映されるまでに時間がかかることがあります。
今回もブログアイコンはすぐに反映されたのですが、プロフィールアイコンがなかなか変わりません。
反映されない時はキャッシュを削除
早く反映させたい時は、とりあえずキャッシュを削除します。
キャッシュとはブラウザが表示したウェブページのデータをコンピューターに保存する機能のことです。
キャッシュを削除すると、最新の情報が表示されることがあるそうです。
しばらくしたら今のイラストから「AO」に変わると思いますので、どうぞよろしくお願い致します。(キャッシュによって数日かかる可能性もあり)
頑張ったので是非HOME画面も見て行ってください〜