スタイルシートのカスタマイズ - リニューアル対策編3: 愛車紹介のアイコン&点線部分変更

過去2回の記事では変更箇所を一気に列挙したので、少々とっつきにくい・・・。ということで、掲載し忘れた一ヶ所に的を絞って詳細解説を試みる。

今回取り上げるのは「愛車紹介」のページ。 マイページから「スタイルシート」-「簡易編集」と進み、「基本とするスタイル」で「みんカラブラック」を選択するところまでは対策編1でも述べた。

この時点で、愛車紹介ページは以下のような表示になる(クリックで拡大):

以前に示した変更(300ZXのロゴ、背景のNISSAN FAIRLADY Zのロゴ、ヘッダ)は省略するとして・・・。まずアイコンを変更してみる。こんな画像を用意して・・・

これを「スタイル用画像」のページでアップロード(登録)し、画像のURLを控えておく。

次に、「詳細編集」へ進み、さらに「愛車紹介」を選択すると、 「愛車リスト-愛車名」という項目が先頭に見つかる:

ここで、
        padding:#px #px #px #px;
        background:url('～') no-repeat left center;
という部分を、用意したアイコンに合わせて変更する。

「padding」の後の4個の数値はそれぞれ上、右、下、左のスペースと考えて差し支えない。アイコンの大きさに合わせて現物合わせで変更する。わかりにくいときは極端な値を入れると、値とスペースの関係がよくわかる。

加えて、先ほど控えておいたURLをbackground: url('～')の「～」の部分に貼り付ける。また、愛車紹介の本文と日付の間の点線を実線にしてみる。灰色一色の細い画像を用意してアイコンと同様にアップロードし、「愛車リスト-愛車の登録日」の欄でbackgroundにその画像のURLを貼り付ければよい。さらに、第1回で示した背景とロゴの変更を加えると・・・

このように、愛車紹介横のアイコン、愛車紹介本文と日付間の線が変更された。

いじる箇所ごとにこうしてウインドウが用意されているので、他の場所も同様に書き換えたり書き加えたりすることで、いろいろな変更が可能になる。