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

ETF投資 その2~REIT~

ETF投資 その2~REIT~

リートについて 日本のリートに投資米国のリートに投資してみました。 日本のリートについては、個別のリートにも投資しているので二重に投資しています。   国内リート 対象のETFは14本あるのですが、東証REIT指数と連動しているのは、そのうち10本です。 流動性というか、時価総額等から考えて、 1343 NEXT FUNDS 東証REIT指数連動型上場投信 1476 iS JリートETF 1345 上場インデックスファンドJリート各月分配 このあたりだと思います。  ...

ボタンの数が多すぎる製品を見て、アップルはすごいって改めて思った

ボタンの数が多すぎる製品を見て、アップルはすごいって改めて思った

ティファールの電気ケトル使ってて思った。 アップルはすごいなぁと。 スイッチの数が考えられてるって改めて思った。     温度調整できる電気ケトル、多分ティファールが初めて出した。 画期的だなと思って、買って、しばらく使ってる。   無駄なボタンが多すぎる。   ボタンが4つある。 電源、保温、沸騰、温度調整。   電源ボタンとか、そもそも要らないでしょ。 電源ボタンと沸騰ボタン分ける必要が無くて、そもそも電源オフも必要がない。...

ボタンの数が多すぎる製品を見て、アップルはすごいって改めて思った

ボタンの数が多すぎる製品を見て、アップルはすごいって改めて思った

ティファールの電気ケトル使ってて思った。 アップルはすごいなぁと。 スイッチの数が考えられてるって改めて思った。     温度調整できる電気ケトル、多分ティファールが初めて出した。 画期的だなと思って、買って、しばらく使ってる。   無駄なボタンが多すぎる。   ボタンが4つある。 電源、保温、沸騰、温度調整。   電源ボタンとか、そもそも要らないでしょ。 電源ボタンと沸騰ボタン分ける必要が無くて、そもそも電源オフも必要がない。...

0 Comments

0コメント

コメントを提出

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

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