*kitto*

  

さて、今回はサイドバーです。
サイドバーというのは、ブログを２つか３つに分けたうちの、記事ではない部分ですね。
このブログで言うと、左側の部分。プロフィールがある部分です。
ソラマメを見ていると、よくここに商品の紹介がしてあって、これやりたいなー、と思っていました。
やってみると意外と簡単なので、ぜひ試してみてください


サイドバーの中身は、「ブログの設定」→「ブログ環境設定」で編集できます。
一番下にプロフィールがあって、その上にカスタムプラグイン１、２、３、がありますが、どれでもいいです。どれも白紙の状態になっています。
とりあえず１の中身を編集します。
「HTML使用可能」と書いてあるように、ここではHTMLが使えます。
逆に、使わないと大したことはできないです

タグは、プロフィールを書いたことがある方なら、わりとすぐに書けると思います。
改行は<BR>を使うとか・・・ですね。


実際に私が使ったタグを挙げておきます。参考までに。

<Font Size="4"></Font>
フォントの大きさです。１～７まで指定できます。

<Div Align="center"></Div>
文字や絵を中央に配置します。右寄せならright、左寄せならleftになります。

<img src="画像のURL" width="100">
画像を表示します。widthは幅の指定で、kittoのロゴマークは１００にしてあります。
幅を指定せず、そのまま載せる場合には、必要ありません。

<a href="リンク先のURL" target="_blank"><img src="画像のURL" width="180"></a>
画像でリンクする場合です。このテンプレートには、幅１８０程度の画像の大きさがいいみたいです。
" target="_blank"は、別ページで表示、ということだと思います。（たぶん）


上のＨＴＭＬタグを使って、商品紹介はこのようになりました。


参考にしたＨＴＭＬ辞書です。
みんなのタグ辞書


これで中身ができたので、保存します。
確認画面ではＨＴＭＬタグはそのまま表示されていて、確認になりません



次は、位置の調整です。デフォルトでは一番下に表示されているんじゃないかと思います。
それを、もうちょっと上に持って行きます。
「ブログの設定」→「サイドバー」で、今編集したカスタムプラグインだけでなく、プロフィールやカレンダー等の配置を変えることができます。
私は、一番上にプロフィール、その下に商品紹介、という形にしました。
ついでに、必要なさそうなものは消しましょう


これで終わりです。
配置の説明はかなりはしょってしまったので、もし分からないことがあったら、お気軽にコメントくださいね



＊今までのカスタマイズ記事＊
ブログカスタマイズ１．背景画像
ブログカスタマイズ２．タイトル画像（準備）
ブログカスタマイズ２．タイトル画像～前編～
ブログカスタマイズ２．タイトル画像～後編～
ブログカスタマイズ３．サイドバー（このページ）  

さて、後編です。
前回、画像をアップして設定したはいいものの、高さがおかしくなっていました。
こんな感じ。

一見普通に見えますが、現在のブログの状態と比べると、画像の高さが小さいことがわかります。
なので、後編ではその高さを調整していきます。


調整するのは、ずばり「文字の位置」です。
そこにたどり着くまでに散々迷ったんですけどね
どこにもheightって記述はないしー、どうしたらいいの！？
・・・ふと、ひらめきました。文字を変えてみよう！と。
で、実験は見事成功したわけです。

（ほんとはもっと簡単なやり方があったりして？）

では変更の仕方です。
またまたスタイルシートを編集します。
下のような部分を探してください。

.blogtitle{
font-size:30px;
font-weight:bold;
padding:20px 0px 0px 10px;
text-align:left;
letter-spacing:2px;
}

.description{
color:#fff;
font-size:12px;
padding:4px 0px 0px 35px;
text-align:left;
letter-spacing:2px;
}

blogtitleはそのまま、ブログのタイトル部分です。
このブログで言うなら、「*kitto*」の部分。
descriptionは、ブログの説明部分です。
「ショップkittoの商品紹介と、・・・」の部分。

この文字の位置を指定しているのが、paddingです。
blogtitleの例では
padding:20px 0px 0px 10px;
となっているので、
上から20ｐｘ、右から0ｐｘ、下から0ｐｘ、左から10ｐｘの位置にあるみたいです。
正確に言うと、文字の位置ではなくて、文字が入る領域を示しているみたいですけど。
詳しくはこちらへどうぞ
スタイルシートリファレンス


これを、下のように書き換えました。

.blogtitle{
font-size:30px;
font-weight:bold;
padding:215px 0px 0px 10px;
text-align:left;
letter-spacing:2px;
}

.description{
color:#fff;
font-size:12px;
padding:4px 0px 50px 35px;
text-align:left;
letter-spacing:2px;
}

blogtitleの上の余白を20→215にし、descriptionの下の余白を0→50にしました。
これで、今のようなタイトルになりました
この数値は、試行錯誤の結果です。
スタイルシートの数値を変更したら、その下のトップページのところにプレビューボタンがあります。
変更をすぐ確認することができますので、試行錯誤しながらここぞという場所を探してみてください



＊今までのカスタマイズ記事＊
ブログカスタマイズ１．背景画像
ブログカスタマイズ２．タイトル画像（準備）
ブログカスタマイズ２．タイトル画像～前編～
ブログカスタマイズ２．タイトル画像～後編～（このページ）
ブログカスタマイズ３．サイドバー  

タイトル画像（トップ画像？名前ナニ？）変えてみました。
フレンドのリオさんがブログで解説してくれてあったので、簡単にできそ～♪と思っていたら、意外な落とし穴にハマってしまいました

とりあえず、前回確認したのが画像の幅です。
それによるとデフォルトのテンプレートでは740ｐｘでした。
おさらい→http://kitto.slmame.com/e110173.html
で、作った画像がコレです。



高さ350ｐｘ、幅740ｐｘです。
高さが高いのは、横長の写真が難しかったからです
これを画像一覧からアップします。その画像のURLをコピーしておきます。

管理画面→テンプレート→カスタマイズ
で、スタイルシートを編集します。
その中から下の部分を見つけてください。

#banner,#subbanner{
background:#389B64 url(/_img/simple_green/head.gif) left bottom;
padding :0px 10px 10px 10px;
}

赤い部分を下のように変更します。
url(さっきアップした画像のURL)

これで、登録すればうまくいくはず



・・・って、アレアレ？
なんか高さがおかしいよ～っ



てとこで後編に続きます。
高さはちゃんと変えられます。
ではおやすみなさーい




＊カスタマイズ記事まとめ＊
ブログカスタマイズ１．背景画像
ブログカスタマイズ２．タイトル画像（準備）
ブログカスタマイズ２．タイトル画像～前編～（このページ）
ブログカスタマイズ２．タイトル画像～後編～
ブログカスタマイズ３．サイドバー  

背景画像はこの前変えました。
次はタイトル画像だ！ということで、画像を作ろうと思います。
ここでふと疑問が。
「画像はどんな大きさにしたらいいの？」
小さかったり大きかったりするとたぶん変ですよね。たぶん。
で、ちょっと調べてみました。

このブログの場合、幅は１００％ではないテンプレートを使っています。
（１００％の場合はまた話が変わってくると思うので以下の内容は当てはまらないと思います）
こんな感じで↓


では、横の長さはいくつなのか？

というわけで、またテンプレートのカスタマイズで、スタイルシートの部分を見てみます。
幅を指定してるのはコレかな？と思った部分をいじってみたら、見事変わりました。
全体だけ変わって、左の部分（なんて言うんだろ）と、この記事の部分は変わらないので、数字を大きくすると間にスペースが空くということも分かりました。

この赤字の部分です。

#container{ font-size:12px;
width :740px;
background-color :#ffffff;
margin :0px auto;
text-align:left;
}

デフォルトで７４０になっているんですね。
ということは、画像を作るときに幅を７４０にすれば、ぴったりはまるんじゃないでしょうか。
高さは、好きに変えていいと思います。・・・これも指定されてるかな？
素人でスミマセン
自分で画像を作ったらやってみます。


もしどなたか間違いを発見したら、指摘してください
自分がやってることが合っているか、ものすごく疑問です
でもがんばってカスタマイズするぞー



＊カスタマイズ記事まとめ＊
ブログカスタマイズ１．背景画像
ブログカスタマイズ２．タイトル画像（準備）（このページ）
ブログカスタマイズ２．タイトル画像～前編～
ブログカスタマイズ２．タイトル画像～後編～
ブログカスタマイズ３．サイドバー  

ソラマメのテンプレートってあまり選べないけど、なかにはいじってカッコよくしてる人もいる！
私もブログをオリジナル仕様にした～い！
ってことで、いろいろいじってみることにしました。

まずは背景画像・・・タイトル画像よりも先って順番違うかもｗ
でもちょっと背景画像を作ってみたかったんです。参考にしたのはヴィトンのモノグラム。
で、作ってみたのがコレです。


ヴィ、ヴィトンとはだいぶ違う・・・
（ｋとｔでモノグラム作るのが難しかったのでー）
んー。そのうち変えるかもしれません。

で、ここからが本題です。
ブログなんていじったことない、ｈｔｍｌよく知らない、ＣＳＳ？聞いたことあるような・・・
そんな私ですので、ちょっと調べてみました。


参考にしたサイト様
↓
SLMaMe Blog TEMPLETE

セカンドライフ:マコログ[MACOLOG]
（近々閉鎖するという記事が出ていたので、もしかしたらなくなっているかもしれません）
もうなくなっていました。残念

スタイルシート例文辞典


ふむふむ。
ちょっとだけ分かりました。
これを見て試行錯誤した結果、なんとか背景画像を変えることができました。


では、やっと背景画像の変え方です。あ、こっちが本題か。

まずは先ほど作った画像をアップロードします。そして、そのＵＲＬをコピーしておきます。
「ブログの設定」の中に、「テンプレート」があります。３種類保存できるようになっているので、失敗することも考えて今使っているものは置いといて、新しくテンプレートを追加してそれをいじるのがオススメです。

テンプレートのカスタマイズを開くと、

スタイルシート
トップページ
個別記事
アーカイブ

の４つに別れています。
今回変更するのは一番上のスタイルシートです。

スタイルシートの何行目かに、

body{
color :#000;
margin :0px;
background :#E0EDE0;
text-align:center;
}

という記述があります。元のテンプレートによって多少違うと思います。
この中のbackgroundが背景の指定です。この場合だと、#E0EDE0という色になっています。
この辺の説明は詳しくないのではしょりますね

で、ここを変えるわけです。

background
:#E0EDE0;

という部分を、

background-image
:url(さっきアップした画像のURL);

に書き換えてください。
一番下に登録ボタンがあるのでぽちっとな。
このテンプレートを使う、で、確認すると背景が変わっていると思います。


このブログの場合
before


after


いかがでしょう？
ちょっとだけオリジナリティが出せました。
次はタイトル画像にチャレンジしようと思います。そのうち。



＊カスタマイズ記事まとめ＊
ブログカスタマイズ１．背景画像（このページ）
ブログカスタマイズ２．タイトル画像（準備）
ブログカスタマイズ２．タイトル画像～前編～
ブログカスタマイズ２．タイトル画像～後編～
ブログカスタマイズ３．サイドバー