７月１３日 サイト１００選の制作

・サイト１００選の制作

　ギャラリー自体の掲載は４分の１終了。

　一昨日から引き続き、framework.jsとgoogleImgSearch.jsの両立を試行錯誤中。
　なかなかうまくいかない。

　プラグインの変更を検討中。

７月１１日

今日やれたこと

• クライアントのサイト制作・・・トップページがほぼ完成
• サイト１００選ページの制作
  　framework.js とGoogleImgSearch.jsを合体させたギャラリー風ページ。
  　選んでいないカテゴリーの画像が出てきてしまうので、スクリプトを修正する必要がある。
  ⇒　明日に持ち越し
  　

［その他］Webアイコンフォント「Font Awesome」

.htaccessを使用したスマートフォン対応サイトで使ったwebアイコンフォントの使用方法について。

fortawesome.github.io

１．CDNを利用する場合

内に以下のCDNのリンクを埋め込む（現在の最新バージョンの場合）

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

２．「ICONS」の中から使いたいフォントを見つけ、クリック

３．アイコンをクリックして出てくるページのクラス名に注目

<i class="fa fa-home"></i>

４．表示したいところにそのまま挿入する

クラス名を指定すれば、CSSで色々な指定ができる

こちらも参考になります
これは便利！アイコン型WebフォントのCDN「Font Awesome」｜Webpark

［サイト制作］「.htaccess」を使ったサイト完成

以前作った、.htaccessを使ったスマートフォン対応サイトの改修が終わりました。

＜修正点＞

• PC用のサイトのレイアウトを完成

• iframeでYou Tube動画の埋め込み（PC・スマートフォン用）

• audioタグを使って音声ファイルを埋め込み（PC用）

• IE８以下でHTML5対応（html5shiv）（PC用）

• アイコンフォント使用（スマートフォン用）

サーバーにアップしたものはこちら
クラシック音楽名盤６選

［SEO］SEO対策について

□□SEOについて□□

1. Google Search Engineを入れて検索エンジンを呼び込む
2. 「タイトル」「meta descriptionの１文め」「h1」「最初のp」は同一にすると検索に効果的
3. 上位表示は、コンテンツの質を上げること以外に方法はない
   ちなみに、「コンテンツの質」とは・・・
   
   • 　正しい文法、正しいツリー構造
   • 　テキスト量の多さが大事（検索エンジンはテキストを拾う）　
4. 上位表示できること＝売上げが増えることではない。
   検索結果５位以内ならよしとするべし
5. Google Map上で表示される住所の情報も「テキスト」として大事な情報になる
   
   　　↓ これのことです
   

   

6. meta情報は、無駄なものは入れなくて良い。
   最低限入れるべきはcharsetとdescription。
   keywordは、テキストにない単語を入れるのはマイナスにしかならない
7. 順位が上がらないからといって、しばしば手を加えるのはよくない。
   結果に反映されるまでには時間がかかる。（サイト自体を変更した場合は特に。）
   以前のサイトが検索エンジンに認識されていた時間と同じ位の時間がかかる。
   しばらく放置しておくこと。

［RWD］レスポンシブウェブデザインのフォントの設定

□□本日の授業□□

• レスポンシブウェブデザインでのフォントの設定について
• ３月上旬に作った１カラムの課題をレスポンシブ対応に改造。

1. 石垣島観光ガイド
2. ガラスの靴を探しています

レスポンシブウェブデザインでのフォントの設定について

レスポンシブウェブデザインでは、フォントの単位をremにする

emは先祖要素の設定を継承するため、表示サイズは累乗の計算になる。

「rem」の意味は「root」+「em」で、root 要素（つまり、html要素）のフォントサイズを継承する。

ただし、remはCSS3で追加された単位なので、IE8以下は不対応のため
ピクセルに直したものと両方記述すべし。

とりあえずremのrootであるhtmlの基準を、
html { font-size: 62.5%;}　つまり10pxと設定しておく。

PC用の記述
※これ以外にul、ol、など他の使用要素があれば、それに応じて追加すること

/* レスポンシブ対応　font-sizeの基準 */
html { font-size: 62.5%;} /* = 10px */
body { font-size: 16px; font-size: 1.6rem; } /* = 16px */
h1 { font-size: 32px; font-size: 3.2rem; }　/* = 16px */
h2 { font-size: 24px; font-size: 2.4rem; }　/* = 16px */
h3 { font-size: 20px; font-size: 2.0rem; }　/* = 16px */
h4 { font-size: 18px; font-size: 1.8rem; }　/* = 16px */
p { font-size: 16px; font-size: 1.6rem; }　/* = 16px */

スマートフォン用の記述
※スマートフォンではIEは使用しないと思われるので、remだけで良い

@media screen and (max-width: 640px) {
/* font-size */
html { font-size: 62.5%;} /* = 10px */
body { font-size: 1.6rem; } /* = 16px */
h1 { font-size: 3.2rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2.0rem; }
h4 { font-size: 1.8rem; }
p { font-size: 1.6rem; }

これはそのページの基準なので、各要素の調整はその下に書いていけばよい。

レスポンシブ対応１カラムの課題

２つともブレイクポイントを640pxにしており、スマホ用とPC・タブレット用の２パターンのスタイルを書いています。
サーバーにアップしていなかったので、今回は公開しました。

1. 石垣島観光ガイド
2. ガラスの靴の持ち主を探しています

framework.jsを使ったギャラリー風ページ

□□本日の授業□□

• WordPressのページ作成
• framework.jsを使ったギャラリー風ページ

framework.jsを使ったギャラリー風ページの特徴

1. カテゴリー毎に画像を絞って表示できる
2. カテゴリーを複数設定できる

http://kuropanther.html.xdomain.jp/framework/

昨日のGoogle画像検索風ギャラリーページと合わせると、見た目も使い勝手もよいページになりそうな予感。
サイト１００選や自分のポートフォリオに良い。
つくってみたい。

wise yetiもおすすめ！　※レスポンシブ対応！wiseyeti.co.uk