くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

7月13日 サイト100選の制作

・サイト100選の制作

 ギャラリー自体の掲載は4分の1終了。

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

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

 

7月11日

今日やれたこと

 

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

 

 

広告を非表示にする

[その他]Webアイコンフォント「Font Awesome」

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

fortawesome.github.io

1.CDNを利用する場合

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
2.「ICONS」の中から使いたいフォントを見つけ、クリック
3.アイコンをクリックして出てくるページのクラス名に注目

f:id:pleasure10501:20150708182131p:plain

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

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

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


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

[サイト制作]「.htaccess」を使ったサイト完成

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


<修正点>

  • PC用のサイトのレイアウトを完成
  • audioタグを使って音声ファイルを埋め込み(PC用)
  • IE8以下でHTML5対応(html5shiv)(PC用)


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


f:id:pleasure10501:20150708175715p:plain:leftf:id:pleasure10501:20150708180200p:plain:left:w600

[SEO]SEO対策について

□□SEOについて□□

 

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

      ↓ これのことです

    f:id:pleasure10501:20150703230436p:plain

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

 

 

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

□□本日の授業□□

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

  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; }

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

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

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

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

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

□□本日の授業□□

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


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

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

f:id:pleasure10501:20150630162711p:plain
http://kuropanther.html.xdomain.jp/framework/


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


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