読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

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

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

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

画像をレスポンシブに対応させる(可変にする)

HTML5+CSS3

画像をレスポンシブに対応させる為にはたった2種類のやり方しかありません。

img画像であればフルードイメージ化させる。

background画像であれば、background-sizeの指定をする。


この2種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに対応させる事が出来ます。
どちらの方法を用いれば良いかは、文章構造から考えてその画像が「imgタグ」で入れるべきなのか、背景画像として入れるべきなのかを考えれば良いだけです。

ポイントとしては、
「img要素」で入れた場合にはフルードイメージ化させる為、画像の原寸より大きく表示される事はありません。
また画像の縦横比も保ってくれる為、幅を縮めると同じ比率で高さも小さくなって行きます。なので基本的には高さの設定はしなくても良い場合がほとんどです。


これに比べ「background-size」を指定した背景画像は指定に寄っては原寸より大きく表示される事があります。
また、背景画像を表示させる為には必要な高さを確保する必要がある為、高さの指定をどうするか、という事が問題になって来ます。
授業では高さを%指定すると不安定になるので、代わりにpaddingで画像の高さ分を確保するという方法を取りました。
「background-size」を指定した物は%指定はもちろん、pxでも1px単位で表示の大きさをコントロール出来る為、こちらの方が便利な場合もあります。

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

WordPress

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からサーバーにデプロイする

WordPress

授業では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