ブログ記事の一文字目だけ大きく表示させたいです。


h2:first-letter{
font-size:500%

などとすると、日付まで巻き込んでしまい、

<p>属性で設定すると、本文に適用されたり・・

全然成功しません><

記事タイトルの一文字目のみ、大きく表示させたいのですが、
どうすれば良いでしょうか??

解決方法を教えて下さい・・

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2011/08/01 15:41:31

ベストアンサー

id:Lhankor_Mhy No.3

回答回数814ベストアンサー獲得回数232

こんな感じでしょうか。

h2 span.title{display:inline-block;}
h2 span.title:first-letter{
    color: #CC0099;
    font-family: "MS P明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
    font-size: 350%;
    font-weight: bold;
}

 

なんだか、IE6ではまともに表示されない予感がします……

その他の回答2件)

id:aruteka_v2 No.1

回答回数17ベストアンサー獲得回数4

もしhtmlタグが編集可能でしたらタグでくくってみてはどうでしょう?

(例)「あいうえお」の「う」だけを大きくしたい場合。

-------------------------------------------------------

html 編集

‹h2›あい‹span class="font300"›う‹/span›えお‹/h2›

css 編集

.font300{

font-size:300%;

}

-------------------------------------------------------

こんな感じです。

id:ken3memo No.2

回答回数317ベストアンサー獲得回数115

はてなのタイトルがh2が日付で、h3が見出しなのかなぁ?

h3.title:first-letter {
 font-size: 36px; /* 文字サイズ */
 color: red; /* 文字色 */
 }

スタイルシートでh3に上記cssを指定すると

http://d.hatena.ne.jp/ken3memo+video/

↑こんな感じですが

id:Lhankor_Mhy No.3

回答回数814ベストアンサー獲得回数232ここでベストアンサー

こんな感じでしょうか。

h2 span.title{display:inline-block;}
h2 span.title:first-letter{
    color: #CC0099;
    font-family: "MS P明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
    font-size: 350%;
    font-weight: bold;
}

 

なんだか、IE6ではまともに表示されない予感がします……

  • id:Lhankor_Mhy
    どこのブログでしょうか。
  • id:a-kuma3
    id:Lhankor_Mhy さんに加えて、どのテンプレートを使ってるか、とか、
    テンプレートを自分でいじってるかどうかも。

    結局、記事タイトルだけについてる目印(タグとかクラスとか)が何かが分からないと、答えられないんです。
  • id:tinitip
    ご指摘ありがとうございます。

    アドレスは以下です。
    http://d.hatena.ne.jp/tinitip/

    テンプレはRODです。

    どうかご回答お願いします^^
  • id:ken3memo
    ごめんなさい。
    テンプレによってタイトルがh2とか違うんですね。
    自分のテンプレだとh2日付、h3タイトルだったのですが、

    >http://d.hatena.ne.jp/tinitip/

    みると、h2で日付+タイトルみたいですね。
    失礼しました。
  • id:tinitip
    ありがとうございました!!!
    無事解決しました!!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません