別館ほっこりおうちごはん

ゆる糖質オフ生活の、のんびり外食日記や日々の事

Hatena Instagram Youtube


☆★☆レターポットは【 こちら】お手紙頂けると嬉しいです★☆☆

スポンサードリンク



はてなブログ可愛いテーマ/Haruniに変えました/カスタマイズ備忘録




スポンサードリンク



はてなブログのテーマ選び。種類豊富で迷いますよね。

私の希望は見やすさ、使いやすさ、かわいらさ、を重視しつつかつ軽いもの。

ということで今回自分のメインブログのテーマをHaruniに変更。

備忘録も兼ねてその変更点をまとめます。

 

f:id:misumisu0722:20210110195951p:plain2021-01-10公開/リライト2022-07-04

 

今回変更した私のメインブログはこちら

www.misublog.com

 

 

 

 

 

変更前はこちら

 

ちなみに変更前はBrooklynを色変更して使用していました

詳しくはこちら

www.misumisu0722blog.com

 

f:id:misumisu0722:20210110162314j:plain

軽くて人気のBlooklynですが、上のバーやら横のバーやら文字やらカテゴリやら、サイドバーのあれやこれや、、、、と1つ1つ全部を色変更cssを入れ変更していったので表示速度がかなり遅くなってしまったんです

 

 

変更後

 

というわけで何もいじらずとも可愛いテーマ

そしてそのなかで表示速度が軽めのものを探し、このHaruniに変更しました

blog.hatena.ne.jp

  • レスポンシブ
  • 2カラム
  • トップページ横長カード型(Proのみ)

 

f:id:misumisu0722:20210110163753j:plain

 

 

そのままで可愛い

 

Haruniは基本的には何もいじらずとも、カスタマイズせずこのままで可愛らしいです!

 

 

見出し

 

大、中、小見出しはこんな感じ

 

f:id:misumisu0722:20210110170428j:plain

 

 

目次

 

目次もそのままで可愛らしくかつ見易いです

 

f:id:misumisu0722:20210110200132j:plain

 

カテゴリ

 

カテゴリ文字もグラデーションが綺麗

 

f:id:misumisu0722:20210110200113p:plain

 

なのでほぼ変更するところはありません。

 

 

テーマ変更で問題が起こった場合

 

テーマを変更後に出てくる問題がたまにあるので覚書として記載しておきます

 

スマホ版で画像が縦に伸びる問題

 

Brooklyではレスポンシブにするブログ引っ越しで持ってきた昔の記事の画像がスマホで開くと縦に伸びてしまうということが起こりました。

 

私は2年ほど前にブログを引っ越ししてはてなに来ています

1500記事ほどをYahooブログからFC2経由ではてなブログに持ってきました。

その持ってきた過去の画像が、Brooklynにしてスマホで開くと全てびよーーーんと縦長に伸びて表示されてしまったんです

(解決策が見当たらなかったので地道に1記事ずつコツコツと画像の貼り替え作業をしています)

 

ところがこのHaruniに変えたところスマホ画面で開いてみても昔の記事の画像が伸びていません

どうやらこの現象は使用するテーマによるようです

画像が伸びてしまってお困りの方はテーマを変更してみると解決するかもしれませんよ

 

 

  

サイドバーが落ちる場合

 

はてなブログのテーマによって、PC、iPadで開くとサイドバーが下まで落ちる事がありませんか?

トップページでは問題なく横に収まっているのですが記事を開くと下に落ちてしまう。

 

私はしょっちゅうこれに悩まされていまして、以前の対策は

  • いくつかテーマ変更してみてサイドバーが落ちないテーマに変える
  • シェアボタンのカスタマイズを変更

などを試すと上に戻ってきました

 

 

今回Haruniに変えたところまたサイドバーが落ちてしまい、しかも今回はシェアボタンの変更だけでは戻リませんでした。

 

あれこれ検索してみた結果、「記事上」のコードの中の「ペケのついた部分を消す」と落ちたサイドバー が上に戻ってくると書かれた記事を発見!

 

自分の設定画面を開き、「記事上」の部分を確認してみると確かに「ペケマーク」のついた不要なコード(過去の消し忘れや重複)が2箇所ありました。

そしてこれらを削除したところ落ちたサイドバーが無事上に戻ったんです!

 

長い間この「サイドバーが落ちる」問題に悩まされていましたが、ようやくこれですっきり解決しました。

 

 

というわけで今回のテーマ変更に戻りますね。

といってもほぼ何も変更していません。

 

 

ボタンのカスタマイズ

 

シェアボタン

 

シェアボタンはこちらを使用しています↓

LINEも加わっているので気に入ってます

blog.minimal-green.com

 

ちなみに上のリンク先のコードを使っているのですが、なぜか表示されるのはこちらのデザインになりました(私が何か間違えているのかもしれません...)

f:id:misumisu0722:20201222180701j:plain

下の記事に上画像のシェアボタンのcssが記載されています

yumekawa.hatenadiary.com

 

 

フォローボタン

 

SNSフォローボタンは以前は四角いものを使用しており、

f:id:misumisu0722:20210110200454j:plain

 

これがトップ画面で結構主張しすぎて気になっていたので今回変更しました

 

f:id:misumisu0722:20210110200539j:plain

 

こちらを使用しています

kagesai.net

 

先程の画像はスマホ画面。

スマホだと良い感じに並んでいるのですが、PCの場合アイコンとアイコンがかなり離れてしまってその点が気になります。。

 

pC画面はこちら

f:id:misumisu0722:20210110200654j:plain

 

記事下のものはPCでも比較的収まっています

f:id:misumisu0722:20201222180708j:plain

 

 

 

ヘッダー画像

 

ヘッダー画像はTwitterのなんばちゃんに描いていただいてます

www.misumisu0722blog.com

 

ヘッダーの上下の余白を消す

 

画像の上下の余白を消すのはこちら

blog.minimal-green.com

 

ちなみに

  • 背景画像を横幅いっぱいに
  • スマホでも見切れないようにする

 以上の2点は今までどのテーマの時でもうまくいったことがありません。。。

今回もだめでした。

どこかに何か原因があるのでしょうね。

 

 

それ以外の変更

 

少しでも表示速度をあげようと以下も変更しています

  • はてなスター非表示
  • 記事下の関連記事非表示
  • FBページの埋め込み/インスタグラムの埋め込み削除
  • サイドバーのレシピブログランキング表示削除

 

カエレバヨメレバカスタマイズ

 

カエレバ、ヨメレバのカスタマイズは以下のサイトのCSSを使用させていただいてます

happylife-tsubuyaki.hatenablog.com

 

aupayマーケットとdショッピングは非対応なため、aupayマーケットは[ .shoplinkwowma ]を、dショッピングは[ .shoplinkdocomo ] をそれぞれ4箇所に追記して使用しています

 

文字色はこちらにしました

.shoplinkwowma a{
    color:#dc5f36;
}
.shoplinkdocomo a{
    color:#cc0434; 
}

 

 

ブログタイトル文字について

 

 

ヘッダーのブログタイトルは今まで画像のみにしていました。

ですが、これだとタイトルで検索した時検索に乗らない、ということを知り、文字も表示させることにしました

 

以前は文字なし↓

f:id:misumisu0722:20210110184838j:plain

 

実はそれ以外にも問題がありまして。

つい最近、レシピブログさんでブログ紹介記事を書いていただいたんです。

s.recipe-blog.jp

 

で、この記事ですね、

なぜか私のブログタイトル「お砂糖みりんなし生活!ほっこりおうちごはん」を

ヘッダー画像内の文字「お砂糖みりんなしレシピほっこりおうちごはん」

と書かれてしまているんです

(レシピブログへの登録は「お砂糖みりんなし生活」になってるのでここを間違えるわけないと思ってしまってたんですよね。校正の時気づきませんでした)

 

どっちでも良いかと思ったので特に修正のご連絡はせずそのままにしていますが、

「ヘッダー画像の文字をブログタイトルと思われてしまう」

というのは(まあ考えてみると当たり前のことなのですが)自分では盲点でした。

 

というわけでヘッダーにブログタイトル文字も表示させるようにしています

 

現在はこちらです↓

これでもう間違えられないはず!

f:id:misumisu0722:20210110163753j:plain

 

 

まとめ

 

以上が今回の変更点です。

 

今回拘ったのはブログの表示速度を上げるため、軽いテーマでかつさほど変更せずともとっても可愛らしいもの

 

Haruniはとても可愛らしくて気に入ってます!

素敵なテーマをありがとうございました。

 

 

f:id:misumisu0722:20180531134733j:plain


スポンサードリンク


Hatena Instagram Youtube