たれみみ日和

うさぎ歴15年。うさぎさんとの生活について発信しています。アラフィフ飼い主の日常も時々。。。両親他界、おひとりさま、必死に生きております。

はてなブログ カスタマイズ

 当サイトにはプロモーションが含まれている場合があります

はてなブログ カスタマイズ

はてなブログ カスタマイズ

こんばんは(^-^)

ブログもマンネリ化してきたので、デザインを変更してみました。

それでカスタマイズをやり始めるとはまってしまって。。。
ブログのカスタマイズって、やり出すとヤバいくらい止まりませんよね(汗)

一ヶ所やると他の箇所もどんどん気になってきて、とことんやろうとしてしまいます。

で、知識がないから調べまくってやってると、時間があっという間に過ぎてしまってビックリ!

最近もうこんな時間!ってことばかりです。
今回は、カスタマイズしたことを忘備録も兼ねて書いておきます。

デザインテーマ変更

デザインテーマを、BrooklynからSmoothへ変更しました。
デモブログを作成して色々試しました。

これまで使っていたbrooklinは、人気のテーマから何となく選んだのですが、後からこのブログのイメージと合わないなあとずっと思っていたんです。

それで、カスタマイズをしまくっていたんですが、やりすぎて重くなるのならいっそのことテーマを変えてしまおうと考えました。

まず初めにHaruniという可愛いテーマを見つけたんですが、見出しのデザインを変更しようにもどうしても変更出来なくて。

はてなブログはh2の見出しが抜けていて気持ち悪いので、それを修正するコードを入れています。

多分、原因はそれかなとは思っています。

Brooklynは影響なかったんですけどね。

なので、次にcolor bookと言うテーマをデモブログで全てカスタマイズし、いざ実装したところ問題が!

アドセンス広告がトップページの記事一覧に重なって出てしまい、どう修正したらいいのか分かりませんでした。

結局、Smoothという公式テーマに落ち着きました。

テーマを変更するとアクセス数が下がるかも?と言う意見もあります。

実際変更して今日で12日目ですが、多少下がっている気もします。

でも1ヶ月のうちそういう時期もあるので、実際のところテーマ変更が原因かまだ分かりません。

あと、アドセンスの利益も下がってきているような気がしますが、これもテーマ変更が原因かはまだ何とも言えません。

プロフィール&フォローボタン

はてな既存のサイドバープロフィールを消して、新たに作成しました。

こちらのサイトでコピペだけで作成出来ました。

はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン10選 - フジブロっ!

このサイトの便利なところは、必要事項を入力するとコードを作成してくれるところです。

なのでコピペするだけなんです。

フォローボタンも作成してくれますよ。

初心者にとっては神サイトです!

検索窓

検索窓をサイドバーのトップに持ってきて、デザインを変更しました。

スマホでは検索窓がすごい下の方に出てくるので、メニューバーの中にも入れました。

参考サイトはこちらです。

【はてなブログ】検索窓の表示位置とデザインを変更する方法🔍コピペOK! - yunico's fluffy life

シェアボタン

はてなブログ既存の読者登録やツイッターボタンは重いので表示を外し、記事下に作成しました。

参考サイトはこちらです。

軽量・シンプルなはてなブログのSNSシェアボタンを作りました【コピペOK】|つゆきのこ(露木 啓)

ボトムナビ設置

ボトムに、ホーム、メニュー、トップへ戻る、おすすめ記事を設置しました。

下記のサイトを参考に、ハンバーガーメニューの中にあったものをこちらに移動、トップへ戻るボタンを追加しました。

スマホ画面下に固定表示「ボトムナビゲーション」の設置方法@はてなブログ「Palette(パレット)」 - バンビの初心者ブログ教室


トップに戻るボタンはこちらを参考にしました。

【はてなブログ】トップに戻るボタンを設置する方法【コピペで簡単】 | Joujilog

ハンバーガーボタンはまだ残していますが、いずれ消そうと思っています。

その他の細かい変更

記事下の写真を揃えた

記事下のランキングの写真を3つ、サイズを揃えて横並びにしました。

ただ、スマホの場合デモブログでは横並びになっているのに、当ブログでは何かが邪魔をして横並びになりません(涙)

カラーの統一

カラーに統一性を出すためにこちらのサイトを参考にしました。

Color Palette: #F6F6F6 #FFE2E2 #FFC7C7 #AAAAAA - Color Hunt

ハイライトの色も青から黄色に変更しました。

アイコン

グローバルナビやボトムメニューにアイコンを使いました。

fontawesomeは種類が色々あって楽しいけど、結構重いらしいです。
なので、はてなブログで使用出来るblogiconを使いました。

今後のカスタマイズ予定

出来るだけ高速化したいので、色々調べて対策を練っています。

今のところ私に出来そうなことは、写真はPNGは重いのでJPEGを使う(過去の写真はもし時間があれば一つ一つ修正していく)、CSSをインライン化するなどでしょうか。

まとめ

出来るだけ見やすくするためにデザインを変更したのですが、アクセス数や収益はどうなるか分かりません。

今後の経過をまた報告します☆