女性個人事業主の為のWEB制作

個人サロンのブログ記事をおしゃれにするボックスデザインの設置方法とサンプル集

 

こんにちは!
エステママのweb集客を運営しているHiromiです。
今回は、ワードプレスでサロンブログを更新している方向けの、記事を読みやすくするおしゃれなボックスデザインの設置方法とサンプルを紹介します。(アメブロでも利用できます。)

 

サロンブログをおしゃれに演出するボックスの設置方法

今回は、HTMLコードをコピペするだけで、ワードプレスのサロンブログ記事の中におしゃれなボックスを設置させていきます。

こんなボックスや
こんな感じのボックスなどです。

おしゃれなボックスを設置する為のHTMLコードの入力方法について

おしゃれなボックスを使う際に今から紹介するボックスの中で気に入ったデザインのHTMLコードをコピペしてブログに貼り付けるのですが、慣れている方は簡単ですが、初めての方は分からないと思いますので、ブログ記事内d eHTMLコードを貼り付ける方法をお伝えします。

以前のワードプレス投稿画面が使えるプラグインクラシックエディターを使っている場合

このプラグインを使っている方は、投稿画面、左上にある『テキスト』を選択しコードを貼り付けます。

私に制作依頼を頂いた方にはこちらのプラグインを入れてる方がほとんどですので「テキスト」に切り替えてコードを貼ってください。

新しいワードプレス投稿画面を使っている場合

投稿画面の+にカーソルを合わせた後に、フォーマット→カスタムHTMLを選択し、コードを貼り付けましょう。

それでは早速、テーマカラーごとにHTMLコードを紹介しますので、ブログ投稿の際に使用してみてくださいね!
HTMLコードコピペOKです^^

*記事内容、構成はコピペ厳禁です。

個人サロンのブログ記事をおしゃれにするボックスデザインサンプル集①ピンク

シンプルボックス
<div style="background: #ffffff; padding: 15px; border: 2px solid #ff1493; 
border-radius: 10px; word-break: break-all;">ここに文章</div>
シンプルボックス優しいピンク
<div style="background: #ffffff; padding: 15px; border: 2px solid #
ffb6c1; border-radius: 10px; word-break: break-all;">シンプルボックス優しいピンク</div>
強調したボックス
<div style="background: #ffffff; padding: 10px; border: double 
10px #ff1493;">強調したボックス</div>
優しい感じの強調したボックス
<div style="background: #ffffff; padding: 10px; border: double 
10px #ffb6c1;">優しい感じの強調したボックス</div>
塗りつぶしたデザインボックス
<div style="background: #fff0f5; padding: 15px; border: 0px solid 
#99cc00; border-radius: 10px; word-break: break-all;">
塗りつぶしたデザインボックス</div>
塗りつぶしさらに、囲いありのボックス
<div style="background: #fff0f5; padding: 15px; border: 2px solid
 #db7093; border-radius: 10px; word-break: break-all;">
塗りつぶしさらに、囲いありのボックス</div>
見出しタイトル
見出しタイトル付きののボックス
<div style="background: #ffe4e1; padding: 5px 10px; color:
 #000000; border-radius: 10px 10px 0 0;">
<strong>見出しタイトル</strong></div>
<div style="background: #ffffff; padding: 
10px; border: 2px solid #ffe4e1; border-radius: 0 0 10px 10px;">
見出しタイトル付きののボックス</div>
見出しタイトル
見出しタイトル付きののボックス
<div style="background: #ea618e; padding: 5px 10px; color:
 #000000; border-radius: 10px 10px 0 0;">
<strong>見出しタイトル</strong></div>
<div style="background: #ffffff; padding: 
10px; border: 2px solid #ea618e; border-radius: 0 0 10px 10px;">
見出しタイトル付きののボックス</div>
手書き風
<div style="border: 4px solid #ea618e; border-radius: 
240px 15px 185px 15px / 15px 200px 15px 185px; margin: 2em 0; 
padding: 2em;">
ここに本文を書く
</div>

個人サロンのブログ記事をおしゃれにするボックスデザインサンプル集②オレンジ

シンプルボックス
<div style="background: #ffffff; 
padding: 15px; border: 2px solid #f3981d; 
border-radius: 10px; word-break: break-all;">シンプルボックス</div>
強調したボックス
<div style="background: #ffffff; padding: 10px; border: double 
10px #f3981d;">強調したボックス</div>
優しい感じの強調したボックス
<div style="background: #ffffff; padding: 10px; border: double 
10px #fdf5e6;">優しい感じの強調したボックス</div>
塗りつぶしたデザインボックス
<div style="background: #fdf5e6; padding: 15px; border: 0px solid 
#99cc00; border-radius: 10px; word-break: break-all;">
塗りつぶしたデザインボックス</div>
塗りつぶしさらに、囲いありのボックス
<div style="background: #fdf5e6; padding: 15px; border: 2px solid
 #f3981d; border-radius: 10px; word-break: break-all;">
塗りつぶしさらに、囲いありのボックス</div>
見出しタイトル
見出しタイトル付きののボックス
<div style="background: #fdf5e6; padding: 5px 10px; color:
 #000000; border-radius: 10px 10px 0 0;">
<strong>見出しタイトル</strong></div>
<div style="background: #ffffff; padding: 
10px; border: 2px solid #fdf5e6; border-radius: 0 0 10px 10px;">
見出しタイトル付きののボックス</div>
見出しタイトル
見出しタイトル付きののボックス
<div style="background: #f3981d; padding: 5px 10px; color:
 #000000; border-radius: 10px 10px 0 0;">
<strong>見出しタイトル</strong></div>
<div style="background: #ffffff; padding: 
10px; border: 2px solid #f3981d; border-radius: 0 0 10px 10px;">
見出しタイトル付きののボックス</div>
手書き風
<div style="border: 4px solid #f3981d; border-radius: 
240px 15px 185px 15px / 15px 200px 15px 185px; margin: 2em 0; 
padding: 2em;">
ここに本文
</div>

おしゃれなデザインボックスを毎回HTMLコードを入力させなくても簡単に表示させる方法

毎回HTMLコードをコピペしてブログを書くのは面倒ですよね。
そんな時に便利なプラグイン AddQuicktag がおすすめです。

AddQuicktagの使い方

プラグインの新規追加から、このプラグインをインストールし、有効化しましょう。

インストールが完了したら、設定→AddQuicktagを選択します。

  • ボタン名→「囲み枠」など自分が分かりやすいコードの名前
  • ダッシュアイコン→空欄
  • ラベル名→空欄
  • 開始タグ→自分が使いたいHTMLコードをコピペ
  • 終了タグ→空欄でok
  • アクセスキー→空欄
  • チェックボックスは全てにチェック

記入をしたら、変更保存します。

投稿画面を開くと、クラシックキーボード画面に「Quicktag」が表示されますので、そこから先ほど登録したコードを選択すればそのまま反映されます。

個人サロンのブログ記事をおしゃれにするボックスデザインの設置方法とサンプル集まとめ

色のコード(#〇〇〇〇)を変更すると、オリジナルのボックスに変更できます。
色見本コードはこちら>>
もし気に入った色が見つからない場合は、上記のサイトを参考に色のコードを変更してみてくださいね!