意外と知らない、はてなブログカスタマイズの小ネタ10選
当ブログは「はてなブログ」を使っていて、オリジナルのテーマを利用しています。
カスタマイズ作業の中で「あ、こんな機能あったんだ」と気づくことや、Googleで探して見つけた便利なカスタマイズ方法もあります。
複数の方から同じ質問をされたこともあり、せっかくなので一度まとめてみました。
※現在記事執筆時の情報となります。更新時はその旨を追記します。
※レスポンシブデザインモード前提なので、「スマートフォン」設定では当てはまらない内容があるかもしれません。
※はてなブログの新機能については、 「はてなブログ開発ブログ - 新機能」で公式情報をチェックできます。
公式機能
アーカイブページに表示する本文は調整できる
特になにもせず記事を投稿すると、アーカイブページではこのように記事本文が表示されます。
記事の120文字程度が抽出されるのですが、この文章は、以下２通りの方法で調整する事ができます。
- 記事投稿画面「編集オプション / 記事の概要」に入力したものを表示
- 「続きを読む」を指定した場所より上の文章を表示
投稿画面の中にある「編集オプション」をクリック、その下の方に「記事の概要」という項目があります。ここに入力した文章が表示されます。
ちなみに上図は当ブログの実際の投稿画面です。「1.」が未入力かつ「2.」が空（画像のみ）になっているため、アーカイブページで記事本文は非表示になっています。（display:none; しているわけではありません）
SNSなどでシェアされた時に表示する記事の「タイトル」を変更できる
投稿画面の「編集オプション」の中に、「og:title (ソーシャルメディア向けタイトル)」という欄があり、ここで変更できます。
トップページと同じレイアウトのカテゴリーページが存在する
モジュール内に生成されたカテゴリー・アーカイブリンクをクリックすると、専用レイアウトのページに移動します。
しかし、URLを少し変更すると、トップページと同じレイアウトのページを表示することができます。
違いは、URL中の「archive/」の有無です。当ブログのメニューにも実際に活用しています。ちなみに今のところ、モジュールでこの表示を選択することはできません。
aboutページは管理画面から更新できる
「はてなID」などをクリックすると見られる「about」ページ。
実は管理画面から文章の追加などができます。
管理画面「設定 > 基本設定」の５段目に、「aboutページを編集」というリンクがあります。
タイトルの指定やモード選択までできて便利。当ブログでも活用しています。
ただしプレビュー機能はありません。また、URLの一番最後に「/」をつけるとエラーになってしまうので、リンク時には注意しましょう。
instagramはwebから埋め込みコードを引っ張ってきた方が良い
投稿ページのサイドバー内にも「Instagram貼り付け」機能はあります。
ですがこの機能で表示したiframeは高さが固定されていて、レスポンシブデザインモードのサイトをスマホで見ると大きな余白が生じます。
少々面倒ですが、PCからブラウザでinstagramにアクセスし、埋め込みコードを取得してコピペすると解決します。
まずinstagramにアクセスして、サイトに埋め込みたい投稿を探します。
投稿をクリックしたあと、（わかりづらいですが）右下の「…」アイコンをクリック、そして「埋め込み」を選択。
最後に「埋め込みコードをコピー」します。これを、HTML編集画面で投稿画面に貼り付けます。
こんな感じになります。
実際の投稿はこちら。スマホ表示も問題ありません。
目次記法は「見たままモード」でも使える
このブログでは見たままモードを利用しています。
はてな記法・Markdownモードでしか目次記法を使えないかと思っていたのですが、そんなことありませんでした。
ちなみにCSSで見た目を調整するといい感じ。こちらの記事などが参考になります。
カスタマイズ要、ちょっと難易度高い小ネタ
アーカイブページをトップページに変更できる（追記あり）
通常のトップページに比べると圧倒的に一覧性の高いアーカイブページ。
JavaScriptを活用すれば、それをトップページとして表示できるそうです。
実際に利用されている方のブログもよくお見かけします。
ただし、アーカイブページに表示される画像はサイズ120px固定&背景画像になっていて、アイキャッチ画像を活かす自由なカスタマイズをするのはけっこう大変です。（自分もあきらめました）
追記
はてなブログProを契約すれば、公式機能で切り替えられるようになりました。
ブログのトップページを「一覧形式」で表示できるようにしました（はてなブログPro） - はてなブログ開発ブログ
画像をクリックしても拡大しないようにできる
記事中の画像をクリック時に拡大表示する機能がデフォルトですが、HTMLモードなどで画像についているクラス（.hatena-fotolife）をとりのぞけば解除できます。でも、投稿済みの記事全てを編集し直すのは無理。
そこで当ブログでは、こちらのサイトに記載の対策用コードを利用させていただいています。
記事下に関連記事モジュールを表示できる（追記あり）
サイド用モジュールのひとつ、「関連記事の表示」。
１カラムテーマならまだ良いですが、そうでもなければ正直レイアウトが不自然です。
こちらの記事では、JavaScriptを利用して「関連記事」モジュールを記事下に移動する方法を紹介されています。当ブログも参考にしました。
ちなみに公式機能にこだわらないならば、個人的には見た目もクールなmilliardがおすすめです。
追記
公式機能で表示されるようになりました。
記事下に「関連記事」を表示します - はてなブログ開発ブログ
ロゴ画像の表示はsvgに差し替えられる
管理画面からヘッダー用画像（jpg、png、gif）を登録できますが、現状SVG画像は無理です。（ちなみにSVG画像を知らない方は、こちらが参考になります。「WEBデザイナーのはじめての「SVG」 - ウェブ企画ラボ」）
手間ですが、自前のサーバーにアップロードしてCSSで上書きすることで表示を差し替えられます。これでスマホでもPCでもきれいなロゴ画像が表示できます。
当ブログを例に出すと、以下の順序で表示させています。
他、サイズの指定なども必要ですので、以下環境・知識のある方はぜひお試しください。
まとめ
WordPressと比較すると拡張性が無いと捉えられがちなはてなブログですが、すくなくとも「見た目」だけであればCSSとJavaScriptで幅広くカスタマイズできます。
データベースの知識は不要だし、バックエンドの心配をしなくていいのは結構楽です。
そもそも「記事を書く」だけなら公式テーマもオシャレなものがたくさんありますし、誰でもとっつきやすいステキなサービスだと感じています。
以上です。他にもおもしろいネタを見つけたら追記していきます(｀・ω・´)
