« 組み込みエンジニア | トップページ | ねずみの競馬予想 2007年7月14日(番外編) »

CSSを変更してカスタマイズ

ココログのリッチテンプレートはデザインの良いものが多くそれなりに気に入っていたんですが、本文を書くエリアが狭く、
改行位置を気にしながら書くのもイヤなんで他のブログの記事を参考にしてCSSの変更にトライしてみました。
ココログで独自のCSSを使う方法は、サブタイトルにCSSを埋め込む方法と、マイリストに埋め込む方法があるみたいなのですが、
今回は、NONTHEMEを参考にしてサブタイトルに埋め込む方法でやってみました。
CSSについては、とほほのスタイルシート入門に詳しく記述されていますので、わからない時は見てください。

手順としては、

① ログイン後に適当なテンプレートを作成して、それを反映させる。
  (自分の場合はテンプレート作成時に、「テーマ」 --> 「ページ全般の設定」で、記事表示列を可変にしました)

② 「コントロールパネル」 --> 「ファイル」 --> 「blog」フォルダをクリックして、その中のstyles.cssをダウンロードする。
  (ダウンロードは、styles.cssの上でマウスを右クリックして「対象をファイルに保存」を実行する)

③ ダウンロードしてきたstyles.cssを適当な名前に変更してカスタマイズする。

④ カスタマイズしたCSSファイルをアップロードする。
  (アップロードは、「コントロールパネル」 --> 「ファイル」の中の新規ファイルのアップロードを実行する)

⑤ そのままだとアップロードしたCSSファイルは有効にならないので、サブタイトルの記述部分にCSSの設定を埋め込んで
  反映させる。

サブタイトルに埋め込んでいるCSSの設定は下記のとおりなので参考にしてください。

  <link rel="stylesheet" href="http://sat-che.cocolog-nifty.com/blog/ratstyles.css" type="text/css" />
  <div>『ねずみの競馬予想とプログラミング』 オーナーのブログ</div>

ただし、この方法だとリンクの文字色がカスタマイズしたCSSの設定にならなく、デフォルトのオレンジ色に
なってしまったので、最終的には、使っているテンプレートのリンク文字色をCSSの文字色に合わせる操作をして
OKになりました。

現在のこのブログのデザインは、リッチテンプレートの「アクア/ブルー」の配色を参考にカスタマイズしました。
気に入った配色のテンプレートを見つけたら、それを参考にカスタマイズすると簡単だと思います。

|

« 組み込みエンジニア | トップページ | ねずみの競馬予想 2007年7月14日(番外編) »

ギャンブル」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/217467/15737612

この記事へのトラックバック一覧です: CSSを変更してカスタマイズ:

« 組み込みエンジニア | トップページ | ねずみの競馬予想 2007年7月14日(番外編) »