103日目 | web制作
各種設定本日は…
■予約システムをワードプレスに導入する
MTS Simple BookingをDL。zipファイルのままアップロードしてプラグインを有効化する。
●予約システムという項目ができる
予約期間はカレンダー何枚めくれるかの部分。
…予約システムから設定を完了したら
新規予約品目でページを作る。⇒固定ページと同じ様な扱い
「mt system」の検索結果 - Webデザインの勉強 風姿花伝 | 2月20日開講クラス
予約カレンダーを固定ページに呼び出す形で表示すること。
※理由は…フォームは途中から入られるとこまるので直接呼び出せないようにする
■午後はflash
as3でかつてas2でつくったものを書き換える…
体調が悪いので後日。。。できれば。。。
102日目 | web制作
本日は…
■金曜日につくったレスポンシブサイトで使った、バナーの制作方法
私がつくったのはこんな感じ。
・ポイント
①文字をおくときはそのまま載せない⇒ドロップシャドウ、境界線などを入れて目立たせる
②装飾を付けたときは文字詰めを少し広げてやる
③40%の部分、数字に対して記号の文字サイズは１～２回り小さいものを指定すると、数字が目立つ
④曲線の描き方⇒ペンツールで囲んで選択範囲を作成⇒塗りつぶし
⑤境界線⇒全てを選択範囲に選んだ状態で、境界線を描くでいい
■同じくコードの書き方
①固定値のものを作らない
・img は max-width:100%;をかけてやる
②レスポンシブになったときに左右にmarginを入れてやる
⇒計算の仕方…980pxのとき20pxなら…と計算して%指定にする
横幅が決まれば、margin: 0 auto;で指定してやればいい
ちょっと番外<一部固定で可変レイアウトにする場合>
：固定したいものは固定したい値を指定
：固定じゃないものと固定値を含む外側＝wrapper的なやつは普通にwidth:100%⇒一定以上いくとカラム落ちする
：固定じゃないものは100%でmarginで固定分マイナス指定をする⇒固定値の分の横幅が出来る、固定値部分はカラム落ちしなくなる（100%＋（固定値＝-margin分）で収まってしまうというようなイメージ）るけど、固定値じゃない部分のコンテンツの上に固定値のコンテンツが被ってしまう
：固定じゃないほうの中身をdivなどで囲んでやり、外側の-marginと同じ値、marginを指定してやる⇒margin分で固定値部分をよけるイメージ
わかりにくい･･･でもこういうこと。
インテリアショップカサブランカ
できあがり。
提出したものに余白を指定し、タブレット表示の際はバナー部分を固定値にした…というもの。
■100選はjimdoのもので妥協
時間が無い！汗
101日目 | web制作
本日は…
■午前中はテスト
10問･･･
答えは
1.header
2.section
3.article
4.aside
5.nav
6.placeholder
7.autofocus
8.require
9.figure
10.ブレークポイント
おそらく。たぶん。そして順不同。
その後、レスポンシブサイトをひとつ作る。
■午後はanimation
img { animation-name:anime1;/*必須 キーフレーム名*/ animation-duration:2s;/*アニメーション1回分の時間の長さ*/ animation-timing-function: ease;/*アニメーションのタイミング*/ animation-delay:.2s;/*アニメーションがいつ始まるかを指定*/ animation-iteration-count: infinite;/*アニメーションの繰り返し回数*/ animation-direction:alternaite;/*アニメーションを反転再生させるかどうかを指定*/ } @keyframes anime1 { 0%{transform: rotate(0deg);} 100%{transform:rotate(360deg);} }
基本的な項目は扱えるようになっておくと便利
※上記はショートハンドで指定できる値
例の通りに書くとくるっと回ってまた戻る。
■桜の花びらを降らせる
…ひらひらしない(~_~;)
どうにかしたいので保留。
100日目 | web制作
本日は…
■講師ブログピックアップ
その①
CSSだけでロールオーバー（8/3の記事）d.hatena.ne.jp
その②RSSリーダーでよそのブログを自分のサイトで読み込ませる（9/8の記事）d.hatena.ne.jp
⇒はてなブログのrssバージョンを確認してから取得して書かないと、旨く表示されない
先生の風姿花伝と私のブログはちょっと違う。。。
⇒wordpressにrssを読み込ませてサイドバーに表示してみる
wordpressのウィジェットを使うと簡単に表示させることが可能
rssimoirterなどを使ってrssを読み込ませてみる
■Bootstrapを使う
ダウンロード後、html5sivなどを記述、jsファイルとcssファイルをそれぞれ読ませる
※要素に対してclassでやりたい機能を付加していくイメージgreenapple-room.com
全部じゃないけど機能一覧
ということでせっかくなので両者を足して、
ブーツストラップのグリッド機能を使って
RSSを読み込んで表示して４つ並べてみる。
■午後はwordpressにRSSを読み込ませてみる
・ウィジェットを使うととても簡単
好きなところにおける上、日付、著者などを入れたり、あと本文の一部を表示したりと色々楽しい。
WordPressのサイトについては早々に１００選として公開したい…。
進んでいないもの…100選とポートフォリオ
98日目 | web制作
本日は…
■css3のanimationを使おうの回
・バナーを回転させて、二枚の画像を交互に表示する
・ニュースティッカーで文字表示
・ボタンを光ってる雰囲気にする
アニメーションを使う
の3パターン。
基本の形式は、
#front { animation: flipFront 5s infinite alternate;/*alternateはアニメーションが1回再生したら逆再生になる*/ -webkit-animation: flipFront 5s infinite alternate; } #back { animation: flipBack 5s infinite alternate; -webkit-animation: flipBack 5s infinite alternate; }
animationを指定して、その下に
@keyframes flipFront { 0% {transform: rotateY(0deg);} 45% {transform: rotateY(0deg);}/*Y軸を中心にして、45%までは見えてるけど、55％になったら うらっかえしになってみえない*/ 55% {transform: rotateY(180deg);} 100% {transform: rotateY(180deg);} }
という形でanimationを指定していく。
これは画像を回転させるanimation。
■明日のテストの予告
思い出すこと…
・HTML５の６つの要素の役割と名称
・HTML５で追加されたフォームの新要素
・レスポンシブについて→フルードイメージとメディアクエリ、ブレイクポイントについて
など。developer.mozilla.org
audioタグ、videoタグ模範になので一応。qiita.com
■ちょっと関係ないけどgoogleimage的なやつのソートに関する参考サイト覚書kirinblog.com
97日目 | web制作
本日は…
■スマホサイト完成…！
htaccessを入れて完成しました。
トップページはpcと同様スライダー…
縦長の画像に作り直したのでまだ２枚しか…。少し重たいのが難点。
下のバナーはpcとほぼ共通。
商品詳細のページはページャーをやめて普通にスライド。
フッターに、ホームボタン、トップに戻るボタン、お気に入りボタン。
それから楽天でお買い物と、pcサイトで見たい方向けのボタンを設置。
アイコンは同じみfontawesomeで。
メニューはプラグインを利用して…。
三本線メニューからばってんになる。わかりにくいけどアクティブになると背景が白くなる。
スマホサイトの見せ方は色々研究…。
なるべくpcサイトと印象が変わらないようにしつつ
スマホサイトらしいフラットな感じを目指しつつ…。
ヘッダーフッターに使っていた画像は排してなるべく軽くしたかった…。
画像は商品写真にしぼって使用。
受賞・メディアのページがひどいのでもう少しなんとかしたい。
楽天サイトも頼まれてしまったのでがんばります。
