2011年02月19日

【第69回】iPhone用記事見出しの文字サイズを変更する

今回は、iPhone用トップ画面に表示されている記事見出しの文字サイズを変更します。

またそれに合わせて、記事見出し表示領域の微調整も行います。

現在編集中のデザインだと、記事見出しは日付の下に表示されている領域にあたります。

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

<横表示>
SD_068_02.PNG

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

<横表示>
SD_069_02.PNG

記事見出しのスタイルを定義しているのは、h3要素の.titleクラスです。
このクラスのfont-sizeプロパティを設定していきます。

あとは、記事見出し表示領域の余白を調整するために、その外側にある.blogbodyクラスも修正します。

★iPhone用記事見出しの文字サイズを変更する方法★

h3要素の.titleクラスで、font-sizeプロパティを設定する。
また、.blogbodyクラスで不要な枠線を削除し、余白を調整する。

▼▼▼ 変更前 ▼▼▼
div.blogbody h3.title {
margin: 0;
padding: 5px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
background-color: #BFF7F5;
border-top: 1px solid #white;
border-left: 1px solid #white;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
}
div.blogbody {
background-color: white;
border: 1px solid #375D81;
margin: 5px 10px 10px 5px;

padding: 0px;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
}

▼▼▼ 変更後 ▼▼▼
div.blogbody h3.title {
margin: 0;
padding: 5px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
background-color: #BFF7F5;
border-top: 1px solid #white;
border-left: 1px solid #white;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
font-size: 100%;
}
div.blogbody {
background-color: white;
margin: 3px 10px 5px 5px;
padding: 0px;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
}

以上で、今回の修正は完了です。

トップページの完成まであと少しです!

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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