昨日紹介した、ブログ記事をドロップキャップで雑誌記事風に飾る方法。お約束通り、以下にやり方を紹介します。
ちなみにドロップキャップとは、段落の最初の１文字を大きくし、続く文字をその周囲に回り込ませるレイアウト手法です。
興味のある方は是非やってみてください。
やり方は簡単です。
【手順】
1. ブログを書く画面で、とりあえず最初の数行を書く。
例文）こんばんは。恋するイラストレーター、Akihisaです。
2. 記事を書く欄の下、「HTMLタグを表示」をクリック。
3. 例文の最初の文字”こ”に、ドロップキャップをかけます。
以下のように、囲んでください。
<span style="margin-right: 5px; float: left; padding: 0.2em 0.15em 0pt 0pt; font-size: 333%; line-height: 0.75; background: none repeat scroll 0% 0% rgb(29, 171, 207);">こ</span>
わかりますか？
上記の枠の中のコードを、そのままコピペしてやってみてください。
そしてこのタグの後ろに、続く文字を普通に入力すればOK。
↓
<span style="margin-right: 5px; float: left; padding: 0.2em 0.15em 0pt 0pt; font-size: 333%; line-height: 0.75; background: none repeat scroll 0% 0% rgb(29, 171, 207);">こ</span>んばんは。恋するイラストレーター、Akihisaです。
これで設定完了。
「タグの非表示」を押して、通常の記事を書く画面に戻りましょう。
このようになっているはずです。
こんばんは。恋するイラストレーター、Akihisaです。
完成です ＾＾
ちなみに背景色が濃い水色になってますが、これは好きな色に変更可能です。
色を指定しているのは、”rgb(29 ,171,207）”の部分。
これを”rgb(29 ,171,207）”、という書き方ではなく、簡単に”#1dabcf”と書くことも出来ます。
↓
<span style="margin-right: 5px; float: left; padding: 0.2em 0.15em 0pt 0pt; font-size: 333%; line-height: 0.75; background: none repeat scroll 0% 0% #1dabcf;">こ</span>んばんは。恋するイラストレーター、Akihisaです。
たとえば黄色だったら、
#ffff00
こんばんは。恋するイラストレーター、Akihisaです。
赤なら
#ff0000
こんばんは。恋するイラストレーター、Akihisaです。
緑なら
#006600
こんばんは。恋するイラストレーター、Akihisaです。
暗号みたいですが、たとえばこのサイトを参照すれば、自分が使いたい色と、そのコードがすぐにわかります。
→ WEBセーフカラー216色WEBカラーリファレンス
いかがですか？
出来ましたか？
※ 出来なくても質問は受け付けていません。
途中読み飛ばしたりせず、書いてあるとおりやれば、必ずちゃんと出来ます。
生温かく頑張ってやってみてください。
以上、授業終了です。
「できました！」という、生温かな喜びの声、お待ちしております。
今後ばしばしとドロップキャップしちゃってください。
それではまた ☆
↓ にほんブログ村 ランキングに参加しています。
