文章の先頭文字だけ大きくしたい

先頭の文字だけ大きくするというのはドロップキャップと言って雑誌の世界などでは良く使用されています。WEBの世界でも海外などでは良く利用されていますが日本語ではフォントの影響を受けやすいため少々難しいということもありあまり多く利用されていないのが現状です。ご覧になればわかるように、あまりステキとはいえないですよね？でも、少し長文になったりするときは、このようなアクセントがあることで、文章にメリハリをつけることが出来るので、ここでは、簡単な方法をご紹介しています。※注意点もあるので、必ずお読みください。

設定ボタン（歯車のマーク）から『ヘッダ部分を編集』にCSSを書きます。

<style type="text/css">
/*<![CDATA[*/
p.dropc{
line-height:1.5;
font-size:14px;

font-family:"メイリオ";
}
p.dropc:first-letter{
font-size: 4em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding:0;
}
/*]]>*/
</style>

【準備手順】

左のコードをコピーする
設定ボタン（歯車のマーク）を押す
ヘッダー部分を編集を選択する
コピーしたコードを貼り付ける
保存ボタンを押す
ページの再読み込みをする（F5のボタンを押す）

文章へ以下のコードをコピーしてHTMLとして貼り付ける

※注意、Jimdoの場合クセがあるため、貼り付けたあと通常の編集ではたぶん修正が出来ません。
そのため『ここに文章を書きます～」の部分はHTMLの編集画面で手入力が必要です。

<p class="dropc">～ここに文章を書きます～</p>

さらに先頭の文字を囲み文字にしちゃう。

先頭の文字だけ大きくするというのはドロップキャップと言って雑誌の世界などでは良く使用されています。WEBの世界でも海外などでは良く利用されていますが日本語ではフォントの影響を受けやすいため少々難しいということもありあまり多く利用されていないのが現状です。ご覧になればわかるように、あまりステキとはいえないですよね？でも、少し長文になったりするときは、このようなアクセントがあることで、文章にメリハリをつけることが出来るので、ここでは、簡単な方法をご紹介しています。※注意点もあるので、必ずお読みください。

上記の場合、コードは以下のようになります。

p.dropc{
line-height:1.5;
font-size:14px;
font-family:"メイリオ";
}

p.dropc:first-letter{
display:inline-block;
font-size: 3.5em;
background:#f0f0f0;
line-height: 1;
float: left;
margin: 0 0.2em 0 0;
padding:0.1em 0.2em;
}

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。

Jimdo Tipsに戻る