こんばんは(^-^)
ブログもマンネリ化してきたので、デザインを変更してみました。
それでカスタマイズをやり始めるとはまってしまって。。。
ブログのカスタマイズって、やり出すとヤバいくらい止まりませんよね(汗)
一ヶ所やると他の箇所もどんどん気になってきて、とことんやろうとしてしまいます。
で、知識がないから調べまくってやってると、時間があっという間に過ぎてしまってビックリ!
最近もうこんな時間!ってことばかりです。
今回は、カスタマイズしたことを忘備録も兼ねて書いておきます。
デザインテーマ変更
デザインテーマを、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をインライン化するなどでしょうか。
まとめ
出来るだけ見やすくするためにデザインを変更したのですが、アクセス数や収益はどうなるか分かりません。
今後の経過をまた報告します☆