ロリポブログ「カスタマイズの記録」

記事書き込み部分の変更

今回は、本文記事を書き込む枠のなおします。

作業としては、
１．トラックバックやコメント、記入者などの表示を消します
２．背景の色を指定します
３．記事部分の枠のスタイルを指定します。

まず、１からです。
これは、『HTML編集フォーム』で、以下の記述の赤い部分をで囲んでコメント扱いにするか、削除すればokです。

{prev_entry} | main | {next_entry}

{entry_title}

{entry_description}

{entry_sequel}

{entry_date} {entry_time} | posted by {user_name}

{category_name} | permalink | {comment_num} | {trackback_num}

{trackback_auto_discovery}

ここでの修正が終わったら必ず、「HTMLを更新する」のボタンをクリックして、更新してください。
以前、苦労してHTMLの修正をしたあと、このボタンを押さずにCSSを更新したら、HTMLの修正内容が消えてしまいました。必ず、それぞれので更新してから作業しなければならないようです。

次に、
２．背景の色を指定します

ここからは、『CSS編集フォーム』での作業です。

#contents {
float: right;
width: 500px;
border-left: 1px solid #660000;
}

に以下のように青字の部分を追加します。

#contents {
float: right;
width: 500px;
border-left: 1px solid #660000;
background: #FFFF99;
}

続いて、
３．記事部分の枠のスタイルを指定します。

.entry {
margin: 20px 25px 30px 15px;
padding: 0px 5px 5px 0px;
}

赤字の部分を以下のように書き換えました。

.entry {
background: #FFFFFF;
margin: 10px 10px 20px 10px;
padding: 10px;
border-bottom: 5px solid #FF9966;
}

この後『CSSを更新する』をクリックすれば終了です。

ここまでで、フォームの指定がだいたい終わりましたので、後は記事(本文)を記入していけば、ブログのホームページが出来るはずです。

サイドメニューを作る

今回は左側のメニュー・リンクを作ります。
これが出来るまでには、すごい試行錯誤があったのですが、
とりあえず変更点だけご紹介します。
※メニューを作るに当たって、カテゴリを見直しました。これについてはブログの標準機能のため記述を省かせて頂きます。また、上部のリンク部分もこれに伴って変更してあります

【HTML編集フォームについて】

"side"というidがメニュー部分になりますので、その下に以下のHTMLタグを記述しました。
※コメントの「左側のメニュー部分」というのは、私が書き直した物で始めは「右」となっていました。

メニュー

上記のHTMLタグで、"sidetitle"、"side_link"、"side_link_2"というclassを指定したのでそれについて、CSSを指定しなければなりません。
他にも、いくつか手直しした部分もあるのでそれについても紹介します。

【CSS編集フォームについて】
まず、上の３つのclassについては、全く新規の記述の為、一番下のスペースに以下のように書き込みました。

/* サイドメニュー */

.sidetitle {
font-weight:bold;
text-align: center;
font-size: 12px;
letter-spacing: 5px;
padding: 5px;
background: #F5DEB3;
}

.side_link{
border-style : solid ;
border-width : 0px 0px 1px 0px ;
border-color : silver ;
font-size: 12px;
letter-spacing: 2px;
padding:7px 10px 5px 10px;
background: #660000;
}

.side_link a {
color: #FFF; text-decoration: none;
}

.side_link_2{
border-style : dashed ;
border-width : 0px 0px 1px 0px ;
border-color : #660000;
font-size: 12px;
letter-spacing: 2px;
padding:7px 10px 5px 20px;
}

各クラスの記述の他に、.side_link a {　〜〜　}として記述されている部分がありますが、これはそこからリンクを張ったときの表示の指定です。
始めの設定通りだと、暗めのグレーだったので、茶色(#660000)の背景にこの色だと目立たないため改めて白い色(#FFF)を指定しました。
これだけだと、標準時のみの設定のため、既読やマウスを上に乗せたときは始めの設定通りになっています。

因みに、リンクを張ったときの設定はCSS編集フォームの上の方で
以下のように指定されています。

※色については、少し変更してあります。
a:link {color:#660000; text-decoration:underline;}
a:visited {color:#FFA07A; text-decoration:underline;}
a:active {color:#333; text-decoration:none;}
a:hover {color:#333; background:#CCC; text-decoration:none;}

上から、「リンクを張った通常の状態」「リンク先が既読の時」
「リンクをクリックした瞬間」「リンクの上にマウスを置いた時」の
表示を指定しています。

今回ついでに、メニュー部分の幅なども以下のように修正しました。
赤字の部分です。

#contents {
float: right;
width: 500px;
border-left: 1px solid #660000;

}

#side {
padding: 0px 0px 20px 0px;
margin-right: 500px;
background: #FFFFCC;
}

本当はかなり失敗しました。
思った通りに変更できなくて、いろいろやり直しました。
逆にすごい勉強になりましたけど.......
まとめて見るとこれしか変更していないのがショックですけど...

アマゾンの広告を消す

今回は、最初から表示されているアマゾンの広告を消します。

HTML編集フォームの操作のみでOKです。

RECOMMEND

{amazon_item}

上記の記載部分を削除するか、または以下の要にで囲んでコメント扱いにします。

そうすると、以下の要にアマゾンの広告が消えて、その下にあった項目が上にずれて表示されています。
必要なければ、削除してしまって問題ありません。
他の項目も同様に削除出来ます。

メニューの位置を左から右に変更する

【変更前の状態】

※今回から変更前と変更後の画像をのせてみます。

現在は、左側に投稿した記事が表示され、メニューが右側になっています。
これの左右を入れ替えてみたいと思います。

●まず、「HTML編集フォーム」の中から左側に表示されている、記事に該当する部分を探します。

わかりやすく、「左」とコメント表記してあるので簡単に見つかります。

これによると、「contents」という「id」を使って、CSSによる表示を行っているのがわかります。

●次に、右側に表示されているメニューに該当する部分を探します。

こちらは、「side」という「id」を使っています。

この「contents」と「side」というidを手がかりに、CSS編集フォームの中の記述を見つけます。
探す時は、idは「#」をつけて記述するので、それぞれ
『#contents』『#side』という部分を見つけてください。
以下のように続けて記述されていました。

#contents {
float: left;
width: 450px;
}
上の記述は、「float: left;」=「左寄せ」
　　　　　　「width: 450px;」=「幅450ピクセル」という意味です。

#side {
padding: 10px 0px 20px 20px;
margin-left: 450px;
}
こちらは、
「padding: 10px 0px 20px 20px;」
=「メニューの枠内に上10px、右0px、下20px、左20pxの余白をあける」
「margin-left: 450px;」=「枠の左側に450ピクセル幅の余白をあける」
という意味です。

メニューを左に表示するためには、
#contents {
float: right;
width: 450px;
}

#side {
padding: 10px 0px 20px 20px;
margin-right: 450px;

}
と、２個所の「left」を「right」に書き換えれば完成です。
一番上の画像との違いがわかりますね。

カレンダーをリンクメニューに変更　その２

昨日の続きで、用意したテキストからリンクを張ります。
※この記事中に記入したHTMLタグは、「＜＞」を半角のまま使用するとHTMLのタグとして認識され、表示されないため【全角】にしてあります。
コピー&ペーストで使用するとエラーになるのでお気をつけ下さい。

＜!-- リンクメニュー --＞
＜div class="link-menu1"＞｜ＴＯＰ｜温泉酒｜四万の湧水仕込み｜四万川のお米で造った地酒｜こだわりの素材｜わしの屋のご案内｜蔵元｜リンク集｜＜/div＞
＜!-- リンクメニュー　END --＞

上のHTMLを以下のように書き換えます。
ご存じだと思いますが、改行はHTMLでは意味を持たないので
見やすいように改行してあります。

＜!-- リンクメニュー -->
＜div class="link-menu1"＞｜
＜a href="/"＞ＴＯＰ＜/a＞｜
＜a href="/?cid=10949"＞温泉酒＜/a＞｜
＜a href="/?cid=10950"＞四万の湧水仕込み＜/a＞｜
＜a href="/?cid=10951"＞四万川のお米で造った地酒＜/a＞｜
＜a href="/?cid=10952"＞こだわりの素材＜/a＞｜
＜a href="/?cid=10954"＞わしの屋のご案内＜/a＞｜
＜a href="/?cid=10953"＞蔵元＜/a＞｜
＜a href="/?cid=10955"＞リンク集＜/a＞｜＜/div＞
＜!-- リンクメニュー　END --＞

それぞれ、リンクを張りたいテキスト「■■」を＜a href="○○"＞■■＜/a＞で囲んで、「○○」の部分にリンク先のURLを書き込めば終了です。

リンク先のURLは、前回に表示させた「CATEGORIES」からリンク先のページを開けばわかりますよね。
そのままURL(例えばhttp://shima-no.jizake.info/?cid=10949) をそのまま記述してもOKですし、同じサーバーの中なのでhttp://shima-no.jizake.infoを省略して/?cid=10949だけでも大丈夫です。
だからトップページのリンクは"/"だけです。

因みに、HTMLを書き直してから発見したのですが、リンクについては始めから装飾のCSSが書かれていました。

a:link {color:#333; text-decoration:underline;}
a:visited {color:#666; text-decoration:underline;}
a:active {color:#333; text-decoration:none;}
a:hover {color:#333; background:#CCC; text-decoration:none;}

このおかげで、リンクの上にカーソルをのせると表示が変わります。
それぞれ
a:link {通常のリンクテキストの装飾}
a:visited {読み込み済みのリンクテキストの装飾}
a:active {クリックした時のリンクテキストの装飾}
a:hover {マウスをのせた時のリンクテキストの装飾}
を指定しています。
意味は何となくわかりますよね。

何となくいい感じなので、これは変更せずにおきます。

今回は以上です。

カレンダーをリンクメニューに変更

今回は、タイトルの下にある横長のカレンダーをリンクメニューに変更します。

その前に一言。
※この記事中に記入したHTMLタグは、「＜＞」を半角のまま使用するとHTMLのタグとして認識され、表示されないため【全角】にしてあります。
コピー&ペーストで使用するとエラーになるのでお気をつけ下さい。

以下の数字がずらっと並んでいる部分です。

とりあえず、リンク先のURLが全部わかった方が良いので、
全カテゴリーを表示するために、各カテゴリーの記事を投稿しました。

さて、それでは編集を始めます。
いつも通り、ブログの『管理者ページ』の『テンプレートの編集』を開きます。
「ＨＴＭＬ編集フォーム」を編集します。
最初に、カレンダーを表示しないようにするために、
以下の記述をコメント扱いにします。

＜!-- BEGIN calendar --＞
＜div class="calendar"＞
{calendar_horizontal}
＜/div＞
＜!-- END calendar --＞

の赤字の部分を＜!-- --＞で囲んでやれば表示しなくなります。
＜!-- ＜div class="calendar"＞
{calendar_horizontal}
＜/div＞ --＞

リンクメニューはカレンダーの表示形式を流用した方が簡単なので、
その表示を規定しているCSSを変更して使います。
それは、上の作業でコメント化したHTMLタグに記載されている
＜div class="calendar"＞
の部分です。
「calendarというクラス(class)」で規定しているので、
『CSS編集フォーム』の中に「.calendar」と記載してある部分を探します。
※calendarの前にある「.」がclassですよという記号です。

.calendar {
text-align: center;
font-size: 11px;
padding: 20px 0px 20px 0px;
border-bottom: 1px solid #666666;
}

上のCSSを下の用に変更します。
文字のサイズを少し大きくして、文字色を茶色に変えました。
後はclass名をわかりやすいように「link-menu1」としました。

.link-menu1 {
text-align: center;
font-size: 12px;
padding: 20px 0px 20px 0px;
border-bottom: 1px solid #660000;
}

これでCSSの指定は終了。

次はHTMLの編集です。
最初の作業でコメント化したHTMLの下にわかりやすい用に
＜!-- リンクメニュー --＞
とコメントを書いてから、HTMLタグを記入します。

＜!-- リンクメニュー --＞
＜div class="link-menu1"＞｜ＴＯＰ｜温泉酒｜四万の湧水仕込み｜四万川のお米で造った地酒｜こだわりの素材｜わしの屋のご案内｜蔵元｜リンク集｜＜/div＞
＜!-- リンクメニュー　END --＞

長くなってしまったので、今日はここまでにします。
明日は、このリンクメニューのテキストから「リンク」を張ります。

※この記事中に記入したHTMLタグは、「＜＞」を半角のまま使用するとHTMLのタグとして認識され、表示されないため【全角】にしてあります。
コピー&ペーストで使用するとエラーになるのでお気をつけ下さい。

カテゴリーの登録

今回は、カテゴリーの登録です。

難しいCSSの編集とかはありません。
ブログの『管理者ページ』の「カテゴリの編集」から登録する通常の作業です。

とりあえず、作ろうと思っている７つの分類を登録しました。
後でも追加出来るので、あまり考えなくても良いと思います。

『温泉酒』『四万の湧水仕込み』『四万川のお米で造った地酒』
『こだわりの素材』『わしの屋のご案内』『蔵元』
『リンク集』

登録が終わってブログのページを確認したら、
表示されると思っていた場所にカテゴリーがありません。
もしかしたらと、温泉酒のカテゴリーで記事を登録したら
その温泉酒のカテゴリーだけ表示されました。

これはこれで良い気がするので、そのままです。

ページ全体の背景をかえる

今回は、ページ全体の背景(ページ両脇の部分)を変更します。

現在は、斜め線いっぱいという感じですが、これを模様に換えてみます。

とりあえず、下準備として背景用の画像を用意してください。
私は、今回「フリー素材のBlue　Pegasus」さんにお世話になりました。
http://bluepegasus-sozai.msm-wing.com/
フリー素材のBlue　Pegasusさんのサイトから、とりあえず自分のPCにダウンロードというか、右クリックで名前を付けて保存して、自分のブログの管理画面より画像をアップしました。
その画像のURL(画像の管理画面のサムネイル画像をクリックすると表示されるページのアドレスです)を覚えておいてください。

準備の出来たところで、変更作業に移ります。
今回は簡単です。
管理画面の「テンプレートの編集」を開いて、「テンプレート編集」のページを表示します。
そのページの『CSS編集フォーム』の窓の一番上の部分
body {
margin: 0px;
padding: 0px;
background-image: url(./template/shower/img/bg.gif);
}

赤い字のurlの後ろの()の中を先ほど背景画像を保存したページのアドレス
http://shima-no.jizake.info/images/kabe1.gif
に書き換えれば終了です。
「CSSを更新する」のボタンを押せば背景画像が変更されています。

結構簡単なので、いろいろ画像をアップしておいて試してみると良いかもしれませんね。

タイトル画像の変更

ブログのカスタマイズで一番最初に行ったのは、タイトル画像の変更です。

最初にロリポブログのテンプレートは、『shower』にしました。

タイトル画像に画像を使っていたので、変更場所が見つけやすいと思ったからです。

そんなわけで、変更開始です。
ロリポブログの「管理者ページ」の中にある「テンプレートの編集」を開きます。

現在選択している「shower」のテンプレートの
『HTML編集フォーム』と『CSS編集フォーム』が開いていますので、
そのCSS編集フォームの中にある
#title {
background-color: #FFF;background-image: url(./template/shower/img/main.jpg);
width:700px;
height: 120px;
padding: 10px 0px;
margin: auto;
border-left: 1px solid #666;
border-right: 1px solid #666;
}を編集します。

赤字のbackground-image: url(./template/shower/img/main.jpg);のurl部分を
あらかじめ『画像の管理』からアップロードしておいた横幅798pxの画像の
URL(画像の管理のページのサムネイルをクリックすると表示されるページのURL今回は「http://shima-no.jizake.info/images/title-back-c800.JPG」)に変更します。

さらにその下の行のwidth:700px;を798pxに変更します。

これでいいのかと思ったら、タイトル画像が枠からはみ出てまるでハンマーヘッドシャークの様になってしまいました。
あわてて、CSSの
#body {
background-color: #FFF;width:700px;
padding: 0px 0px;
margin: auto;
border-left: 1px solid #666;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}
の中にあるwidth:700px;を798pxに変更しました。

とりあえず今日はここまでよく頑張りました。
次は、ページ全体の背景画像を変えたいと思います。

今回は、こんな感じになりました

参考ホームページ

このロリポブログシステムを使って、
ブログを「"四万温泉"にこだわった地酒!!」というホームページに
作りかえようと思います。
(そのブログはこちら→「"四万温泉"にこだわった地酒!!」)

その方法を公開すると言うよりは、、自分の覚え書きの様な感じで書き込んでいこうと思います。

最初は参考にさせて戴いたホームページを紹介します。

【とほほのＷＷＷ入門】http://www.tohoho-web.com/www.htm
超有名なサイトですね。「ブログをいじるにはCSSがわからないと」と思い、見せて戴いたのですがそれよりもっと基本のHTTPについて勉強させて戴きました。

【JUGEMブログの説明サイト】
ロリポブログとほぼ同じと思われる、JUGEMのブログサービスのマニュアルページです。わかりやすく書いてあると思います。

他にもわからないタグがあると片っ端から、googleでググってみました。
そのうちに何となくタグが読めるような気になれました。