アメブロのスキンをカスタマイズ~記事のタイトルを装飾する~

アメブロの記事タイトルをカスタマイズ

 

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

 

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

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

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

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

 

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

アメブロの各記事のタイトルを・・・

アメブロの記事タイトルをカスタマイズ

 

このように好きな色や画像にカスタマイズすることができます。

アメブロの記事タイトルをカスタマイズ

 

今回はちょっとした画像を作って、それをブログ記事タイトルの背景にしてみたいと思います。

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

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

 

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

アメブロの記事タイトルをカスタマイズ

 

今回はこのように常に「~の巻」という文字がタイトルの語尾につくように工夫してみました。

で、「ブログを書く」⇒「アメブロを書く」⇒「画像フォルダ」で、作成した画像をアップロードしておきます。

アメブロの記事タイトルをカスタマイズ

 

これで下準備完了。

ここからはちょっと上級者向け?になるかもなので、カスタマイズを行う前に、

CSSのバックアップをとっておくことをお勧めします。

CSSの編集ページで、全てをコピーしてメモ帳かなんかに貼り付けておくだけでOKです。

 

それではさっそくカスタマイズ開始。

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

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

 

まずはCSSの中から、「.entry .title{」 という所を探します。

アメブロの記事タイトルをカスタマイズ

 

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

 

background:url(ここにアップロードした画像のURL) no-repeat;
height:38px; /* ヘッダー画像の高さ */
padding:12px 0 0 20px;

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

アメブロの記事タイトルをカスタマイズ

 

「アップロードした画像のURL」の調べ方については、

アメブロのスキンをカスタマイズ~サイドバーのタイトルを画像にする~ で詳しく説明しました。

とりあえずこれで各記事のタイトルのカスタマイズは完了です。

あとは、用意した画像のサイズや色によって、font-sizeやpaddingの微調整をしてください。

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

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

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

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

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

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

この記事の著者

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

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

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る