wordpressで作る友人のホームページ 一旦まとめます。

当初はホームページを作りながら、細かな変更点をこのブログに記載していければと
思っていたのですが、ほぼ初めて作成するということもあり、非常に段取りが
悪かったと反省しております。。

当初の目標は2週間で作成し終えるつもりでしたが
デザインに結構時間がかかったのと、飲み会等もつづいて
結局、このブログを開設してから3週間ほどかかってしまいました。

現在は、このブログの主役でもある友人にデザインの最終チェックをしてもらってます。
OKをもらったら、住所・電話番号を記載して、いろいろな人にこのホームページを
知ってもらえるように、SEO 等、試行錯誤していければと思ってます。

まず、私が実施した作業の流れを記載します。

1.レンタルサーバ登録

無料のXdomain へ登録。
 以下、選んだポイント。
 ・無料
 ・広告が小さい
 ・Wordpress 環境をサポートしてる。
 ・容量が大きい。

2.レンタルサーバ上で作業開始。

 ここが1回目のつまずきポイント。
 最初は、フォルダ作成とかファイルの移動・編集とかの作業が多く、
 GUIだけでの作業にイライラが募る!
 3日にして、レンタルサーバ上だけで作業をすることを断念。。

3.ローカル環境に作業環境を準備

 1.VMWare インストール
 2.VMWare にCentOSをインストール
 3.CentOS にapache & mysql & php インストール
 4.wordpress インストール。

4.ローカル環境で作業開始。

 最初は順調にスタート。ホームページの骨格から進めていった。ほぼ間隔で。
 骨格は、ほぼstyle.css & header.php あたりの編集。
 ここらへんは順調だった。

5.デザイン系のソフトインストール。

 アイコンやタイトル文字の作成用に、IllustratorCS2 をインストール。
 写真の加工用に、GIMP をインストール。

6.デザイン作成

 2回目のつまずきポイント。間隔で進めていったので、
 デザインが全然まとまらない(T T)
 このフォントがいいなーとか思っても、全体とあわえてみると
 全くあってなかったり、細かいデザインばかり気にして
 サイトの趣旨を忘れかけたり。。。
 非常につらい時期でした。。。

7.サイトのデザイン設計

 一旦、Illustrator でサイトのデザインを設計。
 ここで写真や時の大きさなどのバランスがとれたと思います。

8.デザイン通りにWordpress 作成

9.ローカル環境で作成したデータをレンタルサーバへアップ

時間はかかりましたが、対して難しくありませんでした。
 コンテンツの移動は、トップフォルダを丸ごと移動、
 その時、wp-config.php をレンタルサーバ用にカスタマイズ。
 データベースのデータはローカル環境でmysqldump でバックアップ
 レンタルサーバ上の、phpmyadmin でバックアップしたデータをインポート。

10.友人にサイトのデザイン確認してもらう。

といった流れです。

次に、wordpress のメリットでもある使用したプラグインを挙げてきます。

・Meta Slider

 ヘッド部分に利用。写真を任意の時間でスライドできる。
 また、スライド方法も簡単に選択できる。

・Page Builder by SiteOrigin

 固定ページのコンテンツ部分のdiv 構成を簡単に設定できる。
 非常に助かりました!

・Dynamic To Top

 下にスクロールすると、トップへ戻れるボタンを設置できる。

・TablePress

 簡単にテーブルを作成できます。
 「特定法表記」のページで利用しました。

・Trust Form

 簡単にフォームを作成できます。
 確認画面や自動返信メールなど、とても便利です。

・WP SlimStat

 アクセス解析です。リアルタイムに監視できます。

・All In One WP Security

 セキュリティを一元管理できます。
 管理用のURLを変更できたりします。

といった感じで紆余曲折しながら、なんとか形になってきました。

まだ、終了ではないのですが、この3週間、とても貴重な経験ができたと思います。
結構だらだらした生活を送っていたので、久々に頭を使いました!笑
# ちなみに仕事はまじめです!

その意味では友人にはこの機会をもらえたことに、とても感謝しています!!

サイトの公開はこのブログの最後にできればと。

セキュリティの一括導入プラグイン「All In One WP Security」

セキュリティを制御できることがやはり大事だということで、
いろいろ調べた結果、一番よさそうな「All In One WP Security」を導入しました。

設定については以下サイトを参考にさせていただきました。

WordPressのセキュリティ対策プラグインAll In One WP Securityの設定と使い方

英語表記ですが、そこまで難しくありません。

あと、上記サイトにはのっていなかったのですが、
管理ログインURLを変更できないか調べていたところ、

「WP Security」→「Brute Force」→「Rename Login Page」から
ログインURLを変更できました。

フォームを簡単に作成してくれる「Trust Form」

問合せ窓口と、購入フォームへフォームを作成しなければいけないのですが、
「wordpress フォーム」と検索すると、「Contact Form 7」というプラグインが
数多くヒットします。

で、「Contact Form 7」をインストールして設定していたのですが、
デザイン面で自分が思うようにできませんでした。(T T)

CSS でデザインする方法も多くヒットしたのですが、
その通りに設定したつもりができないのです。。。
# ここに結構時間をとられました。

で、ほかに日本語も対応しているフォームのプラグインがないか探していたら、
「Trust Form」が見つかりました。

Contact Form 7 と違い、送信前に確認画面を挟めますので
とてもユーザフレンドリだと思います。

あと、デフォルトのデザインがとてもきれいでしたので、
変更していません。笑

操作もとてもわかりやすく、設定がとても簡単でした。

form

デザインが約7割ほど。

ここ最近投稿数が極端に減りました。。
技術的なことはこのブログにメモできればと思い
更新しまくってましたが、デザインとなると、
なにを書いていいかわからないですからね。。

友人と、どんどん詰めていって、全体の7割りほどは
できたでしょうか。

デザインって本当に難しいです。。

このサイトで一番大事なのは、とうもろこしを食べたい!買いたい!って
思わせることなのですが、細かなデザインを考えている時に
面白いもので、ふと、一番根っこの考えかたを忘れてしまうのです。(T T)

なので、デザインを考えているときは、たまに遠くから客観的に見たり、
ものすごい近づいて見たりの繰り返しでした。。

フォント一つ選ぶにしてもイメージが変わってくるので大変でした。。
フォントを統一しすぎると、デザインとして単調になってくるし、
字と字の隙間のバランスとか、文字の太さとか、斜めにするかとか、
非常に悩みました。

コンテンツの部分ですごく役にたったのが「Page Builder by SiteOrigin」というプラグインです!
これは、レイアウトを構成していくのが非常に簡単です。
一押しのプラグインです!!

さて、悩んだかいもあって自分でいうのもなんですが
とても温かみのある愛情のこもったサイトを作れたと思います!笑

サイトの公開はもうちょっとでできそうです!

今日のまとめ 2

自分が思っていたより、全然進みがわるく友人のKちゃんに
大変申し訳がありませんm(_ _)m

なんとなくですが、全体的なイメージができてきて
自分的には気にいってきたので、あとは友人がどうか
聞いてみたいと思います。

背景だけはまだなのであしからず。。
あと、公開するまで、友人の名前と顔は伏せておきます(笑)

matome1

matome2

matome3

本日のまとめ

当初の目的のブログで更新しつつ(メモしつつ)、作成していくのが
全然できていません。。。

本当にデザインは難しくて、微妙なバランスを気にして
なんども作り直しています。。

プラグインとか、スタイルシートとかいじった部分だけを
報告します。

●プラグイン

・Page Builder by SiteOrigin

 固定ページのレイアウトを構成するのに非常に便利です!
 直感でレイアウトできます。
 ただ、全体のフォントを読み込んでくれなくて、
 文字がデフォルトに戻ってしまうという現象が発生しました。
 原因は突き止められていないのですが、部分部分で直してます。

・Dynamic To Top

 最近よく目にする機会が多いかもですが、
 下にスクロールすると、突如、右下らへんに矢印がでて
 それをクリックすると、一気にトップまで、移動できるやつです。
 編集も簡単でした。

●デザイン

・無料の画像編集ソフト「GIMP」

 最初、PhotoShop の CS2 が無料でダウンロードできるということだったので
 Windows8 にインストールしようとしたら、うまくインストールできませんでした。
 なので、無料ソフトのGIMPという編集ソフトをインストールしました。
 フリーなのですが、調べてみるといろいろできそうです。
 利用方法はとてもじゃないですが、このブログでは追いつけないです。。
 人の切り抜きとか、写真のコントラストの調整とかしました。

・GoogleMap リンク

 よくホームページでみる、GoogleMapを張り付けました。

・文字列をノート風デザインに

 点線のGIF画像を読み込んで、スタイルシートで p の class を
 設定し、読み込ませるようにしました。

 p.dot{
 background-image: url(/wp-content/themes/twentytenkid/images/greendot.gif);
 line-height: 25px;
 margin: 0px;
 }

●フォントインストール

 無料で、以下のフォントをインストールしました。
 各フォント、それぞれの味があって自分的にはとても気に入ってます。

 ・花園明朝
  
  トップ画像の文字で使用

 ・FGゼロゴシック

  各コンテンツのタイトルで使用

 ・はんなり明朝

  トップ画像の「山梨県・・」ってとこで使用

 ・たぬき油性マジック

  メインナビゲーションで使用

画像に白い半透明のマウスオーバー

トップロゴ、メインナビの画像に、マウスを載せたときに
半透明になるように、設定します。

スタイルシートに以下を追加

トップのロゴ用
#site-title a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: “alpha(opacity=70)”;
}

メインナビ用
#access a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: “alpha(opacity=70)”;
}

うん!
マウスを載せたときに半透明になるので、なんとなく
夏と田舎の透明感が表現できてる気がします!

背景は一旦 スルー

ここ2日、ずっとイメージを考えて、いろいろ試しましたが、
どうもしっくりくるものがないので、いったん中止して別のことやります。。

背景が強すぎるとトップ画像の印象が弱まってしまうので、
ほどよいバランス感を出すのが難しいです。

最後の課題にします。。

背景編集 2

次に、第2のイメージを左右するであろう、背景画像を決めていきたいと
思います!
まず、友人と話あった内容を自分なりに作ってみました!

back2

ん!??!?
なんか、ダサい。。。

もう少し試行錯誤してみます。。