アメブロのスキンをカスタマイズ~サイドバーのタイトルを画像にする~

画像のURLの調べ方

 

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

 

今回のカスタマイズはちょっとややこしいです。

カスタマイズ可能なアメブロのスキン、「グレイ」を使用した場合の方法ですが、

他の「ブルー」、「グリーン」、「ピーチ」でも全く同様の方法でカスタマイズできると思います。

「スタンダード」ではCSSの記述が若干違いますが、やることは全く一緒です。

 

で、今日やるカスタマイズはこちら。

アメブロのサイドバーのタイトル(PR、このブログの読者、プロフィールなど)に注目してください。

サイドバーのタイトルを画像に

 

このように好きな画像にすることができます。

今回は釣りのブログってことで、ルアーのイラストが入った画像を作ってみました。

サイドバーのタイトルを画像に

 

アメブロのサイドバーのタイトルを画像にするには、タイトル用の画像が作れることが前提になります。

簡単にイラストを作成することができる無料ソフトでお勧めなのはInkscape

Inkscapeのダウンロードや使い方はこちらをご覧下さい。

 

なにはともあれ、とりあえず画像を作成し、用意します。

サイドバーのタイトルを画像に

サイドバーのタイトルを画像に

サイドバーのタイトルを画像に

 

今回は説明用に3つしか作りませんでしたが、本当は全12個作ってください。

(っていうかサイドバーに配置してあるヤツ分作ればOK)

  • プロフィール
  • 読者一覧
  • お気に入りブログ
  • 最近のコメント
  • 最近の記事一覧
  • テーマ一覧
  • カレンダー
  • アーカイブ
  • ブログ内検索
  • ブックマーク
  • ランキング
  • PR

 

で、「ブログを書く」⇒「アメブロを書く」⇒「画像フォルダ」で、

作成した画像を全てアップロードしておきます。

サイドバーのタイトルを画像に

 

これで下準備完了。

さて、今回のカスタマイズはややこしいので、説明もどうやってすればいいやら・・・。

あ、そうそう。

これから説明するカスタマイズを行う前に、この記事の一番下の「※注意点」ってのを読んでください。

強制ではないですが、読んでおいたほうが後々泣かずに済みます(笑)

 

注意点を読まれた方はさっそくカスタマイズしていきましょう。

とりあえず、「ブログを書く」⇒「デザインの変更」⇒「CSSの編集」とクリック。

アメブロの写真に枠をつける

 

まずはプロフィールのタイトルを画像にするとして、

cssの中で「#profile」ってところがあるのでそれを探します。

サイドバーのタイトルを画像に

 

見つけたら、「#profile p{」の真上に以下のタグをコピペで加えて保存します。

(分からなければ、css欄の一番下にコピペでもOK)

 

#profile .menu_title{
background-image: url(ここにアップロードした画像のURL);
text-indent: -9000px;/* タイトル文字を消す */
height:36px; /* 画像の高さ */
}

赤字のところは作成した画像によって異なるのでそれぞれ編集してください。

サイドバーのタイトルを画像に

 

ここで「アップロードした画像のURLってどうやって調べるんや?」って方のために。

「ブログを書く」⇒「アメブロを書く」⇒「画像フォルダ」で画像一覧ページにして、

URLを調べたい画像の「記事に追加」をクリック。

画像のURLの調べ方

 

そのまま「HTMLタグを表示」をクリック。

画像のURLの調べ方

 

赤字の部分がこの画像のURLです。

画像のURLの調べ方

 

では本題に戻りますが、あとはこれの繰り返しです。

ただし、今はあくまでプロフィールの画像を変えた例です。

他の画像、例えば「このブログの読者」を変える場合は、次のタグをコピペします。

#reader .menu_title{
background-image: url(ここにアップロードした画像のURL);
text-indent: -9000px;/* タイトル文字を消す */
height:36px; /* 画像の高さ */
}

 

プロフィールの時と比べると、黄色の部分がprofileからreaderに変わっただけです。

もうお分かりですね?

「カレンダー」のタイトルを画像にする時は黄色の部分をcalendarにし、カレンダー用の画像のURLを書く。

これの繰り返しです。

ただし、サイドメニューの一番上に表示される「PR広告」だけは、黄色の部分をdefaultAdとしてください。

 

※注意点

アメブロのcss編集をしていると、保存したときに次のようなエラー?が出ることが多々あります。

「リクエストは既に処理中であるか無効です」

こうなったときは今まで編集してきたものが全て保存されず、苦労が水の泡となってしまいます。

なのでアメブロのcss編集欄で直接編集するのではなく、メモ帳などにcssを全てコピーして、

メモ帳で編集し、全部できたところでアメブロのcss編集欄にそのまま全部貼り付けする。

みたいなやり方をお勧めします。

同時に、初心者の方は編集前のcssのバックアップもとっておいたほうがいいかも。

途中でわけ分からんくなったときは、バックアップをコピペで元に戻ります。

 

◆2011年01月06日 追記◆

サイドバーに配置できる全ての項目のcssを記載しました。

 

人気ブログランキングで今何位?

アメブロのヘッダー画像を無料で作成

  • このエントリーをはてなブックマークに追加

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る