みちのえきまにあ

CBR1000RRで道の駅巡りをしているまったりツーリングライダーのブログ

Twitter
Instagram
Youtube
About

見出しの○番目に特定の文字、画像、広告を表示させたい

はい、どうもよっしーです。今回はバイクの話ではなく、ブログカスタム系の話です。
デザインに拘りだすと、ブログ記事内の特定の位置に特定の要素を配置したくなりますよね?(語彙力)
今回はそれを実現するというお話です。

何がやりたいか

何がやりたいか整理します。
整理するほどでもないのですが、やりたいことは「2番目の見出し(h1要素)の直前に固定のテキスト(広告/バナー)を毎記事に表示させたい」ということです。

ただし、毎回ブログを書くときに2番目の見出しの前にテキストを入力するのは、面倒くさいしナンセンスです。
なので、勝手に表示されるようにします。

WordPressであればこういうことを実現するプラグインはある(あったと思う)ので簡単にできてしまいますが、はてなブログでは外部のプラグインを導入できません。
ただし、jsやcssでカスタムすることは可能なので、今回もjsを使って実現したいと思います。

埋め込むjavascript

さっそくですが、埋め込むjavascriptのコードはこちらになります。


簡単に解説

まず最初のif文

if (location.href.match(/michinoeki-mania\.com\/entry/)) {
...
}

この処理を実行するのはブログの記事だけですよ、ということをやっています。はてなブログの記事URLは {ドメイン}/entry/**** となるので、正規表現で条件作ってます。


続いてこの部分。

var j=new Date();
var f=j.getTime();

この部分では、この処理が実行された(ページが表示された)時点の時間を数値で取得してます。
(1970年1月1日 00:00:00 UTC からの経過時間をミリ秒単位で)

今回ので例では、ページを表示するたびに 5種類 のテキストを出し分けたいので、この数値を5で割った余りの値によって表示するテキストを決定しています。これが、後のswitch文です。
毎回同じテキストを表示するのであれば、この宣言と、あとのswitch文は不要です。

switch文は省略して、最後にこの部分。

var h="<div style='text-align:center;'>"+g+"</div>";
var a=document.getElementsByTagName("h1");
if (typeof(a[3]) != "undefined") {
    a[3].insertAdjacentHTML("beforebegin",h);
}

まず h には、実際に挿入するテキストを入れてます。この場合、画面中央に表示させたいのでdiv要素にstyleで中央寄せにしてます。
続いて2行目では、h1タグの要素を取得してます。
h1タグ自体は記事ページの中に複数あるので、aは配列になっています。
配列のindexは0始まりなので、2番目の見出しの要素は a[1] ...とやりたくなりますが、a[0]はブログタイトル、a[1]は記事タイトルとなっているので、記事内の見出しとしてはa[2]が1番目となります。

なので、a[3]に対して、直前にhを挿入します。

この要領で、毎記事の決まった場所に特定の要素を追加することが出来ます。

テーマによってはそのまま使えない?かもしれません

上で書いたjsは、公式テーマの Life(デフォルト)で動作確認したものです。
もしかすると他のテーマや、既にカスタムを施しているブログではうまく動かないかもしれないので、その場合は適宜修正してみてください。