自作スタイルシートの適用: 詞織

自作スタイルシートの適用

　サービススタートから２日で、はやくもユーザーの皆さんが技をあみだしてるようです。せっかくなので私も、自分とこでやってることをメモしておきます。
　
　自分でスタイルシートを用意すれば、定型テンプレートのため似かよった見栄えを変えることが出来ます。（ただし、すぐできる！というほどではないので、リデザインに多少時間をかけてもいいやって人とか、スタイルシートの仕組みを理解されてる人にオススメです。）

０．スタイルシートってよくわからないけどやってみたい人

「とほほのスタイルシート入門」さんを参考にしてみてください。

１．スタイルシート・ファイルを用意

　（cssファイルを理解されてる方は本項をとばして２．へどうぞ）

　まずcssファイルを用意する必要があります。簡単な方法はtxtファイルにスタイルを記述して、保存したあとに拡張子をtxt→cssに変更するやり方ですね。

　よくわからない！という方は、ＩＥですとブラウザの「表示＞ソース」を選択してください。するとページのソースという文字列があらわれます。このソースの上から６・７行目あたりに、

<title>あなたのココログのタイトル</title>
<link rel="stylesheet" href="あなたのココログのＵＲＬ/styles.css" type="text/css" />

という表記があると思います。このＵＲＬをコピー＆ペーストして、ブラウザのＵＲＬ欄に打ち込んでみます。…すると、なんだかよくわからない文字列がずらっと表示されると思います（メモ帳が立ち上がったりホームページ作成ソフトが立ち上ったり、人によってさまざまだと思いますが何らかの形で表示されると思います）。この文字列をすべてコピーし、新規にテキストファイルを作って保存しましょう。
　自作するスタイルシートの名前は、既存のスタイルシートとは異なる名前にしたほうが良いかと思います（のちのち区別がつきにくくなるので）。詞織ではｓｔｙｌｅｓ．ｃｓｓ→style-site006.cssとしました。
　拡張子がtxtのままでは使えませんので、ｃｓｓに直します。これでｃｓｓファイルが完成しました。

　スタイルの内容、特に＜ｃｌａｓｓ＞＜ｉｄ＞などについては、既存のテンプレートに適用されているスタイルシートを覗いて見ると参考になります。
　自分のサイトのソースを見ると、適用されているスタイルシートの＜ｃｌａｓｓ＞＜ｉｄ＞などがわかります。

たとえば「詞織」のソースを見ると、

（中略）

という感じになっています。

　＜ｄｉｖ　ｉｄ＝”ｃｏｎｔａｉｎｅｒ”＞の部分を変更したスタイルシートを作ればよいわけですね。

２．自分のスタイルシートファイルをアップロードする

　「記事の作成→写真やファイルのアップロード」から、cssファイルをアップロードします。
　「詞織」ではトップのディレクトリ「ｂｌｏｇ／」にアップロードしてます。
　
３．サブタイトルを変更

　ここで言う「サブタイトル欄」というのは、ココログ管理ページにログインしたあと「ウェブログ＞設定＞ウェブログ／サブタイトル名称変更」のページにある「ウェブログのサブタイトル（キャッチフレーズ）」のテキストエリアのことです。ここにｃｓｓファイルへのリンクタグを埋め込むことが「サブタイトル欄への記入」ということです。
　「詞織」のサブタイトル欄には以下のような感じで入力しています。
　
<link rel="stylesheet" href="http://siolli.cocolog-nifty.com/blog/style-site006.css" type="text/css" />
si olli novae historiae apparent, quas legere volo. フルカワマサユキblog

　先頭に＜ｌｉｎｋ＞タグを加えるだけで、自分の作ったスタイルが適用されました。ＵＲＬはもちろん、２．で自分でアップロードしたｃｓｓファイルを指定します。
　
　
　注意点としては、テンプレートに適用されているスタイルシートと同じ＜ｃｌａｓｓ＞＜ｉｄ＞を利用する癖をつけておくこと、です。追加したｃｓｓファイルが重過ぎないくらいに、流用できるところは流用すると良いでしょう。

追記：既存のｃｓｓファイルの参照について、解説を加えました（20031206)
　　　　記事中のソース部分をコピー&ペーストできるように修正しました(20031227)
　　　　「サブタイトル欄」について、記事中３．に解説を加えました(20040102)

2003.12.04 in ウェブログ・ココログ関連 | Permalink