水平線の高さと幅を変更する

Jimdoの水平線て<hr>じゃないの?

Jimdoで水平線を挿入するときは、普通「新規項目を追加」から「水平線」を選択し、「スタイル」で色や線のスタイルを変更していると思います。

 

私もいつもそうしていて、ちょと線を太くしようと<hr>タグのCSSをいじりはじめたのですが、これが一向に反映されない。調べてみると、そもそもjimdoの水平線は<hr>じゃないじゃないですか!

 

ということで、Jimdoの水平線の正体はこれです。

div.hr
{
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-top-color: #ff0000;
    border-right-color-value: #ff0000;
    border-bottom-color: #ff0000;
    border-left-color-value: #ff0000;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    height: 1px;
}

divにborderを設定して水平線を表現していたのですね。

ちなみに上の例のスタイルは破線(dashed)で、色は赤(#ff0000)です。

 

試しにHTMLで直接<hr>を書いてみると、やはり別モノになります。

水平線の高さと幅をCSSで指定する

さて、スタイル付きの水平線を設置しようとしたとき、<hr>で書いておいてCSSでスタイルを指定する方法は多くのサイトで紹介されています。なので、ここはJimdo固有のdiv.hrのスタイルを変更することにします。

 

方針は次の通りとします。

  1. 色と線のスタイル(実線,点線,破線)は「スタイル」→「水平線」で決定する
  2. 水平線の高さと幅を「設定」→「ヘッダー部分を編集」のCSSで決定する

1の方は特に説明が要らないと思いますので、2だけ説明します。といっても、以下のコードを「ヘッダー部を編集」に書くだけです。以前の記事「CSSはどこに書く?」も参考にしてください。

<style type="text/css">
/*<![CDATA[*/
<!--
#content .hr,
#sidebar .hr
{
    border-bottom-width: 5px;
    width: 80%;
    margin:0 auto 0 auto;
}
-->
/*]]>*/
</style>

このCSSでは、線の高さ(太さ)を5pxにして、幅を80%に指定しています。

"#content .hr"と"#sidebar .hr"を分ければ、別々のスタイルを指定できます。

border-bottom-widthで水平線の高さを指定します。

widthは幅です。

marginを指定しているのは、中央寄せにするためです。普通の<hr>はwidthを指定するだけで中央寄せになりますが、Jimdoのdiv.hrではmarginを指定しないと左寄せになってしまいます。

 

結果はこの通りです。

どうやら破線の一つひとつの要素の幅や空白の幅はブラウザによる違いがあるようですが、概ね問題なく表示されます。

 

最初はどうなるかと思いましたが、なんとかなりました。たかが水平線ですが、調べてみると意外と発見がありますね。

 

ではまた~。