アメブロ記事タイトルのカスタマイズ | 「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい！」そんな方の思いにも答えられるサイトを目指しています

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

当『超入門』コーナーでは、アメブロデザインカスタマイズのいろはのいについて解説したいと思います。初級・中級・上級者へとステップアップしてゆくための基礎の基礎固めに役立つ記事になるように努力します！

難易度表示付き記事一覧はこちらです

デフォルトのままではそっけないCSS編集用デザインの記事タイトル。今回はこのタイトルカスタマイズについて、やってみよう！

ちょっと頑張ってHTMLを見る

まず、タイトル部分のHTMLをご紹介したいと思います。

え！？　よくわからない？　・・・いいんです！

もしこの講座を読み終えて、ちょっとでも分かったら素敵だと思いません？　それでは…

<div class="skinArticleHeader"> /* 一番外の箱 */
<div class="skinArticleHeader2"> /* 真ん中の箱 */
<h1> /* 一番内の箱 */
<a href="http://ameblo.jp/jala2/entry-11140104144.html" class="skinArticleTitle" rel="bookmark">幅の広いバナーも掲載できるサイドメニュー</a>
</h1>
</div>
</div>

分かりやすくするために、不要なHTMLは省略してコメンとを加えています。え、それでもややこしい？　いいんです！　ちょっとは分かるようになりますから！　いや、分からなくてもいいです。黄色い文字の部分に着目しておいてください。これからがこの記事の本題です。

カスタマイズの基本は現在のCSS設定

まず記事タイトル部分に対する、CSS編集可能デザインの元のCSS設定を見てみましょう。

.skinArticleHeader {
margin: 0 29px 0 29px;
padding: 2px 10px 2px 10px;
border-left: 5px solid #E4E4E4;
}
.skinArticleHeader h1 {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 1em;
font-weight: normal;
}
.skinArticleTitle, /*タイトル文字 */
.skinArticleTitle:hover, / *タイトルのリンク文字（マウスオン時） */
.skinArticleTitle:focus, / *タイトルのリンク文字（フォーカス時） */
.skinArticleTitle:visited { / *タイトルのリンク文字（訪問済み） */
font-size: 1.31em;
font-weight: bold;
color: #0066CC;
}

なるほど、非常に単純です。この設定で、表示は下の図のようになっています。

CSS編集用デザインのデフォルト記事タイトルデザイン

最初のソースコードで「真ん中の箱」と書かれている部分に関する記述がなく、「一番外の箱と」、「一番内の箱」についての記述がされているということが何となくでもお分かりでしょうか？　解説しますと、以下のような設定になっているということです。

一番外の箱（div.skinArticleHeader）
箱の外側（margin）には上から時計回りに右、下、左の順で、0、29px、0、29pxの間隔を空ける。
⇒タイトル左のグレーの太い線の左側。細いグレーの線までの間隔が見て分かります。29ピクセルです。
箱の内側（padding）には、同様に上から時計回りで、2px、10px、2px、10pxの間隔を空ける。つまり、それだけの間隔があってその中に内側の箱が入ります。
⇒タイトル文字の左側の太い罫線までの間隔が見て分かります。10ピクセルです。
箱の外の左側（left）に太さ5pxの線（border）を実線（solid）で引く。太さは5px、色はグレー（#E4E4E4）。
⇒破線は（dashed）、点線は（dotted）と指定します。
一番内の箱（.skinArticleHeader h1）
箱の外側（maigin）も内側（padding）も間隔は全部ゼロ。
文字の大きさ（font-size）は、元々の設定の1倍（1em）
文字の太さ（font-weight）は普通の太さは普通（normal）。
⇒太くしたい時は（bold）を指定します。
各リンクの文字設定
文字の大きさ（font-size）は、1.31倍（em）にする。
文字の太さ（font-weight）は太字（bold）にする。
文字の色（color）は#0066CC（青）にする。

色の設定については、何度も「やってみよう！」の講座で解説してきてますから、ここまで分かれば結構カスタマイズができますね。

赤い色を使って目立たせる

タイトル左の罫線を赤く（#FF3300）、タイトル文字も同じ色にして目立たせてみます。

.skinArticleHeader {
margin: 0 29px 0 29px;
padding: 2px 10px 2px 10px;
border-left: 5px solid #FF3300;
}
.skinArticleHeader h1 {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 1em;
font-weight: normal;
}
.skinArticleTitle, /*タイトル文字 */
.skinArticleTitle:hover, /* タイトルのリンク文字（マウスオン時） */
.skinArticleTitle:focus, /* タイトルのリンク文字（フォーカス時） */
.skinArticleTitle:visited { /* タイトルのリンク文字（訪問済み） */
font-size: 1.31em;
font-weight: bold;
color: #FF3300;
}

これでOK。下のようになります。

アメブロ記事タイトルを赤色を使って目立たせる

背景を黒くして、白抜き文字にする

では今度は、左側の線を消して（none）、背景色の設定（background-color）を使って背景を黒（#000000）くして、白抜き文字（#FFFFFF）にしてみます。その際、箱の内側の（文字までの）間隔は、5px、10px、5px、10pxに設定変更することにします。

.skinArticleHeader {
margin: 0 29px 0 29px;
padding: 5px 10px 2px 10px;
border-left: none;
background-color: #000000;
}
.skinArticleHeader h1 {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 1em;
font-weight: normal;
}
.skinArticleTitle, /*タイトル文字 */
.skinArticleTitle:hover, /* タイトルのリンク文字（マウスオン時） */
.skinArticleTitle:focus, /* タイトルのリンク文字（フォーカス時） */
.skinArticleTitle:visited { /* タイトルのリンク文字（訪問済み） */
font-size: 1.31em;
font-weight: bold;
color: #FFFFFF;

今度は、下の画像のようになります

アメブロ記事タイトルを背景黒・白抜きにカスタマイズ

このように、ボーダーや背景、文字色の設定だけで、ブログタイトルもかなり自由にデザインカスタマイズできます。

みなさんもいろいろアイデアを練って、トライしてみてはいかがでしょうか？

人気ブログランキングへ

もし記事が気に入ったら、クリックいただければうれしいですニコニコ
またのご訪問、お待ちしております音譜