読者です 読者をやめる 読者になる 読者になる

LOGzeudon

名古屋で働いているWebデザイナーのブログです

意外と知らない、はてなブログカスタマイズの小ネタ10選

デザイン

当ブログは「はてなブログ」を使っていて、オリジナルのテーマを利用しています。

カスタマイズ作業の中で「あ、こんな機能あったんだ」と気づくことや、Googleで探して見つけた便利なカスタマイズ方法もあります。
複数の方から同じ質問をされたこともあり、せっかくなので一度まとめてみました。

※現在記事執筆時の情報となります。更新時はその旨を追記します。
※レスポンシブデザインモード前提なので、「スマートフォン」設定では当てはまらない内容があるかもしれません。
※はてなブログの新機能については、 「はてなブログ開発ブログ - 新機能」で公式情報をチェックできます。

公式機能

アーカイブページに表示する本文は調整できる

特になにもせず記事を投稿すると、アーカイブページではこのように記事本文が表示されます。

アーカイブページの表示サンプル

記事の120文字程度が抽出されるのですが、この文章は、以下2通りの方法で調整する事ができます。

  1. 記事投稿画面「編集オプション / 記事の概要」に入力したものを表示
  2. 「続きを読む」を指定した場所より上の文章を表示

記事の概要の場所

投稿画面の中にある「編集オプション」をクリック、その下の方に「記事の概要」という項目があります。ここに入力した文章が表示されます。

当ブログの実際の投稿画面

ちなみに上図は当ブログの実際の投稿画面です。「1.」が未入力かつ「2.」が空(画像のみ)になっているため、アーカイブページで記事本文は非表示になっています。(display:none; しているわけではありません)

SNSなどでシェアされた時に表示する記事の「タイトル」を変更できる

投稿画面の「編集オプション」の中に、「og:title (ソーシャルメディア向けタイトル)」という欄があり、ここで変更できます。

高度なタイトル設定の場所

staff.hatenablog.com

トップページと同じレイアウトのカテゴリーページが存在する

モジュール内に生成されたカテゴリー・アーカイブリンクをクリックすると、専用レイアウトのページに移動します。

通常のアーカイブページ

しかし、URLを少し変更すると、トップページと同じレイアウトのページを表示することができます。

トップページと同じレイアウトのアーカイブページ

違いは、URL中の「archive/」の有無です。当ブログのメニューにも実際に活用しています。ちなみに今のところ、モジュールでこの表示を選択することはできません。

aboutページは管理画面から更新できる

「はてなID」などをクリックすると見られる「about」ページ。
実は管理画面から文章の追加などができます。

staff.hatenablog.com

管理画面「設定」のスクショ

管理画面「設定 > 基本設定」の5段目に、「aboutページを編集」というリンクがあります。

管理画面「aboutページ編集」のスクショ

タイトルの指定やモード選択までできて便利。当ブログでも活用しています。

ただしプレビュー機能はありません。また、URLの一番最後に「/」をつけるとエラーになってしまうので、リンク時には注意しましょう。

instagramはwebから埋め込みコードを引っ張ってきた方が良い

投稿画面から「Instagram貼り付け」した時の様子

投稿ページのサイドバー内にも「Instagram貼り付け」機能はあります。
ですがこの機能で表示したiframeは高さが固定されていて、レスポンシブデザインモードのサイトをスマホで見ると大きな余白が生じます。

少々面倒ですが、PCからブラウザでinstagramにアクセスし、埋め込みコードを取得してコピペすると解決します。

PCブラウザからアクセスしたInstagram

まずinstagramにアクセスして、サイトに埋め込みたい投稿を探します。

「埋め込み」と「キャンセル」の選択肢

投稿をクリックしたあと、(わかりづらいですが)右下の「…」アイコンをクリック、そして「埋め込み」を選択。

埋め込みコードのコピー画面

最後に「埋め込みコードをコピー」します。これを、HTML編集画面で投稿画面に貼り付けます。

ブログ「こがねとてっぺい」で実際に投稿した状態のスクショ

こんな感じになります。
実際の投稿はこちら。スマホ表示も問題ありません。

目次記法は「見たままモード」でも使える

staff.hatenablog.com

このブログでは見たままモードを利用しています。
はてな記法・Markdownモードでしか目次記法を使えないかと思っていたのですが、そんなことありませんでした。

ちなみにCSSで見た目を調整するといい感じ。こちらの記事などが参考になります。

www.yukihy.com

カスタマイズ要、ちょっと難易度高い小ネタ

アーカイブページをトップページに変更できる

通常のトップページに比べると圧倒的に一覧性の高いアーカイブページ。
JavaScriptを活用すれば、それをトップページとして表示できるそうです。

dokuwohaku.hateblo.jp

実際に利用されている方のブログもよくお見かけします。
ただし、アーカイブページに表示される画像はサイズ120px固定&背景画像になっていて、アイキャッチ画像を活かす自由なカスタマイズをするのはけっこう大変です。(自分もあきらめました)

画像をクリックしても拡大しないようにできる

記事中の画像をクリック時に拡大表示する機能がデフォルトですが、HTMLモードなどで画像についているクラス(.hatena-fotolife)をとりのぞけば解除できます。でも、投稿済みの記事全てを編集し直すのは無理。
そこで当ブログでは、こちらのサイトに記載の対策用コードを利用させていただいています。

psn.hatenablog.jp

記事下に関連記事モジュールを表示できる

サイド用モジュールのひとつ、「関連記事の表示」。
1カラムテーマならまだ良いですが、そうでもなければ正直レイアウトが不自然です。

こちらの記事では、JavaScriptを利用して「関連記事」モジュールを記事下に移動する方法を紹介されています。当ブログも参考にしました。

www.dreamark.tokyo

ちなみに公式機能にこだわらないならば、個人的には見た目もクールなmilliardがおすすめです。

corp.shisuh.com

ロゴ画像の表示はsvgに差し替えられる

管理画面からヘッダー用画像(jpg、png、gif)を登録できますが、現状SVG画像は無理です。(ちなみにSVG画像を知らない方は、こちらが参考になります。「WEBデザイナーのはじめての「SVG」 - ウェブ企画ラボ」)

手間ですが、自前のサーバーにアップロードしてCSSで上書きすることで表示を差し替えられます。これでスマホでもPCでもきれいなロゴ画像が表示できます。

当ブログを例に出すと、以下の順序で表示させています。

  • 自前のサーバーにlogo.svgをアップロード、アクセスできる状態に
  • 適当な画像をヘッダー登録しておく
  • デザインCSSに上書き用コードを追記

他、サイズの指定なども必要ですので、以下環境・知識のある方はぜひお試しください。

  • SVG画像がつくれて、CSSで表示変更できる
  • 自前のサーバーを持っている

まとめ

WordPressと比較すると拡張性が無いと捉えられがちなはてなブログですが、すくなくとも「見た目」だけであればCSSとJavaScriptで幅広くカスタマイズできます。
データベースの知識は不要だし、バックエンドの心配をしなくていいのは結構楽です。

そもそも「記事を書く」だけなら公式テーマもオシャレなものがたくさんありますし、誰でもとっつきやすいステキなサービスだと感じています。

以上です。他にもおもしろいネタを見つけたら追記していきます(`・ω・´)