2016/1/272016/6/13ブログ運営0ブログ記事に線を引いて区切る方法。いわゆる区切り線を引く方法について書きます。記事内だけでなく、たとえば広告とブログコンテンツを明確に分けるのにも使えます。無料ブログを始めたばかりの方やワードプレス初心者向けの知識ですが、簡単で覚えておけばすぐに使えるのでぜひ参考にしてみてくださいね。まとめ区切り線とは?区切り線とは記事と記事の境目を付けて分かりやすくする表記法です。区切り線を使う方法はとても簡単で、記事を書くときにテキストモードで<hr>1<hr>と入力するだけです。終了タグも必要なく、ただ<hr>と書けば記事の端から端まで線が引けます。↓実際にこんな感じになります。無料ブログとWordPressを使っているブログでの区切り線の使い方をご紹介します。基本的にはどちらも同じです。無料ブログ(ライブドアブログ)の場合たとえば、ライブドアブログの場合はログイン後「記事を書く」を選び、テキスト内に<hr>と書くだけで区切り線が引けます。テキストが反映しているかの確認はプレビューで見るとわかります。確かに線が引かれていますね。追加」の画面で「テキスト」を選びテキストモードにします。後は記事内に<hr>と入力するだけです。広告とコンテンツを分けるのにも使えるアドセンス広告の近くに画像やリンクがあるのは好ましくありません。近くにある場合は広告とコンテンツには間を開けたり、わかるように区切る必要があります。僕の使っているテーマsimplicityの場合、記事上に広告を貼るときは広告コードの下に先ほどの区切り線タグを付けて分かりやすくします。Simplicityの場合(スマホ)「外観」→「ウィジェット」→「モバイル用広告ウィジェット」を「投稿本文上」に持っていく→「広告タグ」に広告コードを貼り付け、最後に<hr>と入力する。※<hr>の表記は大文字の<HR>でも問題ありませんタグなのでテーマに関係なく、区切り線は使えます。区切り線を装飾したい線を引くだけでも良いのですが、できれば色を変えたり線のスタイルを変えてみたい。そんなときは以下のタグを加えれば見た目も変化しますよ。>※100%で記事と同じ幅の線。50%で記事の半分の長さの線になる。数値を変えれば長さも変わる。%を数字にすると細かなサイズ指定ができる。width=”300′′>にすると、一般的なサイズのスマホ幅に近くなります。size="15">太さ15の線。数値を変えれば太さも変わる。color="#色のコード">色のコードは原色大辞典を参考に。/>サイズ200ピクセルの右寄りの線。/>サイズ200ピクセルの左寄りの線。線のスタイルを変える合わせ技で、線を色付きで点線や二重線にしてみます。/>超簡単に区切り線を使う方法ここまでのタグでたいていの区切り線は使えると思います。中には「こんなコードを覚える必要は無い」「めんどくさい」「時間がもったいない」という方もいると思います。そんな方にはコチラの▶「区切り線タグ作成」サイトが便利です。使い方は超簡単!区切り線の色やサイズ、位置を選ぶだけ。【使い方の例】あとは作成ボタンを押せばHTMLコードを出力してくれるのでコピーしてブログに貼るだけです。【使い方の例】シンプルな区切り線ならこのサイトで十分でしょう。詳しいhrタグの装飾の仕方は以下の記事が参考になりますよ。NxWorldhr要素は罫線を表示させるもので、話題を変える時の目印となる区切り線などとして用いられます。どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCwww.nxworld.net6.区切り線ここでは、いろいろなデザインの区切り線(水平線っても言われますね)のタグを初心者にも簡単に解るようにご紹介しています。他とはチョット違った区切り線(水平線)を使いたい(表示したい)と思っている方。宜しかったら、ご覧下さい。まとめコンテンツにメリハリをつけるには区切り線が大いに役立ちますね。広告と記事との境目として使うことでまぎらわしさを減らすことができます。区切り線で装飾することでより読みやすく、読者目線のブログに仕上がると思いますよ。区切り線を効果的に使いたい人はぜひ参考にしてみてくださいね。ブログタイトルは適当に付けてはいけません。いつものかつしたです。コメントをキャンセルメールアドレスが公開されることはありません。ファミコンの互換機としてはおすすめ。(51)プロフィールかつした:茨城県生まれつくば育ち。実際に購入したモノのレビューや気付きを記事にしています。@YoshizouM※ポストロジクスに対するご質問、お仕事の依頼、ご感想はお問い合わせよりお願いいたします。