まずワードプレスに新エディターから旧エディターに戻す
TinyMCE Advancedをインストールしてクラシックエディターにしましょう。
分からない場合は下記を参考に進めてください。
-
ワードプレス道 「機能編」記事の強調部分に下線と背景色の設定方法!!
続きを見る
目次
落ち着いたボックス
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
1 2 3 4 5 6 7 8 9 |
<div style="padding: 0.5em 1em; margin: 2em 0; color: #5d627b; background: white; border-top: solid 5px #5d627b; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);"> ★ここに文字を入力してください。</div> <div style="margin: 0; padding: 0;"></div> |
文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。
左右に線のボックス
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
1 2 3 4 5 6 7 8 |
<div style="padding: 0.5em 1em; margin: 2em 0; color: #474747; background: whitesmoke; border-left: double 7px #4ec4d3; border-right: double 7px #4ec4d3;">★ここに文字を入力してください。</div> <div style="margin: 0; padding: 0;"></div> |
文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。
2重線のボックス
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
1 2 3 4 5 |
<div style="padding: 0.5em 1em; margin: 2em 0; border: double 5px #4ec4d3;">★ここに文字を入力してください。</div> <div style="margin: 0; padding: 0;"></div> |
文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。
上下線のボックス
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
1 2 3 4 5 6 7 8 |
<div style="padding: 8px 19px; margin: 2em 0; color: #2c2c2f; background: #cde4ff; border-top: solid 5px #5989cf; border-bottom: solid 5px #5989cf;">★ここに文字を入力してください。</div> <div style="margin: 0; padding: 0;"></div> |
文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。
タイトル付きボックス
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
1 2 3 4 5 |
<div><span style="background: #ffa500; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px;">□タイトル</span></div> <div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #ffa500;"> ★ここに文字を入力してください。</div> |
文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。
左線のボックス
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
1 2 3 4 5 6 7 |
<div style="padding: 0.5em 1em; margin: 1em 0; background: #f4f4f4; border-left: solid 6px #5bb7ae; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);">★ここに文字を入力してください。</div> <div style="margin: 0; padding: 0;"></div> |
文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。
上に線があるボックス
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
1 2 3 4 5 6 7 8 |
<div style=" padding: 0.5em 1em; margin: 2em 0; color: #00BCD4; background: #e4fcff; border-top: solid 6px #1dc1d6; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">★ここに文字を入力してください。</div> <div style="margin: 0; padding: 0;"></div> |
文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。
ストライプのボックス 横サイズ600px指定
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
1 2 3 4 5 6 7 |
<div style=" <span style="font-size: 80%;"><strong><span class="rmarker-s">width:600px; </span></strong></span>padding: 0.5em 1em; margin: 2em 0; background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); }">★ここに文字を入力してください。</div> <div style="margin: 0; padding: 0;"></div> |
文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。
横のサイズ指定の方法
全て横のサイズの指定がありませんので、
横サイズの指定が必要な場合は下記を初めの<div></div>の中に
width:600px;を追記してください。
プラグインAddQuicktagを登録
継続して使用する場合はプラグインAddQuicktagを入れてください。
使い方は、下記を参照に使用してみてください。
-
ワードプレス道 「機能編」囲み枠で記事の見た目を整えよう!!
続きを見る
-
ワードプレス道 おすすめのタイトル付きボックスデザインを紹介
続きを見る