サイドメニュータイトルをカスタムしてみよう。［新デザイン対応］

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。


　



［新デザイン対応］のＣＳＳ編集として、

■ヘッダー画像のみの設置方法
■文字入れヘッダー画像の設置方法
■背景画像の設定方法
■ヘッダーメニューの設置方法
■読者登録ボタンをカスタムしてみよう。

の記事を投稿してきましたが、

今回は、サイドメニュータイトルをカスタム
してみたいと思います。



サイドメニュータイトルのカスタム前は、
一部を見ると次のようになっています。



これを少しカスタマイズしてみましょう。



【１】サイドメニュータイトルの背景画像の作成

まず、サイドメニュータイトルの背景画像を作成します。
私は、次の画像を作成してみました。



この画像を任意のフォルダに保存しておきましょう。



【２】画像のアップロード

［ブログを書く］→［画像］ボタン→［参照］ボタンの順にクリックし、
上記【１】の画像を選択し、［アップロード］ボタンをクリックすると、
画像のアップロードは完了です。



【３】アップロードした画像のURLのコピー

このページを下の方へスクロールすると、
先程アップロードした画像があらわれます。



上記赤枠内の［この画像を使う］ボタンをクリックすると、
下記のように表示されます。



上記画像内の黄色部分のＵＲＬをメモ帳にコピーしておきます。



【４】ＣＳＳ編集画面にCSSを追加

次に、［マイページ］→［クイックリンク］→
［スキンCSSの編集］の順にクリックし、
CSSの編集画面を表示します。

その一番下の次に下記のＣＳＳを追加します。

/* ■skinMenuHeader サイドメニュータイトル■ */
.skinMenuHeader {
background: url("上記メモ帳にコピーしたＵＲＬをここにコピーします。") no-repeat scroll 0 0 transparent;
padding:10px 25px;
font-size:1.4em;
font-weight:bold;
color:#b2afa8;
}

これで、ブログでは、次のように表示されます。





こちらのブログで確認もできます。
↓↓↓
kiyoのテスト用ブログ



今回は、以上です。



最後まで読んでいただき、
ありがとうございました。

ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。


　

クリックして戴けると、
とても励みになります。