wordpress GK Portfolioテーマの写真ブロクを作りました。

それまでは写真をFacebookやGoogle+、LineとWeChatで投稿してましたが、結局、ばらばらでまとめに見るこもできず、写真管理面も不便だと感じました。

また、何を言っても写真画質に拘る私は、投稿写真を無条件に画質を落とされることが、絶対に許されません。

という事でWordPress写真ブロク「QILILONG-七里龍」を作ることに決意しました!

写真ブロク構築過程を整理して、自分のメモにも兼ねて皆さんに紹介します。この記事を見って少しに参考になれば幸いです。

これからは下記のコンテンツで紹介していきま。

+Wordpressテーマの選ぶ
+携帯電話Nexus6でWordPress写真ブロク作成
+Wordpress写真画質100%にする方法
+撮影から投稿まで写真編集について
+写真最適化軽量化に最高の武器

+Wordpressテーマの選ぶ
　テーマを選ぶ基準は、写真用ブロクとしてシンプルなデザインとレスポンシブ対応の２点です。

無料のGK Portfolioテーマは、ちょっとこの２点を満たしてくれました。

アフェリエイトは使えないですが、現時点は使用予定がないため、大丈夫です。

但し、WordPressのGK Portfolioテーマに関する投稿はネット上に少ないので、トラブルがあった時の対応や解決情報も少なく、最初はちょっと不安で導入するかどうか迷っていました。

あえて言うとしたら、写真ブロクなので、基本的写真がメインとなりますが、できれば全画面、出来る限り写真を大きく表示したいです。
GKはアイキャッチ画像サイズは良くて、その他投稿写真はちょっと物語足りないかと心配。

しばらくGK使って見ることにしました。

+携帯電話Nexus6でWordPress写真ブロク作成
勿論、パソコンからWebサイトやブロクを作成すると作業効率が良く、画面の見やすさや文書入力も楽だし、困ることがまずないです。

しかし、時間を有効に利用できるかと言うと、そうでも無いです。

仕事ではないから、デスクに向かって座り、さー、やるよ！のような固まりの時間がサラリーマンとして少ないからです。

作りたいとき、アイデアがあった時、時間が短く少しても進めたい時が良くあるのことからです。

電車通勤時間や昼休憩時間、人を待っている時間、トイレに座ってる時を有効に利用すれば、いつても自分の帝国を構築できるではなかと思いました。

それは携帯電話（スマホ）で実現できるではないかを試して見ました。
結論から言うと、特段に困ることも無く奇跡なように出来ました!この記事も携帯で作成しました。

因みに、使用する携帯電話はNexus6のスマートフォンです。もし、同じ機種を使っている方がwordpressサイトを構築したいならば、是非この記事を参考してください。真面目な話ー本当に何でもできてしまうー最高な楽しみです!

携帯電話で「wordpress写真ブロクを構築」にやった事を纏めて見ました。

*Wordpressテーマの選択
⇒言うまでもなく、携帯電話の基本的な使い方なので割愛させて頂きます。個人的な好みになるので、デザインや有料無料、利用実績やサンプル情報が豊富かなど、悩むことも沢山あることから、テーマを決定するまで色々を調べて時間を掛かることが事実ですね。

*レンタルサーバーのwordpress導入
⇒レンタルサーバーXSERVERのX10プランを使用しています。200Gバイトの容量でドメイン名100まで設定できるちょっと贅沢な設備です。
通信スピードも早い、データベースは１４日断面、それ以外アプリは７日断面の毎日バックアップを自動取得されます。自分作業ミスでバックアップを取得する場合は有料の扱いになりますが、データが無くなる、サイトブロクをアクセスできなくなることはない。このような心配がないことは大事で安心に長く使え続けます。詳細内容はXSERVERホームページに確認して下さいね。

XSERVERの自動インストールツールにWordPressのインストール機能がデフォルトで提供されていますので、ワンクリックで数秒も掛からないぐらいにインストール完了されます。本当に、え？と言う感じです。インストール完了後に「インストール完了しました。」のメッセージが表示されます。

インストール完了後にWordPress管理画面「ダッシュボードへ」のリンクがインストール済み一覧に表示されます。（下記の画像はドメインを設定済みの場合）

ハイパーリンクをクリックするとWordPress管理画面「ダッシュボード」が表示されます。

ここまでできたらWordPressの設定や使用方法を勉強しながら、テーマを選定しブロクに投稿が始まれます。

携帯電話（スマホ）でWordPressブロクに投稿記事を作成する時に、殆ど抵抗感なくFacebookやLineに投稿するのように簡単にできます。
ただし、記事にハイパーリンクを作成する時にポップアップ画面がレスポンシブに対応できない場合もあります。
下記画像のようにリンク追加の確定ボタンが表示されません。画面をタッチして拡大や縮小、移動もできないので、確定ボタンが画面の表示範囲外になっています。

この場合はスマホをヨコにすれば確定ボタンが見えるようになります。かくれんぼみたいような、見つかったぞ！と結構楽しかったです。

また、WordPressの投稿記事を作成する時に、自動で下書きに保存されます。操作間違って書いた記事が消えたとビックリした後、下書きに救われたこともしばしばありました。本当に素晴らしいです。
本当は、GoogleメモKeepで記事を書くのがいいかもしれません。だって、あのビックリは半端じゃない。
が、WordPressの投稿欄で記事を書き続けてます。

*ブロク専用ドメインの申請と設定
【ムームードメイン】qililong.infoを取得しました！名前.comも申し込みして見ましたが色々があって辞めました。理由は取得したいドメイン名（qililong.com）が申し込みできたのに、実際は開放されていないドメインでした。開放されるまで待ちになります。
それはまだ良くて、開放されれば連絡をもらえば良いのに、開放されているかを確認して下さいと言うメールが毎日に送信されます！自分で確認するならば、申し込みして会員登録した意味が分かりません。自動チェックできなければ、申し込み可能にしないで下さい!騙される気分で腹立って申し込みを解約しました。
と言う訳てcomからinfoに決まり、年間使用料はcomの半分以下で済みました。安いほうが抵抗なし、infoでもかっこいい。
実はドメイン名について色々を調べたけど、comはSEOに有利だそうです…など。それまでは、まず写真と記事で勝負するでしょうと思います。

ドメイン名を取得できたら、レンタルサーバーのネームサーバを登録します。XSERVERのネームサーバは複数ありますので、ムームードメインのネームサーバ設定変更欄に合わせて記入します。下記の画像はムームードメインのネームサーバの登録ページになります。
自分の場合は、その後にサイト表示を高速化するために、CloudFlare 無料プランのキャッシュサーバーを利用し、ネームサーバを入替えて登録しています。

*写真記事の投稿
WordPressのGK Portfolioテーマに関する投稿はネット上に少ないので、トラブルがあった時の対応や解決情報も少なく、最初はちょっと不安で導入するかどうか迷っていました。

やはりシンプルなデザインが好きで写真ブロクとしては一番良いと思います。

早速に投稿してみたい気持ちがよくわかりますが、ここはちょっと待てっ!
まず、ブロクサイトの全体構成イメージを考えてほしいです。
メニューはどうするか、カテゴリやタグがどう分類するか、サイトメニューとアーカイブを表示させるか。色々悩むけど、自分の場合は以下のように決めました。
写真の投稿がメインなので、メニューには写真のカテゴリーを追加します。それ以外は固定ページの自己紹介とWordPressの奮闘記を入れました。
タグは投稿記事の内容によって適宜に追加しています。タグ名を選定するときは幅広過ぎないように配慮します。例えば、撮影場所を集計できるように、国名や地域名（県名）まで、都市名は入れないルールにしてます。
サイトメニューとアーカイブは基本的に使用しません。コメント投稿だけリリースします。やはり写真の評価は知りたいですね。悪い評価も大歓迎ですが、ノーコメントは一番寂しいですね。基本的にはノーコメントのようです。笑

*サイトレスポンステスト「Google PageSpeed Insights」
初めて投稿出来た時に、インターネット経由で自分のドメイン名をアクセスし、自分の記事をドキドキで見ました。
一番気になっている写真の画質を確認したところ、やはり画質を圧縮されていることが分かりました。どの段階で画質を落とされるかを調べたら、写真をサーバにアップロードした時点では圧縮されていないですが、投稿記事に写真をリンク貼り付けて、投稿記事の写真をブロクに表示される時に画質劣化されていました。
具体的にWordPressのメディアライブラリに写真をアップロードしたところ、写真のサイズは原サイズと同じになっていますし、写真を限界まで拡大して裸眼で確認しても元写真と変わらないこともわかります。投稿記事に貼り付けた後、ブロクサイトから写真を限界まで拡大して確認すると、明らかに画質が元写真より落ちていることも確認出来ました。
ちょっとショックを受けました!最悪の結果ですね。
色々を調べたらどうやら、Webサイトのアクセスを軽量化するためには、写真表示用のプログラムは写真サイズの10%をカットして、90%を表示するように暗黙的なルールになっているようです。WordPressのフレームワークもこのルールに従って取り込んでいるらしいです。
結局、その後に紹介するのように、WordPressのプログラムを修正して、100%画質に表示できるようにしました。
それで満足な画質を見れましたが、万歳っと思ったところ、新しい問題が気付きました。
それは、ブロクページの重さです！
写真を全画面に表示されるまでちょっと時間掛かるし、画面をスクロールする時にも、気持ちよく写真を表示することもできませんでした。XSERVERの性能が良いものの、ブロクページ表示のレスポンスは好ましくない結果でした。
それはあくまで個人的な感触ですが、評価の基準値がわからない以上どうしようもないです。まず、計測値の結果はどうなるかは知りたいです。
ブロクページのレスポンスを図るためには、「Google PageSpeed Insights」を使いました。使用方法は簡単でGoogleサイトのPageSpeed Insightsページにアクセスして、計測対象のウェブページのURLを入力するだけです。
初めて自分のウェブページを計測して見たら、その結果は下記の通り、ゼロ点の恐るしい評価でした。

計測結果ページに指摘されているのが画像の最適化が必要のことでした。確かに、良い画質を追求するために、画像のサイズは考慮していませんでした。自分の場合は、写真を記事に投稿するまでの流れは下記の通りです。
*一眼レフカメラからRAM形式の無圧縮画像データをLightroomに取り込んで現像する
*Lightroomで写真の基本編集が完了したらTIF形式の無圧縮画像データを書き出す
*PhotoshopElementsにTIF形式データを取り込んで、画像微調整や文字入れを行った後に、高画質（無圧縮）のJPEG形式データを書き出す
*JPEGデータをWordPressのメディアライブラリに取り込んで投稿記事の写真をリンク貼り付け

その結果、一枚写真の表示サイズは15〜20MP（メガピクセル）、デスクサイズは10〜15MB（メガバイト）になります。一記事で写真10枚程度のページは100MBの計算結果になります。OCNワンのSIMフリーのベーシックWiFi契約（3GBで1日100MB）でしたら、一記事を読み終わったら通信速度制限に掛けられることになります。ちょっと馬鹿馬鹿しい！それはいかん！

*アクセス解析ツール「Google Analytics」の導入
（つづく…今日0715はこれまで）

+Wordpress写真画質100%にする方法
+撮影から投稿まで写真編集について
+写真最適化軽量化に最高の武器
+関連記事機能の追加