こんにちは、永松です。はてなブログを使っていて、一番悩むことって、ブログテーマではないでしょうか。
はてなブログには、公式テーマと、はてなユーザーが制作した非公式テーマがあります。非公式テーマには、オシャレなデザインなものが多く、目移りしていませんか。
悩み過ぎて疲れていませんか。私もその一人です。
ブログは記事を書いてこそ、価値がありますし、楽しいので、ブログテーマ選びに時間をかけ過ぎることは賢明ではありません。
そんなあなたには、最新の公式テーマ「 Smooth 」をおすすめします。
Smoothをおすすめする3つ理由と、おすすめのカスタマイズ事例を紹介します。
はてなブログテーマ選びで疲れている方の参考になれば、幸いです。
Smoothをおすすめする3つの理由
デザインがシンプルで読みやすい
ブログで最も大切なのは、読者が文字を読みやすいことです。
次は、Smoothの記事本文の画像（PC、スマホ）です。
目次の大きさ、見出しや本文の文字サイズ、行間、フォント種類、全体のレイアウトと、すべてにおいて見やすいと思いませんか。
文字サイズが小さ過ぎたり、行間が狭すぎて、読みづらいことは多々あります。また、「なんか、文字を見ていると不快だなー」ということもあります。
はてなブログは「書くこと」、「読まれること」に注力しているブログサービスです。そのため、最新の公式テーマSmoothでは、その点を考慮した作りになっています。
カスタマイズしやすい
ブログを作ったら、あなたと、あなたの想定読者が好むレイアウトにカスタマイズしたいですよね。
非公式テーマや、公式テーマでも過去のものは、ある意味、制作者の色に染まっています。
その点、Smoothでは白、黒、グレー、緑（リンク色）を基本としたシンプルなものです。色やパーツのカスタマイズ次第で、簡単にあなた色に染めることができます。
Smooth以外の公式テーマでは、レスポンシブデザインに対応している、Life、Evergreen等もカスタマイズしやすいです。
不具合が起こりづらい
公式テーマを使う一番のメリットが、不具合が起こりづらいことです。
当然ですが、はてなユーザーの多くが、公式テーマを利用していますので、慎重に制作されていると思います。
一方、非公式テーマだと、使用しているテーマに不具合があっても、対応されるかどうかは制作者次第です。カスタマイズで自力で解決できれば良いですが、そうでない場合もあります。
特に、注意しておきたい不具合は、Google検索エンジンにインデックスされないことです。
簡単に言うと、検索エンジンであなたの記事が表示されない、ということです。
インデックスされない理由は様々な要因があり、その一因として、ブログテーマの作り方（コードの書き方）も影響する場合があります。
検索からのアクセスも期待する場合は、この不具合が生じると致命的です。
確認方法は、無料ツール Google Search Console で簡単にできます。
検索パフォーマンスでページのURLを入力します。下記のように、「URLがGoogleに登録されていません」だと、何らかの理由でインデックスされていません。
インデックスされると、「URLはGoogleに登録されています」と表示されます。
これは、Google Search Consoleに登録していないと確認できないため、ぜひ、ツールの導入を検討しておきましょう。
Smoothのおすすめのカスタマイズ事例
私は、Google検索エンジンを意識したカスタマイズを実施しています。
「 SEO対策で重要！サーチコンソール「CLSに関する問題」の原因と対処法 」で紹介したように、今後、Google検索では、ユーザーの使いやすさも検索順位に影響するようになります。具体的には、読込スピード、応答性、視覚的安定性です。
「 PageSpeed Insights 」で読込スピードを調べると、トップページの現時点でのスコアは、モバイル54、パソコン84でした。
トップページの表示形式を「一覧形式」に
はてなブログPro 限定ですが、詳細設定から、記事の表示形式を「全文形式」と「一覧形式」から選択できます。
一覧形式を選択すると、ブログ内、検索エンジン、SNS等で、あなたが設定した記事の概要（メタディスクリプション）が表示されます。
全文形式を選んだ場合は、この記事でいうと、「こんにちは、永松です。・・・」と冒頭に書いた文章の一部が表示されます。
メタディスクリプションに適切な概要を設定しておくと、記事のクリック率が上がります。冒頭の文章だと、内容がわかりませんしね。
メタディスクリプションは、編集画面の右サイドバー「記事の概要」に記入しましょう。文字数は、最近のモバイル優先を考慮すれば、80文字程度が良いと思われます。
記事一覧のサムネイルとはてなスターの非表示
記事一覧にサムネイル（画像）と、はてなスターがデフォルト設定では表示されています。
サムネイルはあった方がクリックされやすい可能性もありますが、読込スピードを優先して非表示設定にしました。
カスタマイズ方法は、デザインCSSに下記のコードを入力するだけです。
サムネイルの非表示は、次の通りです。
.entry-thumb {
display:none;
}
はてなスターの非表示は、次の通りです。
.star-container {
display:none;
}
ちなみに、最新記事と注目記事のサムネイルもサイドバーのパーツで、非表示に設定しています。これでかなり読込スピードが上昇します。
メニューバー&トグルメニューの設置
ユーザーの使いやすさを考え、おすすめしたいカテゴリーについて、PC表示はメニューバー、スマホ表示はトグルメニュー（開閉タイプ）にカスタマイズしました。
スマホ表示において、メニューバーではなく、トグルメニューにすると若干読込スピードが上昇します。
カスタマイズ方法は、「 コピペ１発+αではてなブログスマホ画面にトグルメニューをつけるカスタマイズ 」で解説されています。色は変更しています。
ヘッダーに入力するコードのうち、Jqueryの部分「http://code.jquery.com/jquery-1.9.1.min.js」は、最新のものを調べて差し替えましょう。「http:」部分は不要です。
//code.jquery.com/jquery-3.5.1.min.js
［2020.6.19時点］
SNSシェアボタンをカスタマイズ
既存のSNSシェアボタンは、数値も計測されるタイプのため、やや読込が遅いです。また、デザインも似たりよったりになります。
そこで、ちょっとお洒落に読込が速いものにカスタマイズしました。
「 コピペで簡単！はてなブログのSNSシェアボタンをカスタマイズ 」で解説されています。コピペで簡単にできるので、ぜひ試してみましょう。
まとめ
はてなブログのテーマで悩んでいましたら、公式サイトSmoothがおすすめです。
ブログは書いてこそ価値があります。テーマ選びには悩み過ぎずないようにしましょう。