HYTのブログ一覧

数回にわたってお送りした、スタイルシート変更。まずはこれまでのスタイルシート関連ページ一覧を:

• 参考リンクと少々
• 能書き(原理)
• トップ画像の変更
• ブログページ全体の変更

他のページも、ブログページ全体と同様に該当するクラスを 編集することで、スタイルを変更可能である。まずは愛車紹介(全体):

次いで、愛車紹介(個別): 最後に整備手帳。フォトギャラリーとほぼ共通なので、整備手帳に関する項目を編集するとフォトギャラリーも同時に更新される: 書き忘れていたが、ページ全体の背景については body{ ～ }内で
    background: #RRGGBB
の代わりに
    background-image: url('[画像のURL]')
を指定することで変更可能。また、
    background-attachment: fixed;
と書き足せば、画面をスクロールしても背景は固定されるようになる。それとは別に、
    background-repeat: no-repeat;
を書き足すと、背景の繰り返し表示をキャンセルできる。 さらに、
    background: #000000;
    background-image: url('[画像のURL]');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
と指定すると、

• 背景画像を画面中心に1枚のみ表示
• 残りの部分の背景色を黒に
• 画面のスクロールに合わせて背景をスクロールしない

という設定になる。ただしテキストの可読性を考えると、あまり背景への画像の挿入はお勧めしない。

以上、スタイルシートについて大まかに解説した。 具体的な手順を中心に記述したつもりであるが、それだけにまどろっこしいところが多々あると思う。質問・突っ込みなどあればぜひお願いします。

まずは前回の補足として(後述と書いておいて書いていなかった・・・)、トップ部分のカスタマイズについてさらに触れる。前回触れなかった、ヘッダの画像以外の部分では 「ブログタイトルの表記位置」および「ヘッダ上下の余白」を調整できる:

• margin-top: 20px; → ページ上部の「みんカラ^βの文字からヘッダまでの距離(マージン)。
• margin-bottom: 0px; → ヘッダから「ブログ」「愛車紹介」等へのリンクまでのマージン
• padding: 15px; → ヘッダ用の枠からヘッダ内の文字(つまりブログタイトル)の距離

といった具合。距離の単位は、ピクセル(px)などで指定する。ちなみに、margin:20px;などとすると 上下左右すべてのマージンを一括指定可能。逆に、padding-topなどとすることで、上側のパディングのみ指定することもできる。 また、例えば以下の文を付加することで、ブログタイトルを様々に装飾可能である:

• text-align:center; → left、right、justifyも指定可能。centerとするとタイトルが中央寄せになる。
• letter-spacing: 20px; → ブログタイトルの文字間の間隔。

また、能書き編で触れたように「#Header a { ～ }」「#Header a:link」などの箇所で書体・文字色・文字スタイルを変更可能。

さらに前回説明の足りなかった箇所として、フッタ(ページ下部)の画像の挿入方法について触れておく。 ヘッダではbackground-imageを指定したが、フッタではbackgroundで指定する(その他の部分の書き方は同一)。

ここからが本題。ここまで紹介した箇所は、スタイルシートのごくごく一部。 というわけで今回は、ブログページの各部のクラス名称を紹介。 各部は主にDIVタグで区切られており、画像に示すようなクラス名が付けられている。スタイルシート編集画面で該当するクラスを探し、追記・削除・変更することで自在にページをカスタマイズできる。

ここでは一例として、タブ部分(「ブログ」「愛車紹介」「おすすめスポット」「ナンデス」の箇所)を取り上げる。 ここはちょっとやっかいな箇所。画像では「ブログ」を表示していて、「ブログ」のタブだけ違う色になっている(=アクティブになっている)。アクティブになっている箇所は、図にあるように.TabActiveおよびa.LinkTabActiveで変更可能であり、それ以外の箇所は.TabInActiveおよび.a.LinkTabInactiveで変更可能である。ベースのスタイルをブラックにした場合、スタイルシートの該当箇所は次のようになっている:
.TabActive
{
    background-color: #666666;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    border: #999999 0px solid;
}

a.LinkTabActive
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}
a.LinkTabActive:link
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}
a.LinkTabActive:visited
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}
a.LinkTabActive:active
{
}
a.LinkTabActive:hover
{
    color: #FFFFFF;
    text-decoration: underline;
    font-weight: bold;
}
link、visited、active、hoverについては、能書き編で説明したとおり。試しに、.TabActiveを少々書き換えてみる(変更箇所は斜体で示してある):
.TabActive
{
    background-color: midnightblue;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    border: darkblue 3px solid;
}
.TabInactiveについてもborder:の箇所を同様に書き換えると、

タブ部分が変化した。このように、スタイルシートの編集したい箇所のクラス名に該当する部分を書き換えることで、任意箇所を様々にカスタマイズできる。ちなみにborderというのは外側の罫線で、darkblueは線の色、3pxは「線の太さを3ピクセルにする」、solidは線種(ほかにdotted、dashed、double、groove、ridge、inset、outsetを指定可能。お試しあれ)である。 なお色は、#RRGGBBという3原色指定ではなく、ここを参考に指定している。

ちなみに、編集したい箇所にどのクラス名が割り振られているかについては、Firefoxの「選択した部分のソースを表示」機能を使うとわかりやすい。

本稿では、具体的な編集手順の第一歩として、トップ画像の変更手順を記述する。

メニューから「スタイルシート」を選択し、「カスタマイズ1」を選択して「スタイル編集」をクリック。

するとこのような画面が表示される(画像クリックで拡大)。なお最初に読み込んだときには、中心部分は空白になる。ここで、画面中の「1」の部分において、「ベースにするスタイル」を選択する。 私の場合は、「ブラック」を選択した。

すると、空白だった欄にベースとなる装飾命令が読み込まれる。 ページ上部や下部、あるいは全体の背景に画像を挿入したい場合には、「スタイル用画像」のボタン(画面中の「2」)をクリック(注: 自分のPCや携帯電話に保存している画像をみんカラのサーバ上に保存(アップロード)しない限り、画像を自分のページ上に載せることはできない))。

既にアップロードしたことがあるならば、リンク先には画像一覧が表示される。 最初は、「ページを追加する」というボタンのみが用意されているので、これをクリック。

するとこんなページが表示されるので、画像の保存されているフォルダ、画像タイトル、コメントを入力し、ページ下部の「保存」ボタンをクリック。1から8までのすべての埋める必要はなく、1だけでも全く問題ない。

再び「スタイルシート用画像」のページへ移動すると、このように追加した画像が表示されるようになる。追加したい画像をクリックすると、その画像のタイトルとともに画像の保存されたURLが表示される。このURLをどこかにコピーしておき、次の作業に備えておく。なお、トリミングなり引き伸ばしなりで画像の横幅を750ピクセルにしておくと、元々の横幅を崩さずに画像を挿入できる。

ここで、いよいよスタイルシート本体に手を入れる。ベースとして読み込んだスタイルシートを下にスクロールしていくと、

#Header
{
    padding:15px;
    margin-top: 5px;
    background: #353535;
    margin-bottom: 0px;
    width: 750px;
    height: 70px;
    background-image: url('/styles/black/point.gif');
}

こんな部分があるはず(読み込んだベースによって若干の差異がある)。これがヘッダ(ページのトップ部分)の装飾指定部分(ただし、ブログタイトルの文字の装飾については後述)。セミコロン(;)で区切られた各行が、一つの装飾指定命令に対応する。

まずは画像を差し替えてみる。上記部分を次のように書き換える。ここで、先ほどコピーしておいた画像のURLを使用する:

#Header
{
    padding:15px;
    margin-top: 5px;
    margin-bottom: 0px;
    width: 750px;
    height: 308px;
    background-image: url('https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/978650/p1.jpg');
    background-repeat: no-repeat;
}

width、heightの部分を画像サイズにきっちり合わせると、ちょうど元の体裁を保持した形で画像のみ挿入可能。また小さい画像をいくつも並べたい場合には、background-repeat: repeat (縦あるいは横方向のみ繰り返すには、それぞれrepeat-xあるいはrepeat-y)と記述する。さらに、先ほどコピーしたURLをbackground-image: url('http://～');という箇所に貼り付ける。後は「プレビュー」で出来上がりを確認し、「保存する」ボタンをクリックすると、変更内容が適用される。

ページ下部や背景などでも、画像のアップロード手順は同様である。次回は、さらに色々な箇所の編集方法について記述予定。

ネットをやっていて、Internet ExplorerやFirefoxやSafariなんかで見るWebページは、HTMLという形式で記述されている。もともとはこれに文書の構造もデザインも含められていたが、「文書の構造」(表、見出し、段落、引用など)と「見栄え」(色、線種、字形、字種など)を分離する目的で「スタイルシート」が考案された。このスタイルシートの枠組みを実現したものの一つが「CSS」と呼ばれるもので、みんカラで使われているのもこれに当る。

次に、スタイルシート自体の一般的な書式について触れておくと、「タグ」と(必要ならば)「クラス」または「ID」によって「スタイルの適用範囲」を指定し、さらに「適用内容」を記述する、という形になる。文書で書くとややこしいが、例えば
a.LinkCalendar
{
    color: #eeeeee;
    text-decoration: none;
    font-weight: bold;
}
でひとまとまりになる。a.LinkCalendarの「a」がタグ、ドットの後の「LinkCalendar」がクラス。「タグ」は文書の構造を指定する、HTMLの根幹。 <a>というタグはハイパーリンク、<table>は表、<h1>は大見出し、といった具合。つまり、タグを指定してその部分のデザインを {}の中に書く、ということ。ただし、「同じタグでも場所によって違うデザインを使いたい」というときに「クラス」または「ID」を用いる。

もう少し具体的に例を示す。私のページのトップ部分(ブログタイトル + 画像)のHTML文を抜き出すと
<div id="Header">
    <span class="BlogTitle"><a id="_ctl0_Header1_HyperLink_Title" href="/userid/409473/blog/" target="_top">Young, Alive, in Drive</a></span>
</div>
となる。id = Headerという部分で、「div」タグに対し「Header」というIDを指定している。スタイルシートでこの部分をデザインするには、#Headerと書かれた部分を書きかえればよい。私のページの場合は
#Header
{
    padding:15px;
    margin-top: 5px;
    margin-bottom: 0px;
    width: 750px;
    height: 308px;
    background-image: url('https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/978650/p1.jpg');
    background-repeat: no-repeat;
}
background-imageで画像を指定(その前に使用する画像をアップロードしておく)。その下のbackground-repeatは、「用意した画像用の枠(width: 750pxとheight: 308px)より画像サイズが小さい場合、 残りの部分を同じ画像で埋める(= 繰り返し表示)するか」の指定。no-repeatで「繰り返しなし」としている。ただし私のページの場合、widthとheightを画像サイズに合わせているので(pxはピクセルを意味する)、実はこの指定は不要である。また、 おそらく上記の部分が書かれているすぐ下の部分に
#Header a
{
    color: black;
    font-variant: small-caps;
    font-style: oblique;
    text-decoration: none;
}
#Header a:link
{
    color: black;
    font-variant: small-caps;
    font-style: oblique;
    text-decoration: none;
}
#Header a:visited
{
    text-decoration: none;
}
#Header a:active
{
}
#Header a:hover
{
    color: #EEEEEE;
    text-decoration: underline;
}
という部分が見つかるはず。ここでブログタイトルの文字部分を編集する。:link、:visited、:active、:hoverというのは、「未クリックのリンク」「クリック済みのリンク」「クリックされている間のリンク」「マウスカーソルを文字上に移動させたとき」を意味していて、それぞれに対しスタイルを使い分けられる。具体的な指定としては、

• 「color」は文字色。色は#RRGGBBというように3原色を数値で入力するか、「black」などのように固有の色名で指定。
• 「font-variant」は英文を「small-caps」つまり「すべて大文字表示だが、2文字目以降は文字サイズを小さく表示する」場合にのみ使用する。日本語タイトルでは不要。
• 「font-style」は文字のスタイル。「oblique」は斜体。「italic」はイタリック。ただし日本語ではこの二つに差はない。
• 「text-decoration」は文字装飾。「none」は何もしない。「underline」、「overline」、「line-through」はそれぞれ下線、上線、打ち消し線。「blink」は点滅。

大まかにまとめると

• みんカラを含め、WebページはHTMLで記述され、このHTMLを形作っているのが「タグ」という概念。
• スタイルシートは、各タグに対して装飾命令を定めたもの。
• 同じタグでも部分(HeaderやFooterなど)によって異なる装飾をしたいときに、IDまたはクラスを割り振り、IDごとあるいはクラスごとに装飾方法を定める。

だいぶ長くなってしまったが、次はもっと具体的な手順を掲載予定。ただ、原理を押さえておくと応用が利くので、できればこの能書きも頭の片隅に入れておいて頂きたいところ。

突っ込み・要望あればどんどんお願いします。

随分本業が立て込んでいると、逆に何かほかのこともしたくなる。
ということで、スタイルシートをいじり始めた。

さしあたって、トップ画像とタイトルの装飾。
スタイルシート自体をいじっていたのは数年前の話。調べながらでなけらばやはりうまくはいかない。ひとまず、background-image、font-variant (small-capsに設定)、font-style (obliqueに設定)をしたが、これだけでも少々時間を食ってしまった。各プロパティについてはここ、色の変更についてはここが参考になる。

しかし画像の幅がちょっと足りない! 後日差し替えないと・・・。