アメブロの記事タイトルのデザインを変更する方法についての説明（左側の灰色部分の消し方もあり）

3910GO-ブログカスタマイズ　＞　アメブロカスタマイズ＞　アメブロ記事タイトルのデザインを変更する方法

アメブロ記事タイトルのデザインを変更する方法

ここでは、アメブロの記事タイトルのデザインを変更する方法を紹介しています。

アメブロの記事タイトルは、『.skinArticleHeader』というクラスセレクタによりデザインの変更が可能となります。

以下、『.skinArticleHeader』の例文となりますので、CSS編集の一番下にコピーして貼り付け、色、幅、高さ、文字の大きさなどをお好みに調整して下さい。

アメブロの記事タイトルのデザインを変更するCSS（例）

/***************************************
記事タイトルのデザイン変更
by 3910GO http://blog-customize.3910go.com/
***************************************/
/* ▼ 記事タイトル変更（ここから） ▼ */
.skinArticleHeader{
background-color : #330006; /* ←ボックスの色 */
font-size : 20px; /* ←文字の大きさ */
font-weight : bold; /* ←文字の太さ（太文字） */
text-align: left; /* ←文字の位置（左寄せ） */
text-decoration: none; /* ←文字の装飾（なし） */
height : 50px; /* ←ボックスの高さ */
margin : 0px 0px 30px 0px; /* ←ボックス外側余白、上右下左の順 */
padding : 25px 0px 0px 10px; /* ←ボックス内側余白、上右下左の順 */
border-left:none; /* ←ボックス左側の灰色部分消し */
}
/* 通常時のリンク */
.skinArticleHeader a{
color : #FFDDE1; /* ←文字の色 */
}
/* 訪問済のリンク */
.skinArticleHeader a:visited{
color : #FFDDE1; /* ←文字の色 */
}
/* マウスオーバーしたときのリンク */
.skinArticleHeader a:focus,.skinArticleHeader a:hover{
color : #FFFFFF; /* ←文字の色 */
text-decoration: underline; /* ←文字の装飾（下線） */
}
/*▲ 記事タイトル変更(ここまで) ▲ */

上記CSSをCSS編集の一番下に貼り付ければ、カスタマイズし易いと思います。

少しだけ補足説明させて頂くと、アメブロのデフォルトの記事タイトルには、左側にグレーの5px程のラインが入っています。

そのラインは、

border-left:none; /* ←ボックス左側の灰色部分消し */

という部分で消しました。

必要な場合は、この部分を丸ごと削除すれば、元々あったラインが表示されます。

その他、（太文字）、（左寄せ）、（なし）、（下線）など、この例文で勝手に指定しているだけですので、CSSの記述方法については自分で調べて変更してみて下さい。

ソーシャルボタン

ここは■008：アメブロ記事タイトルのデザインを変更する方法

■001：CSSテンプレートでアメブロをカスタマイズする方法　 ■002：アメブロの横幅を『広げる』『狭くする』方法　 ■003：アメブロ全体の文字を変更する方法　 ■004：アメブロにオリジナルヘッダー画像を表示する方法　 ■005：アメブロのタイトルと説明を消してヘッダー画像にリンクする方法　 ■006：アメブロにヘッダーメニューを設置する方法　 ■007：アメブロのヘッダー最上部の余白（隙間）を消す方法　 ■008：アメブロ記事タイトルのデザインを変更する方法　 ■009：アメブロサイドメニューのデザインを変更する方法　

カテゴリ

HTMLリファレンス
CSSリファレンス
Movable Type（MT）カスタマイズ
アメブロカスタマイズ
GIMPで画像制作・編集
カスタマイズに使える無料ソフト・ツール集

アメブロカスタマイズ

3910GO　＞　3910GO-ブログカスタマイズ