2011年02月26日

【第76回】iPhone用コメントの文字サイズを変更する

今回は、iPhone用デザインのコメント欄の文字サイズを変更します。

第62回でご紹介したように、Seesaaブログのコメント欄は複数のクラスで構成されています。

今回は、第74回で実施した本文の文字サイズ変更に合わせて、コメント欄全体をfont-size:90%にしてみましょう。

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_076_01.PNG

<横表示>
SD_076_02.PNG

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_076_03.PNG

<横表示>
SD_076_04.PNG

それでは、iPhone用CSS変更画面を開いて、CSSを編集していきましょう。

★iPhone用コメントの文字サイズを変更する方法★

#comments要素にfont-sizeプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
#comments {
background-color: white;
margin: 5px 10px 10px 5px;
padding: 0px;
border: 1px solid #375D81;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
}

▼▼▼ 変更後 ▼▼▼
#comments {
background-color: white;
margin: 5px 10px 10px 5px;
padding: 0px;
border: 1px solid #375D81;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
font-size: 90%;
}

うまくデザインが変更されたでしょうか。

これで、この一連のiPhone用デザイン変更は完了となります。
今回まで変更してきたCSSを、トップページのCSSにも適用しておきましょう。

次回、今まで編集してきたCSSを公開します!

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | iPhoneブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。