2011年02月15日

【第65回】iPhone用タイトル文字を変更する

前回までで、SeesaaブログのiPhone用デザインのタイトル背景画像と、ボタンのデザイン修正を行いました。

でも現状だと、タイトル文字がボタンの後ろに隠れてしまいます。
そもそもボタンがあると、タイトル表示部分が短くなってしまうため、タイトルを短くするか文字サイズを小さくしなければなりません。

かといって、このPC用表示ボタンは、削除したくありませんし・・・

ということで、今回は上部にボタン分の隙間を空けてタイトル文字を表示する設定を行います。
あと、タイトル文字サイズの微調整。
さらに、今回でタイトル部分のデザインを仕上げてしまいます。

今回の修正を行うと、iPhone用デザインはご覧のように変更されます。

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

<横表示>
SD_064_02.PNG

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

<横表示>
SD_065_02.PNG


それでは今回のCSS修正を行いますので、iPhone用CSS変更画面を開いて下さい。

★iPhone用タイトル文字を変更する方法★

タイトル文字表示部を表す#banner-name要素で、paddingプロパティを調整し、表示部の高さを表すheightプロパティを追加する。
また、文字サイズを設定する。

さらに、背景画像の表示位置を調整し、不要な枠線や背景色は削除する。

▼▼▼ 変更前 ▼▼▼
#banner {
border-bottom: 3px solid #DDEEFF;
color: white;
margin: 0;
margin-bottom: 15px;
}
#banner-name {
background-color: #183152;

/* 【第63回】でタイトルの背景画像を変更 */
background-image: url(http://hokuhoku-portfolio.up.seesaa.net/image/hdbg.png);

background-repeat: repeat-x;
border-bottom: 3px solid #6699BB;
font-size: x-large;

font-weight: bold;
padding: 8px;
text-align: center;
}

▼▼▼ 変更後 ▼▼▼
#banner {
color: white;
margin: 0;
margin-bottom: 15px;
}
#banner-name {

/* 【第63回】でタイトルの背景画像を変更 */
background-image: url(http://hokuhoku-portfolio.up.seesaa.net/image/hdbg.png);

background-repeat: repeat-x;
background-position: center top;
font-size: 125%;

font-weight: bold;
text-align: center;
padding-top: 40px;
height: 50px;

}

これで、iPhone用ページのタイトル部分の修正は完了となります。

次回は、ブログ説明文表示部分を修正します。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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