こんにちは、ナカムです。
本日は｢WordPressの囲みボックスをHTMLでカスタムする方法｣を解説します。
本記事で分かること
• 簡単にボックスデザインを変更したい方
• HTMLコードを貼り付けて作成したい方
• オシャレなボックスに変更したい方
※本ページはプロモーションが含まれています。
WordPressテーマ 「ACTION（AFFINGER6）」を使ってきて100記事以上、作成してきました。
WordPressのテーマは、ボックスやボタンなどの装飾が最初からそろっているのでデザイン表示が楽にできます。
しかし、他の方と同じようになることが多いため、差別化するのが難しいですね。
そこで、この記事では実際にブログ内で使っているボックスデザインを具体的に説明していきます。
実は、誰でもコードをコピペするだけで簡単に完成します。
有名ブロガーさんみたいに「オシャレなボックスを作りたい」と悩んでいる方は多いでしょう。
コードも貼り付けてあるので自由にコピペして使ってくださいね。
7つのボックスカスタムを紹介します。
□ボックスカスタム方法
①WordPressの「テキストエディター」へ切り替える。
②HTMLコードを好きな段落へコピペする。
③色、枠線、文字と枠の余白、角の丸み大きさ変更
| 枠の色変更 | #ffffff； |
| 枠線の太さ | border： |
| 文字と枠の余白 | padding： |
| 角の丸みや大きさ | border-radius： |
| 囲み背景 | background |
○立体的なボックスデザイン囲み（黒枠左緑枠右）
html
<div style="border: 5px groove #91D8AC; padding: 10px; border-radius: 10px;">ここに文章を記載する</div>
○立体的なボックスデザイン囲み（黒枠右緑枠左）
html
<div style="border: 5px ridge #91D8AC; padding: 10px; border-radius: 10px;">ここに文章を記載する</div>
○タイトル見出し囲み
ここに文章を記載する
html
<div style="height: 12px;"><span style="background: #91D8AC; 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 #91D8AC;">
○タイトル枠線内囲み（細い）
html
<fieldset style="border: 2px solid #54d887; font-size: 100%; padding: 20px;"><legend>タイトル</legend>ここに文章を記載する</fieldset>
</div>
○タイトル枠線囲み（太い）グリーン
html
<fieldset style="border: 4px double #54d887;"><legend>タイトル</legend>ここに文章を記載する</fieldset>
○タイトル枠線囲み（太い）ブルー
html
<fieldset style="border: 4px double #0099FF;"><legend>タイトル</legend>ここに文章を記載する</fieldset>
○影付き囲み
html
<div style="border: #808000 solid 1px; font-size: 100%; padding: 15px; box-shadow: 0 3px 4px 0 #c0c0c0;">ここに文章を記載する</div>
○タイトル付き点線の囲み
html
<fieldset style="border: 2px dotted #2a83a2;"><legend>タイトル</legend>ここに文章を記載する</fieldset>
</div>
○点線囲み（背景有り灰色）
html
<div style="border: 3px dotted #D8D8D8; padding: 10px; border-radius: 10px; background: #f5f5f5;">ここに文章を記載する</div>
○点線囲み
html
<div style="border: 3px dotted #D8D8D8; padding: 10px; border-radius: 10px;">ここに文章を記載する</div>
○点線囲み（背景有り灰色）
html
<div style="border: 1px dashed #dcdcdc; padding: 10px; border-radius: 10px; background: #f5f5f5;">ここに文章を記載する</div>
○点線囲み（背景有り青）
html
<div style="border: 1px dashed #2E64FE; padding: 10px; border-radius: 10px; background: #EFF2FB;">ここに文章を記載する</div>
□WordPressの囲みボックスをカスタムまとめ
囲みボックスは、コードをテキストエディターへコピペするだけで簡単にカスタムができます。色の変更や幅などの変更は、何回も変えていると少しづつ慣れてきますので継続が大事です。
囲みボックスは、の記事全体に関する見た目として取り入れるとメリットが大きいです。
このブログはWordPressテーマの「AFFINGER」を使ってサイト構築〜記事の作成しています。最初から様々なカスタムが付いているので、記事作成に集中できるところが一番いいですね。
アクセス数アップや収益を伸ばしていきたいきたい方は、「AFFINGER」がおすすめです。ブログの記事作成で悩んだときは、こちらの記事を参考にしてくださいね。
○おまけ
このブログで使っている、WordPressテーマ「AFFINGER（アフィンガー）」では、次のようなボックスを「タグ」から表示できます。
少し、色をカスタムしていますので、AFFINGER（アフィンガー ）を使っている方は参考にどうぞです。
タイトル
サンプルテキスト
html
[st-mybox title="タイトル" fontawesome="st-svg-check-circle" color="#f44336" bordercolor="#8b4513" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
サンプルテキスト
[/st-mybox]
