美ジネス

【初心者用!HTML】WordPressにプラグインなし!コードをコピペするだけ!囲み枠の可愛いデザインを集めてみました♪

こんにちは😃ちーちゃんです♪

私は、育児、美容・健康・ダイエット、様々なサイトを運営しているのですが、
記事作成時、見出しがあるとないのって、全然見やすさが違いますよね♪

書いてるこちらのテンションも全然違います!!!(これ大事!!)

記事作成時に、デザインを変えてみたい時ってあると思いますが、
その都度、色々探したりするのって意外と面倒、、

元超アナログ人間の私がやってみて、最もやりやすかった
プラグインなしで、初心者でもできる!!超簡単な方法でできる方法を伝授していきます♪

そして、一つの場所にあったらいいのに、、という願望が出てきてしまったので、私セレクションのデザインコードをご紹介していきます!!(テキストモード画面にコピペするだけで出来ちゃうHTMLコード掲載!)

どのデザインがいいか、一緒に見ていきましょう♪ぜひ、ご自分のお気に入りを見つけてくださいね♪

HTMLとCSSとは何?

まぁ、私も詳しい方ではないのですが、

めちゃくちゃ簡単にざっくり言うと

HTML…文章や構造を書く

CSS…文章や構造の装飾するもの

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーこれによって、装飾や文章反映されているみたい。
今回はコードを投稿画面のビジュアルモードでコピペをしたコードを貼り付ける簡単な方法です♪

 

WordPressの見出しデザインを変える方法(作業編)

HTML使用

①好きなデザインを選ぼう!

②コードをコピペしよう!

③テキスト画面に貼り付ける
(※ビジュアル画面だと反映されないので注意です!)

④文章を入れて完成!なんて簡単な作業!!

 

あなたの好みのデザインはどれ??では、お待ちかね!!デザインラインナップを見ていきましょう♪

シンプル編

1、まずは基本から!ピンク枠

ここに本文を入れます♪

コードはこれ↓

<div style=”border: #ffb6c1 solid 1px; font-size: 90%; padding: 20px;”>
ここに本文を入れます♪
</div>

2、ちょいと大人なグレー枠

ここに本文を入れます♪

コード↓

<div style=”background: #fff; border: 1px #ccc solid; box-shadow: 0 2px 3px 0 #ddd; font-size: 90%; padding: 20px;”>
ここに本文を入れます♪
</div>

3、さりげに強調できる背景ピンク枠

ここに本文を入れます♪
コード↓
<div style=”background: #fceff2; border-left: #fceff2 solid 10px; border: #fceff2 solid 1px; font-size: 90%; padding: 20px;”>
ここに本文を入れます♪
</div>

4、存在感あふれるピンク2重囲み枠

ここに本文を入れます♪
コード↓
<div style=”border: 4px double #ff6699;font-size: 90%; padding: 20px;”>
ここに本文を入れます♪</div>

5、優しい存在感ピンク2重囲み枠(角丸)

ここに本文を入れます♪
コード↓
<div style=”border-radius: 10px; border: 4px double #ff6699; font-size: 90%; padding: 20px;”>
ここに本文を入れます♪</div>

6、ズッシリ存在感ピンク背景囲み枠

ここに本文を入れます♪

 

コード↓

<div style=”background-color: #fceff2; border: 4px double #ff6699; font-size: 90%; padding: 20px;”>
ここに本文を入れます♪</div>

点線編

1、森ガール的なシンプル枠

ここに本文を入れます♪
コード↓
<div style=”border-radius: 5px; border: 1px dashed #ffb6c1; margin-bottom: 10px;font-size: 90%; padding: 20px;”>
ここに本文を入れます♪</div>

2、甘めスタイリッシュなシンプル太字枠

ここに本文を入れます♪
コード↓
<div style=”border-radius: 5px; border: 3px dashed #ffb6c1; margin-bottom: 10px;font-size: 90%; padding: 20px;”>
ここに本文を入れます♪</div>

3、3歩下がってついていくやまとなでしこ点線背景枠

 ここに本文を入れます♪
コード↓
<div style=”background-color: #fceff2; border-radius: 5px; border: 1px dashed #ffb6c1; margin-bottom: 10px;font-size: 90%; padding: 20px;”>
ここに本文を入れます♪</div>
4、キャリアウーマン風ふせん枠
ここに本文を入れます♪
コード↓
<div style=”border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 90%;”>
ここに本文を入れます♪</div>

5、角丸太枠

ここに本文を入れます♪
コード↓
&lt;div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: #ff6699 solid 3px; font-size: 90%; padding: 20px;”&gt;
ここに本文を入れます♪&lt;/div&gt;

6、タイトルつき囲み枠

タイトル

ここに本文を入れます♪

 

コード↓

<fieldset style=”border: 1px solid #ff6699; font-size: 90%; padding: 20px;”><legend>タイトル</legend>ここに本文を入れます♪</fieldset>

7、太枠バージョン

タイトル

ここに本文を入れます♪

 

コード↓

<fieldset style=”border: 5px solid #ff6699; font-size: 90%; padding: 20px;”><legend>タイトル</legend>ここに本文を入れます♪</fieldset>

8、色付きタイトル囲み枠

*タイトル
ここに本文を入れます♪
コード↓
<div style=”background: #ffb6c1; border: 1px solid #ffb6c1; padding-left: 20px;”><span style=”color: white;”>*タイトル</span></div>
<div style=”border: 1px solid #ffb6c1; font-size: 90%; padding: 20px;”>ここに本文を入れます♪</div>

9、角丸色付きタイトル囲み枠

*タイトル
ここに本文を入れます♪
コード↓
<div style=”margin: 0em;”>
<div style=”display: inline-block; position: relative; top: 3px; padding: 0 .5em; height: 1.5em; line-height: 1.5em; color: #ffffff; background: #ffc0c0; font-weight: bold; text-align: center; border-radius: 5px 5px 0 0;”>*タイトル</div>

おしゃれ編

1、白文字囲み枠


ここに本文を入れます♪

 

コード↓

<fieldset style=”background: #f98289; border: 4px double #ffffff; border-radius: 10px; font-size: 90%; padding: 20px;”><span style=”color: #ffffff;”>
ここに本文を入れます♪</span></fieldset>

 

2、ステッチ付き囲み枠

ここに本文を入れます♪
コード↓
<div style=” background: #ffe6e8; padding: 20px; border: 2px dashed #ffb6c1; box-shadow: 0 0 0 5px #ffe6e8; -moz-box-shadow: 0 0 0 5px #ffe6e8; -webkit-box-shadow: 0 0 0 5px #ffe6e8; font-size: 90%; ”>
ここに本文を入れます♪
</div>

3、ステッチ角丸囲み枠

ここに本文を入れます♪
コード↓
<div style=”color: white; background: #f98289; padding: 20px; border: 2px dashed rgba(255 , 255 , 255 , 0.5); -moz-border-radius: 6px; -moz-box-shadow: 0 0 0 5px #f98289 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); -webkit-border-radius: 6px; -webkit-box-shadow: 0 0 0 5px #f98289 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); border-radius: 6px; box-shadow: 0 0 0 5px #f98289 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); font-size: 90%;”>ここに本文を入れます♪</div>

4、グラデ〜ション囲み枠

ここに本文を入れます♪
コード↓

<div style=”padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; font-size: 90%;”>ここに本文を入れます♪</div>

ドット編

1、ドットピンク

ここに本文を入れます♪
コード↓
<div style=”background: #fceff2; background-image: radial-gradient(#ffc0cb 10%, transparent 20%), radial-gradient(#ffc0cb 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 90%; padding: 20px;”>ここに本文を入れます♪</div>
<div></div>

2、ドット白

ここに本文を入れます♪
コード↓
<div style=”background: #ffe6ea; background-image: radial-gradient(#fff 10%, transparent 20%), radial-gradient(#fff 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 90%; padding: 20px;”>
ここに本文を入れます♪
</div>

3、ちびドット

ここに本文を入れます♪
コード↓
<div style=”background: #ffccd5; background-image: radial-gradient(#fff 10%, transparent 10%), radial-gradient(#fff 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 90%; padding: 20px;”>
ここに本文を入れます♪
</div>

4、ビッグドット

ここに本文を入れます♪
コード↓
<div style=”background: #fceff2; background-image: radial-gradient(#fff 10%, transparent 30%), radial-gradient(#fff 10%, transparent 30%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 90%; padding: 20px;”>
ここに本文を入れます♪
</div>

ストライプ編

1、太めストライプ

ここに本文を入れます♪
コード↓
<div style=”background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 30px 30px;font-size: 90%; padding: 20px;”>
ここに本文を入れます♪
</div>

2、普通ストライプ

ここに本文を入れます♪
コード↓
<div style=”background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 20px 20px;font-size: 90%; padding: 20px;”>
ここに本文を入れます♪
</div>

3、細めストライプ

ここに本文を入れます♪
<div style=”background-image: linear-gradient( -45deg, #fff 25%, #ffe5f2 25%,#ffe5f2 50%, #fff 50%, #fff 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 5px 5px;font-size: 90%; padding: 20px;”>
ここに本文を入れます♪
</div>

カラーを変えたい時

#〇〇〇〇の部分を、こちらのカラーサイトで、好きな色のコードを作成し、変更してください♪

いかかでしたか??コードをコピペするだけ!!!これだけで、可愛いオリジナル感満載の記事になります♪

カラーや大きさも変えられるので、自分好みの素敵な見出しを作っていきたいですね♪

先生
ちーちゃん
プロフィール
\ Follow me /