WordPress個別サポート

ブログ記事(投稿)や固定ページの本文を入力中に、一部の文章を枠で囲みたいことがあります。blockquoteで囲んでも良いのですが、いかにも引用っぽくなってしまい、ページ内に引用を連発するのもアレなので、記事を枠で囲むスタイル(CSS)のサンプルを紹介します。

たとえば、次のような囲み枠です。

「投稿」‐「新規追加」メニューから追加できるブログ記事や「固定ページ」‐「新規追加」メニューから追加できる普通のページの本文は、このように枠で囲むこともできます。プラグインを使ってビジュアルエディタに追加しておけば簡単に作業できるようになります。

囲みたい部分をdivタグで囲み、style属性に次のようなCSSを記述すれば、その部分が枠で囲まれます。

<div style="padding:20px;border:solid 2px darkred;border-radius:10px;background-color:LemonChiffon;margin-top:30px;margin-bottom:30px;">
「投稿」‐「新規追加」メニューから追加できるブログ記事や
「固定ページ」‐「新規追加」メニューから追加できる普通の
ページの本文は、このように枠で囲むこともできます。
プラグインを使ってビジュアルエディタに追加しておけば
簡単に作業できるようになります。
</div>

※見づらいので個々の設定は下を参考にしてください。

ただ、毎回styleを指定するのは面倒なので、テーマ(親テーマでも子テーマでも)のstyle.cssに次のようなスタイルを定義します。

.waku {
    padding:20px;
    border:solid 2px darkred;
    border-radius:10px;
    background-color:LemonChiffon;
    margin-top:30px;
    margin-bottom:30px;
}

個々の命令の意味は次のとおりです。

  • padding --- 枠と文章の余白
  • border --- 枠線の種類、太さ、色
  • border-radius --- 角丸の半径
  • background-color --- 背景色
  • margin-top・margin-bottom --- 枠の上下の余白

※それぞれの命令には他にも使えるオプションがあります。カスタマイズしたいときは書籍などの情報を参考にしてください。

記事を書くときは文章を囲むdivタグに「class="waku"」を付加すれば、その部分が枠で囲まれます。

<div class="waku">
囲みたい文章
</div>

divタグを打ち込むのも面倒!という方は、ビジュアルエディタにボタンを追加できるAddQuicktagプラグインをご活用ください。

この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
CSSがよくわからないときは
簡単な質問からWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • テーマのCSS構成がよくわからない
  • CSSの直し方を教えてほしい
  • CSSの修正ミスでデザインが崩れた!
WordPress個別サポートの連絡先

WordPress個別サポートへの問い合わせWordPress個別サポートの申し込み

関連記事

スポンサーリンク