Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。第57回からの一連の記事で編集してきた、SeesaaブログのiPhone用カスタマイズCSSを公開します。SeesaaブログをiPhoneで見た時のデザインが、こんな感じになります!<トップページ><記事ページ>下記★CSSはこちら★をクリックするとCSSが表示されますので、どうぞご自由にご利用下さい。このCSSの適用先画面については第58回をご覧下さい。以下の点にご注意下さい。◆1.背景画像の取得ヘッダーの背景画像(※1の箇所)は、このブログの中のディレクトリに格納されています。いつか、このブログがなくなる可能性も無きにしもあらずなので、画像を取得してご自分のサイト内にアップロードして使用することをお薦めします。背景画像の取得方法などは、第63回をご覧下さい。◆2.アイコン画像の変更ブログ説明文の箇所に表示されているアイコン画像(※2の箇所)は私のものですので、ご自身の好きなアイコンに差し替えて下さい。【第76回】iPhone用コメントの文字サイズを変更する今回は、iPhone用デザインのコメント欄の文字サイズを変更します。第62回でご紹介したように、Seesaaブログのコメント欄は複数のクラスで構成されています。今回は、第74回で実施した本文の文字サイズ変更に合わせて、コメント欄全体をfont-size:90%にしてみましょう。▼▼▼<縦表示><横表示>それでは、iPhone用CSS変更画面を開いて、CSSを編集していきましょう。★iPhone用コメントの文字サイズを変更する方法★#comments要素にfont-sizeプロパティを追加する。90%;}うまくデザインが変更されたでしょうか。これで、この一連のiPhone用デザイン変更は完了となります。今回まで変更してきたCSSを、トップページのCSSにも適用しておきましょう。【第75回】iPhone用引用書式を追加する私は、ブログの記事を書く時に、よく引用(blockquote)を使用します。SeesaaブログのiPhone用CSSには、引用のデザインは定義されていないんですよね。こんなふうに、味気ない表示になってしまいます。▼▼▼<縦表示><横表示>そこで今回は、この引用に書式を追加してみたいと思います。ポートフォリオのPC版で使用しているテンプレートと同じにしてみました。これだと、PC版のCSSからコピーしてくるだけですみますので。★iPhone用引用書式を追加する方法★iPhone用CSSに、blockquote要素のデザインを追加する。#A7A7A6;background:#FFFFE8;padding:5px;margin:10px;}Seesaaのテンプレートにないものは、自分で追加してみるのも一つの手ですね。【第74回】iPhone用記事本文の文字サイズを変更する今回は、記事の文字サイズを変更します。文字サイズの変更は、PCブログデザインの方でもたくさん事例を紹介しました。font-sizeプロパティを修正します。▼▼▼<縦表示><横表示>記事本文の文字サイズを少し小さくしました。★iPhone用記事本文の文字サイズを変更する方法★.blogbodyクラスの中の.textのfont-sizeプロパティを変更する。【第73回】iPhone用CSSを記事ページに展開するさて、前回までで、ようやくiPhone用トップページのデザイン変更が完了しました。今回からは、記事ページの方のデザイン変更に入っていきましょう。・・・といっても、トップページのようにまたイチから作成する必要はありません。今回はまず、今まで作成してきたトップページ用のCSSを、記事ページにも適用してしまいましょう。iPhone用CSS変更画面の右上で記事リンクを押下して、表示される画面にトップページ用のCSSを貼りつけてみて下さい。すると、以下のようにいきなりある程度デザインができあがっている状態になります。▼▼▼ご覧のように、タイトル、ブログ説明文、ナビゲーション、日付見出し、記事見出し、フッターなどが、トップページと同じデザインになります。【第72回】iPhone用の文字サイズ自動調整を解除するさて、実は前回で、iPhone用トップページのデザインは出来上がっています。ここでちょっと注意事項があります。こちらの図をご覧下さい。▼▼▼<縦表示><横表示>縦表示の時と横表示の時で、文字サイズが大きく変わっているのがわかるでしょうか。これ、実はiPhoneのSafariの機能の一つ、文字サイズの自動調整機能なのです。iPhone版Safariは、小さい画面に効果的にWEBページを表示するために、画面やページの幅、他パーツとの相対的な位置付けなどに応じて、文字サイズを自動で拡大してくたりします。非常に便利な機能ですね。今回の私のデザインでは、どちらかというと文字サイズは変わってくれない方がありがたいです。そこで今回は、この文字サイズの自動調整機能を解除してしまいましょう。none;を追記する。none;}この修正で、iPhoneを縦にしても横にしても、同じ文字サイズで表示されるようになります。個人的には、こちらの方が好みです。これでiPhone用トップページのカスタマイズは終了です。【第71回】iPhone用フッターの色を変更する今回は、iPhone用デザインのフッターを変更してみましょう。フッターの背景色を、日付見出しと同じ紫色にします。日付見出し部分に使われている透過PNGを使って、フッターを立体的に見えるようにします。要するに、日付見出し箇所と同じようなデザインになります。▼▼▼<縦表示><横表示>いかがですか?これで、iPhone用のトップページはかなり統一感のあるデザインになったと思います。それでは早速、iPhone用CSS変更画面で修正してみましょう。★iPhone用フッターの色を変更する方法★フッターのデザインを定義している#footer要素のbackground-colorプロパティを変更する。日付見出し箇所に使用されている透過PNGを背景画像に設定し、横方向への繰り返し表示設定を追加する。repeat-x;}さて、今回までの変更を加えた結果、iPhone用トップページはこのようなデザインになりました。blueのテンプレートから、個人的にかなり気に入ったデザインへと変わりました。【第69回】iPhone用記事見出しの文字サイズを変更する今回は、iPhone用トップ画面に表示されている記事見出しの文字サイズを変更します。それに合わせて、記事見出し表示領域の微調整も行います。現在編集中のデザインだと、記事見出しは日付の下に表示されている領域にあたります。▼▼▼<縦表示><横表示>記事見出しのスタイルを定義しているのは、h3要素の.titleクラスです。このクラスのfont-sizeプロパティを設定していきます。あとは、記事見出し表示領域の余白を調整するために、その外側にある.blogbodyクラスも修正します。★iPhone用記事見出しの文字サイズを変更する方法★h3要素の.titleクラスで、font-sizeプロパティを設定する。.blogbodyクラスで不要な枠線を削除し、余白を調整する。gray;}以上で、今回の修正は完了です。【第68回】iPhone用日付見出しの色を変更する今回は、日付見出しのデザインを変更してみます。▼▼▼<縦表示><横表示>それはさておき、ブログの全体的なデザイン整合性から、背景色は紫色に、そして文字色は白色にしたいと思います。文字サイズも少し大きすぎると感じるので、小さくしてみます。あと、文字の影の色も少し変更してみました。▼▼▼<縦表示><横表示>それでは、iPhone用CSS変更画面でCSSを修正していきます。★iPhone用日付見出しの色を変更する★h2要素の.dateクラスで、背景色を表すbackground-colorプロパティで紫色を、文字色を表すcolorプロパティで白色を設定する。font-sizeプロパティとtext-shadowプロパティも変更する。0;}これで、今回の修正は完了です。この日付見出しの背景画像として設定されているbgHeader.pngは、高さ20px、幅1pxの小さな画像です。横方向に繰り返し表示されています。この画像の役割は、日付見出しの上の方を白っぽくし、日付見出し全体を立体的に見せています。画像の一部が白色、残りが透明色になっているようです。背景色にこの画像を重ねて表示する結果、背景色を紫色一色に設定するだけで、表示上は立体的に見えているのです。いうデザインの方法もあるんですね。【第67回】iPhone用ナビゲーションの文字サイズを変更する今回は、iPhone用デザインのナビゲーション部分の文字サイズを変更します。ナビゲーションというのは、広告の下に表示されている次の3件≫の箇所です。▼▼▼<縦表示><横表示>この部分の文字を、少し小さくしてみることにしました。背景色が若干青がかっていて色がにじんだように見えるので、真っ白にしてみました。▼▼▼<縦表示><横表示>今回文字サイズを変更するナビゲーションは.naviクラスで、背景色を白くするのは大枠のbody要素になります。★iPhone用ナビゲーションの文字サイズを変更する方法★.naviクラスのfont-sizeプロパティを設定する。背景色を白にするため、body要素のbackground-colorプロパティを修正する。>>Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。