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

このブログでは、Seesaaブログのデザインのカスタマイズ方法をご紹介しています。

Seesaaブログというのは本当に自由度の高いブログで、HTMLレベルやCSSレベル等、様々なデザインのカスタマイズが可能です。
やろうと思えば、完全オリジナルのデザインにすることもできてしまいます。

例えば、このブログのタイトル文字を大きくする方法をご紹介しましょう。

★ブログのタイトル文字を大きくする方法★

＜手順１＞
デザインでこねこ(左サイドバー)を選択します。

＜手順２＞
１のスタイルシート編集画面で、#banner h1 a要素のプロパティを以下のように変更します。

　　●変更前　：　#banner h1 a {font-size:x-large;}
　　●変更後　：　#banner h1 a {font-size:36px;}

そうすると、タイトル文字の大きさが以下のように変わります。

▼▼▼　変更前　▼▼▼

▼▼▼　変更後　▼▼▼

このように、Seesaaブログのデザインは、自分の好みに合わせて自由にカスタマイズすることが出来るのです！

このサイトでは、そのSeesaaブログのデザイン変更方法をご紹介していきたいと思います。

SeesaaブログのPC版デザインの変更方法、およびiPhone版デザインの変更方法をそれぞれ掲載しています。

左サイドメニューに記事の一覧を掲載していますので、ご自分の目的に応じて各記事をご覧いただければと思います。
記事の一覧は、PC版ブログデザインとiPhone版ブログデザインがあります。

それでは、自由自在なSeesaaブログのデザイン変更をお楽しみください。


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

第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 ほくほくポートフォリオ