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の構成を変更する予定はございません。あしからずご了承ください。また、こんな記述だともっとスマートだよ、というご意見などございましたら、是非お寄せください。もちろん、ここがよくわからない、うまくいかない、というご意見などもご遠慮なくお寄せください。



簡単カスタマイズ中級編として、今回は新たにカレンダーの背景デザインを4種類アップしました。

カスタマイズのやりかたは、前回の記事で書いたカスタマイズコード貼り付け位置(<head>〜</head>内の最下段)に次のコードを記入してください。
それぞれサンプルの後にコードを記入しています。

ちぎれた布1壁紙1

以下貼り付けるコード
クリックで全体選択になるので、Windowsの方はそこでctrl+Cでコピーできます。



ちぎれた布2壁紙2

以下貼り付けるコード
クリックで全体選択になるので、Windowsの方はそこでctrl+Cでコピーできます。



ちぎれた布3壁紙3

以下貼り付けるコード
クリックで全体選択になるので、Windowsの方はそこでctrl+Cでコピーできます。



ちぎれた布4壁紙4

以下貼り付けるコード
クリックで全体選択になるので、Windowsの方はそこでctrl+Cでコピーできます。



先日の記事を追記
燃えた紙燃えた紙

以下貼り付けるコード
クリックで全体選択になるので、Windowsの方はそこでctrl+Cでコピーできます。



以上カレンダーのカスタマイズでした。



カレンダーの枠を以前から変えたかったのですが、今回新しく作成したので、簡単カスタマイズコードを追記しました。
新しいコードをダウンロードしなおしていただくとわかりやすいと思います。

以前ご紹介した簡単カスタマイズの例にならい、コードから一部のコメント記号(<!-- -->と言うもの)を削除するだけです。

具体的に言うと以下の緑色の部分です。

<!-- カレンダーの枠を燃えた紙に変更するにはこちら -->
<!--
<link rel="stylesheet"
href="http://www.wednesdaylove.jp/2006/jugem/rooms/css/flameframe.css" type="text/css" />
-->


以前のコードをお使いの方で、自分でカスタマイズした箇所があるからダウンロードしなおしたくない、と言う方は、以下のコードをコピーして、簡単カスタマイズコードが書かれている場所、もしくは<head>〜</head>の中で最下段にペーストしてもらえれば大丈夫です。

以下貼り付けるコード クリックで全体選択になるので、Windowsの方はそこでctrl+Cでコピーできます。


また最新版のコードでは、明確に今後リリースされる簡単カスタマイズコード貼り付け欄を示してあります。

なお、今回のアップデートに伴い、カレンダー自体のデザインに小さな変更があります。
今までカレンダー上部に表示されていた年月の部分を年だけにしました。



Rooms YouTube対応版ですが、改定前の初期版と比べ、一番上のフロアとプロフィールのフロアが模様替えされています。
差し替えにあたっては、これを良いと思う方も、躊躇される方も、全く気にならない方もいらっしゃるかと思います。
そこで、初期デザインの段階でいくつか作ったものの、ボツにしてしまったデザインも含め、選択(カスタマイズ)出来るようにします。もうしばらくして、それらのデザインと方法を解説いたしますのでお待ちください。
なお、カレンダーの背景画像と、額縁のバリエーションも鋭意製作中です。

なお、改定前のテンプレートをお使いの方には、僕が見つけたところに関しては改訂版のお知らせをコメントさせていただきました。いくらテンプレートの作者とは言え、記事に全く関係ないコメントとして、改訂版のお知らせを書き込むことに、多少躊躇したのですけれど、今回はあまりにも大きな変更だったために踏み切らせていただきました。
今後メールマガジンなどという手も考えてもおりますが、一番確実なのはこちらのページをご覧になっていただくことだと思いますので、時々覗いていただくか、RSSなどでご確認いただければと思います。
また、ご連絡があったほうが良いと言う方は、その旨をコメントで残してくださると、バージョンアップしたときはご連絡に伺わせていただきます。

また、ご意見ご要望もこちらにお寄せください。



テンプレートを一度公開しておきながら、チョコチョコと手直しがはいってすいません。

今回紹介するのは、htmlなどをほとんどいじったことがなくても、比較的簡単にこのテンプレートをカスタマイズできちゃう方法です。

○広告を消したい
○額縁のデザインを変えたい
○フリースペース1をテレビの形で使いたくない。

この3点のカスタマイズの仕方です。

グーグル広告の消し方


今回はデフォルトでグーグルの広告が入っていますが、GoogleAdSenceに登録している方は、それをそっくり自分のコードで入れ替えるといいと思います。ですが、特に登録もしていないので、これを表示したくないと言う方もいらっしゃると思います。
そこで、表示部分を削除するのではなく、広告自体を見えなくしてしまう方法が次に示すものです。

このテンプレート用のファイルのhtml(管理画面で上に来る方)をいじります。

ソース(中身)を見ていただくと、途中に<!-- ********** 簡単カスタマイズ ********** -->と書いてある箇所があります。大体小窓3画面分ほど下にスクロールさせると出てきます。
ここから更に下に3行下がったところから次のような記述があります。

<!-- GoogleAdSenseを消すにはこちら -->
<!--
<link rel="stylesheet" href="http://www.wednesdaylove.jp/2006/jugem/rooms/css/nogoogle.css" type="text/css" />
-->


この中で赤くした部分の記号を削除します。
<!----> ですね。
同じ記号で赤くなっていない部分がありますが、そちらは消さないようにしてください。
以上です。

これだけで、2箇所あるGoogleAdSenceが表示されなくなります。

額縁のデザインの変え方


こちらも同様に簡単にカスタマイズすることが出来ます。
上記で説明したコード(htmlの文字列)の次に以下のようなコードが出てきます。

<!-- Amazonの額縁を変えるにはこちら -->
<!--
<link rel="stylesheet" href="http://www.wednesdaylove.jp/2006/jugem/rooms/css/newframe1.css" type="text/css" />
-->

<!-- Amazonの額縁を変えるにはこちら その2-->
<!--
<link rel="stylesheet" href="http://www.wednesdaylove.jp/2006/jugem/rooms/css/newframe2.css" type="text/css" />
-->

<!-- Amazonの額縁を変えるにはこちら その3 -->
<!--
<link rel="stylesheet" href="http://www.wednesdaylove.jp/2006/jugem/rooms/css/newframe3.css" type="text/css" />
-->


現段階で額縁は4種類(デフォルトを除いて3種類)用意してあります。以下のサンプルを参考にしてください。
デフォルト
イーオン・フラックス プレミアム・エディション
その1
Black Eyed Peas/Monkey Business
その2
ザ・オープン・ドア(初回生産限定盤)(DVD付)/エヴァネッセンス
その3
野波浩写真集 MOUSA



以上のうちデフォルト以外の額縁を使いたい場合は、それぞれその1であれば赤色の記号その2であれば緑色の記号その3であれば青色の記号だけを削除してください。

あとから額縁を違うものにする場合は、削除したものを戻してから、新たに必要な箇所を削除してください。
また、今後もリリースを続ける予定ですので、ある程度数がそろえば、その時点で専用の記事を書こうと思います。

フリースペース1のテレビの枠を外して使う方法


これも先ほどのコードの続きにあります。
削除するコードは下記の赤い記号です。

<!-- フリースペース1をテレビじゃなくするにはこちら -->
<!--
<link rel="stylesheet" href="http://www.wednesdaylove.jp/2006/jugem/rooms/css/notv.css" type="text/css" />
-->


注意点としては、このカスタマイズをした場合は、テレビの枠がなくなるのですが、表示位置は変わりません。ただ、枠がなくなる分幅が広くなり、最大で225ピクセルまで表示可能です。

これらに関する質問はコメント欄へどうぞ。



Roomsの改訂版となる YouTube改訂版だけれど、使いこなすためにいくつか知っておいたほうがいいことがあるので、紹介します。
まずJUGEMについている機能のフリースペースですが、それらの配置と特徴を紹介します。

まずフリースペース1ですが、こちらはYouTube用に作られた、テレビの画面に表示されます。細かい説明は後ほど。

フリースペース2は左のメニュー欄、カレンダーのすぐ下に挿入されます。
柱のデザイン上、幅は220pxまでとなっています。

フリースペース3は左のメニュー欄、アマゾンアフィリエイトのすぐ下に挿入されます。
こちらもデザイン上、幅は220pxまでとなっています。

フリースペース4は左のメニュー欄、一番下に表示されます。
こちらもデザイン上、幅は220pxまでとなっています。

フリースペース5は右の記事欄、一番下に表示されます。
デザイン上、幅は750pxまでとなっています。

さて、フリースペース1ですが、何も表示しない場合には、デフォルトで画面の消えたテレビが表示されています。ここにYouTubeの動画などを入れることが出来るのですが、YouTubeのサイト上にあるコードをそのまま貼り付けると大きすぎてはみ出してしまいます。
そこで4箇所、数値を修正していただく必要があります。
以下に例を挙げます。

<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/****"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/****" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

上記のコードの中で赤字にした4箇所の数字を書き換えます。
425170
350140
それぞれ2箇所ずつの計4箇所です。
フリースペース1のタイトルは表示されないので、好きなように書いてください。



この記事はテンプレート[Rooms]シリーズに付加されている、オリジナルクラスのサンプルです。

テンプレートRoomsにはいくつか装飾用のスタイルが設定されています。

リンク用の特殊スタイル


class="postit"とした場合のリンクテキスト
WednesdayLOVE.jp
リンクテキストの左側に付箋が入ります。
ソース:<a href="http://www.wednesdaylove.jp" target="_blank" class="postit">WednesdayLOVE.jp</a>

class="arrow"とした場合のリンクテキスト
WednesdayLOVE.jp
リンクテキストの左側に矢印が入ります。
ソース:<a href="http://www.wednesdaylove.jp" target="_blank" class="arrow">WednesdayLOVE.jp</a>

class="arrow2"とした場合のリンクテキスト
WednesdayLOVE.jp
リンクテキストの左側に矢印が入ります。
ソース:<a href="http://www.wednesdaylove.jp" target="_blank" class="arrow2">WednesdayLOVE.jp</a>※モダンブラウザのみ後方にも矢印が入ります。(ただいま調整中です)

その他の特殊スタイル


class="smallnotice"とした場合のテキスト
モダンブラウザではこの文字列の先頭に自動的に「※」が付与されます。文字の大きさが80%になっています。

ソース:<span class="smallnotice">モダンブラウザではこの文字列の先頭に自動的に「※」が付与されます。文字の大きさが80%になっています。</span>


説明書きなどとして使えると思います。文字色を変更するタグ(文字列を選択して、文字色ボタンを押したときに自動的に挿入されるタグ)の中に入れてもいいと思います。



***
totaltodayyesterday
このpageのtopへ▲

2017

 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>
RSS Feedburner



Powered by FeedBlitz

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

Recent Comment

Recent Trackback

このpageのtopへ▲