Seesaaブログのデザイン変更ワザ

第57回からの一連の記事で編集してきた、SeesaaブログのiPhone用カスタマイズCSSを公開します。

SeesaaブログをiPhoneで見た時のデザインが、こんな感じになります！



下記★CSSはこちら★をクリックするとCSSが表示されますので、どうぞご自由にご利用下さい。

なお、このCSSの適用先画面については第58回をご覧下さい。

また、以下の点にご注意下さい。


◆１．背景画像の取得

ヘッダーの背景画像（※１の箇所）は、このブログの中のディレクトリに格納されています。
いつか、このブログがなくなる可能性も無きにしもあらずなので、画像を取得してご自分のサイト内にアップロードして使用することをお薦めします。
背景画像の取得方法などは、第63回をご覧下さい。


◆２．アイコン画像の変更

ブログ説明文の箇所に表示されているアイコン画像（※２の箇所）は私のものですので、ご自身の好きなアイコンに差し替えて下さい。
変更方法は、第66回で解説しています。


【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ

★CSSはこちら★

今回は、iPhone用デザインのコメント欄の文字サイズを変更します。

第62回でご紹介したように、Seesaaブログのコメント欄は複数のクラスで構成されています。

今回は、第74回で実施した本文の文字サイズ変更に合わせて、コメント欄全体をfont-size:90%にしてみましょう。

▼▼▼　変更前　▼▼▼


▼▼▼　変更後　▼▼▼


それでは、iPhone用CSS変更画面を開いて、CSSを編集していきましょう。

★iPhone用コメントの文字サイズを変更する方法★

#comments要素にfont-sizeプロパティを追加する。

▼▼▼　変更前　▼▼▼
#comments {
background-color: white;
margin: 5px 10px 10px 5px;
padding: 0px;
border: 1px solid #375D81;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
}

▼▼▼　変更後　▼▼▼
#comments {
background-color: white;
margin: 5px 10px 10px 5px;
padding: 0px;
border: 1px solid #375D81;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
font-size: 90%;
}

うまくデザインが変更されたでしょうか。

これで、この一連のiPhone用デザイン変更は完了となります。
今回まで変更してきたCSSを、トップページのCSSにも適用しておきましょう。

次回、今まで編集してきたCSSを公開します！


【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ

私は、ブログの記事を書く時に、よく引用（blockquote）を使用します。

しかし、SeesaaブログのiPhone用CSSには、引用のデザインは定義されていないんですよね。

こんなふうに、味気ない表示になってしまいます。

▼▼▼　変更前　▼▼▼


そこで今回は、この引用に書式を追加してみたいと思います。
例えば、こんな感じです。

▼▼▼　変更後　▼▼▼


この引用の書式は、私がo(^0^)o ほくほくポートフォリオのPC版で使用しているテンプレートと同じにしてみました。
これだと、PC版のCSSからコピーしてくるだけですみますので。

★iPhone用引用書式を追加する方法★

iPhone用CSSに、blockquote要素のデザインを追加する。

▼▼▼　変更前　▼▼▼
なし

▼▼▼　変更後　▼▼▼
blockquote{
border:1px dashed #A7A7A6;
background:#FFFFE8;
padding:5px;
margin:10px;
}

Seesaaのテンプレートにないものは、自分で追加してみるのも一つの手ですね。

今回は以上です。


【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ