HYTのブログ一覧

今回も地味と言えば地味な変更を加えてみた。まずは変更前のプロフィール画像から。

例によってマイページから「スタイルシート」「詳細編集」へと進み、さらに「プロフィール」を選択。そして画像の四角く囲んだ部分を追記する:

書き足すのはこれだけ(笑)。

また、1枚目の画像で気になったのが、「Z」ロゴ内の背景色とその周辺の背景色の違い。これについては、ロゴの背景を透過色に設定しておくと後から背景色を変更しても調整が不要になるので、GIMPで編集。このソフトを初めて使ったときには(OSのせいでもあるだろうが・・・)非常に不安定ですぐにやめたのだが、今は非常に使い易くなった印象。これで透過GIFも容易に作れる。後は「プロフィール用アイコン」を改めてアップロードして終了。

さて、こうして変更を加えると・・・

アイコンの背景色と、記事の投稿日付に編集内容が反映された。こうして一つずつ進めていくと、とっつきにくい作業も徐々に慣れていくはず。

過去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回で示した背景とロゴの変更を加えると・・・

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

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

リニューアル後のスタイルシートについて、ほぼ全体を見てみた。以前より自由度が下がった点もあれば、やりやすくなった箇所もある印象。

前回ではすべての変更箇所を書いていないので、今回はその続き。「詳細編集」において、以下の項目を変更している。

・コメント
    # コメント日付
        font-family:Georgia;
    これで、コメントとコメント返答の日付のフォントを変更した。
    あまり気にする方はいないかもしれない・・・。

・プロフィール
    # プロフィールテーブル
        border-collapse:separate;
    これで、プロフィール(出身地など)の欄の表示を若干変更
    (比較画像がないと伝わらないのに用意していない・爆)。

    # プロフィール見出し
        background: #666;
    プロフィール見出し(左側)背景色の変更。

    # プロフィール本文
        background: #333;
    プロフィール本文(右側)の背景色の変更。

・サイドメニュー
    # 何シテル?本文
        font-family:Georgia,Tahoma,Sans-serif;
    フォント変更。これも細かい変更・・・。

もう少し噛み砕いた説明に付いては後日掲載予定・・・。

これまで使用してきたスタイルシートが使用不可能になるということで、新しいスタイルへの対応をちまちまと進めてみた。

まずは、「簡易編集」。以下の項目を選択・編集した:
・基本とするスタイル: みんカラブラック
・利用するナビゲーション: ブラック
・タイトル見出しアイコン: メインタイトル用・プロフィール用とも以前作成の「Zロゴ」へ
ヘッダ等については詳細編集でもカスタマイズ可能なので、ひとまず保留。

次いで、「詳細編集」。事前に、使用する画像を「スタイル用画像」のページでアップロードし、画像のURLを控えておくとよい。また、以下に示した箇所以外の指定が予めなされている場合、それらは消去せず、そのまま残しておいた。
・「ページの基本」
    # ユーザー領域(URLは省略してある):
        background:black url('http://～.png') repeat-y left top;
    これで本体横の「NISSAN FAIRLADY Z」のロゴを表示している。
    なお、repeat-yで「縦方向に繰り返し配置」してある。

    # コンテンツ領域リンク(マウスオーバー):
        color:royalblue;
    これで、リンク上にマウスを移動させたときの文字色を変更した。

    # ヘッダー領域:
        background:black url('http://～.jpg') center no-repeat;
    これで、ヘッダの画像を中央に配置し、幅の足りない部分は黒で埋めた。

    # ヘッダータイトル色・ヘッダータイトル色(マウスオーバー):
        font-variant:small-caps;
        font-style:oblique;
    どちらにも上記2行を追加することで、タイトルの表記を「スモールキャピタル」
    (2文字目以降を高さの低い大文字にする)、かつ斜体に変更した。

・「タブ」
ちょっとしたお遊び程度で、ほとんど変更していないが・・・。
    # タブ(通常)のリンク(マウスオーバー)
        background:darkblue;
    これで、タブ上にマウスを移動させたときの背景色を変更した。

    # タブ(選択中)のスタイル:
        background:#333;
    これで、表示しているタブの背景色を黒から「黒に近い灰色」へ変更した。

・「コンテンツ共通」
    # コンテンツ表示上部
        background:url('http://～.gif') no-repeat bottom left;
        height:22px;
    これについては、まず以下の画像を用意(縮小表示してある。クリックで拡大)する:
        
    この画像の高さに合わせてheightを22pxとした。
    これで、各コンテンツ上部に「300ZX」のロゴが表示される。
    透過GIFを用いている点に注意されたい。

第2回で、その他の細かい点について触れる予定。