2011年02月22日

【第72回】iPhone用の文字サイズ自動調整を解除する

さて、実は前回で、iPhone用トップページのデザインは出来上がっています。

しかし、ここでちょっと注意事項があります。

こちらの図をご覧下さい。

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

<横表示>
SD_069_02.PNG

縦表示の時と横表示の時で、文字サイズが大きく変わっているのがわかるでしょうか。

これ、実はiPhoneのSafariの機能の一つ、文字サイズの自動調整機能なのです。

iPhone版Safariは、小さい画面に効果的にWEBページを表示するために、画面やページの幅、他パーツとの相対的な位置付けなどに応じて、文字サイズを自動で拡大してくたりします。
非常に便利な機能ですね。

でも今回の私のデザインでは、どちらかというと文字サイズは変わってくれない方がありがたいです。

そこで今回は、この文字サイズの自動調整機能を解除してしまいましょう。

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

<横表示>
SD_072_02.PNG


★iPhone用の文字サイズ自動調整を解除する方法★

body要素の中に、-webkit-text-size-adjust: none;を追記する。

▼▼▼ 変更前 ▼▼▼
body {
margin: 0;

/* 【第67回】で背景色を白に変更 */
background-color:#FFFFFF;

}

▼▼▼ 変更後 ▼▼▼
body {
margin: 0;

/* 【第67回】で背景色を白に変更 */
background-color:#FFFFFF;


-webkit-text-size-adjust: none;
}

この修正で、iPhoneを縦にしても横にしても、同じ文字サイズで表示されるようになります。
やっぱり個人的には、こちらの方が好みです。

さて、これでiPhone用トップページのカスタマイズは終了です。

次回からは、iPhone用記事ページのカスタマイズに入っていきましょう。

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

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

2011年02月21日

【第71回】iPhone用フッターの色を変更する

今回は、iPhone用デザインのフッターを変更してみましょう。

まず、フッターの背景色を、日付見出しと同じ紫色にします。
さらに、日付見出し部分に使われている透過PNGを使って、フッターを立体的に見えるようにします。

要するに、日付見出し箇所と同じようなデザインになります。

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

<横表示>
SD_071_02.PNG

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

<横表示>
SD_071_04.PNG

いかがですか?
これで、iPhone用のトップページはかなり統一感のあるデザインになったと思います。

それでは早速、iPhone用CSS変更画面で修正してみましょう。

★iPhone用フッターの色を変更する方法★

フッターのデザインを定義している#footer要素のbackground-colorプロパティを変更する。
また、日付見出し箇所に使用されている透過PNGを背景画像に設定し、横方向への繰り返し表示設定を追加する。

▼▼▼ 変更前 ▼▼▼
#footer {
background-color: #183152;
color: white;
margin: 0;
padding: 5px;
text-align: center;
}

▼▼▼ 変更後 ▼▼▼
#footer {
color: white;
margin: 0;
padding: 5px;
text-align: center;
background-color: #8531a6;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;

}

さて、今回までの変更を加えた結果、iPhone用トップページはこのようなデザインになりました。

SD_071_05.PNG

もともとのblueのテンプレートから、個人的にかなり気に入ったデザインへと変わりました。

やっぱり、自分でデザインを変更するのっていいですね。

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

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

2011年02月20日

【第70回】ここまでのまとめ(第61回〜第69回)

こんにちは、ほくほくです。

最近は、すっかりiPhone用デザインの記事が中心になっていますね。
第70回の今回は、第61回から第69回に掲載した内容の概要をお伝えします。

なお、それ以前の記事については、こちらをご覧下さい。

  ◆【第10回】ここまでのまとめ(第1回〜第9回)
  ◆【第20回】ここまでのまとめ(第11回〜第19回)
  ◆【第30回】ここまでのまとめ(第21回〜第29回)
  ◆【第40回】ここまでのまとめ(第31回〜第39回)
  ◆【第50回】ここまでのまとめ(第41回〜第49回)
  ◆【第60回】ここまでのまとめ(第51回〜第59回)



【第61回】iPhone用ページのHTMLを確認する

iPhone用のデザインをカスタマイズする前提として、iPhone用ページのHTMLの確認方法をご紹介しました。

iPhoneのブックマークレットを利用して確認する方法です。

SD_061_01.PNG



【第62回】iPhone用ページのクラス構成図

いよいよiPhone用デザインのカスタマイズ!
・・・とその前に、SeesaaブログのiPhone用ページのデザイン構成を図示しました。

どの部分を修正すれば良いか、折に触れてご参照下さい。

SD_062_01.jpg



【第63回】iPhone用タイトルの背景画像を変更する

いよいよiPhone用デザインのカスタマイズに入っていきます。

この回に修正したのは、一番目立つタイトル部分。
Seesaaブログのテンプレートでは色背景でしたが、画像を背景にしてみました。

編集するのは、#banner-name要素です。

▼▼▼ 変更前 ▼▼▼
SD_063_01.PNG

▼▼▼ 変更後 ▼▼▼
SD_063_03.PNG



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

SeesaaブログのiPhone用テンプレートにデフォルト表示される、タイトル部分のボタン。
この調整を、CSSで行いました。

.banner-buttonクラスなどを編集します。

SD_064_01.PNG



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

第64回でボタンの表示や位置などを調整した結果、タイトル文字の表示が少しおかしくなっています。
そこでこの回では、タイトル文字の表示位置やサイズを調整し、タイトル部分の最終化を行っています。

修正するのは#banner-name要素などです。

SD_065_01.PNG



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

タイトル部分が完成したので、次はブログ説明文の部分です。

この部分は、いろいろと試行錯誤した結果、説明文だけではなく、画像も表示できるようにしてみました。

SD_066_01.PNG



【第67回】iPhone用ナビゲーションの文字サイズを変更する

この回で修正したのは、ナビゲーションリンクの部分です。

地味な修正ですが、ページ全体を見ると結構変更したくなる箇所です。

編集するのは.naviクラスです。

SD_067_01.PNG



【第68回】iPhone用日付見出しの色を変更する

この回で日付の見出しを変更すると、ブログの見た目がガラッと変わります。

編集するのはh2要素の.dateクラスです。

SD_068_01.PNG



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

記事の見出しの文字サイズを変更します。

編集するのはh3要素の.titleクラス。
ここまで来ると、iPhone用デザインのトップページは完成間近です。

SD_069_01.PNG



それでは、あと少しでトップページのデザインを完成させ、その後記事ページのデザインカスタマイズに入っていきます。

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

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

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