アメブロ サイドバーのタイトルを画像に変更する方法とは?

アメブロ サイドバーのタイトルを画像に変更する方法とは?

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

サイドバーも、ブログのイメージに合わせて
カスタマイズすると、いい感じに印象に残りますよね。

サイドバーのタイトルを画像に
してみましょう。

 

 

 

アメブロでも、無料のブログでもそうですが、
サイドバーは、目にする場所でもあいますよね。

 

アメブロの場合、提供してあるデザインスキン(テンプレート)を使っていると、
ブログのデザインに合わせたサイドバーになっていますよね。

 

自分でカスタマイズする場合は、
CSS変更可能なテンプレートを使います。

 

そうすると、こんな感じで地味でしょう?

デフォルトのサイドバー

初期設定(デフォルト)では、グレーの囲みとなっています。

 

ここまま、タイトルの背景の色を変更したり、
囲みを付けたりしただけでも、ステキになりますよね。

 

では、タイトルの部分を画像に変更すると・・・
もっとオリジナルっぽくなりますよね。

 

 

サンプルは、こんな感じです。

サイドバータイトル画像の変更後

 

 

今回は、マスキングテープのような画像を作って、
その中に、サイドバーのタイトルを入力した画像を作成しました。

 

これをサイドバーのタイトルのところに、設置していきます。

 

ついでに、このタイトルに合わせた色で、
サイドバーの背景色を変更してみました。

 

色や、タイトル画像を変更すると、
違う感じになりますので、ぜひチャレンジしてみてね。

 

 

サイドバータイトルに画像を設置する。

※今回は、CSS編集可能なテンプレートの場合です。
※サイドバータイトルの画像を作成しておいてくださいね。

 

デザイン変更から、CSS編集をクリックします。

 

最初に、作成した画像をアップロードしておきます。

ファイルのアップロード

 

CSSのところで、「サイドバー」と検索してください。
※control + F で検索、窓が開きますので「サイドバー」と入力してください。

 

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

上のような記載がありますので、
そのちょいと下。

/* skinMenuBody サイドメニュー本文エリア */

 

このCSSをまず変更・追加します。

.skinMenuBody{
margin:0px;
padding:0px;

とありますが、

 

この padding(余白という意味です。)の数字を変更します。

padding:10px;

10px にしました。

これは、どういう意味かというと、
画像の大きさにもよりますが、
タイトルが入る部分のスペースを空けるという意味です。

 

それから、背景のグリーンの枠ですが、
本文(サイドメニューの中に入っている内容のことです)に
緑の枠を付けます。

下記のコードを追加していくださいね。

 

borderは線のことです。
今回は、実線で太さが10pxということです。
この数字を変更すると、線の太さが変わります。
#f6ffe5 は、WEBカラーの色ですね。

 

ブログの全体のカラーに合わせて、変更してくださいね。

 

上記の設定が終了したら、
下記のコードをその下に、記入してくださいね。

 

 

check

CSSの解説

.profileMenu .skinMenuHeader
というのは、プロフィールというメニューの中の、
ヘッダーという意味です。

 

サイドバーは、個々にカスタマイズができるので、
他の場所にも、名前がついています。

 

※今回はプロフィールのみ変更しています。

text-indent:-9999px;
というのは、最初に設定してある文字を
表示させないようにするための、コードです。

 

CSSの修正・追加が終了したら、
保存して、ブログを確認してくださいね。

 

※変更できない場合は、F5キーを押下して更新をかけてくださいね。

 

こんな感じです。

サイドバータイトルの画像設置完了

どうでしょう?

 

オリジナルって感じになりました。

 

今回は、このテープ画像に文字を入れたんですが、
このテープ画像、他にも使えるかも?

ということで、3色作りましたので、
良かったら、使ってみて!!

 

husen-g

 

husen-b

 

husen-p

 

 

ダウンロードの際の注意として、直接リンクを貼ることはご遠慮くださいね。
画像を右クリックして、「名前をつけて保存」で、
自分のPCにダウンロードしてお使いくださいね。

 

サイドバーも、読者さんにとっては、目につく場所です。

 

ブログのイメージで変更すると、
もっとすてきになりますよ。

ぜひお試しあれ!

 
 
 

A6A6

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

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

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

arrow10_59x29_ylw

mail-pen1

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

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



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

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

line

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



Fc2ランキングへ


Many Thanks!!

気に入ったぜ!!
なんて、思ったあなた!!
登録してくださいね♪



エステトラブル

おきてがみ!! 復活

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

このページの先頭へ