【CSS編集】サイドバータイトル横に画像を配置する

先ほど社長から

「え～とね、今、栃木でスポーツしてるから」

というお電話が入りました。スポーツっていうのは、大概社長さんとかが好んでやっている例のあれです。

今日この事務所は私の部屋と同意義です。できれば、息子を早く迎えに行きたいから帰りたいんですが、

とりあえず“ここにいる”っていうのが私の仕事だから。

ほんと中途半端なところにいるなあって思うときもあります。

ワーキングマザーとも言えない。専業主婦とも言えない。

でも、正直、私はこの１年ですっごくやりたいことができるようになったんです。無駄じゃない。

それでCSS記事ってのもアレだけど、いいの。Richard won２９歳のブログにようこそ。またCSS記事です。

あの、不思議なお仕事なんです。

かと言って、愛人業でもないんです。（だからなおのこと不思議）

【CSS編集】サイドバータイトル横に画像を配置する

　

　　「最近の記事一覧」の横の、葉っぱの位置です。

申し訳ないのですが、この「最近の記事一覧」や「お気に入りブログ」などのカラムメニューそれぞれに

違う画像を置く方法はまだ記事にできません。とりあえず先に、メニュー総てに同じ画像を置く方法です。

背景 のCSSの下にこういう場所があります。

/* ----------------------- menu_element_basis ----------------------- */
.mainMenu {
margin-bottom: 15px;
}
.menu_title {
margin: 0px 2px 7px;
padding: 3px 0px 3px 10px;
border-bottom: 1px dashed #006599;
background-image: url(http://nwimg.ameblo.jp/p_skin/blue/img/icon2.gif );
background-repeat: no-repeat;
background-position: 3px 7px;
text-indent: 3px;
}

ここです。これはブルーのスキンをコピーしたので、http://nwimg.ameblo.jp/p_skin/blue/img/icon2.gif は

ブルースキンにもともとある青い四角の画像になります。

ここに画像を置くというのですから、簡単なお話、ここを書き換えればいいだけです。

希望の画像をアメブロフォルダに保存し、保存後画像をクリックして大きく表示、右クリックのプロパティ表示、

URLコピー、そしてhttp://nwimg.ameblo.jp/p_skin/blue/img/icon2.gif のところを差し替えるだけです。

が。

もちろん画像があの四角くらいちぃっちゃければそのままでもいけますが、ある程度の大きさがあったら

それなりに文字位置、画像位置も変更しなければなりませんし、あるいはあなたのオリジナリティある配置も

ありうるわけです。その設定のためのcss変更の仕方です。

.menu_title {
margin: 0px 2px 7px;
padding: 3px 0px 3px 10px;

ここは各カラム同士の距離と、文字と線の距離と、文字の配置を設定します。

もうそろそろ覚えていただけているかと思いますが（でも覚える必要もございんせんが）、paddingは

順に文字の①上幅、②右幅、③下幅、④左幅、というようにぐるりと右まわりの位置を示しています。

こちらの記事 でも同じように説明していますが、②の右幅に関しては、④の左幅を調整することのほうが

強く効果を発するため、0のままで結構です。

padding: ①5px ②0px ③2px ④5px;

カラムに置き換えると下記のようになります。緑の文字をご参照ください。

また、margin: ①0px ②0px ③7px;は、①カラム同士の距離　②作用せず　③ラインと内容表示部分の距離

となります。

　

　
border-bottom: 1px dashed #006599;

ラインの太さ、種類、カラー選択です。

　solid 　実線　dotted 点線　dashed 破線　double 二重線

もしも線を消去してしまいたい場合は、hiddenにするよりも普通に線の太さを0pxにするほうが

後でいじくりなおす時にも楽だと思います。

そして#666666；　の部分を好きなカラーにすれば色を変更できます。

background-image: url(http://nwimg.ameblo.jp/p_skin/blue/img/icon2.gif );
background-repeat: no-repeat;

先ほど書きましたとおり、画像のURLを入れる場所です。また、繰り返さないのでno-repeatです。

くりかえしてもいい場合はまるごと消してください。

最後

background-position: 3px 7px;
text-indent: 3px;
}


これですが、画像の位置になります。わかりやすくbackground-position: 0px 0px;にしてからやるといいかも。

ちなみに0px 0pxですと、このようになります。

ここが　０：０なんだなあってわかりますよね。ですので、これに数字を足していきます。

background-position: ①0px ②0px;

①が横（右）に移動、②が下に移動です。

画像が大きすぎて文字とかぶる場合には、もう一度padding: 3px 0px 3px 10px;を調整してみてください。

文字をただ右に移動したいときは最後の10pxです。これを覚えておくだけでもらくちんこ。

text-indent: 3px;は、数字を大きくすると文字が右にずれるのですが、これはpadding: 3px 0px 3px 10px;の

10ｐｘとかぶってます。ですので、これはいじくる必要がありません。なんで２つの要素にしているのか

ちょっと私は勉強足りないんでわかりません。たぶんなにか意味があるんだろうけどね。

となると、今度はカラムメニュータイトルをいじくりたいですよね。「新しい記事一覧」とかの文字。

完全に文字をオリジナルの画像と置き換える場合には、この文字は消してしまう必要もあります。

/* ----------------------- font-information ----------------------- */

この下にある

.menu_title {
color: #006599;
font-size:12px;
font-weight: bold;
}

です。

文字の色、大きさ、文字の種類を選択できます。boldは太字です。normalが普通です。

文字を消したい場合には　0px　に変えてしまいます。

以前はここを変更するのが私面倒で・・・

それでずーっとちょうちょにしていました。動く素材も持ってこれるし。このたびのCSS編集でやっと変えました。

今回この記事を書いていて、そっか、上に配置もできるのだ・・・と思ったので、また機会があれば

冒険してみようと思っています。