BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ 記事タイトルのデザインを変える方法

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

アメブロカスタマイズ 記事タイトルのデザインを変える方法

   投稿日: 2014/10/20    投稿者:webコラム

皆さん、こんにちは。

 

記事タイトルのデザインを変えて、より目立つタイトルにしてみませんか??

 

今回紹介するアレンジ方法は、

 

・タイトルのボーダーの太さや色を変える

・タイトルの文字色や背景色を変える

 

の2つです!個性を出して魅力的にアレンジすれば閲覧数も伸びること間違いなし!

「CSS」という部分を少しカスタマイズすることで誰でも簡単にできます!

画像付きでわかりやすく説明していくので、こういうのが苦手な方もこれを機に覚えちゃいましょう!

 

 

はじめに

 

 先述の通り、今回はCSSの中身を変更してタイトルデザインを変えていきます。

「CSSって何?」という方。知識がなくても全然大丈夫です!

 

 簡単に言ってしまえば文字の色とか大きさ、枠の有無など、記事ページの見た目を管理しているところです。

ここを変えることで見た目が変わる、つまり「ページデザインのアレンジするにはここ!」ということです。

 

 

タイトルのボーダーの太さや色を変える

 

ではさっそく取りかかりましょう!アメブロのマイページ左側にある自分のピグの下に

 

[ブログを書く] というボタンがあり、そこの下に

 

[管理トップ] という文字があるのでそこを左クリックします。

すると、ブログ管理の画面に移りますので、そこの左側メニューにある

 

[デザインの変更]

 

を左クリックします。

デザインの変更.jpg

次に、表示された画面の上部にある

 

[CSSの編集]

 

を左クリックします。

CSSの編集.jpg

すると 下記画像のようなページに移ると思います。

CSSの編集2.jpg

ここにある「@charset "utf-8";」などの文章が書かれている部分が今回カスタマイズするCSSの中身の部分になります。他の工程でもここまでは同じなのですぐにこのページに来れるようにしておきましょう!

 

変更する部分はずっと下の方にあるので、スクロールバーを動かして「/* (3-6) 記事」と書かれた部分まで下げていきます。だいたい下から1/3程度の位置にあるかと思います。

CSS編集3.jpg

 

 

 

タイトルのボーダーの変更をするには

CSSの編集4.jpg

 

 

 

 

上記画像の「border-left:5px solid #e4e4e4;」の部分を変更していきます。

この文章の意味は、 左側の線(border-left) を 5pxという太さで 実線(solid)で #e4e4e4という色にするという事です。

 

「#e4e4e4 って何色?!」と思った方がいるでしょう。これはカラーコードといって、文字で色を表しています。

 

色見本はこちら カラーコード http://www.colordic.org/s/  (リンク先:「Web216」)

 

というわけで、この文章の5px という部分を 10px にすれば倍の太さになりますし、

色はカラーコードを変えればそのままその色に変更できます。

 

 試しに、左側の線を 3pxの太さで 実線で 赤色(#ff0000)にしてみましょう。

変更し終えたらページ下段にある [表示を確認する] で出来たか確認します。

ボーダー変更.jpg

 

このように左側の線が少し細く、赤くなったら成功です!

 

 この他にも、「border-left」の部分を「border-bottom」に変えれば左側の線でなく下側の線になります。

いろいろ試してみましょう!

 

 

文字の色や背景を変える

 

 次に文字の色や背景を変えてみましょう。背景色を変えると先ほどのボーダーやそのままの文字色では見づらくなることがあるので合わせて変更していきます。

 

先ほどと同様にCSSの編集ページを開き、今度は2か所変えます。

先ほどボーダーの変更で作業していた(3-6)の部分に加え、新たに(1-3)も変更します。かなり離れた場所になるのでご注意ください。

 

文字変更.jpg

 

 

 

まず(1-3)の方から。こちらは文字のサイズや色を管理している部分になります。

こちらで文字の色を白(#ffffff)に変えてみましょう。

 

color:#ffffff;

 

と変更すれば完了です。

 

続いて(3-6)の記事タイトルエリアで背景色を変更します。

今回初期のままでは背景色というものが設定されていないので、新たに足す必要があります。

 

画像の

 

border-left:3px solid #ff0000;

}

 

の二行の間に改行して1行作り、

 

border-left:3px solid #ff0000;

background-color: #ff0000;

}

 

とします。同時に今回はボーダーと同じ色にしたためボーダーが見えなくなるので、先ほど変更した 3px の部分を 0px として表示させなくしてしまいましょう。

 

ここで表示を確認してみましょう。

文字背景変更.jpg

 

文字が白くなり、背景が赤くなっていれば成功です。カラーコードを使って好みの色に変更してみましょう!

 

 

 

まとめ

 

上手くできましたでしょうか?

記事タイトルは非常に大事な部分です。

自分好みにカスタマイズしてお気に入りのアレンジを作りましょう!

カテゴリ:

TOPへ