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ブログデザイン | このブログの読者になる | 更新情報をチェックする

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ブログデザイン | このブログの読者になる | 更新情報をチェックする

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日以上新しい記事の投稿がないブログに表示されております。