2014年12月03日

このブログについて

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

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

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

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

<手順1>
デザインでこねこ(左サイドバー)を選択します。

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

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

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

▼▼▼ 変更前 ▼▼▼
title_before.JPG

▼▼▼ 変更後 ▼▼▼
title_after.JPG

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

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

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

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

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

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 12:03| Comment(3) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月27日

【第77回】iPhone用CSS公開 ― Stripe Purple ―

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

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

<トップページ>
SD_077_01.PNG SD_077_02.PNG

<記事ページ>
SD_077_03.PNG SD_077_04.PNG


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

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

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


◆1.背景画像の取得

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


◆2.アイコン画像の変更

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

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

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

★CSSはこちら★
タグ:iPhone CSS 公開
posted by o(^0^)o ほくほく at 00:59| Comment(1) | iPhoneブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月26日

【第76回】iPhone用コメントの文字サイズを変更する

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

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

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

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_076_01.PNG

<横表示>
SD_076_02.PNG

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_076_03.PNG

<横表示>
SD_076_04.PNG

それでは、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 ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | iPhoneブログデザイン | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。