tomemo

エキサイトブログのサイドバーのメニュータイトルの背景に画像を設定する方法

サイドバーのメニュータイトルの背景に画像を設定する方法についての覚書です。

WS001786





背景画像の登録

CSSの修正作業に入る前に背景画像をアップロードしておきます。

「スキン変更」をクリック。

skinimage01

「編集」をクリック。

skinimage02

「マイイメージアカウントにイメージ登録」をクリック。

skinimage03

背景に使用する画像をドラッグ&ドロップします。

skinimage04

「送信」ボタンをクリック。

skinimage05

ここで、ファイルサイズが大きいとエラーが出る場合には、画像の容量を小さくして、再度トライします。

skinimage06

アップロードした画像のURLをコピーしておきます。

skinimage07

CSSの修正

Google Chrome を使って、サイドバーのメニュータイトル部分のCSSをどういじればいいか確認します。右クリックより「要素を検証」を選択。

skinimage08

すると、サイドバーのメニュータイトル部分のCSSは「div.MNTTL」であることがわかります。

skinimage09

背景画像を表示させるCSSを追加します。

WS001780

すると、以下のようにメニュータイトルに背景画像が表示されます。

skinimage10

背景画像を差し込んだら、メニュータイトルの文字が見にくくなったので、以下のCSSを追加します。

WS001781

見やすくなりました。

WS001782

CSSを修正した部分は、まるごとコピーして、エディタ等へ貼り付けてストックしておきます。

skinimage11

次にタイトルメニュー下のバーを削除します。CSSを以下のように修正すると、

WS001783

rect3015

WS001784

メニュータイトル下のバーが削除されました。なお、「border-top:none;」を追加する方がスマートだったかもしれません。

skinimage12

この部分のCSSも同様にコピーします。

skinimage13

エディタ等にストックしておいたCSSの変更内容全体をコピーしておきます。

skinimage14

次にCSSの差し替え作業を行います。

まず、「スキン変更」をクリック。

skinimage15

「編集」をクリック。

skinimage16

該当部分を探し出し、データの差し替えを行います。

skinimage17

rect3015

WS001785

「プレビュー」ボタンをクリックし、

skinimage18

CSS修正後の表示内容を確認します。

skinimage19

表示が思い通りになっていたら、「保存」ボタンをクリックし、CSSの変更内容を確定させます。

skinimage20

「元のページヘ」をクリックで作業完了です。

skinimage21

以下のような感じでメニュータイトルの背景に画像が適用されました。

WS001786


[PR]
by asazuki508e | 2012-03-17 12:03 | Comments(0)