ちょっとだけオシャレなサブタイトルまとめ..
（管理者注＊2016年07月11日に公開された記事を再編集したものです。）
こんにちワ o(^-^)o
通常、囲み枠やサブタイトル（小見出し）って、CSS（スタイルシート）に各要素を指定して、実際に記事を書く欄（エディタ）には、簡単なクラスセレクタのコード（例：<p class="sample">文章、文章、文章、文章、</p>）を書くのが一般的だと思います。
ただ、この方法だと理由は良く分からないのですが、自分のiPhoneのブラウザSafariだと全然反映されなかったりします。
今回のメモはCSSを使わずに編集面（エディタ）をHTMLモードにしさえすれば反映させることのできる方法です。
言い方を変えれば、HTMLの使える全てのWebページで有効な方法です。。
（例えばアメブロのCSSを使えないデザインのものでも、編集欄をHTMLモードにしさえすればOKな方法だとも言えると思います。）
【概略】
１．サブタイトルの基本
２．各種サンプル
１．サブタイトルの基本
２．各種サンプル
１．サブタイトルの基本
これって我流だと思いますがサブタイトル（小見出し）に囲み枠を使います。
以下のようなシンプルなものを基本にします。
文章、文章、文章、文章、
上のコードは以下のようになってます。
<div style="border:1px solid #999999;padding:10px;background-color:#ffffff;">文章、文章、文章、文章、</div>
*a.border:1px solid #999999の意味は枠線（border）の太さが1pxで、線の種類が実線（solid）、その色がグレー（#999999）ってことです。
*b.padding:10pxの意味ですが、枠線と文章の間の余白（padding）が上下左右にそれぞれ10pxってことです。
*c.background-color:#ffffff;の意味は、枠線内の背景色（background-color）は白（#ffffff）ってことです。
---
枠線（border）の太さを3pxにして、線種を点線（dotted）、色を赤（#ff0000）にすると以下のようになります。
文章、文章、文章、文章、
上のコードは、こうなってます（↓）。
<div style="border:3px dotted #ff0000;padding:10px;background-color:#ffffff;">文章、文章、文章、文章、</div>
ダイブタグ（div）とかの説明までしてると、やたら長い記事になっちゃうので、基本の説明は、これくらいにしておきます^^;
２．各種サンプル
以下に各種の見本とそのコードです。
001
～～任意の文章～～
↓
<div style="background-image:linear-gradient(#ffffff,#7affff,#05ffff);border:1px dotted #00ff00; padding: 10px 8px 4px;background-color:#ffffff;font-size:23px;font-weight:bold;color:#203744;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;box-shadow: 2px 2px 3px #aaaaaa;margin:5px;">～～任意の文章～～ </div>
002
～～任意の文章～～
上のコードは、こうなってます（↓）。
<div style="background-image:linear-gradient(#ffffff,#7affff,#05ffff);border:1px dotted #00ff00; padding: 10px 8px 4px;background-color:#ffffff;font-size:23px;font-weight:bold;color:#203744;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;box-shadow:5px 5px 10px; #aaaaaa;margin: 2px 8px 8px 0px;">～～任意の文章～～</div>
なお、上はmargin（枠線の外側の余白）をmargin: 2px 8px 8px 0px（ ［上］ と ［右］ と ［下］ と ［左］ を指定）にして左にピッタリくっつくようにしました。
また、影をつけて立体的に見せるためのコードをbox-shadow:5px 5px 10pxにして少しボカシを強くしてます。
最後に、この記事冒頭のサブタイトルです。これは枠線の外側に影は付けていませんが、枠線内のグラデーションで立体感をだしてます。
003
～～任意の文章～～
↓
<div style="background-image:linear-gradient(#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#ff1493);border:1px solid #c71585; padding: 10px 8px 4px;background-color:#ffffff;font-size:23px;font-weight:bold;text-shadow: 0px 0px 20px rgba(255,255,0,1);background-color:#003;color:#003300;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;">～～任意の文章～～</div>
※注：青字のfont-size:23pxの数字（この場合は23）で文字の大きさを好きなように変えることが出来ます（数字を大きいものにすれば文字も大きくなります）。
◯思うこと
CSSを使うのに比べるとエディタ（記事を書く欄）に長ったらしいコードを貼り付けないとなりませんが、パソコンのメモ帳にでも保存しておけば、上のコードをペッと貼り付けて、～～任意の文章～～の箇所だけを、それこそ任意の文章に差し替えちゃえばOKで、使い慣れると意外と簡単です。
また、枠線の色や背景色等をイロイロ変えて、御自身の気にいったものを造ってみるのも楽しいのではと思います。
CSSを使うのに比べるとエディタ（記事を書く欄）に長ったらしいコードを貼り付けないとなりませんが、パソコンのメモ帳にでも保存しておけば、上のコードをペッと貼り付けて、～～任意の文章～～の箇所だけを、それこそ任意の文章に差し替えちゃえばOKで、使い慣れると意外と簡単です。
また、枠線の色や背景色等をイロイロ変えて、御自身の気にいったものを造ってみるのも楽しいのではと思います。
☆ブィブィ ('-^*)/