アメブロの記事中に画像を使った区切り線を表示する

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロの記事中に区切り線を入れたい場合、<hr>をいうHTMLタグを記述することで簡単に区切り線を引くことができます。

ただ、残念ながら、カスタマイズされていない<hr>タグは飾り気のない単なる線ですので、ブログの雰囲気に合わず使いにくいという方もおられるかと思います。

そこで今回、この<hr>タグを、好みの画像を使った区切り線へとカスタマイズする方法をご紹介します。

なお、本カスタマイズは、新デザイン(CSS編集用デザイン)、旧デザイン(【カスタム可能】ベーシック)両対応になっています。

では、実際のやり方です。

記事中に書いた<hr>タグを、画像を使った区切り線にカスタマイズするには、ユーザーCSSの末尾に以下のように記述します。

.articleText hr, .entry .contents hr {
  height: ??px;
  border: 0 none;
  background-repeat:repeat-x;
  background-image:url(画像のURL);
}

??pxの所には区切り線用画像の高さを、画像のURLには区切り線用画像のURLを指定してください。

例えば、こちらの素材サイトライン用画像として公開されている、

(http://sora.poche.jp/angel/v89.gif、高さ14px)
↑こちらの画像を区切り線に使うには、ユーザーCSSの末尾に以下のように記述します。

.articleText hr, .entry .contents hr {
  height: 15px;
  border: 0 none;
  background-repeat:repeat-x;
  background-image:url(http://sora.poche.jp/angel/v89.gif);
}

となります。

これにより、記事中に<hr>と記述すると、表示は、↓こんな感じになります。


また、他の画像を使った区切り線も使いたい場合は、hrタグにクラス名を設定するといいでしょう。

(http://hana.poche.jp/angel66l/li24.gif、高さ14px)
例えば、↑こちらの画像をline1というクラス名で区切り線に使うには、ユーザーCSSの末尾に以下のように記述します。

.articleText hr.line1, .entry .contents hr.line1 {
  height: 14px;
  border: 0 none;
  background-repeat:repeat-x;
  background-image:url(http://hana.poche.jp/angel66l/li24.gif);
}

という具合に設定します。

そして、記事中で使うときは、hrタグにクラス名を指定して<hr class=”line1″>と記述します。
すると、表示は↓このようになります。


なお、これらの設定は、ユーザーCSSに書かずに<hr>タグのstyle属性として直接記事中に書くことも可能です。

(http://sora.poche.jp/angel/v78.gif、高さ8px)
例えば、↑こちらの画像を<hr>タグのstyle属性に直接スタイルを記述する方法で区切り線に使うには、記事中に

<hr style="height:8px;border:0 none;background-repeat:repeat-x;background-image:url(http://sora.poche.jp/angel/v78.gif);">

のように記述すればOKです。

すると、↓このように表示されます。


なお、この最後の方法は、区切り線のタグを書くたびにスタイル設定も同時に書く必要があり面倒ですが、例えばスマホ(モバイルモード)でも区切り線を画像で表示したいときなどは、この方法しか使えませんので、検討の価値があると思います。

以上、アメブロの記事中に画像を使った区切り線を表示するカスタマイズ方法をご紹介しました。

もしよかったら試してみてくださいね。

関連記事

アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ

アメブロカスタマイズで人の集まるブログ作り