Drop Caps

2013年3月26日

カテゴリー:Wordpress

ういう感じの、先頭の文字を大文字にするデザインを Drop Capsっていうらしい。 よく、雑誌なんかで見かけるデザイン。   サイト上でもCSSで実現できるんだけど、 各段落の最初の文字毎とか記事全体の最初の文字だけとかを 大きくするわけだから、普通は <P>と組み合わせて使う。     素直にCSSに入れてみた。 :first-letter っていう疑似クラスを使う。

 

p:first-letter { この部分は下のと同じ・・・

 が、しかし いつも通り、IEだと動作がおかしいらしい。

Chrome派なので、慌ててIEで確認した。

おかしかった orz

 

ってことで、 span id=”cap”ってspan使って囲んでみた。

font-size: 260%;
font-weight: bold;
line-height: 100%;
float: left;

あとは、マージンとか適当に入れる。(入れたければ)

 

 ちなみに、全自動で実現してくれるプラグインがたくさんある。wordpressの管理画面で、drop capsとかで検索すればいっぱい出る。

これらのプラグインは <p>で囲まれた部分の最初の文字を全自動で装飾する仕組みっぽいから <p>使って自動で整形してくれるっていうwordpressの仕様と相性が悪い。

改行して空間作る度に大文字になるって事だから・・・。

 

3行上の「ちなみに」 以下の部分で言うと

ち、こ、改 全部大文字になる。

 

PS Disable Auto Formattingとかいうプラグインを入れると、 <P><br>の自動挿入を防いでくれるらしいが、 そうすると、今度は手動で<P>を入れることになる。 手動でP か 手動でSPAN か・・・。 手動でSPANだと 大きくしたい場所だけ大きくできるので 手動でSPANにしてみました。

 

とは参考サイトとして、海外のサイトだけども Drop Caps: Historical Use And Current Best Practices With CSS っていう記事を発見した。 文字の後ろに絵を入れて、中世の本みたいにしちゃる! とかしたい場合は参考に。 結構な長文だけど、まあ、ハッキリ言って、 読まなくてもパクって導入する分には簡単かと。

デル株式会社
HP Directplus -HP公式オンラインストア-

Related Articles

ストリベリーネット

ストリベリーネットは、化粧品のネット販売をしている会社で、香港にある会社です。 美容関係のものは手広く扱っており、 スキンケア・メイクアップ・フレグランスと扱っています。 元々の売値自体も安いのですが、 ここは、買えば買うほど(回数)安くなるのがポイントです。 2度目 1%引き 3度目 2% 4度目 3% 5度目 4% 6~9度目 5% 10~19度目 7.5% 20度以上 10%引きになります。 更に3品以上同時注文だと +5%引きになるので 最大売値の15%引きになります。 売値自体、安いので、20度以上買っていると...

アラミック イオニックC シャワー 【1】

アラミックのイオニックCシャワーは、 カタログ的には  ○ マイナスイオン ○ 塩素除去  ○ 節水 の3拍子がそろったシャワーヘッドです。   マイナスイオンは、正体不明なのでおいといて、 浄水機能付きのシャワーヘッドとしては、一般的な価格帯のシャワーヘッドです。   クリンスイみたいに、活性炭などのフィルターを通して浄水するのではなく、化学反応を利用して塩素を除去する仕組みのようです。   C6H8O6(ビタミンC)+ NaClO(次亜塩素酸ナトリウム)...

アラミック イオニックC シャワー 【1】

アラミックのイオニックCシャワーは、 カタログ的には  ○ マイナスイオン ○ 塩素除去  ○ 節水 の3拍子がそろったシャワーヘッドです。   マイナスイオンは、正体不明なのでおいといて、 浄水機能付きのシャワーヘッドとしては、一般的な価格帯のシャワーヘッドです。   クリンスイみたいに、活性炭などのフィルターを通して浄水するのではなく、化学反応を利用して塩素を除去する仕組みのようです。   C6H8O6(ビタミンC)+ NaClO(次亜塩素酸ナトリウム)...

0 Comments

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください