東京より愛を込めて。

知識・経験の棚卸

【随時更新】はてなブログの忘備録

はてなブログを使う際に、「これってどうやればいいんだろう?」って思うことが多々あります。
調べればすぐ出てくるのですが、その都度いちいち調べるのも手間なので、ここに備忘としてまとめておきます。
同じような疑問を持たれた皆さんのお役に立つことを願って。

なお、ここでは「はてなブログPro」に登録しており、編集モードとして「Markdownモード」を選択していることが前提です。

設定

Google Adsense

はてなブログに、Google Adsenseを設置したいときの忘備録。
詳細な説明に関しては、はてなブログのヘルプに譲ります。

申請 help.hatenablog.com 設置 help.hatenablog.com

Font Awesomeの設定

Font Awesomeの設定をしておくと、様々なアイコンをブログや記事内で使うことができます。
とても使い勝手がよく、僕の場合はグローバルメニューのアイコンや、見出しのアイコンなどに使ったりしています。

ブログ本文中に記載するのであれば、例えばこんな感じに書き込むと、

<i class="far fa-comment-alt"></i>

見た目がこうなります。

使い方はいたってシンプルで、Font Awesomeから使用したいアイコンを探し、HTMLをコピーし、記事編集画面にペーストするだけ。
下記のアイコン一覧を見ていただくとわかる通り、Freeだけでも1,500アイコンあります。 fontawesome.com

ただ、その前提として設定が必要になります。
具体的には、「設定」→「詳細設定」→「検索エンジン最適化」→「headに要素を追加」に、下記のコードを埋め込みます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

ここで、Font Awesome 5には"Web Fonts & CSS"と、"SVG & JS"の2つのフレームワークがありますが、デザインのカスタマイズで参照させていただいているコードがFont Awesome 5以前のバージョン(="Web Fonts & CSS")を前提に作られているので、"Web Fonts & CSS"の方のコードを埋め込んでいます。
デザインのカスタマイズについては、下記の記事ご参照。 www.kaido-hajime.com

記事作成

画像を一度に複数アップロードする

はてなブログでは、「はてなフォトライフ」を使用して、画像を投稿します。(外部の写真共有サービスの利用を除く。)
そして、画像の投稿方法には、主に以下の2つがあります。

  1. 記事編集画面から、画像をアップロードして貼り付ける。
  2. 「はてなフォトライフ」にアップロードした写真から選択して貼り付ける。

数枚の画像を投稿したい場合は、どちらでも大差はないですが、大量の画像を投稿したい場合には効率的な方法があります。

PCのフォルダから、画像ファイルを記事編集画面や編集サイドバーに直接ドラッグ&ドロップして貼り付けることもできます。 複数の画像ファイルを一度にドロップすると、順にアップロードされ、すべて貼り付けることができます。

記事に写真や画像を貼り付ける(編集サイドバー「写真を投稿」) - はてなブログ ヘルプ

この方法でないと、ひとつひとつ画像を参照してアップロードしていかないといけなくなるので、相当めんどくさくなる。なので、アップロードはこのドラッグ&ドロップの方法をが最適です。

画像をフォルダ別で管理したい場合
記事編集画面からアップロードした画像は、デフォルトで「Hatena Blog」フォルダへアップロードされます。少々の画像であれば問題ありませんが、例えば旅行の写真をアップロードする場合、旅先別にフォルダを分けられると管理が楽ですよね。
そんな時は下記の方法でアップロードしていくと、後々の管理がスムーズにいきます。

  1. 「はてなフォトライフ」で画像をアップロードしたいフォルダを作成する。
  2. 記事編集画面サイドバーの「写真を投稿」からアップロードする際に、アップロード先フォルダを選択して実行する。

なお、「はてなフォトライフ」の使い方については、下記をご参照ください。 help.hatenablog.com

Google Mapを埋め込む

記事の中に、説明のため特定の場所を示したGoogle Mapを埋め込むこともあると思います。
そんな時、下記の方法でやれば、ルートを表示した上で埋め込んだりもできるので便利です。

  1. Google Mapで、埋め込みたい場所を検索する。
  2. 「メニュー()」→「地図を共有または埋め込む」→「地図を埋め込む」と開いていく。*1
  3. サイズを選択し、HTMLをコピーする。
  4. 埋め込みたい箇所にペーストする。

こんな感じです

記事のテンプレートから作成

記事を書く際に、僕はテンプレートを使っています。記事の構成や流れについて、あらかじめ下書きに作っておきます。そしてあとはそれをコピーして作っていくだけ。
具体的には、「設定」→「記事の管理」→「下書き」→「編集」→「コピーして新しい記事を書く」という流れで。
テンプレの下書きについても、適時更新して「下書きを更新する」を実行すればどんどんパワーアップしていきます。

*1:ここでは、「共有()」→「地図を埋め込む」でも可能ですが、ルートを表示した上で埋め込む際には選べません。