WednesdayLOVE Template

WednesdayLOVE.jpが発信するJUGEM専用のテンプレートの解説をしています。

一定期間更新がないため広告を表示しています



  • Category > -
  • Written by > スポンサードリンク

ようやくアナウンスすることができるようになりました。
フロア画像のカスタマイズの仕方です。

今回はCSSファイルを変更していただくようになります。
難易度としては中級(一部中上級)といったところでしょうか。

htmlの関係で、今回は通常の記事欄はそのままで、一番上のフロア、またコメント、トラックバックのフロア、そしてプロフィールのフロアを変更する方法を解説いたします。

テキストエディタなどでCSSファイルを開いていただいた方が作業効率はぐんと上がると思います。
僕が愛用しているのは秀丸エディタですが、そういったものがなければOS付属のテキストエディタでも大丈夫です。Windowsならメモ帳、マックなら・・・なんでしたっけ?
ともかく、そういったテキストエディタで編集していきましょう。

JUGEMのテンプレートの編集から、CSS編集フォームの中を一度クリックしWindowsなら右クリック→すべてを選択、コピー。もしくは[ctrl + a]、[ctrl + c]。その後テキストエディタを立ち上げて、貼り付け、もしくは[ctrl + v]といった感じです。
そしてCSSの188行目付近(ダウンロードしたバージョンで若干違いが出てきます)に
/* -------- 右側のRooms関連クラス -------- */
というものが出てきます。

今回編集するのはここから先の部分です。

ちなみに、メモ帳で行番号がわからない場合は、上部メニューの「表示」→「ステータスバー」にチェックを入れてください。ウインドウの下部にカーソルの行番号が表示されます。

まず、どこの画像を入れ替えるのかを決めてからの作業になるのですが、それよりも先に、画像のラインナップを確認してください。
今現在のラインナップはこちらになります。
サンプルでは通常記事欄に使用していますが、このようにするには細かくhtmlかCSSをいじる必要があるため、今回はサポートいたしません。

ラインナップのうち、壁紙が黄土色のものについては後で解説します
横罫線
一番上部の部屋の画像を入れ替える場合です。

CSSの中で213行目付近
.FirstFloor{
background-image : url(
http://www.wednesdaylove.jp/2006/jugem/rooms/roomparts/BicycleFloor750x400.jpg);
というコードのうち緑色の部分を書き換えます。
新たに記入していただくコードは、ラインナップの記事から、気に入った画像の記事に書いてあるコード(バックグラウンドイメージのURL)です。
横罫線
次にコメント欄の部屋の画像を入れ替える場合です。

CSSの中で239行目付近
.CommentFloor{
background-image : url(
http://www.wednesdaylove.jp/2006/jugem/rooms/roomparts/CommentFloor750x400.jpg);
というコードのうち緑色の部分を書き換えます。
新たに記入していただくコードは同様に、ラインナップの記事から、気に入った画像の記事に書いてあるコード(バックグラウンドイメージのURL)です。
横罫線
次にトラックバック欄の部屋の画像を入れ替える場合です。

CSSの中で246行目付近
.TrackbackFloor{
background-image : url(
http://www.wednesdaylove.jp/2006/jugem/rooms/roomparts/TrackbackFloor750x400.jpg);
というコードのうち緑色の部分を書き換えます。
横罫線
次はプロフィール欄の部屋の画像を入れ替える場合です。
こちらは特殊で、2箇所入れ替えなければなりません。
まずはCSSの中で204行目付近
.WallPaper{
background-image : url(
http://www.wednesdaylove.jp/2006/jugem/rooms/roomparts/WallPaper750x400.jpg);
というコードのうち緑色の部分とCSSの中で253行目付近
.ProfileFloor{
background-image : url(
http://www.wednesdaylove.jp/2006/jugem/rooms/roomparts/ProfileFloor700x400.jpg);
というコードのうち緑色の部分の2箇所を変更します。
こちらを標準的な白っぽい部屋に変更する場合は、前者を

に変更し、後者を好きなフロアの画像URLに変更します。
横罫線
さて、黄土色の2種類の部屋(旧バージョン、新バージョンそれぞれのプロフィールエリアとして使用されているもの)への変更ですが、これらはCSSだけではなく、現行版のテンプレートではhtmlも書き換えないといけないので、その解説はまた次の機会にしたいと思います。ただ、画像のURLは参考までに公開していますので、知識のある方で変更なさりたい方はどうぞチャレンジしてみてください。

なお、htmlの構成を変えれば、もっと簡単に変更できるようになるのですが、次世代ブラウザのCSSの解釈などがはっきりとテストできていませんので、しばらくはhtmlの構成を変更する予定はございません。あしからずご了承ください。また、こんな記述だともっとスマートだよ、というご意見などございましたら、是非お寄せください。もちろん、ここがよくわからない、うまくいかない、というご意見などもご遠慮なくお寄せください。





  • Category > -
  • Written by > スポンサードリンク

Comments

いぶさん、こんばんは。
以前、更新のお知らせをいただいた新米日本語教師のやんです。
カスタマイズ、ありがとうございました!
さっそく使わせていただきました。丁寧な解説、本当にありがたいです。

プロフィールの欄なのですが。
私、下のスクリプトも書き換えました。
背景を白くしたい場合、書き換えが必要なのは変更したい画像を含めて全部で3点ではないのかな、と思いまして、蛇足ながら。

===
CSSの中で204行目付近
.WallPaper{
background-image : url(
===
上記のすぐ下の部分、

.ProfileWallPaper{
background-image : url

ここを下のように書き換えました。
(http://www.wednesdaylove.jp/2006/jugem/rooms/roomparts/WallPaper750x400.jpg);

私の書き換えが間違っていると困るので、念のためアドレスを入れておきます。もしかしたら他の方から連絡がいっているかもしれませんね。読み流してくださいませ。

ではでは。お陰様で無事簡単にカスタマイズできたやんでした。ありがとうございました。
あー、ホント書き方まで間違っていたなんて・・・。
このカスタマイズに関しては、結局簡単カスタマイズコードを作って削除します・・・・。
ご指摘ありがとうございました。
p.s.いくつかカスタマイズして使ってくださっているようで、なんだか嬉しいです。
▼コメントする









Trackbacks

Trackback URL
***
totaltodayyesterday
このpageのtopへ▲

2017

1234567
891011121314
15161718192021
22232425262728
293031    
<< October 2017 >>
RSS Feedburner



Powered by FeedBlitz

Mozart: The Violin Sonatas
モーツァルト:ピアノ三重奏曲第4番&第5番&第6番
プリンセス・ファーギー:THE DUTCHESS(初回限定特別価格)

Recent Comment

Recent Trackback

このpageのtopへ▲