WEBサイト制作の勉強

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

レスポンシブレイアウトの復習

前回のレスポンシブ演習で分からない箇所があった人はもう一度こちらの課題をやってみて下さい。

http://yachin29.webcrow.jp/test_05.zip

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クリエイターボックス

WordpressをXAMPPからサーバーにデプロイする

授業ではXAMPP環境でWordPressの制作を進めましたが、ポートフォリオ等に載せる為にはWordPressのデータを別サーバーに移行する必要があります。
データ移行用のプラグインなどもありますが、ここでは手作業でデータの移行を行います。

WordPressサイト(XAMPP)のバックアップ
まずは旧サイトのデータのバックアップを取ります。バックアップはあくまでもバックアップなので、このバックアップデータは何があってもいじることの無いようにしましょう。
万が一何か問題があってもこのバックアップデータがあれば作業前の状態に戻すことが出来ますが、このバックアップデータをいじってしまうと、場合によってはwordpressが消えてしまうこともあります。

WordPressの移行に必要なデータ4つ

WordPressのダッシュボード上からエクスポートしたxmlファイル(投稿記事や固定ページのデータ)
データベースからエクスポートしたsqlファイル(データベース内のテーブルデータ)
オリジナルテーマを使っている場合はテーマフォルダーや画像が格納されているwp-contentのフォルダー
それと念のためにデータベース情報が記載されているconfigファイルもバックアップを取っておきましょう。



新しいWordPressサイトにインポート
バックアップを取ったデータを新しいWordPressサイトにインポートします。
注意が必要なのはアドレスが変わる時で、sqlデータの書き換えが必要になります。データベースの一部の情報はドメインに関わるもので、このまま放置しておくと、WordPressの管理画面や記事内の画像リンクなどが旧ドメインへリンクしたままになります。これらを修正するにはSQL文を利用します。

データベース内のURL書き換え例
古いサイトのURL http://localhost/wordpress
新しいサイトのURL http://yachin29.webcrow.jp/wrodpress

注意が必要なのはURLの最後に「/」が入っているとエラーになるので、必ず取ってください

UPDATE wp_options SET option_value = replace(option_value, '古いサイトのURL', '新しいサイトのURL') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, '古いサイトのURL', '新しいサイトのURL');
UPDATE wp_posts SET post_content = replace(post_content, '古いサイトのURL', '新しいサイトのURL');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'古いサイトのURL', '新しいサイトのURL');

実行後、wp_optionsなどのテーブルを表示させ、「siteurl」と「home」の値が新しい値になっているか確認して下さい。

このままではXAMPPで使用していたIDと新しいサイトで作ったIDが混在した状態になっているので、データベース内で新しく作られたIDを削除し、XAMPPで使用していたID名を新しいID名にSQL文で差し替えます。

update wp_users set user_login='新ユーザ名' where ID=1;


しかし、これだけではwidgetプラグインが正常に動作しなくなる場合があります。
理由はシリアライズというものにあります。
データベース内のURLはすべてシリアライズされていて番号と紐付けされます。URLを置き換えるだけだと、シリアライズの部分とURLの文字数の整合性がとれなくなって不具合がでる場合があります。

なので、widgetプラグインまで完全に再現したい場合は、シリアライズされたURLを完全に書き換える必要があります。

以下のスクリプトを使えば、シリアライズされたURLを完全に書き換える事が出来ます。
Database Search and Replace Script in PHP / Interconnect IT – WordPress Consultants, Web Development and Web Design


bge.jp

レスポンシブデザイン 模擬試験

見本画像

PCレイアウトは960px固定で2カラム。liは130pxで固定。content画像は100%の大きさで使用する。navとfooterの幅は100%。
f:id:yachin29:20160204010627j:plain



タブレットはフルードレイアウトで縮小。liは130pxで固定。
f:id:yachin29:20160204010652j:plain



スマホはフルードレイアウトで1カラム。li幅は3等分
f:id:yachin29:20160204010707j:plain


ブレイクポイントは

  • 960px以上
  • 959px~768px
  • 767px以下

sidebar内のh2にgoogleFontsを使用すること


素材データ
http://yachin29.com/09-test.zip


作例
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pickupstream</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>

<body>

<header>
<div class="inner">
<div id="site">
<h1>PickupStream</h1>
</div>
</div>
<nav id="header_nav">
<ul id="main_nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header> <!-- #header -->


<p id="keyVisual"><img src="img/header.jpg" alt="夜景画像"></p>
<div class="inner">
<div id="content">
<section>
<h2>海岸のデコレーション</h2>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p id="plant"><img src="img/plant.jpg" alt="海浜植物"></p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</section>
</div>

<div id="sidebar">
<nav class="menu">
<h2>Main Menu</h2>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地上と地下</a></li>
</ul>
</nav>
<div class="ad">
<p><img src="img/ad2.jpg" alt="広告"></p>
</div>
</div><!-- #sidebar -->
</div><!-- #inner -->

<!-- ### フッター ### -->
<footer>
<div class="inner">
<p id="footer_title">Pickupstream</p>
<p><small>Copyright &copy; Pickupstream, all rights reserved.</small></p>
</div>
</footer>

</body>
</html>

東京のダンス公演で活躍中の振付やダンスレッスン講師も行うモダンジャズダンサーJURI

東京のダンス公演で活躍中の
モダンジャズダンサー 振付 ダンス講師 JURI
東京のダンス公演を中心に活躍中のモダンジャズダンサーです。モダンダンス、ジャズダンスコンテンポラリーダンスでのダンス公演出演、振付を行っています。DANCE STUDIO FIRST渋谷校にて週に一回ジャズダンスレッスン開講中です。


juriii.webcrow.jp
http://juriii.webcrow.jp/


f:id:yachin29:20170202011211j:plain

アイシングクッキーのオーダーメイド 結婚式やイベント用はプティシュシュ

アイシングクッキーのオーダーメイド 結婚式やイベント用はプティシュシュ。
アイシングクッキーのオーダーメイド スイーツギフトpetit chou chou(プティシュシュ)。
結婚式用の席札やプチギフト、出産祝いやお誕生日などのイベントに最適です。アイシングクッキーで大切な人へプレゼントしませんか。


http://www.petit-chou-chou.com/

f:id:yachin29:20170202005906j:plain

動きのあるバナー

バナーのサイズを決める

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。

300×250(Yahoo!/Google)PC/スマホ ※推奨

728×90(Yahoo!/Google)PC ※推奨

160×600(Yahoo!/Google)PC ※推奨

336×280(Google)PC ※推奨

320×50(Yahoo!/Googleスマホ ※推奨

320×100(Yahoo!/Googleスマホ ※推奨

gifアニメを使ったバナー

f:id:yachin29:20160905035438g:plain


Photoshopのアニメーション機能を使う事で、比較的簡単に動きのあるバナーが作れてしまいます。
複数のフレームを順番に表示することで、画像が動いているように見せています。
必要なフレームをレイヤー別に作り、レイヤーの表示/非表示を切り替えて表示させるものを替えていきます。

f:id:yachin29:20160905032248j:plain

テキストレイヤーは全フレームで表示させておきたいので、常に表示の状態にしておきましょう。


blogs.adobe.com


動画を使ったバナー

動画ファイルを読み込んで、GIFアニメバナーをつくります。

1、Photoshopで動画を読み込む。
[ファイル]メニュー→[読み込み]→[ビデオフレームからレイヤー]を選択し、動画を読み込みます。Photoshopでは、mp4やmovなどの動画フォーマットを入力ファイルとして選択できます。
こうする事で動画をレイヤーに読み込ませる事が出来、写真を補正するようにトーンカーブや色補正、変形処理などをかけることができます。

f:id:yachin29:20160901142444p:plain

ただ、photoshopのバージョン(CS5)によっては32bit版でないと出来ないので注意が必要です。

32bitと64bitの切り替え方 for Win - Photoshopの情報集


32bitと64bitの切り替え方 for Mac - Photoshopの情報集


2、[ビデオをレイヤーに読み込み]をクリックするとダイアログボックスが開くので、動画プレビュー画面の下のスライダーで読み込む範囲を指定します。[頻度制限]を調整することで、GIFアニメバナーの容量を軽量化することができます。動画の長さは長くても10~15秒程度にし、[頻度制限]は5~10フレームおきに設定しないと、ものすごい数のレイヤーが出来てしまうので、注意が必要。だいたい30~50レイヤーくらいに抑えると良いと思います。
f:id:yachin29:20160901142636p:plain


3、タイムラインにフレームを置く
あとはgifアニメと同じ要領でフレームを置いていき、必要なテキストレイヤーを作り、gif形式で保存します。

f:id:yachin29:20160901142951p:plain


f:id:yachin29:20160905034903g:plain



広告を非表示にする