WordPress Habakiriでページ内に区切り線を引く
Habakiriに限った話ではないと思いますが区切りブロックや カスタムHTMLで<hr>を入力しても横線が表示してくれません。いろいろググッてみるとどうやらhrでなくborderを使う方がいいようです。ただ、以下の書き方はちょっとベタな書き方かもしれません。
まず端から端までの横線を描くためにstyle.cssに以下のコードを追記します。管理画面から[外観]->[テーマエディター]で編集してもOKです。
p.sepbar {
border-bottom: 1px solid red;
}
で、ページ編集に戻り横線を引きたいところにカスタムHTMLブロックを追加して以下を記入します。
<p class="sepbar"> </p>
とすると、こうなります。
でも、ちょっと余白がほしいですよね。で左右に80pxの余白を付けたいと思います。
また、style.cssに以下を追記します。
.rl_margin {
margin-left:80px;
margin-right:80px;
}
ページ編集に戻って余白のある横線がほしいところにカスタムHTMLで以下を書きます。
<div class="rl_margin"><p class="sepbar"> </p></div>
でプレビューで見てみると以下のようになります。
また、もう少し綺麗な方法がわかったら編集していきます。
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント