こんにちは😃ちーちゃんです♪
私は、育児、美容・健康・ダイエット、様々なサイトを運営しているのですが、
記事作成時、見出しがあるとないのって、全然見やすさが違いますよね♪
書いてるこちらのテンションも全然違います！！！（これ大事！！）
記事作成時に、デザインを変えてみたい時ってあると思いますが、
その都度、色々探したりするのって意外と面倒、、
元超アナログ人間の私がやってみて、最もやりやすかった
プラグインなしで、初心者でもできる！！超簡単な方法でできる方法を伝授していきます♪
そして、一つの場所にあったらいいのに、、という願望が出てきてしまったので、私セレクションのデザインコードをご紹介していきます！！（テキストモード画面にコピペするだけで出来ちゃうHTMLコード掲載！）
どのデザインがいいか、一緒に見ていきましょう♪ぜひ、ご自分のお気に入りを見つけてくださいね♪
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、角丸太枠
ここに本文を入れます♪
コード↓
<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: #ff6699 solid 3px; font-size: 90%; padding: 20px;”>
ここに本文を入れます♪</div>
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>
カラーを変えたい時
＃〇〇〇〇の部分を、こちらのカラーサイトで、好きな色のコードを作成し、変更してください♪
いかかでしたか？？コードをコピペするだけ！！！これだけで、可愛いオリジナル感満載の記事になります♪
カラーや大きさも変えられるので、自分好みの素敵な見出しを作っていきたいですね♪
