ブログをとことんカスタマイズしてみました。最近変更したテーマ、Thumbnail(サムネイル)はアイキャッチが大きく表示しておすすめのテーマです。
目次
ブログをとことんカスタマイズしたよ
5月はブログのカスタマイズに時間をかけることが多かったです。
まだまだ絶賛カスタマイズ中ですが、はてなブログでカスタマイズしたことをまとめました。
2019.7.31追記
当ブログは現在WordPressで運用しております。
テーマをMinimalismからThumbnailに
ブログのテーマをMinimalismからThumbnailに変更しました。
ヘッダの画像も削除して、トップページ、記事ページともにがらりと変わりました。
【トップページ】
before
↓
after
【記事ページ】
before
↓
after
以前からテーマを変えたいなとは思っていて、この条件を満たすテーマがなかなかなくて、テーマを探すのに時間がかかりました。
- トップページがカード型であること
- 記事ページが1カラムであること
トップページをカード型にしたい
ブログの写真はなるべく綺麗なものを使うようにしています。
フリー素材を使うなら下の２つのサイトを使うことが多いです。
オーダンは特におすすめ。下の画像もオーダンから持ってきました。
しまむらの服のことを書いているのに写真がおしゃれっていう。
また、お花の写真をブログに載せることが多いです。
ブログでは画像を重視しているため、より画像が大きく表示されるカード型のテーマを探していました。
カード型のテーマは他にも
があります。
記事ページを1カラムにしたい
ずっと気になっていた右側のサイドバーのわちゃっと感。サイドバーは他の記事を探したりするときには便利だけど、記事を読むときには使用しませんよね。
他の記事を見てもらうためのメニューは、フッターや記事下に置けばいいわけだし、トップにはグローバルメニューもあるし。
1カラムのすっきり感に憧れ、1カラムのテーマを探しました。1カラムのテーマって本当に少ない。
他にもあるのかもしれませんが、今は2カラムが主流のようですね。
そんなわけでこの２つの条件を満たした、Thumbnail - テーマ ストアをインストールすることになったわけです。
グローバルメニューにfontAwesomeを導入
グローバルメニューは以前のテーマMinimalism導入時に、下の記事を参考にカスタマイズしたもの。
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
グローバルメニューは問題なく導入できたものの、fontAwesomeのアイコンがことごとく読み込めなかったです。なぜか私の環境ではツールのスパナアイコンしか表示できませんでした。
スパナ以外なぜか□で表示されるの、文字化け？
そのため一時はアイコンが全部スパナでした。いや何かしらアイコンはあったほうが可愛いかと思って。いろいろ調整した結果、以下のHTMLを追加したらグローバルメニューでfontAwesomeのアイコンが使えるようになりました。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
設定→詳細設定→headに要素 より追加
参考にしたのはこちらの記事です。
【アイコン】はてなブログで「Font Awesome」をサクッと使う方法 - オークニズム
シェアアイコン
丸型のアイコンはこの記事を参考に
おしゃれなシェアボタンをCSS＆Webフォントで作ってみた【はてなブログのPC＆スマホ用】 - 技術を磨くだいぱんまん
アイコンのグラデーションはこの記事を参考に、カスタマイズしました。
この記事が気に入ったらフォローをグラデーションなカード型にカスタマイズ - 宇宙時代より（旧）
シェアアイコンでもfontAwesomeを使っています。シェアアイコン用に下のHTMLをheadに追加しました。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
設定→詳細設定→headに要素 より追加
先ほどグローバルメニューのところでfontAwesomeの話をしましたが
私の環境では２つのHTMLをheadに追加しないとうまく動きませんでした。
【グローバルメニュー用】
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
【シェアアイコン用】
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
なぜだ・・・。fontAwesomeは便利だけどやっぱり苦手だなとも思います。
アドセンスの広告の位置変更
グーグルアドセンスの広告の位置ですが
- 2つ目のh2タグの前
- 記事下
の2つに絞りました。○個目のh2タグという指定をするために、下のサイトを利用させていただきました。どうもありがとうございます。
【本当にコピペ一発！】はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ
フォントタイプを游ゴシックに
フォントタイプを游ゴシックに変更しました。
body {
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
ヘッダ画像を削除→ブログ名の変更
突然ですがブログ名を変更しました。
旧：めんつゆの学習帳
新：tsuyu-note
ブログ名変更に至った理由
ヘッダ画像を使いたくなかったからです。過去にこんな記事を書いているくらいですから、以前はばりばりヘッダ画像を使っていました。
canvaでヘッダ画像のテンプレートを作ってみた【はてなブログ】 - tsuyu-note
ではなぜヘッダ画像を使いたくない、と思ったかといいますと。
皆さんは自分のブログの読み込み時間を測ったことはありますか？
私は恥ずかしながら今までありませんでした。
最近このサイトを使って初めて測ってみました。
スコアは100点満点で
0〜49（遅い）：赤
50〜89（平均）：オレンジ
90〜100（速い）：緑色
だそうです。モバイル、パソコン両方のスコアが表示されます。
ちなみにAmazonのモバイル版はこんな感じでした。
私のサイトはモバイル版 19という恐ろしい数字をたたき出しました。ショック。
(すみません、スクリーンショットはとり忘れました。)
試しに
【イエベ秋】手持ちのリップ全部つけてみた - tsuyu-note
をiPhoneで、WiFiではなく4G環境下で開いてみましたが、画像の読み込みにすごく時間がかかりました。というより途中で開くのを諦めました。こんなに待たせていたなんて本当に申し訳ないです。
これではまずいと思い
- よく読まれる記事の画像の圧縮、再アップロード。
- スライダーの削除(この記事を参考に導入しましたが、残念)。
- はてな公式のソーシャルボタンの削除(はてなスターは残しました)。
- 広告の数を減らす。
- トップページに表示するページ数を9から6に減らす。
を実施しましたが改善されませんでした。あとできることといえばヘッダ画像の削除くらい。ちなみにこのときは下のヘッダ画像を設定していました。
ヘッダ画像にブログ名を入れていましたが、画像にブログ名を入れてヘッダ画像として使用すると、モバイル版で文字がぼけることが、以前から気になっていました。そこで思い切ってヘッダー画像を削除することにしました。
上の画像をヘッダに設定してiPhoneで見るとこうなります。
少し画像を加工しましたが、ヘッダを削除すると確かこんな感じでした。
「めんつゆの学習帳」の文字と、下のサムネイルがあっていない気がしてすごく違和感を感じました。
ヘッダタイトルにGoogleフォントを使うことも検討しましたが(というより一時期使っていた)、あまり好きなフォントがありません。私が日本語フォントで好きなのは、うずらフォントのような手書き感のある文字です。
そこで愛着のあったブログ名でしたが、変更するに至りました。
ブログ名変更後にしたこと
ブログ名変更後の処理に関しては下のブログを参考にしました。
ブログの名前（タイトル）を変えた場合のGoogleサーチコンソールとアナリティクスの設定 | ぷちっとプラス
ブログ名変更後にブログへの再クロールを依頼するわけですが、再クロール依頼のための「Fetch as Google」は旧サーチコンソールの機能のようです。新しいサーチコンソールで再クロールを依頼する方法は、下の記事がわかりやすかったです。
新しいサーチコンソールで"Fetch as Google"を利用するには？ | キーワードファインダー
昨日の夜再クロールを依頼して、今朝には新しいブログ名に変わっていました。さすがグーグルさん仕事が早い。
まとめ
- ブログをカスタマイズして綺麗に見せたい、便利な機能を追加したい。
- 読み込み速度を改善して読者にストレスを感じさせたくない。
という２つの要素は相反していますが、どちらもブログを運営する上で大事な要素だと思います。この2つの要素の落としどころを見出したいがために、いろいろ模索した結果、この記事にまとめた方法で落ち着きました。
ブログの読み込み速度についてですが、今はなんとかスコアが30まで上がりました。でもまだまだなので、これからも改善していきたいです。
パソコンは基本的に70以上のスコアで、すごく早くはないけど問題はなさそうです。
もし「このページの読み込み、すごく遅いんだけど」とかありましたら、フッターのお問い合わせより連絡をいただけると嬉しいです。