【WordPress.com】CSS を追加して、横ラインにバリエーションをつける

WordPress.com のブログ等に CSS を追加して、横ラインにバリエーションをつける方法についての覚え書きです。

WordPress.com での、もっともベーシックと思われる横ライン・区切り線の入力方法

WordPress.com で区切り線を引くときに最もベーシックな方法だと私が思っているのは、以下のボタンをクリックする方法。このボタンをクリックすると、

【WordPress.com】ビジュアルエディタに「横ライン」ボタンが追加されている

最近、WordPress.com のビジュアルエディタに「横ライン」ボタンが追加されたようです。ただし、私の環境（mac の Firefox で WordPress.com の管理画面の言語設定「日本語」）だと、以下のように文字化けを起こしています。

そういうわけで、ここでは、この文字化けを直す方法についての覚書です。

文字を使って線を引く －中央に寄せる－

以下のようなものを記事に追加すると、

<p style="text-align: center; margin: 1.62em auto 3.25em;">- – - – - – - – - – - – - – - – - – - – - – - – - – - – -</p>
<p style="text-align: center; margin: 1.62em auto 3.25em;">*****************************************</p>
<p style="text-align: center; margin: 1.62em auto 3.25em;">★★★★★★★★★★★★★★★★★★★★★★★★★</p>
<p style="text-align: center; margin: 1.62em auto 3.25em;">—— ◇ —— ◇ —— ◇ —— ◇ —— ◇ —— ◇ ——</p>

文字を使った区切り線を中央寄せで引くことができます。

– – – – – – – – – – – – – – – – – – – – – – – – – – – – –

*****************************************

★★★★★★★★★★★★★★★★★★★★★★★★★

—— ◇ —— ◇ —— ◇ —— ◇ —— ◇ —— ◇ ——

参考

•  区切り線いろいろ

#2013

hr タグにグラデーションの背景を入れて、おしゃれな感じの区切り線を作成する

記事「Photoshop風インターフェイスで使いやすいCSSグラデーションのジェネレーター | コリス」で紹介されていた、

Ultimate CSS Gradient Generator – ColorZilla.com

#2013

横ライン・区切り線いろいろ

最終更新日：2016-05-02

横ライン・区切り線についての覚書です。

.

#2011