『WordPressのツボとコツがゼッタイにわかる本』の感想

最初の評価は最低だった

評価の難しい本ですね。Amazonのレビューを見ても賛否が分かれています。

私がWordPressの勉強を始めたとき、最初に読んだのはエビスコムさんの『WordPressレッスンブック』『WordPressデザインブック』(共にソシム発行)でした。

そして次に読んだのがこの『WordPressのツボとコツがゼッタイにわかる本』(中田亨・秀和システム)だったのです。

なぜこの本を読もうと思ったのかというと、著者の前作『ホームページ作成のツボとコツがゼッタイにわかる本』(中田亨・秀和システム)が大変素晴らしいものだったからです。

そこで中田さんのWordPress本に期待し、読み進めて行ったのですが、読み進むにつれて「なんか思っていたのと違う」という戸惑いがありました。
「エビスコムの著作と全く構成が違うんだけど、なんで?」という思いがよぎりました。

我慢しながら読んでいたのですが、第4章に入ったあたりでとうとう本を投げ捨てたのでした。

何とかがんばって第4章まで読んでみたものの、実際に理解できたのは第1章「WordPressでホームページを作るメリット」だけでした。第2章以降は何を言っているのかさっぱり理解できなかったのです。

実はこの本の特徴としては、WordPressの仕組みの説明に紙面を割いている点が挙げられます。第2章の部分ですね。
しかしWordPressの初心者本を読んだだけの人間がいきなり第2章を読みこなすのはなかなか難しいです。不可能とまでは言いませんが、結構大変でしょうね。

第3章についても同じです。
第3章は「ホームページをWordPressに乗せ換える準備をしよう」とのことですが、何のためにその準備が必要なのかが理解できません。

のちに分かったのですが、結局のところ、第2章・第3章を理解するためには最低限「WordPressのテンプレート階層」を理解している必要があったのです。

つまり

「WordPressを使うためには基本のテンプレート(index.php)を作成する必要がある。基本テンプレートだけでもWordPressは使えるけれど、特別のテンプレートを作った場合は特別テンプレートが優先的に使用される」

というWordPressの仕組みそのものの理解が必要だったのです。
その知識がないと2章・3章は読みこなせないでしょう。

本書は第3章までが理論の説明となり、第4章以降でホームページにWordPressを組み込む具体的な手順の説明にはいります。

けれど私はここで力尽きました。
第2章・第3章で苦しめられた者が4章以降を乗り切るのは容易なことではなかったのです。

この本を見限らなかった理由

しかしそのような状態でありながらも、私はこの本を見限りませんでした。この本が悪いのではなくて、私の理解力が不足していると考えていました。

なぜそう考えたかというと、著者の前作『ホームページ作成のツボとコツがゼッタイにわかる本』が大変素晴らしいものだったからです。

前作の、「全体を見渡したうえでホームページを作成していくという手法。共通部分を先に作り、その後、個別ページを作成していくという手法」が丁寧に説明されていたのが素晴らしかったのです。

この手法はホームページを制作する人であれば当然に行うものです。
けれど初心者向けの本でそれを意識的に伝えているものは意外と少ない気がします。

そのような著者の、しかも同じ『ツボとコツ』シリーズなので絶対に前作と同程度のレベルのはずだし、読者のことを考えた構成のはずだと思っていました(のちのち気づくのですが、レベルについては前作と同程度とは言えないと思います)。

とはいえ、全く理解できていない私がいつまでもこの本にしがみついても仕方がありません。
そこで残念ではありますが、一旦この本を離れ別の本で勉強することにしたのです。

この本の意図するところ

その後、何冊かのWordPressの本を読み、ようやくWordPressがテンプレート階層になっているらしいということを学びます。
それ以外にも、WordPressに関する知識も増えました。

そういった状態でこの本を再読したとき、ようやくこの本がそれほど悪い本ではないな、ということに気づきます。

前作と同様、全体を考えたうえで構成していることが分かります。ひとりで一から作成出来ることを目的としていることが分かります。

特に私がこの本で一番評価しているところは、第3章の最初の2ページです。

このページにはWordPress型のホームページを作るときの手順がはっきりと書いてあります。

この本の提示する作成手順は

  1. 最初に静的サイトを完成させる
  2. その後、WordPressを組み込んでいく

ですね。

多くのWordPress本は、この手順を明示していません。
手順自体は本書と同じであっても、はっきりと明示している本は少ないです。あるいは本書とは違う方法で、たとえば静的サイトを作りながら同時にWordPressを組み込んでいく本もありますね。

本書のように作成手順をはっきりと明示してくれることは初心者にとっては安心につながります。
また、本書に書かれている方法が唯一絶対の作成手順ではありませんが、それでもこの手順が最も失敗の少ない、手堅い手順だと言えます。

その他にもこの本では

  • 共通部分からテンプレートを作っていく、とか
  • 簡単なテンプレートから作っていく

などのように、作成手順の指針を示しており、一からWordPress型ホームページが作れるように配慮した記述が見受けられます。

この本の悪いところ

こうして現在ではこの本を高く評価している私ですが、この本にも欠点があります。
気になる点はいくつかありますが、特に問題と感じるのは次の2点です。

問題点1・初心者向けではない!

この本の最大の問題は、「初心者向けではないのに初心者向けの顔をしているところ」です。

私はこの本の感想として、最初に「本書はAmazonレビューの賛否が分かれている」と書きました。

Amazonのレビューを詳しく読むと、この本に高い評価を付けているのはほぼ全員、この本以前に他のWordPress本を読んだことのある人たちばかりであることに気づきます。
反対に、最初にこの本を読んだ人たちは酷評の嵐です。

なぜこうなるのでしょうか?

大雑把な分類であることを承知の上で書くと、WordPressの勉強レベルは2種類あります。

単にWordPressを使ったホームページ制作手順のみを勉強するレベル(手順レベル)と、WordPressそのものの理論構造まで突き詰めるレベル(理論レベル)です。

多くのWordPressの入門書は手順レベルの解説がメインです。

ところが本書は入門書向けの顔をしながら、理論レベルに踏み込んだ記載をしています。というよりも理論を先に提示してから手順レベルの説明に取り組んでいるといったほうがいいでしょう。

既に手順レベルの入門書を読んだ読者であれば、本書が提示する理論と個別具体的な手順を結びつけて考えることができます。

このような層は、具体的手順は分かるのだけれどなぜそうなるかが分からないという疑問を抱えており、その疑問が本書で解決するため、本書に納得するわけです。

ところが全くの初心者の場合、本書が提示する理論と具体的手順を結びつけて考えることができません。
具体的な事柄を何も知らない状態なのに、理論だけを延々と説明されるため、議論についていけなくなるのです。

Amazonのレビューの評価が分かれる理由がここにあります。

もちろん著者としては、全くの初心者であっても理論的にWordPressを使いこなしてほしいという思いから執筆に工夫を凝らされたのだと思います。
しかしながら結果論になりますが、その試みが成功しているとは言い難いですね。

本書は入門者向けシリーズの一環として出版されていますが、本書の内容を見るかぎり「脱初心者向け」「中級者を目指す人向け」の本とするのが適切であったように思います。

問題点2・ファイルはこまめにアップロードして!

本書では第4章以下で具体的な作業に入ります。
ですが作成したファイルをサーバーにアップロードするのは、第5章の最後、すべてのファイルを作成し終えて以降です。

このようなWordPressの組み込み手順は、理想的といえば理想的なのですが、初学者を対象とした本においては採るべき手法とは思えません。

なぜなら初学者はコードの記載をミスしているおそれが強く、最終段階で一気にファイルをアップロードしてもホームページが適切に表示されない可能性が高いからです。

この場合、ミスを修正できるのであれば問題はないと言えるのかもしれませんね。
しかし最終段階でまとめてミスを修正する手法は、修正個所の特定が難しくなるためお勧めできるものではありません。

やはり初学者にはこまめにファイルをアップロードさせ、不具合が発生すればその都度、ミスを修正していく手法を採らせたほうが良かったのではないでしょうか。

それにもかかわらず著者がこのような手法を採らなかった理由を私なりに推測してみます。

ファイルをこまめにアップロードする手法を採らせる場合、必ず最初にindex.phpとstyle.cssをアップロードしなければなりません。そうしないとWordPressが起動しないからです。

ですがそれをすると著者が理想とするWordPressの作成手順が崩れるため、その点を嫌がったのかな? と思ったのですがどうでしょうか。

総合評価

最後に私の評価を書きます。
私がこの本に下した総合評価は、星4つです。

★★★★☆

読者層のズレを根拠に星3つにとどめるか、あるいは著者の意気込みを評価して星4つにするかで迷ったのですが、最終的に星4つとしました。

この本が最初から「脱初心者向け」「中級者を目指す人向け」だと世の中に伝わっていたら、Amazonレビューの低評価は減少したのに、と思うと大変惜しい気持ちになります。

Sassはちょっと早いかも…

お正月休みの間に勉強したことは、CSSグリッド以外にもう一つあります。

それはSassです。
CSSにちょっとしためんどくささを感じていた私は、便利と評判のSassを使ってみることにしました。

勉強方法としては、本屋さんで『Web制作者のためのSassの教科書』(平澤隆、森田壮)を買って読んでいました。
コマンドプロンプトの使用に戸惑ったうえ、Preprosの無料版が何度も有料版への案内を表示するのにイラッとしましたけどね。

さて、Sassを使った感想ですが、現時点ではそれほど有用性を感じませんでした。
確かにネストができたり、変数が使えたり、mixinでスタイルの固まりを定義できたりと便利な面があることは否定しません。

ですが「そこまで必要かな?」というのが現時点での偽らざる感想です。
これなら通常のCSSの使用とその応用で十分対応できるのでは? と感じています。

まあ、おそらくこれは私のCSSの記述量が少ないことも原因でしょうね。

私が作っているCSSの分量は、おおくても数百行程度です。
これが数千行とか、おなじCSSを延々と繰り返すようになればSassの必要性も増すんでしょうね。

そのようになれば「Sass、便利!」と叫んでいるかもしれません。

現時点での必要性はあまり感じませんが、将来を見越して、少しずつ使っていこうとは思っています。

CSSグリッドを覚えた話

意外に難しい「横並び」

ホームページ制作を始めたばかりのころ、意外に難しかったのが「横並び」です。

きれいに横に並ばなかったり、仮に横並びになったとしても不要な隙間ができたり…。
単純なはずの「横並び」がこんなに難しいとは思いませんでした。

横並びの問題はその後、clearfix(クリアフィックス)を覚えたことにより解決します。
参考にした書籍は『HTML5&CSS3デザインブック』(エビスコム著)です。

この本は第1章でクリアフィックスを使った横並べの手法が丁寧に書かれており、これによりきれいな横並びの手法を学ぶことが出来ました。

flexを知る

こうして「横並びにはクリアフィックス」することを学んだのですが、その後、display:flexで横並びにできるらしいと知りました。

けれど、ホームページを制作するにはHTMLやCSS以外にも覚えなければならないことがあるため、flexの勉強は後回しにしていました。

ですがいつまでもflexを勉強しないというわけにはいかないので、2019年の正月はflexの勉強をしていました。

参考にしたのは例によってエビスコムさんの『CSSグリッドで作る HTML5&CSS3』『HTML5&CSS3ステップアップブック』です。
どちらの本もCSSグリッドでホームページを作る方法が書かれています。

『CSSグリッドで作る HTML5&CSS3』は2018年の年末に発売された本です。この本が発売されたので、本腰を入れてCSSグリッドの勉強をする気になりました。
『HTML5&CSS3ステップアップブック』のほうにはflexの説明があります。

余談ですが、私はエビスコムさんの著作を気に入っています。
WordPressについてもエビスコムさんの著作で勉強させてもらいました。

もちろんエビスコムさんの本よりも優れた書物はたくさんあるのですが、安定的なクオリティで執筆されているのがエビスコムさんの本の特徴ですね。

CSSグリッドの感想

CSSグリッドを使ってみた感想ですが、確かにホームページ制作が楽になる気がします。
「なんでホームページ制作が楽になるの?」と突っ込まれると返事に困るのですが、なんとなく楽になります(笑)。

  • HTMLの記述をパーツ化できるから楽と感じるのか…
  • プロパティの利用範囲が広がるから楽と感じるのか…
  • あるいは最初に大枠を作ることで全体像が見やすくなるから楽と感じるのか…

う~ん、上手く説明できません。

上手くは説明できませんが、今後私はCSSグリッドでホームページを作るでしょうね。
数多くのホームページを作り続ければ、CSSグリッドの本質が見えてくるかもしれません。

模写「Dental Clinic」

初の全ページ模写

『おしゃれなWebサイトテンプレート集』(山口有由希、坂本可南子、梶嶋えりか / 技術評論社)に掲載されているDental Clinic(Template_08)を模写しました。

模写したサイトはこちらです(別窓が開きます)。


https://cheshire-cat.info/portfolio/2018/dental-clinic/

以前に模写したサイトでは、トップページのみの模写だったのですが、今回は全ページ模写しました。

もともと全ページを模写するつもりはなく、トップページだけを模写する予定だったのですが、予想外に早く模写ができたので、「ついでに全ページ模写しよう」と思って全てのページを模写しました。

全ページとは言っても、Dental Clinicはヘッダー、フッター、サイドバー、本文の4か所からなっており、ヘッダー、フッター、サイドバーは全ページ共通です。

そのため本文のみを追加すればいいことになります。

とは言うものの、4ページ分の本文を追加するのは、それはそれで手間ですが。
次回以降は大まかなデザインさえ模写できれば、細かな幅の調整などはしなくてもいいと思います。

他のページの構成にも気を配りながらHTMLを記述していくのですが、「どうすれば簡単に手早く、他のページとの齟齬がなく作成できるか?」を考えながら作成するのは楽しかったです。

苦労した点

最初から全ページを模写するつもりであれば、それに対応した形でHTMLを記述したことでしょう。
しかし今回は、トップページ作成後に全ページを模写することに決めました。

そのためトップページ(の本文)は全ページ模写を想定したHTML構成になっていません。
つまりHTMLの記述が後付けでチグハグしたものになってしまいました。

最初から全ページ模写すると決めていれば、もっとスマートなHTMLが記述できたでしょう。その点が残念です。

それと今回のサイトでは、ヘッダーのナビゲーション作成が難しかったです。
オリジナルサイトはもっと手の込んだデザインだったのですが、今の私には複雑すぎて手が付けられませんでした。

このためヘッダーナビゲーションは途中で妥協して作成しています。この点が悔しいですね。

ホームページ制作5つの課題

5つの課題

ホームページ制作をやりたいのですが、私には現時点で5つの課題があります。
課題というより不安と言ったほうが正確かもしれませんが…。

今回はその5つの課題を記載したいと思います。
まずは第5位から。

第5位 WordPressの組み込み不足

第5位はWordPressの組み込みです。

私はホームページ制作を基本的にはWordPressで行いたいと考えています。
静的サイトでもいいのですが、やはりブログとしての機能を活かしたいためです。

WordPressを使うためには静的サイトにWordPressを組み込まなければなりませんが、現時点で私ができることは少ないです。
コードを覚えていないためです。

ですが逆にいうと、コードさえ覚えておけばWordPressの組み込みはできるわけです。

そのため少しづつ勉強していけばこの課題は解決されるので、そこまでの不安は感じていません。

第4位 レスポンス対応ができない

私の作成するホームページですが、現在のところレスポンス対応ができていません。
レスポンス対応は特に難しいことはないのですが、他にもいろいろ覚えなければならなことがあるので、後回しにしています。

きちんとレスポンス対応させるのは最終段階に入ってからになるでしょう。

第3位 JavaScript・jQueryが実装できない

できればホームページにはJavaScript・jQueryを実装させたいです。

ですが私がJavaScript・jQueryを勉強したのは1年以上前ですし、そこまで本腰を入れた勉強ではなかったので、いざホームページにJavaScript・jQueryを組み込もうとすると、覚え直すことが多そうです。面倒だなぁという気がしています。

まぁ、いよいよとなればJavaScript・jQueryを使わずにホームページを制作してもいいので、この件はそれほど気にする必要もない…かな?

第2位 画像ソフト・イラストソフトの使い方が分からない

フォトショップとかイラストレーターなどの画像ソフト・イラストソフトの使い方が分かりません。

いや、確かにちょっとだけ勉強しましたよ。
でも分からないんですよね、これが。わざと難しい操作方法にしてるんですかね?

もっと簡単に使えるソフトはないか? と思い、Canvaを使ってみたんですが、これはまあまあ使い勝手は良かったです。
ただ、仕事として使うのであればCanvaも有料版を使わないといけないかな? という気もします。

第1位 デザインに自信がない

最大の難関がこれ。
とにかくデザイン、デザイン、デザインですよ。

デザインに自信がないんですよね。

なんだろう? 私の作るホームページのダサさは?
自分でサイトを作っていてイラッとします。

現在、デザイン力を高めるために気に入ったサイトの模写をしています。
ホームページ制作に限らずデザイン全般に言えることだと思うのですが、デザインにはある程度の型というか、基本的なデザインパターンがありますよね。

私はその型を全く覚えてないのです。基礎がまるでなっていないです。
だから模写を通じてある程度の基本的なデザインパターンを勉強したいな、と考えています。

課題を挙げてはみたものの…

さて、とりあえず現時点で私が悩んでいる課題を5つ書いてみました。
でも私が挙げた課題って本当にホームページ制作に必要な課題なんでしょうかね?

重要ではない課題をさも重要な課題だと思っている可能性が高いです。

そうすると私が将来ホームページ制作をしたとして、その時に今回の記事を振り返ったら何と思うんでしょうか?
「ずいぶんつまらないことで悩んでるな(笑)」

きっとそんなふうに思うんでしょうね。

手作業で復元するバカ

このホームページではなくて、現在やっている仕事のホームページの話なのですが、ドメイン移管に伴い、いったん閉鎖することにしました。

それが今回、ドメインを移管し終えたので(ドメイン移管に1か月かかった経緯についてはこちら)復元することにしました。

しかし1つ問題がありました。
私はきちんとバックアップを取っていなかったのです。

きちんとバックアップを取らなかった理由

別にバックアップを忘れていたわけではありません。
単にバックアップのやり方が分からなかっただけです。

ホームページはWordPressで作っていました。
「作っていた」というより、正確にはホームページ制作会社に「作ってもらって」いました。自分で作ったわけではないんです。

そのためバックアップと言ってもWordPressの構造が分からないし、プラグインでバックアップを取る方法もあるのですが、その方法も分からなかった。
一応、形だけではプラグインでバックアップを取ったのですが、それで果たしてきちんとバックアップは取れたのか? バックアップが取れたとしても復元できるのか? そういうことが分からなかったです。

というわけで記事を1件1件コピーして回りました。
数にして200記事以上ありましたね。大変でした。

復元して思ったこと

それを今回復元したのですが、復元の方法はもちろん記事のコピー&ペーストです。
ただ、全部コピペするのは面倒ですし、古い情報をいまさらアップしても読み手を惑わせるだけなので、現時点で役に立たない記事のアップは抑えました。

記事をコピー&ペーストで復元していくと、記事の内容をひととおり見ることになります。

それを見ると初期の記事は用語集とか、どこかの本の書き写しばかりです。文字数も数行程度でまったく内容がありません。
はっきりいってレベルは低いです。

それが後期なると、自分の意見や仕事での体験を書いているのが目に付きます。
自分の仕事に自信を持ち始めた時期ですね。

コピペ復元の唯一の利点は、自分の仕事を振り返ることができたことですね。

今回、記事の復元には2日かかっています。単純作業なので能力アップにはつながらないし、疲れました。
今後はしっかりバックアップ手順を学ぶので、もうコピペで記事をバックアップすることはないですね。

ドメイン移管に1か月かかった話

私が持っているドメインの内の1つを、さくらインターネットからエックスサーバーに移管しました。
ですがドメインを移管するだけで約1か月かかってしまいました。

なぜこんなに時間がかかったのでしょうか?
経緯を書いてみます。

元はエックスサーバーにあったドメイン

最初に書いておくと、今回移管したドメイン(仮にinfoドメインとします)はもともとエックスサーバーで管理していたドメインでした。
私がホームページ制作会社にホームページ制作を依頼したときに、ホームページ制作会社が会社名義でエックスサーバーで管理していたものです。

それをホームページ制作会社との契約が切れるにあたり、私が自分名義で管理したいと考えました。

このとき一番いいのは、ドメインをエックスサーバーに置いたまま、名義だけをホームページ制作会社から私に変更してもらうことです。
私はレンタルサーバーの中でもエックスサーバーを評価しているので、それができるのであれば都合が良かったのです。

しかしこの方法は不可能ではなかったのですが、諸々の事情で断念しました。
結局、いったんドメインを別のレンタルサーバーに移管させることに落ち着いたのです。

そこでドメインをさくらインターネットに移管し、私名義にしました。

エックスサーバーへの移管を試みる

それから4か月が経過し、そろそろエックスサーバーにドメインを戻そうと考えました。
さくらインターネットに移管を伝え、(infoドメインだったため)オースコードを取得しました(このときのオースコードは記号が入っていないもの)。

ところがエックスサーバーの管理画面から手続きを進めたのに移管申請に失敗します。
そこでエックスサーバーに電話で問い合わせたのですが、「技術的な問題はメールで問い合わせてください」とのことでした。

そこからサーバー側との複数回にわたるやり取りが始まります。
このときのエックスサーバーとのやり取り(移管申請までのやり取り)を表にまとめました。

エックスサーバーとのやり取り

回数 方法 質問 回答
1 電話 移管申請に失敗した メールで問い合わせてください
2 メール ホームページ制作会社の名前が残っているのではないか? 以前の契約情報が残っていました
3 メール 移管申請に失敗した 確かに移管申請しましたか?
4 メール 移管申請はしました オースコードを確認してください
5 メール オースコードを送る オースコードに記号がありません。オースコードには記号を含めてください
6 メール 記号を含んだオースコードを入力したが、移管に失敗した Whois情報が代理公開情報になっています
7 電話 Whois情報を変更したが移管に失敗した 変更から2日ほどかかることがあります
8 メール Whois情報を変更したが移管に失敗した 変更から2日ほどかかることがあります
9 メール (4日後)移管に失敗した 移管申請手続きを進めてください
10 電話 (2度目の同一質問)移管申請に失敗した メールで問い合わせてください
11 メール (3度目の同一質問)移管申請に失敗した 当社サービスに不具合がありました

以上がドメイン移管申請をするまでのエックスサーバーとのやり取りです。

ここにはエックスサーバーとのやり取りだけを記載しましたが、その間にさくらインターネットとも状況確認のやり取りをしています。
また移管申請ができた後も、ドメイン移管未完了の通知が届いたので、その件でもエックスサーバーに問い合わせています。

結果、移管が完了するまでにサーバー側とやり取りした回数は、エックスサーバーおよびさくらインターネット合わせて十数回になります。

ドメイン移管に時間がかかったのはこのようなやり取りをしていたからなのでした。

エックスサーバーのサポート体制

今回のドメイン移管では主にエックスサーバーとやり取りをしたのですが、やり取りの中でエックスサーバーのサポート体制について思うことがあったので書いてみます。

電話サポート

今回、残念だったのはエックスサーバーの電話サポートですね。
技術的な質問に全く回答できなかったです。

別に電話サポートに高い技術レベルを求めてはいませんが、何を聞いても「その件はメールで問い合わせてください」と言われるのにはがっかりでした。

実は、以前にも今回と全く同じ状況でドメイン移管手続きをしたことがあるのですが、そのときは途中で状況を理解できる方と話をさせてもらい、スムーズにドメイン移管が進みました。

今回もそのような対応を期待したのですが、そうはならなかったですね。
以前の対応が例外的対応だったのかもしれません。

メールサポート

これに対してメールサポートは良かったですね。

まず問い合わせ後、数時間以内に返信メールが来るのは良いですね。
即答できないものについては、「改めて回答しますという」メールが来たのち、後日回答メールが来ました。

また文面も丁寧です。このあたりは「さすがだな」と思いました。

細かいことを言うと、私の返信メールに対して、そのまま再返信しないのも良い対応ですね。
そのまま再返信すると、件名に何度も「Re」が付くので、件名が読みづらくなります。

最終的にはエックスサーバー側の不具合により移管が延びたところはありますが、私にもWhois情報を変更しなかったミスがありますし、このへんはお互い様といったところでしょう。

むしろ不具合があったことをきちんとお詫びする姿勢は素晴らしいなと思いました。

あとはもう少し電話サポートを頑張ってほしいのですが、なんとかならないですかね(笑)。

SSLの更新は手動でしないとダメなの?

サイトをSSL化した理由

このホームページのアドレスはhttps://cheshire-cat.infoです。
以前はhttp://cheshire-cat.infoでした。

httpがhttpsになったんですね。

httpとhttpsの違いは、通信を暗号化しているか? していないか? にあります。
httpsはSSL(Secure Socket Layer)という技術を使って、通信を暗号化しているのです。

別にこのサイト程度であれば、盗まれて困る情報もないので暗号化しなくてもいいとは思っています。

けれど最近、暗号化していないサイトはインターネットを閲覧できるソフト、特にグーグルクロームを使う場合に画面に注意が表示されるようになりました。

グーグルクロームはインターネットエクスプローラーと共に、もっとも使われているソフトです。

その画面に注意表示が出されるのでは、サイトの安全性・信ぴょう性が疑われます。
それでサイトをSSL化することにしました。

SSLの有効期限

サイトのSSL化ですが、これは1度行えば永久に使える、というわけではありません。
SSLには有効期限があって、一般的には1年です。

けれど私はSSL化にお金を払いたくなかったので無料のSSLを使いました(Let’s EncryptというSSLです)。
その代わりLet’s Encryptは有効期限が90日と短いです。

最初は私が使っているサーバー(エックスサーバー)が独自に有効期限を90日に設定しているのかな? と思ったのですが、Let’s Encryptの仕様が90日だそうで、これはエックスサーバーに原因があるのではないですね。

その代わり、原則としてエックスサーバーが90日ごとに自動更新してくれるようです。

SSLを手動更新しなければならないときもある…

ですが、常にエックスサーバーが自動更新してくれるわけではないんですね。
それに今日気付きました。

今日、エックスサーバーからメールが来ました。
「SSLが自動更新できませんでした」という内容でした。

「なぜ自動更新できないのか?」と思い、原因を調べたところ、どうやらホームページに転送設定をかけている場合は、SSLの自動更新ができないようです。

どういうことか説明すると、このホームページアドレスはhttps://cheshire-cat.infoですが、仮にアドレスバーにhttp://cheshire-cat.infoと入力しても、https://cheshire-cat.infoのホームページが表示されます。

これは私がそのような設定、つまりは転送設定をかけているからです。

これに対し、仮に転送設定をしない場合は、https://cheshire-cat.infoとhttp://cheshire-cat.infoの両方のサイトを表示させることが可能です。
ですが、そういうことをしたくないからこそ、転送設定をしているわけですよ。

.htaccessを設定する

このまま何もしないとhttpsからhttpに戻ってしまいます。
それは困るので、SSLを手動で更新することにしました。

そこで転送設定を一時的に止めます。
転送設定が止まっている間は、SSLを手動更新できるからです。

SSLを止めるためには、.htaccessというファイルを設定し直さなければなりません。

その設定を先ほど終え、SSLを更新させました。
SSL更新後、すぐに.htaccessを再設定して、転送設定をつけたんですけどね。

それにしてもSSLを更新するたびに.htaccessを設定し直すのは面倒ですね。

有料のSSLなら自動更新してくれるのでしょうか?
自動更新してくれるであれば有料のSSLを使うことも今後の選択肢になってきますね。

ホームページの模写をはじめた話

模写を始めた理由

最近、ホームページの模写をはじめました。
とりあえず1件模写してみました。以下をクリックしてみてください。

Natural Shop Coco ナチュラルショップ ココ

ホームページの模写を始めた理由は、ずばり私のデザイン力の向上ですね。

最初はきれいな写真・見栄えのいい写真を使えばホームページのデザインも良くなるんだろう、と思っていました。
けれどそのうち、きれいな写真を使ってもデザインが良くなるわけではないことに気付きました。

あたりまえですね。

写真を使わなくても、デザイン性に優れたホームページはいくらでもあります。
またデザインが悪いのに、写真だけきれいにしても、かえってアンバランスで見栄えが悪くなることもあるでしょう。

やはり良いホームページを作るためには、デザイン力そのものを向上させるしかないわけです。

デザインの本を読んでみるが…

デザイン力を身に付けるために、デザイン構成とか配色に関する本を読んでみました。

しかし、これも違う気がしました。
たしかにそういう本も必要ではあるのですが、ホームページの作成経験が少ない人間がそのような本を読んでも、いわゆる机上の空論・畳の水練となり、あまり意味はない気がします。

ホームページ制作の何が難しいのか? どのような点につまづくのか? といったことを認識したうえでないと、デザインの本を読んでも活かせないと思います。

やはり、まずは自分でホームページを多数つくってみる。それが大事ですね。

ただし、自分の感性でホームページを作っても素晴らしいデザインはできないので、まずは優れた見本を真似ることにしました。

見本を真似ることで、そのホームページの何が素晴らしいのか? どのようなテクニックを使っているのか? そういった点を学びたいと思います。

紳竜の研究

私が模写で思い出すのは、『紳竜の研究』というDVDです。

漫才コンビ「紳助・竜介」についてのDVDなのですが、このなかに収録されている、島田紳助さんが吉本のお笑い芸人の養成所で授業をされている部分は大変参考になります。

この授業は全編参考になるのですが、このなかで紳助さんは自身の漫才の勉強ついてこう語っています。

録音テープを懐に忍ばせ、面白いと思う漫才コンビの漫才を録音したそうです。
そしてそれを「紙に書いていった」といいます。漫才を耳で聞くだけではだめだそうです。耳で聞いただけでは面白い理由はわからないと言います。

そうではなくて漫才を紙に書き出し、分析し、考えることで分かってきたことがあるそうです。
落ちのパターンとか、間の数とか…。

そうやって面白い漫才を分析したうえで、自分なりのスタイルを確立していったという話なんですね。

この話はもちろん漫才に限った話ではないです。
私のやろうとしているホームページ制作にも通じますし、他の仕事でも同じことですね。

ですから基礎を確立するまでは、私もホームページの模写を続けたいと思います。

模写「Natural Shop Coco」

ホームページを模写してみました。

模写したのは『おしゃれなWebサイトテンプレート集』(山口有由希、坂本可南子、梶嶋えりか / 技術評論社)という本の最初に掲載されているデザインです(Template_01を模写しました)。

はじめは単にコードを書き写して勉強しようと思ったのですが、途中で「そんなことをしてもつまらないな」と思い、コードを見ずに模写することにしました。

そして模写して完成させたサイトがこちらです。
画像などの素材は『おしゃれなWebサイトテンプレート集』に入っているものを使っています。

Natural Shop Coco ナチュラルショップ ココ

オリジナルは数ページの作品ですが、今回、模写したのはトップページだけです。
またオリジナルはJQueryを実装しているのですが、私がやりたかったのはホームページのデザインを真似ることなので、模写サイトではJQueryは実装していません。

模写した感想

技術の問題

まず困ったのは技術的なことです。
私の技術のいたらなさから、やりたい装飾がすっと出てこないのは困りました。

たとえば文字や画像を縦方向にそろえる方法や画像の重なりをうまく調整する方法などは参考書を見ながら進めなければなりませんでした。

対象物のとらえ方の問題

当然ですが、デザインを見たときに「どのようにすればコードを簡単に書けるのか?」 を常に意識する必要があります。
たとえば同種のデザインであれば、それらを一括でコーディングできないか? と考えるのは当然のことです。

けれど今回、私は対象物のとらえ方が下手だったので、余計なコーディングをしなければなりませんでした。

細かな調整

こまごましたデザインの調整には苦労させられました。

もちろん、そのような細かな点までしっかりと表現するからこそ、デザインとして優れたものになるんですけどね。

仕事であれば細かなところもしっかり作りこまなければならないのですが、模写であれば、全体のバランス・見栄えさえよければ、こまごましたところは飛ばしてしまってもいいかもしれませんね。