2011年02月16日

【第66回】iPhone用ブログ説明文のデザインを変更する

前回までで、iPhone用ページのタイトル部分の変更が完了しました。

今回は、その下にあるブログ説明文部分の変更を行っていきます。

今回の変更を行った結果がこちらです。

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

<横表示>
SD_065_02.PNG

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

<横表示>
SD_066_02.PNG

まずご覧頂ければわかるかと思いますが、ブログ説明分部分に私の著者を表す画像を表示しました。

Seesaaブログで用意されているiPhone用デザインは、何か味気ない感じがしたので、ちょっと遊んでみました。
この部分には、65px × 65px の画像を表示できるようにしています。

それから、iPhoneのSafariはサイト幅や位置関係を解釈して自動で文字サイズを調整する機能が実装されていますが、私のサイトでは逆に拡大して欲しくないので、文字サイズを指定しました。

その他ブログ説明文欄は、全体的に枠で囲い、文字表示位置を微調整しています。

ブログ説明文欄の枠線は、PCサイトと違って角丸の枠線。
これは、iPhoneのSafariがレンダリングエンジンのWebKitを採用しているからで、IEでは表示できません(通常の角が四角の表示になります)。
-webkit-border-radiusプロパティを設定すると、Safari上でこのような綺麗な角丸枠線が描けます。

それでは、iPhone用CSS変更画面を開いて、編集に入っていきましょう。
なお今回修正するクラスは、第62回で説明した通りID属性の#banner-description要素となります。

★iPhone用ブログ説明文のデザインを変更する方法★

#banner-descriptionのプロパティを修正する。
枠線や文字スタイル、文字表示位置のプロパティは削除。
角丸の枠線を-webkit-border-radiusプロパティで設定し、左右にマージンを10px設定。
さらに、文字サイズと枠の高さを調整する。

背景画像に65px×65pxの著者画像を表示できるようにし、文字が背景画像にかからないようパディングを左に80pxとる。

▼▼▼ 変更前 ▼▼▼
#banner-description {
background-color: #BFF7F5;
border-bottom: 1px solid #BBDDFF;
color: #183152;
font-style: italic;
padding: 5px;
text-align: right;

}

▼▼▼ 変更後 ▼▼▼
#banner-description {
background-color: #BFF7F5;
color: #183152;
-webkit-border-radius: 8px;
margin: 0px 10px 0px 10px;
font-size: 77%;
height: 52px;
background-image: url(http://hokuhoku-portfolio.up.seesaa.net/image/auther.jpg);
background-repeat: no-repeat;

padding: 5px 5px 5px 80px;
}

これで、ブログ説明文部分のデザイン修正は完了です。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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