新着記事
2007年03月18日

カスタマイズのための参考サイト

今回のカスタマイズについての詳細です。
※元のテンプレート:ライトグレー(左サイドバー)
改変した箇所は
タイトル画像を作成して追加
フォントの種類・サイズと行間・字間の変更または指定
カレンダーとコンテンツの項目の色を変更。コンテンツ項目部分にボーダーをつけた。
コンテンツの並び替え
〔新着記事〕をサイドバーからメイントップに置くことで、長いタイトルの場合に折り返してしまうのを回避し、最近どんな記事を書いているのかを目に留めてもらいやすいように工夫。
タイトルバーの表示内容の順序を変更
全ての記事に日付を表示する、つまり同日に複数の記事を投稿してもタイトル上の日付が入るように改変。
〔新着記事〕〔カテゴリ〕〔過去ログ〕〔最近のコメント〕〔最近のトラックバック〕で表示されるリスト形式のリンクを補完
〔新着記事〕の表示を「記事タイトル (日付)」に変更
過去ログが増えてリストが伸びたので、〔過去ログ〕をスクロール表示に。(折りたたみメニューより簡単)
タブメニューを設置

これらの改変でコンテンツとコンテンツの間隔も調整が必要になり、margin:×px; の数値を変えたり margin-top:×px;あるいはmargin-left:×px; を追加して調整しました。

続きで印の項目で参考にしたサイトと印の項目で利用したスタイルシートを配布しているサイトを紹介します。

印の項目で参考にしたのはSeesaaブログのカスタマイズと言ったらココの…
ブログカスタマイズ
HTMLやスタイルシートの知識が全くない初心者でも、指示通りにすればカスタマイズができてしまう、本当にありがた〜いサイトです。

印の項目ですが、スタイルシートを配布しているのは海外のサイトです。
Dynamic Drive CSS Library
英語がわからなくても全く心配ありません。タブメニューのほかにもドロップシャドウなどのCSSもあります。もちろん無料で利用できます。

やり方は、
(1)もし画像が使われているならその画像をダウンロードし、ファイルマネージャでアップロード
(2)コピーしてきたCSSとHTMLのコードのリンク部分と画像へのリンク部分を、「メモ帳」などのテキストファイル上で自分用のリンクに変更
(3)デザイン→コンテンツの編集で「自由形式」のコンテンツを追加
(4)「自由形式」のコンテンツの編集画面で、(3)で編集したコードを貼り付け保存

Firefoxでの見え方ただし上下の間隔調整、特にコンテンツタイトル部分に接着させるには、margin で指定調整しなければならないので結構たいへんです。margin指定を行ってもブラウザにより若干見え方が異なり、Firefoxではメニューとコンテンツタイトル部分が少しかぶりました。その差は1ピクセルです(笑)

次回は海外のフリー素材サイトと海外のフリー素材サイトを紹介している日本のサイトについて書きます。

ブログランキング「Webサイト・CGI」カテゴリにおいて登録時171位から77位にまで上がってきました(^^) みなさんのクリックのお陰です。
ランキング上位にランクされている、本当の意味でのサイト制作のコツのブログと勝負するつもりは全くありません。これからも初心者の私でもできたことを書き、その参考になったサイトの紹介をしていきます。

拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 17:30 | Comment(0) | TrackBack(0) | Seesaaブログのカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
最近のトラックバック