2011年02月14日

【第64回】iPhone用タイトルのボタンを調整する

SeesaaブログのiPhone用ページには、タイトル部分に2つのボタンが表示されます。

1つが、Seesaaブログのトップページ(PC用サイト)に遷移するボタン。
もう1つが、ブログをPC用表示に切り替えるボタンです。

個人的には、iPhoneでブログを見に来た人が、Seesaaブログのトップページに行きたいとは思わないのではないかと思います。
よって私のサイトでは、Seesaaボタンは削除しました。

また、PC用表示に切り替えるボタンについても、色をブログデザインに合わせて紫色にしたり、文字サイズを少し小さくしたりしています。

ということで、今回はタイトル部分に表示されるボタンを調整してしまいましょう。

今回の修正によって、ブログデザインはご覧のように変化します。

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

<横表示>
SD_063_04.PNG

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

<横表示>
SD_064_02.PNG


★iPhone用タイトルのボタンを調整する方法★

ボタン全体の定義を表す.banner-buttonクラスのbackground-colorプロパティを変更し、ボタンの色を紫色にする。また、font-sizeプロパティを調整し、ボタンの文字サイズを少し小さくする。

右側のPC用表示ボタンについては、回り込みを解除して表示位置を絶対指定にするため、.banner-button-rightクラスを修正する。

左側のSeesaaボタンについては削除するため、.banner-button-leftクラスをdisplay:none;設定にする。

▼▼▼ 変更前 ▼▼▼
div.banner-button {
background-color: #375D81;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
list-style-type: none;
margin: 5px;
padding: 5px;
text-align: center;
width: 50px;
-webkit-border-radius: 8px;
}
div.banner-button-right {
float: right;
}
div.banner-button-left {
float: left;
}

▼▼▼ 変更後 ▼▼▼
div.banner-button {
background-color: #8531a6;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
list-style-type: none;
margin: 5px;
padding: 5px;
text-align: center;
width: 50px;
-webkit-border-radius: 8px;
font-size: small;
}
div.banner-button-right {
position: absolute;
right: 5px;
top: 5px;

}
div.banner-button-left {
display:none;
}

今回は、複数箇所を一気に修正してしまいました。
これで、タイトルのボタンに関する修正は完了です。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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