ブログランキングの応援
をして頂けると励みになります。
ここをクリックしてくださいね。
今回は、記事タイトルをカスタム
してみたいと思います。
記事タイトルのカスタム前は、
次のようになっています。
これをカスタマイズしてみましょう。
【１】記事タイトルの背景画像の作成
まず、記事タイトルの背景画像を作成します。
私が作った背景画像は、次の通りです。
この画像を任意のフォルダに保存しておきましょう。
【２】画像のアップロード
［ブログを書く］→［画像］ボタン→［参照］ボタンの順にクリックし、
上記【１】の画像を選択し、［アップロード］ボタンをクリックすると、
画像のアップロードは完了です。
【３】アップロードした画像のURLのコピー
このページを下の方へスクロールすると、
先程アップロードした画像があらわれます。
上記赤枠内の［この画像を使う］ボタンをクリックすると、
下記のように表示されます。
上記画像内の黄色部分のＵＲＬをメモ帳にコピーしておきます。
【４】ＣＳＳ編集画面にCSSを追加
次に、［マイページ］→［クイックリンク］→
［スキンCSSの編集］の順にクリックし、
CSSの編集画面を表示します。
その一番下の次に下記のＣＳＳを追加します。
/* ■skinArticleTitle 記事タイトル■ */
.skinArticleHeader {
background: url("上記メモ帳にコピーしたＵＲＬをここにコピーします。") no-repeat scroll 0 0 transparent;
border-left: 0px;
height: 40px;
margin:0 29px;
padding: 11px 30px 0px;
}
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.5em;/* 文字サイズ */
font-weight:bold;
color:#b2afa8;/* 文字色 */
}
.skinArticleHeader {
background: url("上記メモ帳にコピーしたＵＲＬをここにコピーします。") no-repeat scroll 0 0 transparent;
border-left: 0px;
height: 40px;
margin:0 29px;
padding: 11px 30px 0px;
}
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.5em;/* 文字サイズ */
font-weight:bold;
color:#b2afa8;/* 文字色 */
}
これで、ブログでは、次のように表示されました。
こちらのブログで確認もできます。
↓↓↓
kiyoのテスト用ブログ
（次の記事もご参考にしてくださいね。）
ヘッダー画像のみの設置方法文字入れヘッダー画像の設置方法背景画像の設定方法ヘッダーメニューの設置方法読者登録ボタンをカスタムしてみよう。サイドメニュータイトルをカスタムしてみよう。今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。
クリックして戴けると、
とても励みになります。