Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第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のブックマークレットを利用して確認する方法です。【第62回】iPhone用ページのクラス構成図いよいよiPhone用デザインのカスタマイズ!・・・とその前に、SeesaaブログのiPhone用ページのデザイン構成を図示しました。どの部分を修正すれば良いか、折に触れてご参照下さい。【第63回】iPhone用タイトルの背景画像を変更するいよいよiPhone用デザインのカスタマイズに入っていきます。この回に修正したのは、一番目立つタイトル部分。Seesaaブログのテンプレートでは色背景でしたが、画像を背景にしてみました。編集するのは、#banner-name要素です。【第64回】iPhone用タイトルのボタンを調整するSeesaaブログのiPhone用テンプレートにデフォルト表示される、タイトル部分のボタン。この調整を、CSSで行いました。.banner-buttonクラスなどを編集します。【第65回】iPhone用タイトル文字を変更する第64回でボタンの表示や位置などを調整した結果、タイトル文字の表示が少しおかしくなっています。そこでこの回では、タイトル文字の表示位置やサイズを調整し、タイトル部分の最終化を行っています。修正するのは#banner-name要素などです。【第66回】iPhone用ブログ説明文のデザインを変更するタイトル部分が完成したので、次はブログ説明文の部分です。この部分は、いろいろと試行錯誤した結果、説明文だけではなく、画像も表示できるようにしてみました。【第67回】iPhone用ナビゲーションの文字サイズを変更するこの回で修正したのは、ナビゲーションリンクの部分です。地味な修正ですが、ページ全体を見ると結構変更したくなる箇所です。編集するのは.naviクラスです。【第68回】iPhone用日付見出しの色を変更するこの回で日付の見出しを変更すると、ブログの見た目がガラッと変わります。編集するのはh2要素の.dateクラスです。【第69回】iPhone用記事見出しの文字サイズを変更する記事の見出しの文字サイズを変更します。編集するのはh3要素の.titleクラス。ここまで来ると、iPhone用デザインのトップページは完成間近です。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。