ベクトルドロー・レベルゼロ+

ホーム > コンピュータ > webツール > Mobile対応への道

新しい「style.css」に既存サイトの「style.css」の内容をコピーします

作成日 2015.01.19
最終更新日 2015.01.19

cssをコピーします。

cssをコピーします。
「index.html」と同様に、「style.css」も同様に編集前にコピーして名前を変更しておきます。
そして、既存のサイトの「style.css」を名前を変更してコピーしておきます。 こうしておくことで、変更した結果、対処できなくなっても元に戻すことができます。

cssの内容を変更します。

このindex.htmlの内容に、既存のサイトの「style.css」を切り貼りしていきます。

使用するエディタは、

BlueGriffonは、有料のアドオンを使用しないとcssを編集できないので、 ここでは、Chrme Dev Editorを使おうとしました。 使ってみると別ウィンドウで開く方法がわからなかったのでこの用途には向きません。 ここでは、秀丸エディタを使用しました。 キーボードからの入力はほとんどせずに、コピペ主体の操作なので、お好きなエディタを使うとよいと思います。

ここでのポイント

<body></body>内のレイアウト構成を表すタグは変更しません。そのまま、利用します。
好みの問題ですが、Webフォントは、好きではないので、フォント指定は削除します。
大きな変更が必要なのは、navタブだけです。

navのスタイルを変更します。

参考にしている本では、レスポンシブルデザインについてはわかりやすいのですが、 ホバー機能や現在の位置を示すスタイルがないなど、ナビについてはスタイルが作り込まれていないので、 ナビのスタイルを変更します。

ナビを設置するのは、

ナビを設置することは、サイト訪問者をサイト内で回遊してもらい、サイト内のページをたくさん見てもらうことが目的です。

グローバルナビ

タイトル付近に設定されるカテゴリーへのリンクです。
既存サイトでのデザイン
グローバルナビ
navタブの変更
変更するのは、navで始まる項目です。 具体的には、このstyle.cssでは、

 nav ul {}
nav ul li {}
nav ul li a {}
.ie7 ul{}
.ie7 ul li{}
nav ul li:nth-child(odd) a {}

nav ul li:last-child a {}
nav ul li.last a{}
です。

これらを、確認すれば終了です。 まず、項目の数が違うので、ナビが2段構成になっています。
内容を張り付けたサイトでのデザイン
グローバルナビ
内容を張り付けたサイトでのデザインのモバイルビュー
グローバルナビ
モバイルビューでは、問題無いので

/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 600px)

以降の設定を確認します。

nav ul li {}
.ie7 ul li{}

内のwidthのパーセント設定が原因です。パーセントの値を修正します。
テキストでは、p77に書かれています。 試行錯誤で、程よいサイズを探してもいいと思います。
現在ページの表示とホバー設定を追加します。
現在存在する位置とマウスが重なったボタンの色が変化(ホバー)するように以下のコードを追加します。

nav ul li a:hover,
nav ul li.current a{
/* マウスが重なった時の背景色を変更する */
 /* 現在のページの背景色を変更する
    */ background-color: #006600; }

サイドナビ

サイドバーに設置するサブカテゴリーへのリンクです。
既存サイトでのデザイン
サイドナビ
通常は、サブカテゴリへのリンクに使います。 トップページでは、グローバルナビと同じ内容です。
サイドナビのサンプル
このテンプレートには、サイトナビが設定されていないので、次のセクションのサンプルを参考にします。

/*layout
----------------------------------------------------*/
の項目に以下を追加します。

aside nav ul li {
text-align: center;
text-shadow: 1px 1px 1px #000;
border-bottom: 1px solid #456729;
}
aside nav ul li a {
display: block;
padding: 2px 0;
}


/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 600px) {
の項目に以下を追加します。

aside nav ul li {
clear: both;
width: 100%;
}
PCビュー
サイドナビ
モバイルビュー
サイドナビ
モバイルでのサイドナビは、指で押せるかどうか確認できませんが本来は確認すべきです。

パンくずリスト

トピックパスとも呼ばれます。カテゴリーの階層位置を示すリンクです。 グローバルナビの下に設置されることが多いです。 私のサイトでは異なりますが、きっちりとデザインされていれば、サイトのフォルダ構造と一致するはずです。
既存サイトでのデザイン
パンくずリスト
<p></p>タグ要素ですので、cssを定義しなくても問題はありません。

cssを修正したあとのビュー

PCビュー
修正結果
モバイルビュー
修正結果

強調表示やインデントの文字装飾

強調表示やインデント(字下げ)に使用する文字装飾を設定しておきます。

何とか完成です。

あとはフォントサイズを見直し、色を自分の好みに変更します。画像は、サンプルについてきたものは使用しないようにしましょう。 少なくとも、この本を読んだ人に、参考にしたことがわからない程度まで、デザインの雰囲気を変えましょう。 そして、問題が発生した部分、気に入らない部分を追々直していくことにします。
Mobile対応への道戻る << |
Mobile対応への道
Copyright (C) 2011-2016 kukekko All Rights Reserved.
kukekko@gmail.com
ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません 」。
inserted by FC2 system