WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

既存サイトのトレース|フルスクリーンレイアウト

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。
今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。

f:id:yachin29:20170105130714p:plain

www.bloomingville.com

今回のレイアウトのポイント
  • フルスクリーンでのグリッドレイアウト
  • ドミナントカラーを使ったデザイン
  • 可変のブロックに固定値のマージン
  • ある程度スクロールするとグローバルナビがページ上部に固定

などです。



作例
http://yachin29.webcrow.jp/bloom/


生徒の作例
http://yoshi1004.webcrow.jp/content/kaguya/


http://tkd27.webcrow.jp/responsive/designhotel/

Unknown collation: 'utf8mb4_unicode_ci' のエラーの原因

WordPressを仮想サーバーからレンタルサーバー等にデータ移行(デプロイ)する際に

Unknown collation: 'utf8mb4_unicode_ci

というエラーが出る事があります。
これは仮想サーバーよりレンタルサーバーのデータベースのバージョンが低い場合に出る事があります。
「utf8mb4」というのは「utf8」の拡張版であり、今まで使われていた文字セットにさらに追加の文字セットが使えるようなります。
「utf8mb4」はバージョンが5.5.3以上のMySQLのデータベースで使用する事が出来ます。



問題は、WordPress 4.2からセキュリティー上の仕様でユーザーの許可なく、自動的にデータベースの文字コードを「utf8mb4」にしてしまうことです。例えば、5.5.3以上のMySQLのデータベースで、データベースを作成する際に、「utf8_general_ci」で作っても、新しいバージョンのwordpressと紐付けした際に、自動で「utf8mb4_unicode_ci」に書き換えられてしまいます。


その「utf8mb4_unicode_ci」に自動で書き換えられてしまった、データベースのデータを「utf8mb4」に対応していない古いデータベースにデータ移行しようとすると、冒頭のエラーが出てしまいます。



なので、仮想サーバーからエクスポートしたsqlファイルの中身に書かれている、
「utf8mb4_general_ci」「utf8_general_ci」
「utf8mb4」「utf8」テキストエディター等で置換する必要があります。


また、wp-config.php のデータベースの文字セットの設定(DB_CHARSET)が「utf8」のままであれば、SQL ファイル内の文字列置換だけでいけるようですが、

define(‘DB_CHARSET’, ‘utf8mb4’); 

になっている場合は

define(‘DB_CHARSET’, ‘utf8‘); 

に変更する必要があります。


それか、仮想サーバーのデータベースのデータをエクスポートする際に、

  1. 「エクスポート方法」を「詳細 – 可能なオプションをすべて表示」にチェックを入れる
  1. 「フォーマット特有のオプション」にて「他のデータベースシステムまたは古い MySQL サーバとの互換性:NONE」となっているところを「MYSQL40」に変更。
  1. で、他をいじらずにそのまま保存


もしくは、勝手にMySQLのルールをutf8からutf8mb4に変更させたくない場合は、wp-config.phpの中に「DO_NOT_UPGRADE_GLOBAL_TABLES」を記述するという方法もあります。

define('DO_NOT_UPGRADE_GLOBAL_TABLES', true);

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー





WordPressでサイトを制作する際に便利なチート集

WordPressで制作を進める際に、色々と引っかかってしまう一番の理由はやはりWordPress特有の「WordPressテンプレートタグ」の存在だと思います。暗記出来ればそれに越したことは無いですが、現実的にはそれも中々難しいので、カンニングペーパー的なまとめ集を上手く活用しましょう。


www.webcreatorbox.com


WordPressで困った時に役立つお助けコード8つ | Webクリエイターボックス


少しのコードで実装可能な20のWordPress小技集 | Webクリエイターボックス

jQuery.3 では .loadは廃止

2016年6月に「jQuery.3.x」バージョンがリリースされ、現在では、最新版のv3.2.1がリリースされています。
jQuery.2.x」バージョンから「jQuery.3.x」バージョンへの大きな変更として、 .load .unload .error のイベントが廃止されました。
中でもよく使われる「 .load() 」イベントは「jQuery.3.x」バージョンでも使用出来る代わりの記述方法をしっかりと覚えておきましょう。

jQuery.2.x」バージョンまでの書き方
/*  load  */
$(window).load(function(){
  //実行内容
})
jQuery.3.x」バージョンまでの書き方
$(window).on('load',function(){
  //実行内容
});


.click() から
.on('click',function() になったのと同じイメージです。


以上を踏まえて、3.xバージョンでも動くように書き換えましょう。

$(function() {

if($(window).width() > 767){ 
$(function() {
  $('#container').css('display','none');
  $('#loader').fadeIn(2000);
});

$(window).on('load',function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(3000).slideUp(400);
  $('#container').css('display', 'block');
});

//5秒たったら強制的に実行
$(function(){
  setTimeout(stopload(),5000);
});
function stopload(){
  $('#loader-bg').delay(3000).slideUp(400);
  $('#container').css('display','block');
};

}else {
 $('#loader-bg').css('display','none');
 $('#loader img').css('display','block');
};
});
CDNに接続できない場合の代替策

なかなかないとは思いますが、万が一CDNがダウンしてしまった場合の代替策として、フォールバックという方法があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- CDNが使えない場合は自サーバーに置いたjQueryファイルを読み込む -->
<script>
window.jQuery || document.write(‘<script src="js/jquery-3.2.1.min.js"><\/script>’);
</script>

星空メッセンジャーササキユウタ

星空メッセンジャー ササキユウタ

星空メッセンジャーササキユウタの星に関する活動と旅の履歴をご覧いただくWebサイトです。星空解説や星空ガイドの活動履歴や、世界一周の旅で撮影した星景写真がご覧いただけます。


f:id:yachin29:20170618214907p:plain

http://yuta-sasaki.com/

ローディング中にアニメーション画面を表示させる

liginc.co.jp


photoshopvip.net


uxmilk.jp


最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また、テキストだけが先に表示され、一瞬ですがレイアウトが崩れてしまったりしてしまいます。

もちろん1番良いのは画像や動画のデータを出来る限り軽くする事ですが、場合によっては、サイトのデータが読み込まれるまでローディング画像を擬似的に用意する事でユーザーがストレスを感じ難くしてあげるなどの方法もあります。
本来はgifアニメなどでローディング画像を作るのが一般的ですが、今回はCSS3のアニメーションを使って、動きのある画像を見せる事でよりストレスの軽減を図ります。
すべての動きをCSS3のアニメーションで動かす事も一応出来ますが、jQueryと使い分ける事で、よりスムーズに表示させましょう。






イメージとしては、読み込み中はメインコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にする、というイメージです。

CSS3でやる事

ローディングアニメの動き

jQUeryでやる事

ローディング画像のレイヤーの表示・非表示のコントロール



目隠し用のローディング画像があるレイヤー(#containerの外)

<body>


<div id="container">
  メインコンテンツ
</div>

<div id="loader-bg">
<div id="loader">
<img src="ローディング画像">
</div>
</div>
</body>
jQueryでの「ready」と「load」と違いを理解する

両方ともjQueryを呼び出す為のものですが、呼び出すタイミングが微妙に違います。

「ready」はロードされて操作が可能になったタイミングで実行するという意味です。
「load」はロードされて画像などの関連データの読み込みが全て完了したら実行します。


css

#loader-bg {
width: 100%;
height: 100vh;
background: #000000;
position:fixed;
top:0;
left: 0;
}
#loader {
width: 160px;
height: 160px;
background: #E16163;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display:none;
}
$(function(){
  $('#container').css('display','none');
  $('#loader').fadeIn(400);
});
$(window).load(function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(3000).slideUp(400);
  $('#loader').delay(2000).fadeOut(1000);
  $('#container').css('display', 'block');
});


しかし、このままではスマホ時にスクリプトが適応されていない為、ずっとカバーがかかったままになってしまいます。
なので、if文に767px以下では「$('#loader-bg').css('display','none');」が適用されるようにスクリプトを追加しましょう。

jQuery演習

使用するjQueryメソッド

  • .on()
  • .css()
  • .fadeIn()
  • .fadeOut()


【問01】「変化」ボタンをクリックしたら300pxの正方形であるdiv#boxの背景色が黒色から、赤色に変わるように記述しなさい。


【問02】「変化」ボタンをクリックしたらh2に対して文字色が赤、背景色が黒、文字の大きさが16px、文字の太さがノーマルになるよう記述しなさい。


【問03】「フェード・アウト」ボタンをクリックしたら、画像が0.5秒かけて徐々に非表示になるようにしなさい。


【問04】「フェード・イン」ボタンをクリックしたら【問09】で非表示になった画像が「slow」のタイミングで表示されるようにしなさい。

商用利用可能なアイコン素材をフリー(無料)でダウンロードできる「ICOOON MONO」

ICOOON MONOとは?

f:id:yachin29:20170613174532p:plain



商用利用可能なモノトーンのアイコン素材をフリー(無料)でダウンロードできる素材配布サイトです。

『ICOOON MONO』は、WEBデザインやDTPのほか、ビジネスシーンで活用できるアイコン素材をストックしています。
使用条件に違反しない限り、クレジット表記や許可なしで、自由に利用出来ます。
JPG、PNGSVG、Ai、EPS形式と、色々な形式でダウンロード出来るので、非常に便利です。




icooon-mono.com