はてなブログのテーマ選び。種類豊富で迷いますよね。
私の希望は見やすさ、使いやすさ、かわいらさ、を重視しつつかつ軽いもの。
ということで今回自分のメインブログのテーマをHaruniに変更。
備忘録も兼ねてその変更点をまとめます。
2021-01-10公開/リライト2022-07-04
今回変更した私のメインブログはこちら
変更前はこちら
ちなみに変更前はBrooklynを色変更して使用していました
詳しくはこちら
軽くて人気のBlooklynですが、上のバーやら横のバーやら文字やらカテゴリやら、サイドバーのあれやこれや、、、、と1つ1つ全部を色変更cssを入れ変更していったので表示速度がかなり遅くなってしまったんです
変更後
というわけで何もいじらずとも可愛いテーマ
そしてそのなかで表示速度が軽めのものを探し、このHaruniに変更しました
- レスポンシブ
- 2カラム
- トップページ横長カード型(Proのみ)
そのままで可愛い
Haruniは基本的には何もいじらずとも、カスタマイズせずこのままで可愛らしいです！
見出し
大、中、小見出しはこんな感じ
目次
目次もそのままで可愛らしくかつ見易いです
カテゴリ
カテゴリ文字もグラデーションが綺麗
なのでほぼ変更するところはありません。
テーマ変更で問題が起こった場合
テーマを変更後に出てくる問題がたまにあるので覚書として記載しておきます
スマホ版で画像が縦に伸びる問題
Brooklyではレスポンシブにするとブログ引っ越しで持ってきた昔の記事の画像がスマホで開くと縦に伸びてしまうということが起こりました。
私は2年ほど前にブログを引っ越ししてはてなに来ています
1500記事ほどをYahooブログからFC2経由ではてなブログに持ってきました。
その持ってきた過去の画像が、Brooklynにしてスマホで開くと全てびよーーーんと縦長に伸びて表示されてしまったんです
(解決策が見当たらなかったので地道に1記事ずつコツコツと画像の貼り替え作業をしています)
ところがこのHaruniに変えたところスマホ画面で開いてみても昔の記事の画像が伸びていません
どうやらこの現象は使用するテーマによるようです
画像が伸びてしまってお困りの方はテーマを変更してみると解決するかもしれませんよ
サイドバーが落ちる場合
はてなブログのテーマによって、PC、iPadで開くとサイドバーが下まで落ちる事がありませんか？
トップページでは問題なく横に収まっているのですが記事を開くと下に落ちてしまう。
私はしょっちゅうこれに悩まされていまして、以前の対策は
- いくつかテーマ変更してみてサイドバーが落ちないテーマに変える
- シェアボタンのカスタマイズを変更
などを試すと上に戻ってきました。
今回Haruniに変えたところまたサイドバーが落ちてしまい、しかも今回はシェアボタンの変更だけでは戻リませんでした。
あれこれ検索してみた結果、「記事上」のコードの中の「ペケのついた部分を消す」と落ちたサイドバー が上に戻ってくると書かれた記事を発見！
自分の設定画面を開き、「記事上」の部分を確認してみると確かに「ペケマーク」のついた不要なコード(過去の消し忘れや重複)が2箇所ありました。
そしてこれらを削除したところ落ちたサイドバーが無事上に戻ったんです！
長い間この「サイドバーが落ちる」問題に悩まされていましたが、ようやくこれですっきり解決しました。
というわけで今回のテーマ変更に戻りますね。
といってもほぼ何も変更していません。
ボタンのカスタマイズ
シェアボタン
シェアボタンはこちらを使用しています↓
LINEも加わっているので気に入ってます
ちなみに上のリンク先のコードを使っているのですが、なぜか表示されるのはこちらのデザインになりました(私が何か間違えているのかもしれません…)
下の記事に上画像のシェアボタンのcssが記載されています
フォローボタン
SNSフォローボタンは以前は四角いものを使用しており、
これがトップ画面で結構主張しすぎて気になっていたので今回変更しました
こちらを使用しています
先程の画像はスマホ画面。
スマホだと良い感じに並んでいるのですが、PCの場合アイコンとアイコンがかなり離れてしまってその点が気になります。。
pC画面はこちら
記事下のものはPCでも比較的収まっています
ヘッダー画像
ヘッダー画像はTwitterのなんばちゃんに描いていただいてます
ヘッダーの上下の余白を消す
画像の上下の余白を消すのはこちら
ちなみに
- 背景画像を横幅いっぱいに
- スマホでも見切れないようにする
以上の2点は今までどのテーマの時でもうまくいったことがありません。。。
今回もだめでした。
どこかに何か原因があるのでしょうね。
それ以外の変更
少しでも表示速度をあげようと以下も変更しています
- はてなスター非表示
- 記事下の関連記事非表示
- FBページの埋め込み/インスタグラムの埋め込み削除
- サイドバーのレシピブログランキング表示削除
カエレバヨメレバカスタマイズ
カエレバ、ヨメレバのカスタマイズは以下のサイトのCSSを使用させていただいてます
happylife-tsubuyaki.hatenablog.com
aupayマーケットとdショッピングは非対応なため、aupayマーケットは[ .shoplinkwowma ]を、dショッピングは[ .shoplinkdocomo ] をそれぞれ4箇所に追記して使用しています
文字色はこちらにしました
.shoplinkwowma a{
color:#dc5f36;
}
.shoplinkdocomo a{
color:#cc0434;
}
ブログタイトル文字について
ヘッダーのブログタイトルは今まで画像のみにしていました。
ですが、これだとタイトルで検索した時検索に乗らない、ということを知り、文字も表示させることにしました
以前は文字なし↓
実はそれ以外にも問題がありまして。
つい最近、レシピブログさんでブログ紹介記事を書いていただいたんです。
で、この記事ですね、
なぜか私のブログタイトル「お砂糖みりんなし生活！ほっこりおうちごはん」を
ヘッダー画像内の文字「お砂糖みりんなしレシピほっこりおうちごはん」
と書かれてしまているんです
(レシピブログへの登録は「お砂糖みりんなし生活」になってるのでここを間違えるわけないと思ってしまってたんですよね。校正の時気づきませんでした)
どっちでも良いかと思ったので特に修正のご連絡はせずそのままにしていますが、
「ヘッダー画像の文字をブログタイトルと思われてしまう」
というのは(まあ考えてみると当たり前のことなのですが)自分では盲点でした。
というわけでヘッダーにブログタイトル文字も表示させるようにしています
現在はこちらです↓
これでもう間違えられないはず！
まとめ
以上が今回の変更点です。
今回拘ったのはブログの表示速度を上げるため、軽いテーマでかつさほど変更せずともとっても可愛らしいもの
Haruniはとても可愛らしくて気に入ってます！
素敵なテーマをありがとうございました。
