WordPress

【簡単】WordPressの囲みボックスをHTMLでカスタムする方法

WordPress

 

ナカムです。

 

ナカム
今回は、WordPressのボックスデザインをカスタムする方法紹介します。

 

COCOONとAFFINGE6を使ってきて100記事以上、作成してきました。

 

WordPressのテーマは、ボックスやボタンなどの装飾が最初からそろっているのでデザイン表示が楽にできます。

 

しかし、他の方と同じようになることが多いため、差別化するのが難しいですね。

 

そこで、この記事では実際にブログ内で使っているボックスデザインを具体的に説明していきます。

 

実は、誰でもコードをコピペするだけで簡単に完成します。

 

こんな方におすすめ

  • 簡単にボックスデザインを変更したい方
  • HTMLコードを貼り付けて作成したい方
  • オシャレなボックスに変更したい方

有名ブロガーさんみたいに「オシャレなボックスを作りたい」と悩んでいる方は多いでしょう。

 

コードも貼り付けてあるので自由にコピペして使ってくださいね。

 

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>
&nbsp;

 

影付き囲み

 

ここに文章を記載する

 

 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;">ここに文章を記載する</div>

 

点線囲み(背景有り)

 

ここに文章を記載する

 

 html
<div style="border: 1px dashed #2E64FE; padding: 10px; border-radius: 10px; background: #EFF2FB;">ここに文章を記載する</div>

 

カラーコード

こちらから色のカラーコードを選んで好みに色に変えることができます。

 

WordPressの囲みボックスをカスタムまとめ

囲みボックスは、コードをテキストエディターへコピペするだけで簡単にカスタムができます。

 

色の変更や幅などの変更は、何回も変えていると少しづつ慣れてきますので継続が大事です。

 

ブログの記事作成で悩んだときは、こちらの記事を参考にしてくださいね。

 

おまけ

このブログで使っている、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]

 

 

スポンサーリンク

-WordPress
-,