エキサイトブログのサイドバーのメニュータイトルの背景に画像を設定する方法
2012年 03月 17日
サイドバーのメニュータイトルの背景に画像を設定する方法についての覚書です。
背景画像の登録
CSSの修正作業に入る前に背景画像をアップロードしておきます。
「スキン変更」をクリック。
「編集」をクリック。
「マイイメージアカウントにイメージ登録」をクリック。
背景に使用する画像をドラッグ&ドロップします。
「送信」ボタンをクリック。
ここで、ファイルサイズが大きいとエラーが出る場合には、画像の容量を小さくして、再度トライします。
アップロードした画像のURLをコピーしておきます。
CSSの修正
Google Chrome を使って、サイドバーのメニュータイトル部分のCSSをどういじればいいか確認します。右クリックより「要素を検証」を選択。
すると、サイドバーのメニュータイトル部分のCSSは「div.MNTTL」であることがわかります。
背景画像を表示させるCSSを追加します。
すると、以下のようにメニュータイトルに背景画像が表示されます。
背景画像を差し込んだら、メニュータイトルの文字が見にくくなったので、以下のCSSを追加します。
見やすくなりました。
CSSを修正した部分は、まるごとコピーして、エディタ等へ貼り付けてストックしておきます。
次にタイトルメニュー下のバーを削除します。CSSを以下のように修正すると、
メニュータイトル下のバーが削除されました。なお、「border-top:none;」を追加する方がスマートだったかもしれません。
この部分のCSSも同様にコピーします。
エディタ等にストックしておいたCSSの変更内容全体をコピーしておきます。
次にCSSの差し替え作業を行います。
まず、「スキン変更」をクリック。
「編集」をクリック。
該当部分を探し出し、データの差し替えを行います。
「プレビュー」ボタンをクリックし、
CSS修正後の表示内容を確認します。
表示が思い通りになっていたら、「保存」ボタンをクリックし、CSSの変更内容を確定させます。
「元のページヘ」をクリックで作業完了です。
以下のような感じでメニュータイトルの背景に画像が適用されました。