超簡単にブログ記事内を線を引いて区切る方法

分ける

ブログ記事に線を引いて区切る方法。いわゆる区切り線を引く方法について書きます。

記事内だけでなく、たとえば広告とブログコンテンツを明確に分けるのにも使えます。

特に無料ブログを始めたばかりの方やワードプレス初心者向けの知識ですが、簡単で覚えておけばすぐに使えるのでぜひ参考にしてみてくださいね。

区切り線とは?

区切り線とは記事と記事の境目を付けて分かりやすくする表記法です。

区切り線を使う方法はとても簡単で、記事を書くときにテキストモード

<hr>

と入力するだけです。

終了タグも必要なく、ただ

<hr>

と書けば記事の端から端まで線が引けます。

↓実際にこんな感じになります。


区切り線の使い方【ブログ別】

無料ブログとWordPressを使っているブログでの区切り線の使い方をご紹介します。基本的にはどちらも同じです。

無料ブログ(ライブドアブログ)の場合

たとえば、ライブドアブログの場合はログイン後「記事を書く」を選び、テキスト内に<hr>と書くだけで区切り線が引けます。

ライブドアブログ

テキストが反映しているかの確認はプレビューで見るとわかります。

【プレビュー画像】

線

確かに線が引かれていますね。

ワードプレスの場合

ワードプレスの場合は自分のブログにログイン後、「投稿」→「新規追加」。

post-new.php (1)

「新規投稿を追加」の画面で「テキスト」を選びテキストモードにします。

後は記事内に

<hr>

と入力するだけです。

プレビュー画像

-p=4718 (1)

広告とコンテンツを分けるのにも使える

アドセンス広告の近くに画像やリンクがあるのは好ましくありません。近くにある場合は広告とコンテンツには間を開けたり、わかるように区切る必要があります。

僕の使っているテーマsimplicityの場合、記事上に広告を貼るときは広告コードの下に先ほどの区切り線タグを付けて分かりやすくします。

スポンサーリンク

Simplicityの場合(スマホ)

「外観」→「ウィジェット」→「モバイル用広告ウィジェット」を「投稿本文上」に持っていく→「広告タグ」に広告コードを貼り付け、最後に<hr>と入力する。

※<hr>の表記は大文字の<HR>でも問題ありません

widgets.php (1)

タグなのでテーマに関係なく、区切り線は使えます。

区切り線を装飾したい

線を引くだけでも良いのですが、できれば色を変えたり線のスタイルを変えてみたい。

そんなときは以下のタグを加えれば見た目も変化しますよ。

記事の幅よりも短い線を引く

<hr width="50%" >

※100%で記事と同じ幅の線。50%で記事の半分の長さの線になる。数値を変えれば長さも変わる。

%を数字にすると細かなサイズ指定ができる。例えば<hr width=”300″>にすると、一般的なサイズのスマホ幅に近くなります。

線の太さを変える

<hr size="15">


太さ15の線。

数値を変えれば太さも変わる。

線の色を変える

<hr color="#色のコード">

色のコードは原色大辞典を参考に。

線を右に寄せる

<hr align="right" width="200" />

サイズ200ピクセルの右寄りの線。

線を左に寄せる

<hr align="left" width="200" />

サイズ200ピクセルの左寄りの線。

線のスタイルを変える

合わせ技で、線を色付きで点線や二重線にしてみます。

区切り線を破線にする【dashed】

<hr style="border:1px dashed #ff0000">


ドット線にする【dotted】

<hr style="border:1px dotted #ff0000">


二重線にする【double】

<hr style="border-top: 4px double #2DC287; width: 100%; height: 3;" />


超簡単に区切り線を使う方法

ここまでのタグでたいていの区切り線は使えると思います。中には「こんなコードを覚える必要は無い」「めんどくさい」「時間がもったいない」という方もいると思います。

そんな方にはコチラの▶「区切り線タグ作成」サイトが便利です。

使い方は超簡単!区切り線の色やサイズ、位置を選ぶだけ。

【使い方の例】

tag

あとは作成ボタンを押せばHTMLコードを出力してくれるのでコピーしてブログに貼るだけです。

【使い方の例】

tag4.php (2) (1)

シンプルな区切り線ならこのサイトで十分でしょう。

もっと詳しいhrタグの装飾の仕方は以下の記事が参考になりますよ。

hr要素は罫線を表示させるもので、話題を変える時の目印となる区切り線などとして用いられます。どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばC
ここでは、いろいろなデザインの区切り線(水平線っても言われますね)のタグを初心者にも簡単に解るようにご紹介しています。他とはチョット違った区切り線(水平線)を使いたい(表示したい)と思っている方。宜しかったら、ご覧下さい。

区切り線の使い方 まとめ

コンテンツにメリハリをつけるには区切り線が大いに役立ちますね。

また、広告と記事との境目として使うことでまぎらわしさを減らすことができます。区切り線で装飾することでより読みやすく、読者目線のブログに仕上がると思いますよ。

区切り線を効果的に使いたい人はぜひ参考にしてみてくださいね。

スポンサーリンク



まだデータがありません。