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