どうも、月無ことのは(@tukinasikotonoh)です。
今回は最近僕が見つけたはてなブログのちょっとした見出しテクニックを紹介していきたいと思います。
本格的にはてなブログで記事を書き始めるようになったの10/8からなので、今日でちょうど1カ月になります。
「なにか新しいことを始めるときは先人の知恵を借りる」というのが僕のモットーなのでこの1カ月は色んな方のブログを参考にして、自分のブログ「月無ことのは日記」をカスタマイズしてまいりました。
日々、ブログのカスタマイズをしていると新しい発見がいくつもあって非常に面白いです。
僕は前職でHTMLやCSSといったwebページを作成するマークアップ言語を使用していましたが、これがとても苦手でした。
閉じタグを忘れるとエラーを吐くし、ChromeやFirefoxで表示が大丈夫だと思ってもIEやSafariで表示崩れを起こしたりなどマークアップ言語は苦労がいっぱいです。
ですが、はてなブログのカスタマイズは比較的簡単でグーグル検索をすれば誰でも簡単にブログのカスタマイズをすることが可能となっています。
今後もブログのカスタマイズには注力していくつもりですが、その中で得た知識をこのブログで皆さんに紹介していきたいと思います。
前置きが長くなりましたが、それでは「見出し部分のh3をh2へと一括で置換する方法」を紹介していきます。
↓目次
見出しをh2に置換する目的
はてなブログで1000を超える記事を作成したポジ熊さんのブログで上記の記事を見つけたのが今回のテクニックを模索することになった大きな要因です。
上記の記事でポジ熊さんはh2タグを使用することで下記の様なメリットがあると仰っていました。
読者が見やすい
検索エンジンが見やすい
引用元：ポジ熊の人生記
それまでは僕はてっきりはてなブログの「編集見たままモード」で使用される
「大見出し」はてっきり「h2タグ」だと勘違いしていました。
しかし、はてなブログでは「大見出し」を使用すると「h3タグ」が自動挿入される仕組みになっているのです。
また、はてなブログの記事内では記事タイトル部分がh1に該当します。
そして、そのまま記事を作成すると「h2タグ」をすっ飛ばして「h3タグ」が使用されてしまうのです。
これだとGoogle検索エンジンのbotが記事をスムーズに読みこんでくれない原因の1つとなってしまいます。
かといって、今まで作成した記事を全て手動で「h3からh2へと書き換える」のは相当な手間になってしまうと考えられます。
最初、上記のポジ熊さんの記事を読んだ時は「SEO効果有りそうだけど絶対手間だろうな～」と思い着手する気にはなりませんでした。
ポジ熊さんも記事内で下記の様に仰っていたのでどうにかしてこの方法を楽にすることができないかと考えました。
文字列変換ツール（フリーソフトなど）でhタグを一律変換とかできるのかな。わかりません...
引用元：ポジ熊の人生記
ですが、ここで前職のHTMLコーダー経験が役に立ったのです！
まずは記事HTMLのバックアップを取ろう
はてなブログを使っている人なら分かると思いますが記事作成のモードは大きく分けて3つ存在しています。
デフォルトでよく使用されるのが「編集見たままモード」ですね。
※今回は一例として下記の記事の見出しをh3からh2へと置換していきます。（僕が以前作成した記事ですね。）
今回の置換作業を実施する際は「HTML編集モード」を使用していきます。
これを「CTRL+A」で全選択。
その後に「CTRL+C」コピー。
テキストエディタにコピーして保存。
※バックアップファイルとなるので必ず保存しておきましょう。
今回使用したテキストエディタツール
今回の一括置換はwindows標準のメモ帳でもおそらくできますが、僕は使いやすさを重視して「秀丸」というテキストエディタを使用しています！
（軽いし使いやすいよ！）
置換作業開始
それではいよいよh3をh2へと置換していく作業の開始です。
記事のソースを貼りつけてエディタで保存をした後はキーボードの「CTRL＋R」を押しましょう。
すると秀丸エディタ内で下記画像の様なウィンドウが出現します。
- 検索の文字入力欄に→「h3」
- 置換の文字入力欄に→「h2」
このように入力した後は「全置換」のボタンを押します。
すると、貼りつけたソース内部の「h3」が全て「h2」へと一瞬で生まれ変わるのです！！こりゃ便利！！！
※今回は11個の見出しがあったので閉じタグの「h3」も合わせて合計22個のh3がh2と置換されています。
一括置換したソースをはてなブログに貼りつけ
今度はh2へと入れ替えたソースをはてなブログの「HTML編集モード」へと持っていきましょう。
先ほど同様に「CTRL+A」で全選択、「CTRL+C」でコピー。
これを該当記事の「HTML編集モード」へと貼りつけていきます。
※下記画像（1枚目）では分かりやすいように元からあったソースを消しています。
（事前にソースのバックアップを取るのが大事だよ！）
※貼り付けた後はプレビューモードを使って表示崩れが起きていないか確認するのが無難です。
問題無ければ「記事を更新する」ボタンを押します。
ビフォー＆アフター
上記画像のように見出しのデザインが全て変更されていれば作業は完了です。
※はてなブログで使用しているテンプレートによって見出しのデザインは異なるので、各テンプレート毎に「h2タグ」のCSSが存在しているか確認しておいてください！
これで「見出し部分のh3をh2へと一括で置換する方法」は完了となります。
自己流のやり方なので、解説部分で「分かりにくい！！」という部分などあればTwitterなどで気軽にお申し付けくださいませ。
※ちなみに僕はこれから今まで書いた記事を一括置換していく作業に入ります。（笑）
手作業よりは遥かに楽ですが、記事数が多い場合は音楽を聴きながら進めていくと良いでしょう！
それでは！
おわり。