【はてなブログ】記事冒頭に自動的に挨拶文を挿入する

↑これ

よく記事の冒頭でこうした挨拶文を挿入しているブログを見かけます。

私もやってみようと思ったのですが、すべての記事を編集するのは大変な手間なので定型文の挨拶を自動挿入することにしました。

手順

①挨拶文の作成

まず始めに肝心の挨拶分を作りましょう。

デザイン設定から【ヘッダ】に挨拶文のコードを記入します。

例えば私のケースではこんな感じ。

<p id="greeting-message">こんにちは。カタミチ（<a href="https://twitter.com/katamichi2h" target="_blank">@katamichi2h</a>）です。</p>

pタグで囲って、idを振っておきます。

TwitterのIDとリンクも付けてみました。

②デザインの設定

次に【デザインCSS】あたりにCSSを記入します。

#top-editarea > #greeting-message{
    display:none;
}
#greeting-message{
    margin-bottom:30px;
}

ヘッダの挨拶分は非表示にしたいので「display:none;」を設定しています。

「margin-bottom:30px;」はなくても構わないですが、挨拶文の下に少し余白を作りたいと思い設定しました。好みです。

③Javascript

後はこれを記事の先頭に挿入してやるだけです。

【フッタ】など、場所はどこでも良いですがJavascriptのコードを書いているところにまとめると良いでしょう。

▼こんな感じです。

<script>
var article = document.getElementsByClassName("entry-content");
if(article.length > 0){
    var pEls = article[0].getElementsByTagName("p");
    if(pEls.length > 0){
        pEls[0].before(document.getElementById("greeting-message").cloneNode(true));
    }
}
</script>

私の場合には、記事の先頭にアイキャッチ画像を配置することが多いです。

挨拶文はアイキャッチ画像の下に来てほしいので、記事の先頭が画像であればその下に挨拶文を挿入するようにしました。

▼先頭の画像の下に来るようにするにはこんな感じ。

<script>
var article = document.getElementsByClassName("entry-content");
if(article.length > 0){
    var pEls = article[0].getElementsByTagName("p");
    if(pEls.length > 0){
        $("#greeting-message").show();
        if(pEls[0].getElementsByTagName("img").length === 0){
            pEls[0].before(document.getElementById("greeting-message").cloneNode(true));
        }else{
            pEls[1].before(document.getElementById("greeting-message").cloneNode(true));
        }
    }
}
</script>