2010年12月19日

【第10回】ここまでのまとめ(第1回〜第9回)

こんにちは、ほくほくです。

Seesaaブログを便利に、そして自由に使うために、デザイン変更のノウハウをお伝えしようという趣旨で始めたこのブログも、だんだん記事が増えてきました。

そこで10回目となる今回は、これまでの第1回から第9回までに記載した内容をまとめつつ、簡単にご紹介したいと思います。



【第1回】このブログについて

第1回目の記事では、簡単に自己紹介を交えつつ、Seesaaブログのデザイン変更の実例としてこねこ(左サイドバー)テンプレートをベースに、ブログタイトルの文字の大きさを大きくする方法をご紹介しました。

修正した要素は#banner h1 a、使用したプロパティはfont-sizeです。

こねこ(左サイドバー)テンプレートは、その後現在に至るまで、記事に掲載している修正を徐々に加えつつ使用しています。

title_after.JPG



【第2回】デザインを変更する画面

今のところ、最も重要なコンテンツです。
なぜなら、この画面を使わずして、Seesaaブログのデザイン変更はできないので。

CSSの修正については全く実例を挙げていませんが、CSS変更画面の使い方については必ずこの記事をご覧下さい。

SD_002_02.jpg



【第3回】記事本文スタイルの変更

ブログの記事の文字スタイルを変更した回です。
こねこ(左サイドバー)テンプレートの本文文字が、全て太字となっていたため、この太字設定を削除しました。

修正したクラスは.text
この中のプロパティfont-weight:bold;を削除することで、本文文字を太字から通常文字へと変更しました。

SD_003_02.JPG



【第4回】サイドバーの文字を小さくする

今度は、サイドバーの文字サイズを変更した回です。

このテンプレートのデフォルト文字サイズは大きかったので、それを小さくしました。

使用したクラスは.side、修正したプロパティは第1回と同じくfont-sizeです。

SD_004_02.JPG



【第5回】記事に枠線を付ける

当初このブログは、Seesaaブログで使用されている要素を順に説明していこうかと考えていました。
しかしこの頃から、まずはこのこねこ(左サイドバー)テンプレートに修正を加えていきながら、その方法を公開する形になってきています。

この回では、ブログ記事に枠線を付ける方法をご紹介しました。

使用したのは.blogクラス。
この中に、border-topborder-rightborder-bottomborder-leftの各プロパティを書き加えて行きました。

SD_005_02.JPG



【第6回】サイドコンテンツに枠線を付ける

第5回と同様に、今度はサイドコンテンツに枠線を付ける方法を紹介した回です。

ただし、いざサイドコンテンツに枠線を付けてみると、他にもいくつかしなければならない作業がhっせいし、その後のサイドコンテンツシリーズにつながって行った回でもあります。

この回で使用したのは.sidetitleクラスと、第4回と同じ.sideクラス。
追加したプロパティは、第5回と同じborder系のプロパティです。

SD_006_04.JPG



【第7回】サイドタイトルのスペースを調整する

第6回でサイドコンテンツに枠線をつけたら、いろいろと課題が発生してしまいました。
その解決策の第1弾で、サイドコンテンツのタイトルと本文の枠線が微妙につながっていないという問題を解決する回になります。

この回で、初めてmarginプロパティの修正を行いました。
修正したクラスは、第6回と同じ.sidetitleです。

SD_007_01.JPG



【第8回】タグクラウドに枠線を付ける

第6回で発生した課題の解決方法第2弾。
この回では、タグクラウドの本文部分に枠線を付ける方法を紹介しています。

修正したクラスは、.side-tagクラス。
第5回と同じく、border系のプロパティを追加しています。

SD_008_01.JPG



【第9回】カレンダーに枠線を付ける

第6回で発生した課題の解決方法第3弾。
この回では、カレンダーに枠線を付ける方法を紹介しています。

Seesaaブログのサイドコンテンツって、様々な形式で様々なクラスを使用しているので、それぞれに設定が必要になってしまうんですよね。

この回で修正したのは、IDセレクタの#calendar
こちらに、第5回と同じくborder系のプロパティを追加しています。

また、枠線を付けた結果、カレンダーとその下のコンテンツとの隙間が気になりました。
そこで、第7回と同じくmarginプロパティを修正しています。

SD_009_02.JPG



以上が、第1回から第9回までの記事掲載内容になります。

具体的なCSSの編集内容については、それぞれの記事内でご覧下さい。

さて、今後なのですが、サイドコンテンツの枠線設定課題がまだ少し残っていますので、まずはそちらを解説していきたいと思います。

それから、このこねこ(左サイドバー)テンプレートのコンテンツのサイズ(横幅)がちょっと気になりだしているので、その修正に入っていこうと考えています。

これからも、徐々にコンテンツを増やしていこうと考えていますので、よろしくお願いします。

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

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
ラベル:まとめ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

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