おちゃのこ通信 Vol.163 - デザイン道場 - おちゃのこネットメールマガジン

このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、文章の最初の1文字だけ文字サイズを大きくする方法をご紹介します。

htmlタグを記載する

店長日記の記事欄や自由記入欄にhtmlタグを記載します。

最初の文字だけ大きくしてその他の文字は、通常のサイズで表示させます。最初の文字だけ大きくしてその他の文字は、通常のサイズで表示させます。

タグを利用します。
タグには、任意のclass名を付けます。
ここでは、drop_cap_boxとしています。

スタイルシートを編集する

管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。

スタイルシートの編集画面に下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

p.drop_cap_box:first-letter {
font-size: 200%;
float: left;
line-height: 1;
padding: 5px;
margin-right: 5px;
}

p.drop_cap_box:first-letter	:first-letterが、1文字目のみに適用させる指定となります。
font-size: 200%; float: left; line-height: 1; padding: 5px; margin-right: 5px;	font-sizeやpadding、marginは、指定する文字サイズによって調整してください。

なお、お問い合わせは下記ページからお願い致します。