Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。今回は、iPhone用ページのクラス構成図を見てみましょう。今後、iPhone用CSSデザインを変更していくにあたり、参考になります。長くなりますので、目次を付けておきます。第58回でお伝えした通り、SeesaaブログのiPhone用デザインは、トップページと記事ページの2つが用意されています。下図は、そのうちトップページのクラス構成図になります。図にはありませんが、大外にbody要素があります。これも図に掲載していませんが、その内側にiPhone用サイト全体を表す#iphone-containerがあります。その2つの要素の内側が、ヘッダー部分を表す�@#bannarと、ブログ本体部分を表す�E#contentに大きく2分されています。ヘッダーの�@#bannarの中は、ブログタイトルを表示する�C#banner-nameと、ブログの説明文を表示する�D#banner-descriptionに分かれています。�C#banner-nameの上に、Seesaaブログへのリンクボタン�B.banner-button-leftクラス、およびPC用デザインでブログを表示するボタンの�A.banner-button-rightクラスがあります。一方で、ブログ本体の�E#contentの中には、まず一番上に広告が表示されます。その下に、ナビゲーションを表示する�F.naviクラスがあります。その下からが記事の一覧を表示する部分になり、�G#index-article-list、そのすぐ内側に.blogクラスがありますが、トップページではこの2つは同じ位置づけとなっています。各記事を表す.blogクラスは、日付ヘッダーを表示する�Hh2の.dateクラスと、見出しを表示している�I.blogbodyクラスがあります。�I.blogbodyクラスの中には、さらに記事タイトルを表示する�Jh3の.titleクラスと投稿日時を表示する�K.title-dateクラスが入っています。ちなみに、図には記載していませんが、記事タイトルの右側にある≫は、.arrowというクラスで制御されています。たくさんの要素が設定されていますので、どのクラスがどこを制御しているのか、しっかり確認して下さい。▲ページトップへ▲2.記事ページのクラス構成(1)−ヘッダー部−次に、記事ページのクラス構成です。記事ページの上の方を説明します。ブログのヘッダーを表示する�@#bannarは、トップページと同じ構成です。その下側に、これもトップページと同様に�A#contentがあり、その中に広告と�B.naviクラスが設定されています。その下に、�C.blogクラスがあります。トップページと異なり、#index-article-listはありません。その内側に、またトップページと同様に日付ヘッダーを表示する�Dh2の.dateクラスがあり、さらにその下に�E.blogbodyクラスが、そしてその中に�Fh3の.titleクラスあります。このように、トップページと記事ページの構成は、かなり共通化されています。トップページと異なるのは、その下にブログ本文を表示する�G.textクラスが存在することです。ここまでのところ、トップページと記事ページが異なるのは以下の3点です。(1)記事ページには、.blogクラスの外側に#index-article-listがない。(2)記事ページには、h3.titleクラスの下に.textクラスがある。(3)記事ページには、h3.titleクラスの下に.title-dateクラスがない。あと、トップページにあった.arrowクラスは、記事ページにはありません。▲ページトップへ▲3.記事ページのクラス構成(2)−フッター部−記事ページの下部は、ご覧のようになっています。記事の最後には、タグを表示する�A.tag-wordクラスがあります。その下に、投稿日時を表示する�B.postedクラスです。これで、ブログ本文を制御する�B.blogbodyクラスは終了です。その下に、コメント記入欄を制御する�D#commentsがあります。コメント欄は2つの�E.comments-headがあり、その下にコメント各事項が�F.comments-bodyクラスで表示されています。これで�D#commentsが終わり、次いでブログ本体を表す�@#contentが終了します。その下に、�G#footerがある形です。ちなみにこの�G#footerはトップページにも存在しますが、上の説明では割愛しました。記事ページのクラス構成の説明は以上になります。以上のように、トップページと記事ページのクラス構成は、かなり共通化されています。トップページと記事ページで大きくデザインを変える必要がない限り、同じCSSで良いと思います。今回のシリーズでは、トップページと記事ページで同じCSSを適用していきます。|この記事へのコメント本が一冊できそうなくらいの素晴らしい内容ですね。08:30りささん、こんにちは。コメントありがとうございます。お役に立ったようで良かったです。iPhoneってとっても便利ですもんね。iPhone用のサイトを作るのは、すごくいいと思います。何かご不明な点があればお知らせ下さい。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。