アメブロ サイドバータイトル横にワンポイント画像を入れる方法

アメブロ サイドバータイトル横にワンポイント画像を入れる方法

アメブロのカスタマイズです。

サイドバーのメニューをちょっと飾る方法として、タイトルの横に、ちょっとワンポイント画像を入れてみましょう。

とっても可愛くなりますよ!!

 

 

アメブロのカスタマイズ可能なテンプレートを利用すると、
本当に最初は、なんにもありません。
っていうか、まーしょうがないよね・・・・と思います。

 

それを、コツコツ作っていくのが、
カスタマイズの醍醐味というんでしょうけれども・・・

 

一気に仕上げるってことも大事ですが、
コツコツ、自分のペースで作っていくのが一番です。
(何事もコツコツですよ)
カスタマイズに終わりは、ないのですから・・・・

 

さて、サイドバーのカスタマイズなんですが、
サイドバーのタイトル部分

 

 

ここのフォントなどを変更するだけでも、
結構目立つようになるんですが、
他のブログデザインのように、ワンポイント画像なんかを付けると、
結構いい感じになります。

 

何もカスタマイズしていないと、
こんな感じです。

サイドバー変更前

 

このタイトル文字の前に、ちょっとワンポイント画像を入れることによって、
囲みを付けたり、凝ったものでなくても、全然重たい感じを受けません。
出来上がりは、こんな感じです。

サイドバーにワンポイント

 

ね、タイトルだーって解りますよね。
(なくても、解るけれどもさっ・・・)

 

これは、簡単なCSSを追加するだけで完成しますので、
まだ何も手を付けてなーいっていう方は、
チャレンジしてみてくださいね。

 

CSSを設置する前に、まずワンポイントとなる、
画像をゲットしておいてくださいね。

 

小さすぎてもリストアイコン的になってしまいますので、
そこらへんは、注意していいあんばいの画像を見つけましょう。

 

もちろん、無料素材で全然OKです。
良かったら、参考にしてくださいね。
フリー素材提供サイト

 

 

CSSの設置

お気に入り画像をゲットできたら、
CSS編集可能ページで、画像をアップロードしましょう。

 

CSS記載の部分で、下記コメントアウトを探してくださいね。

/* (3-8) サイドバー メニュー
——————————————–*/

 

サイドバーメニューは、カラムによって幅が異なります。

2カラムの場合のサイドバーの幅は、300px
3カラムのサイドバーは、300px・180pxの設定になっています。

 

今回は、左サイドバー2カラムのレイアウトデザインを使っていますが、
他のカラム数でも、同じCSSを使えますので、
試してみてくださいね。

このサイドバーメニューの下に、
/* skinMenuHeader サイドメニュータイトルエリア */

という記載があるかと思います。

 

ここの設定を変更していきます。

.skinMenuHeader{ の部分に、
下記CSSコードを追加・修正します。

 

 

CSSの解説

padding は、サイドバーからの余白です。
設定の順番は
上・右・下・左 で余白の設定をしていきます。
数字は、画像の大きさにもよりますが、
左の数字は画像の大きさを目安にするといいです。

 

フォントの種類は、変更しなくてもいいですが、
フォントの大きさは、変更したほうが読者さんからは、
見やすくなります。

 

background は、アップロードした画像の設定です。
no-repeat 0 15px; では、画像を繰り返さず使い、
その後の数字は、画像からみた余白の設定です。
ここの余白は、上下・左右
この順番で設定していきます。

 

 

左右の余白を小さくすると、画像と文字戸の余白が少なくなります。

 

レビューを見ながら、この余白はバランスをみながら調整してくださいね。

設定が完了したら、レビューで確認してくださいね。
※変更できていなかったら、保存してブログを見てください。
必ずF5キーを押下して、更新をかけると表示される場合があります。

 

 

表示できない場合は、カンマがちゃんと入っているかどうか?
半角英数字になっているかどうか?
確認してみてくださいね。
({ の }がない場合もよくあるケースです)

 

完成するとこうなります。(もう一度見てみてね)

サイドバーにワンポイント

 

どうでしょうか?

 

ちょっと女性向けのデザインですが、
ブログのテーマに合わせて、画像を選べば、
これだけでも、立派なデザインになります。

 
 

ぜひ、チャレンジしてみてくださいね。
 
 
 
A6A6

なにかお困りのことはありませんか?

良かったらメールをしてくださいね。

ぺんちゃーん クリック!!

arrow10_59x29_ylw

mail-pen1

ちえぞうに直接届きます!!

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ