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

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

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

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

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

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

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

最初にロリポブログのテンプレートは、『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に変更しました。

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

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

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

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

とりあえず、下準備として背景用の画像を用意してください。
私は、今回「フリー素材の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を更新する」のボタンを押せば背景画像が変更されています。

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

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

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

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

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

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

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

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

その前に一言。
※この記事中に記入した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のタグとして認識され、表示されないため【全角】にしてあります。
コピー&ペーストで使用するとエラーになるのでお気をつけ下さい。