HYTのブログ一覧

毒も吐いたところで、本日の2本目は久々にスタイルシートの話題を(明日は来客のため更新お休みの予定)。では、背景左側をちょっと調整したのでご紹介。

まず、こんな画像を用意しておく(背景と混ざるため枠線を設けてある):

トップ画像(ヘッダ)変更と同様にこの画像をアップロードしておき、スタイルシートの「body」という箇所を探して以下のように編集する:

  body
  {
    background: black url('https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1018867/p6.png')     repeat-y left top;
    (以下省略)
  }

(注: url('～～～～');ではアップロードした画像のURLを指定する)。 「black」で画像の入らない部分の背景色を「黒」とし、「repeat-y」で縦方向に画像を繰り返し配置し、「left top」で1枚目の画像の表示位置を左上に指定している。

ついでに、タブ(「ブログ」「愛車紹介」「おすすめスポット」「My掲示板」へのリンク部分)下の「300ZX」について。まず、以下の画像を用意する(枠線を設け、実際より小さく表示させている。クリックで拡大):

同様に画像をアップロードした上で、「.TabBottom」という箇所を以下のように編集する:

  .TabBottom
  {
    background: black url('https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1018867/p5.jpg') no-repeat center bottom;
    text-align: center;
    height: 20px;
  }

先ほどとは異なり「no-repeat」により繰り返し表示をなくし、「center bottom」によって配置を「中央下部」に指定している。

・・・ただ、色々見ているともっとセンスあるページはいくらでも見つかる。センスばっかりは、私には無縁だな(笑)。

昨日の記事にて実践したヘッダ位置調整であるが、一晩で元に戻っていた。あれ、何事・・・?

親元のスタイルシートの変更を疑い、 内容を除いてみると・・・。「!importantルール」の嵐! 出た～、イジルナクオリティだ。

この数日間、ちまちま更新が続いているようだったが、ここまでやられたらちょっと打つ手がないのかな。

注: 12/9現在、「ヘッダ位置調整」は不可能になっています。

スタイルシート編集によるヘッダの調整についてもう少し調べてみた。今回は画像入りなので万人向け・・・なはず。

まずは、未加工の状態を確認。

背景色が合わないうえ、ちょっとヘッダがうるさい気もする。

そこで、背景色を変えてみる。スタイルシート編集画面にて、
    #UserHeader
    {
      background-color: black;
    }

を貼り付ける。ほかの色への変更や画像の挿入も可能。すると以下のようになる。

これで背景色が統一された。次いで、見えにくくなった文字色を変更する。再度スタイルシート編集画面で、以下を貼り付ける:
    .reg
    {
      color: white;
    }

    #UserHeader #hdUserPage #hdUserPageMinkara a:link
    {
      color: white;
    }
    #UserHeader #hdUserPage #hdUserPageMinkara a:visited
    {
      color: white;
    }
    #UserHeader #hdUserPage #hdUserPageMinkara a:hover
    {
      color: royalblue;
    }
すると、画面は以下のようになる:

これで文字も見やすくなった。この部分の意味は、以前の記事にまとめてある。

最後に、ヘッダそのものをずらす作業。一番上部に見える線は現在のところ消せずにいるので、その上にかぶせる形で移動させた。そのためには、
    #hdUserPage
    {
      position:relative;
      top:25px;
      left:30px;
    }

    #gNav
    {
      position:relative;
      top:-30px;
      left:30px;
    }
を貼り付ける。そうすると・・・

このように、ヘッダ位置が調整される。「position: relative」という指定により、DIVタグ等で囲ったブロック要素を任意位置に調整できる、という寸法。

最後に。この記事の編集に当たり、色々なところからアイディアを頂きました。カスタマイズの先達の皆様、ありがとうございます。

やや遅きに失した感はあるものの、ひとまずみんカラのトップページヘッダについて検討してみた。

能書きは後回しにして結論のみ先に示すと、変更可能なのは「白くなっていた部分(私のページでは黒に変更済み)」、および「ようこそ(ユーザ名)さん」の文字のみのようである。

ブログのHTMLソースから当該部分のみ抽出した(タブを半角スペースに変換済み)のがこの記事の画像。やたらとDIVタグが入れ子になっているが、肝心なのは3行目の「div id=hdUserPage」と9行目の「div class="reg"」という箇所。ちなみにこのエディタ、非常にアクの強い(?)「xyzzy」というもの。慣れると手放せなくなる魔性のエディタである。さらに横道にそれると、「xyzzy」はマインスイーパの裏技にも関連している。興味のある方は「xyzzy マインスイーパ」で検索されたい。

スタイルシートの編集に当たり、「id=(ほげほげ)」で指定される箇所は

    #(ほげほげ)
    {
      color: yellow;
      background-image: url('～');
    }

(なお、「ほげほげ hogehoge」で検索すると歴史的背景なんかがわかる・笑)というように「#」を用い、「class=(ほげほげ)」で指定される箇所は

    .(ほげほげ)
    {
      color: yellow;
      background-image: url('～');
    }

というように、「.」を用いる。例えば、私はスタイルシート編集画面で以下の文を追記した:
    #hdUserPage
    {
      background-color: black;
    }

    .reg
    {
      color: white;
    }
「background-color」を「background」や「background-image」とすることで、ブログ本体の背景と同様に画像を差し込むことも可能。また、「.reg」については、ひとまず文字色の変更(白)のみ動作を確認した。 あまり思い通りにはならなかったが、ひとまずこれで様子見中。

※この記事は、ユーザーページ ヘッダー変更実施のお知らせ について書いています。

～追記～

調べれば色々出てくるもので、上位要素を順番に並べるとリンクの色も変更可能。先達の皆様に感謝! 私も勉強不足だ・・・。

    #UserHeader #hdUserPage #hdUserPageMinkara a:link
    {
       color: white;
    }
    #UserHeader #hdUserPage #hdUserPageMinkara a:visited
    {
       color: white;
    }
    #UserHeader #hdUserPage #hdUserPageMinkara a:hover
    {
       color: royalblue;
    }
色名は適宜変更可能。

前回で最終回、と思ったスタイルシート変更関連記事。だが読み返してみるとまだ不親切な箇所が見受けられるのでここで補足する。

まず、画像はプロフィール画面の各部分のクラス名。他の部分については以前の記事(ブログページ、愛車紹介等)を参照されたい。

次に各クラスに対して指定できるプロパティについて示す。プロパティとは
    border: solid 5px darkblue;
などの個々の要素のこと。他の例を示すと、背景全体を指定する箇所
body
{
    background: #000000;
    color: #cccccc;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    margin: 0px;
    padding-top: 8px;
    text-align: center;
}
におけるbackground、color、padding-rightなどがプロパティである。プロパティの種類は非常に多く、これまでに示した例だけではカバーしきれない。プロパティの種類や使用法については、ここが非常に参考になる。カーソルや、(Internet Explorer独自だが)スクロールバーなども変更可能である。また、以前紹介したこのページでは、非常に理論寄りの解説がなされているので、深く調べたい方にはこちらもお勧め。

最後にアイコン変更について触れておく。本来はcontentプロパティを指定すべきなのだろうが、みんカラでは「背景画像を繰り返しなしの左寄せでアイコンとして配置し、後続するテキストのpaddingを右に寄せることで背景画像をアイコンに見せる」という方法をとっている。具体的な変更手順としては、

1. トップ画像などと同様に、アイコン用画像をアップロード(手順はこちら)
2. スタイルシートにおいて「.Title」、「.ProfileTitle」」という箇所を探す。background-imageプロパティが見つかるので、url('')内にアップロードした画像のURLを記述
3. 画像サイズに合わせて、padding-left(後続するテキストとの間隔)を調整する。これを調整しないと、画像がテキストとかぶったりするので注意。
4. お好みで、background-positionを調整。私の場合は
        background-position left center;
   として、水平方向は左寄せ、垂直方向は中央寄せにしている。

[追記] アイコンの縦幅が行幅に収まらない場合には、
    line-height: 25px; (数字はアイコンの大きさに応じて適宜変更)を追加する。これを指定しない場合、行幅は文字の大きさに合わせられる。