Contact Form7のコンバージョン計測方法紹介

「Contact Form 7」とは、
WordPressにメールフォームを設置するためのプラグインです。
ja.wordpress.org

今日は、WordPressのプラグイン「Contact Form 7」 のコンバージョンをGoogle Analytics で計測する方法についてお伝えいたします。

Google AnalyticsでContact Form7のコンバージョン計測するには

手順

必要なこと

Step1. Google Analyticsと対象WordPressサイトを連携する
Step2. Contact Form7のコンバージョン計測用スクリプトを設置する
Step3. Google Analytics側でコンバージョンの設定をする

Step1. Google Analyticsと対象WordPressサイトを連携する

1. Google Analyticsに対象サイトを登録します。
2. トラッキングコードを取得します。
3. 対象サイトのhead部分に上記トラッキングコードを設置します。

※上記手順詳細については、ここでは割愛させていただきますが、以下記事がとても参考になるかと思いますのでご参照ください。

【参考記事】
GoogleAnalyticsの設定方法＆使い方！トラッキングコードをワードプレスに設置する方法を解説
http://maistylecreate.com/wordpress/1681/

Step2. Contact Form7のコンバージョン計測用スクリプトを設置する

Contact Form7の送信アクションをイベントとして計測するためのタグをサイト内headタグに設置します。

参照：Contact Form7 公式ページ
https://contactform7.com/ja/tracking-form-submissions-with-google-analytics/

【Contact Form7 紐づけ用コード】
[スクリプト] 基本形

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', '【カテゴリ名】', '【アクション名】', '【ラベル】');
}, false );
</script>

[スクリプト] 実装例 - メールフォームが1つの場合

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', 'Contact Form', 'submit');
}, false );
</script>

[スクリプト] 実装例 - メールフォームが複数の場合
※メールフォームのIDとラベルでメールフォームの別を識別します

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if('26' == event.detail.contactFormId) {
  ga('send', 'event', 'Contact Form', 'submit', 'コンタクトフォーム 1');
} else if('149' == event.detail.contactFormId) {
  ga('send', 'event', 'Contact Form', 'submit', 'コンタクトフォーム 2');
},
} false );
</script>

Contact Form7のIDは、以下方法で確認します

「お問合せ」-「コンタクトフォーム」をクリックします。

Contact Form一覧の設定画面でForm IDが確認できます。

Step3. Google Analytics側でコンバージョンの設定をする

Analytics側で通知されたイベントにコンバージョンの設定をします。
目標の設定方法については、以下Googleでのご案内を参照してください。
support.google.com

なお、ここで設定するイベントの条件としては、以下のように設定します。

各値を以下のように設定します。
カテゴリ：Contact Form
アクション：submit
ラベル：なし
値：なし

※コンバージョン設定が完了したら、Contact Form7のテスト送信を行うなどして、計測が正常に行われているかをご確認ください。

※計測が反映されるのに、1～2日かかる場合があるようですので、即時反映されなくてもしばらく待って様子を見てみてくださいね。

以上、ご参考まで。

ブロガー専用テーマ「SWALLOWスワロー」をインストールしてみました

ブロガー専用テーマ「SWALLOWスワロー」のご紹介

「ブログを書くことに集中できる！」とかねてより評判の高かったブロガー専用WordPressテーマ「SWALLOWスワロー」をインスールしてみました。

ブロガー専用WordPressテーマ「SWALLOWスワロー」とは

以下、販売サイトの紹介文より

SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。プロブロガー八木仁平監修のもと、OPENCAGEが開発したWordPressテーマ。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。

「SWALLOWスワロー」の特徴・良所

上記紹介文にもあるように、「SWALLOWスワロー」は見た目も機能もとてもシンプル。
その一方、プロブロガー八木仁平氏監修ということもあり、ブロガーの使い勝手がとても良く考慮されていると思います。
たとえば、こんなところです。

「SWALLOWスワロー」 3つのおすすめポイント

[良所1] スマホに最適、モバイルファースト設計

スマホでの見やすさ・機能・デザインにこだわったモバイルファースト設計！
この点は、やはり今大事ですよね。

[良所2] 便利なカスタマイザーで簡単カスタマイズ

HTML/CSSの知識がない人にも、ちょっとしたデザイン変更はカスタマイザーから容易に変更可能です。

サイトタイトルは4段階でサイズ設定可能
サイトタイトルの文字サイズが「小さめ」「標準」「大きめ」「特大」の4段階で設定変更ができます。

サイトカラーもカスタマイザーで簡単設定

記事一覧ページのレイアウト、投稿・固定ページのレイアウトも手軽に変更可能！

記事一覧ページ設定

投稿・固定ページ設定

Google Analyticsの設定もカスタマイザーで設定可能

ウィジェトエリアが豊富！

[良所3] コーディング不要であらゆる装飾・機能追加を実現するショートコード

ページ内へのカラム設置、枠、ボタン、吹き出しなんかもショートコードで簡単に実装可能なのが便利！
HTML/CSSの知識がなくても簡単に装飾できてしまいます！

以下、ショートコードによる実装例です！

他にも、ランディングページ作成機能、
SNSボタン、スライドショーなんかも標準装備、
ブロガーにとっては充分な機能が揃っています。

いかがでしょうか。
コーディングができる、できないにかかわらず、装飾に時間と手間をかける必要なく、記事執筆に集中できるのはありがたいですよね。

有料テーマではありますが、費用対効果としては大だと言えます！

ということで、商用テーマとしてもおすすめ！！
もし今WordPressブログの装飾に多少なりとも時間がかかっている方、
そしてその手間を極力省けたらと思いっている方、
この機会にぜひ「SWALLOWスワロー」を試してみては？

スワロー販売サイトはこちら

Google Spreadsheet でカラーコード表を作成する

今日は、Google Spreadsheet でカラーコード表を作成する方法についてお伝えします。

デザイナーさんが作成したカンプをコーディングで再現する作業過程で「使われている色がカラーコード表でまとめられていたら良いのに」と思い、こちらの方法にたどり着きました。

期待動作としては、
セルにカラーコードを入力すると、セルの背景色が自動的にそのカラーコードの色に変わるというものです。

そして、期待した通り、
Google Spreadsheetならいとも簡単にこの動作が実現できました！

以下、実際の方法をご紹介しますね。

Google Spreadsheet でカラーコード表を作成する手順

1. Google ドライブで「Googleスプレッドシート」-「空白のスプレッドシート」をクリックします。
　⇒　新規Googleスプレッドシート画面が表示されます。

2. 「ツール」-「スクリプトエディタ」をクリックします。
　⇒　スクリプトエディタ画面が表示されます。

3. 下記のスクリプトを入力し、任意の名前を付けて保存します。

ここでは、プロジェクト名に「ColorCode」という名前を付けて保存しました。

《スクリプト》

function onEdit(event) {
  rowColor();
}
function rowColor() {
  var range = SpreadsheetApp.getActiveRange(
);
  var col = range.getColumnIndex();
  var row = range.getRowIndex();

  value = range.getValue();
  if (value.indexOf("#") == 0 && value.length == 7) { // #xxxxxx で7文字!!
    range.setBackgroundColor(
value);
    // 色の濃さを確認
    if (getChannelLevel(value) > 400) {
      range.setFontColor("#000000");
    } else {
      range.setFontColor("#FFFFFF");
    }
  }
}
function getChannelLevel(baseColor){
  baseColor = baseColor.replace('#', '');
  if (baseColor.length != 6){ return '#000000'; }
  var totalValue = 0;
  for (i = 0; i < 3; i++){
    channelValue = parseInt(baseColor.substr((i * 2), 2), 16);
    totalValue += channelValue;
  }
  return totalValue;
}

4. スプレッドシート画面に移動し、カラーコードを入力してみます。

(例) #CCFFFFを入力してみます。
すると、こんな感じで該当の背景色が自動設定されました。

思い通りの動作！便利で素晴らしいです！！

なお、こちらの方法については、acidlemonさんの以下記事で教わりました。

【参考記事】
Google Spreadsheetに#FFFF00などと色コードを入れたら自動で背景色をその色にする
beatsync.net

acidlemonさん、
まさにドンピシャの方法、
情報共有、本当に感謝です！！

以上、今日は Googleスプレッドシートで実現するカラーコード表作成方法についてでした。

便利なので、ぜひお試しくださいませ。

さくらサーバーで既存WordPressブログを常時SSL化、「接続は保護されていません」解決法手順紹介

今日は、さくらサーバーで既存WordPressブログをSSL化した際に起こった以下エラーの解決法をご紹介します。

《Chromeの場合》

《Firefoxの場合》

【エラー内容】

• SSL適用後にもかかわらず、アドレスバーに鍵のマークが表示されない。
• 代わりに「このサイトへの接続は保護されていません」エラーが表示される。

さくらの場合、本当であれば専用プラグインでこのような現象が発生せずに簡単に設定完了するかと思ったのですが、期待通りには行きませんでした。
今回の方法は、さくらサーバーに限らず使える方法ですので、
同様の現象でお困りの方はお試しください。

では、以下よりこのエラーに対する解決方法詳細となります。

問題の原因

画像やプラグインなど、既存コンテンツにSSL化されていないものが含まれるため。

解決手順

1. 問題原因となるコンテンツの特定

1.1. 問題サイト表示中、使用しているブラウザのデベロッパーツールを起動します。
（Chrome使用であれば、ページの右クリック-「検証」か[Ctrl]+[Shift]+[I]のショートカットキーで起動できます。）

1.2. デベロッパーツール ウインドウ上部に表示された以下注意アイコンをクリックします。

1.3. 完全SSL化の妨げになっているコンテンツが、以下のように下部ウインドウに特定表示されます。

2. 問題原因のコンテンツを設定し直します。

　（対象画像のURLを「https」に書き換える、あるいは、画像をアップロードし直し、改めて設定します。）

今回の私の場合は、サイトのロゴ画像をはじめとするいくつかの画像がこの原因となっていました。
今回特定された5枚の画像すべてをhttpsとなるように変更すると、、、

無事、上図のようにアドレスバーに表示され、SSL化が完了しました。

以上、ご参考まで。

WordPress 失敗あるある - URL 変更時の注意点

今日は、WordPressでやってしまいがちな失敗の一つとして、
サイトURLを間違って変更してしまった場合の問題と対処法についてお伝えしていきます。

今回のお話の背景

先日、友人のWordPressサイトが突然正常表示されなくなるという現象が発生し、相談を受けました。
そして、原因・対処法を調べてみたところ、今回の問題に行き着いた次第です。
これは起こりがちで注意が必要と思われたため、共有させていただきます。

WordPressのサイトURLを変更したい時にやってしまいそうな失敗対策WordPress アドレス (URL)は変更すべからず！

WordPressの管理画面には、
「WordPress アドレス (URL)」と「サイトアドレス (URL)」の2種類のフィールドがあり、いずれも変更可能な状態になっています。

「WordPress アドレス (URL)」と「サイトアドレス (URL)」の違い

「WordPress アドレス (URL)」とは、
WordPressがインストールされたアドレスを表しています。

「サイトアドレス (URL)」とは、
WordPressサイトにアクセスする際のアドレスを表しています。

しかし、
「WordPress アドレス (URL)」を変更すると、サイトが表示されなくなってしまうので、要注意です。

もし、この「WordPress アドレス (URL)」を誤って変更してしまった場合、

実際、このようなこと↓　になります。

あるいは、こんなケース↓　もあります。

サイトが表示されなくなることはもちろん、
こうなると管理画面にもアクセスができなくなります。

問題発生のきっかけ

1. ドメイン名/サブディレクトリ の URL変更

レンタルサーバー上で「wp」などのサブディレクトリにインストールした結果、WordPressサイトURLが
「ドメイン名/wp 」
となってしまっており、このサイトURLを変更しようとした。

2. WordPress アドレス (URL)を誤って変更

WordPressサイトのURLを変更したい時の対処法の一つに
管理画面の「サイトアドレス (URL)」の変更という方法があり、それを試みようとしたところ、誤って「WordPress アドレス (URL)」の方を変更してしまった。

結果、サイトが正常表示されなくなり、管理画面にもログインできなくなってしまった。

続いて、以下今回行った対処法です。

対処法

やや荒業的ですが、今回は、WordPressに紐づくデータベースの値変更という方法で対応しました。

MySQLデータベースからの変更

(以下、エックスサーバーの例です)

1. レンタルサーバーの管理画面より、WordPressのデータベースにログインします。
(ここでは、phpMyAdminにログインしています)

2. phpMyAdminにログイン後の画面にて、該当データベースの「wp_options」をクリックします。

3. 表示されたテーブルのレコードから「home」の「編集」をクリックします。

誤って変更してしまったURLの値を元に戻します。

以上の方法により、無事サイトが元通り表示されるようになりました。

ご参考まで。

超簡単！WordPressインストールまで3分で完了！（XSERVER簡単インストール編）

今日は、XSERVER（エックスサーバー）でのWordPress簡単インストールについてご紹介します。

XSERVERの簡単インストール手順

1. サーバーパネルにログインします。
サーバーパネル - ログイン | レンタルサーバー【エックスサーバー】

2. 「簡単インストール」をクリックします。

3. 「WordPressのインストール」タブをクリックし、必要事項を入力します。

3.1. 必要事項入力
①インストール先（任意のディレクトリ）を入力します。
②ブログ名（任意の文字列）を入力します。
③ユーザー名（任意の文字列）を入力します。
④パスワードを入力します。
⑤メールアドレスを入力します。

3.2. 「インストール（確認）」ボタンをクリックします。

インストールは以上で完了です。

サーバーパネルログインからWordPressインストール完了まで、この間3分ほどで完了です。

本当にあっと言う間。
簡単ですよね。

今日は、XSERVERでのWordPress簡単インストール手順についてご紹介しました。

ご参考まで。

インストールが簡単で高機能・低価格！
WordPressにはエックスサーバーがおススメ。

WordPressクイックインストール手順紹介 (さくらインターネットサーバー編)

今日は、さくらインターネットサーバーでのクイックインストール手順についてご紹介します。

さくらインターネット　クイックインストール手順

1. サーバーコントロールパネルへログイン

さくらインターネットのサーバーコントロールパネルにログインします。
さくらインターネットサーバコントロールパネル

2. 【事前準備】データベース作成

まずは、データベースの作成からです。
さくらの場合、データベースが自動作成されません。
そのため、クイックインストール前に、予め、WordPressで使用するデータベースを作成する必要があります。

2.1. 「データベースの設定」
「データベースの設定」をクリックします。

2.2. 「データベースの新規作成」をクリックします。

2.3. データベース情報の設定
データベース情報を入力します。

①「データベース名」に任意文字列を入力、
②入力内容を確認し、同意のチェックボックスにチェック、
③「データベースを作成」ボタンをクリックします。

これで、WordPressで使用するデータベースが作成されました。

3. クイックインストール実行

3.1. 「クイックインストール」をクリックします。

3.2. 「ブログ」をクリックします。

3.3. 「アプリケーションの設定へ進む」をクリックします。

3.4. クイックインストール情報の設定

①インストール規約、注意事項を確認し、確認用チェックボックスをチェックします。
②インストール先を入力（任意ディレクトリ名を入力）します。
③使用データベースを選択します。
④テーブル接尾字を入力（任意文字列）します。
⑤「インストール」ボタンをクリックします。

4. WordPress インストールプログラム画面

4.1. WordPressインストールプログラム情報設定

①サイトのタイトル
②ユーザー名
③パスワード
④メールアドレス
を入力します。

4.2. 「WordPressをインストール」ボタンをクリックし、実行します。

以上で、WordPressのインストール完了です。

所感

ロリポップやエックスサーバーの簡単インストールと比べて、
さくらの場合、以下が自動ではない分、クイックインストールとは言っても少々手数がかかること、初心者にはほんのちょっとだけ難しいかもと感じました。

• データベースが自動で作成されない（手順 2）
• インストールプログラム情報の入力が必要（手順 4）

以上、今日は、さくらインターネットサーバーでのWordPressクイックインストール手順をご紹介しました。

ご参考まで。

さくらインターネットサーバーでお名前.comの独自ドメインを設定するまでの手順

さくらインターネットでWordPressを設置するにあたり、
さくらインターネットサーバーにお名前.comで取得した独自ドメインを設定する手順を備忘録としてまとめました。

以下、ご参照くださいませ。

1. さくらインターネット側

1.1. サーバーコントロールパネルにログイン

サーバーコントロールパネルにログインします。
さくらインターネットサーバコントロールパネル

1.2. ドメイン/SSL設定

「ドメイン/SSL設定」をクリックします。

1.3. ドメイン一覧画面

「新しいドメインの追加」をクリックします。

1.4. ドメインの追加

「ドメインの追加へ進む」をクリックします。

1.5. 追加ドメイン入力

お名前.comで取得したドメイン名を入力します。

詳細設定に進みます。

※独自ドメインの場合、共有SSLは選択できません。
※独自ドメインには、独自SSLが必要です。

1.6.詳細設定

設定完了

2. お名前.com側

お名前.com Naviにログインします。
お名前.com Navi

2.1. ネームサーバー設定

対象のドメイン名を選択します。

「その他ネームサーバーを使う」をクリックします。

ネームサーバー1 、2の入力欄に、以下さくらインターネットのネームサーバー名を入力し、保存します。
ネームサーバー1 「ns1.dns.ne.jp」
ネームサーバー2 「ns2.dns.ne.jp」

※ドメインが反映されるまで、インターネットの環境により、反映完了まで24時間から72時間かかる場合があります。

以上で取得ドメインの設定は完了です。

ご参考まで。

引き続き、後日、さくらサーバーでのWordPressクイックインストールを使用したインストール手順をご紹介します。

無料でお試し可能！ ワイヤーフレームツール「Prott」を使ってみました

Prott

公式サイト：
https://prottapp.com/ja/

Webサイトの制作をする際、ワイヤーフレームをなるべく簡単にサクッと作れたらって思います。

今日は、そんな時にお役立ちのツール、「Prott」を使ってみたので、ご紹介します。

ワイヤーフレームツール「Prott」のご紹介

ユーザー登録から作成までの手順

まず、利用開始にはユーザー登録が必要です。

サイトトップページ右上の「無料ではじめる」をクリックします。

名前（姓名）、メールアドレス、パスワードを登録、会社・個人を選択し、登録し「次へ」ボタンをクリックします。

自身の属性を登録し「サインアップ」ボタンをクリックします。
※ここでは、「フリーランス」で登録しています。

これでユーザー登録は完了です。
登録したメールアドレスに確認メールが届いています。
メールボックスで、以下件名のメールを確認します。

件名：【Prott】アカウントを承認してください！

該当のメールを開き、「メールアドレスを確認する」ボタンをクリックします。

これでアカウント承認完了です。

ログインすると、このような画面が表示されます。

ワイヤーフレームを作ってみたいので、ここで、
「新規プロジェクト」ボタンをクリックします。

プロジェクト名を入力し、デバイスを設定します。

ここでは「Web」を選択します。

「ワイヤーフレームを描く」ボタンをクリックします。

ワイヤーフレーム作成に必要な部品は画面左側に準備されています。

画面左側の部品（コンポーネント）をドラッグ&ドロップしながらスクリーンに配置しながら、ワイヤーフレームを描いていきます。

描き終わったら、画面右上の「保存」ボタンをクリックします。

こうして保存したワイヤーフレームは、メール、URL、QRなどでシェアすることもできますよ。

いかがでしょうか。
「Prott」を使うと、とっても簡単にワイヤーフレームが作成できます。

なお、ここでは、ワイヤーフレーム作成のみで使用していますが、他にもプロトタイプ作成も簡単にできるというありがた～い機能があります。

ちなみに、ワイヤーフレーム作成機能は本来有料サービスですが、
ユーザー登録開始後30日間はフル機能を無料で使えます。
30日間充分試してみて、気に入ったらアップグレードすればOK！

ということで、今日は、「Prott」のご紹介でした。
せっかくなので、ぜひお試しあれ。

コーディング不要！ホームページ作成サービス「グーペ」でカフェサイトを作ってみました

今日は、ホームページ作成サービス「グーペ」のご紹介です。

ホームページ作成サービス「グーペ」を使ってカフェのサンプルサイトを作ってみました。

「グーペ」の魅力・特徴

グーペはコーディング不要、
これくらいのサイトなら、登録後、30分もかからずにサクッとできてしまいます。

作成は、基本的にテンプレートを選び、必要箇所を入力するだけ。
下記機能・特徴があり、Web制作初心者の方でも、その日のうちに本格的な商用ホームページが作れてしまいます。

加えて、ページのフルカスタマイズが可能なのもグーペの嬉しい特徴。初心者だけでなく、制作者にとっては、カスタマイズの依頼需要も見込めます。

「グーペ」の魅力・特徴

• 専門知識(コーディング)不要
• 必要であればHTML/CSSによるフルカスタマイズも可能
• 地図表示、スライドショー機能も標準装備
• レスポンシブ対応済み、
• お問い合わせフォーム・ショッピングカート機能あり
• SEO対策済み、
• セキュリティ対策あり、
• 独自ドメイン使用OK
• 安心電話サポートあり
• 無料お試し期間15日間あり
• レンタルサーバー契約不要、

上記機能コミコミで、月額1,000円からホームページ運用が可能です。

Web初心者にも、中級者以上にも興味深い
ホームページ作成サービス「グーペ」

今なら、SSLオプションが半額の月額500円(税抜)キャンペーン中。
無料お試し期間もあるので、この機会に「グーペ」を体験してみてはいかがでしょうか。

以上、ご参考まで。

【WordPress】Jetpackによる自動投稿ツイートでTwitterカードの画像が表示されない場合の解決法

本日は、WordPressからのツイッター自動投稿についてです。
連携しているTwitterで表題の問題が発生したため、解決法を確認してみました。

問題の現象

jetpackプラグインでWordPress記事更新時にTwitter自動投稿を行おうとすると、その結果投稿されたツイートのTwitterカードに表示される画像が正しく表示されない(以下のようにデフォルトユーザーアイコンが表示されてしまう)現象が発生

その問題について、解決法を確認してみました。

ちなみに、この場合のWordPress側プロフィールアイコンはきちんとオリジナル画像が設定されているものとします。

なので、問題は、Twitterへのツイート自動投稿時、WordPressに設定されているユーザーのプロフィールアイコンが存在するにもかかわらず、WordPressにデフォルトで存在するアイコンが表示されてしまうこと。

どうもjetpackで連携しただけでは、正しいアイコンがTwitterカード(※)に表示されないようです。

※Twitterカードとは
サルワカさんのこちらの記事がわかりやすくて参考になります。
よろしければご参照ください。
saruwakakun.com

ではどうすれば良いのか？

カギは、プラグイン「All in One SEO Pack」でした。

以下解決までの手順をご紹介いたします。

解決手順

1. プラグイン「All in One SEO Pack」をインストールします。

2. 「All in One SEO Pack」ー「機能管理」を選択します。

3. 「ソーシャルメディア」の「Activate」をクリックします。

4. 「ソーシャルメディア」をクリックします。

5. 「画像設定」と「Twitter設定」に値を入力します。
5.1. 「画像設定」
「画像設定」に以下の設定を行います。
OG:Image ソースを選択 「Post Author Image」　
※Twitterカードのアイコン画像に投稿者プロフィールアイコンを表示する場合です。

5.2. 「Twitter設定」
「Twitter設定」に以下の設定を行います。

この設定の結果、晴れてプロフィールアイコンが自動投稿ツイートのTwitterカードに表示されるようになりました。

以上、ご参考まで。

WordPressのサイトURLを変更するには

今日は、WordPressのサイトURLを変更する方法についてお伝えします。

WordPressサイトURL変更について

たとえば、サーバーの任意ディレクトリ(フォルダ)にインストールしたWordPressに独自ドメインを設定したい場合など、このような手順でサイトURLの変更が可能です。

ちなみに、今回の私の場合は、以下状況によりこの作業を行いました。

今回の作業目的・背景

「sample.com/wordpress」のように、ドメイン名直下ではなく、サブディレクトリ(フォルダ)にインストールしたWordPressのサイトURLを、「sample.com」に変更したい。

＜レンタルサーバー環境＞
XSERVER(エックスサーバー)

＜状況＞
1. 上記レンタルサーバーに独自ドメインを追加
　(これでXSERVERに上記独自ドメイン用のディレクトリ(フォルダ)が自動作成されます)
2. 上記追加ドメイン用に「wordpress」サブフォルダを作成
3. 上記サブフォルダにWordPressをインストール
　(sample.com/wordpress/以下にWordPressがインストールされますので、このサイトURLがsample.comになるよう変更を実施)

作業内容・手順

1. .htaccessとindex.phpを取得

1.1. FTPソフトでサーバーのWordPressインストールディレクトリにアクセスします。
1.2. WordPressインストールディレクトリ直下の.htaccessとindex.phpをダウンロードします。

2. .htaccessとindex.phpを編集

2.1. htaccessの編集
ドメイン直下に対応させるため、「RewriteBase」「RewriteRule」箇所を以下のように書き換えます。
(変更前にあったディレクトリ名部分を削除)

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

.htaccessファイル変更の際、拡張子なしで保存できない場合、
いったん、.txtの拡張子を付けて保存し、後でファイル名の変更で拡張子を削除すればOKです。

2.2. index.phpの編集
先程の. htaccessとは逆に、サブディレクトリ名を追加します。

require( dirname( __FILE__ ) . '/wp-blog-header.php' );

上記一行を以下のように変更　↓

require( dirname( __FILE__ ) . '/wordpress/wp-blog-header.php' );

3. .htaccessとindex.phpをドメイン直下に配置

前述 2.で編集した .htaccessとindex.phpをFTPソフトでアップロード、独自ドメイン用ディレクトリに配置します。
※この時、インストールディレクトリにあった.htaccessとindex.phpファイルはそのまま残しておきます。

以上の手順により、
「sample.com/wordpress」のようなサブディレクトリ(フォルダ)にインストールしたWordPressのサイトURLを、「sample.com」に変更できました。

どうかご参考まで。

XSERVERでWordPressをインストール後の「このWEBスペースへは、まだホームページがアップロードされていません。」エラーについて

エラーの現象について

XSERVERにWordPressをインストール後、
トップページにアクセスすると、
「このWEBスペースへは、まだホームページがアップロードされていません。」というエラーにより、トップページがまったく表示されません。

WrodPressのインストール自体は正常に終了したし、ログイン>ダッシュボード画面へのアクセスも問題なし。

投稿ページや固定ページも正常に表示される。
しかしながら、トップページにアクセスすると、依然エラーのまま。

これは一体どういうこと？
と思い、エラーメッセージで検索すると、すぐにエックスサーバーの「よくある質問」で該当の現象への以下回答が見つかりました。

このエラーの原因

【考えられる要因】

・対象ドメインのフォルダ内[ public_html ]にアップロードが完了していない
・トップページのデータはindexというファイル名でアップロードされていない
・[ public_html ] フォルダ内にindexファイルが複数存在している

(上記エックスサーバーサポートページより)

そこで、サーバー上のpublic_html内を再度確認してみると、

確かに、そこには、
index.phpとindex.htmlという複数のindexファイルが。

エラーの対処法

(今回のケースでは)
サポートページの記載通り、
index.htmlを削除したところ、無事トップページが表示されるようになりました。

おわりに

これまで、ロリポップ、さくら、カゴヤなど、
いろいろなサーバーでもWordPressをインストールしていましたが、このような現象はまったくなく、少々戸惑いました。
(ちなみに、エックスサーバーでも既に何度もWordPressをインストールしていましたが、このような現象は今回が初めてでした。)

検索しても同様のエラーについては、エックスサーバーに関する情報ばかりですので、どうもエックスサーバー特有の現象なのでしょうか。

ということで、
エックスサーバーご使用中の方は、どうかご参考まで。

【参考】
ホームページトラブル - よくある質問 | レンタルサーバー【エックスサーバー】 : https://www.xserver.ne.jp/support/faq/faq_service_hp_trouble.php

テキストや要素を簡単に上下中央揃えするCSS

今日は、テキストや要素を簡単に上下中央揃え(縦位置中央揃え)したい時に使えるCSSのご紹介です。

今回の方法は、
「display:flex;」と「align-items:center;」
を使うのがポイントです。

「display:table-cell;」や「 vertical-align:middle;」で縦位置中央揃えできない場合にも使える簡単な実現方法でおススメです。

( 例.1 )

See the Pen flex_01 by Tokiko (@tkksn) on CodePen.

※上記コード中に使用ている指定ダミー画像は、以下サービスを利用しています。
Placeholder.com - Quick & Simple Placeholder Images, Text & More

( 例.2 )

See the Pen flex_2 by Tokiko (@tkksn) on CodePen.

あ、ただこの方法、残念ながら、IE11には使えませんでした。
どうかその点はご了承くださいませ。

以上、ご参考まで。

【WordPress】海外有料テーマ「Massive Dynamic」を使ってみました

WordPressの海外有料テーマ「Massive Dynamic」を使ってみました。

公式サイトはこちら↓
Massive Dynamic - Business WP Theme & Visual Website Builder
※　以下画像の「Try Free」からメールアドレスを登録すると、実際の操作感覚が体験ができます。

販売ページはこちら↓
Massive Dynamic - WordPress Website Builder by Pixflow | ThemeForest

デモはこちらで確認できます
youtu.be

こちらのテーマの特徴

デモ用ビデオを見ていただくと良く分かるのですが、
このテーマを使用すると、ドラッグ&ドロップ操作ですばやくWebサイトができてしまいます。
なので、コーディングの知識不要、
海外テーマなので説明が英語表記ですが、直感的に操作可能なので使用においてはほぼ問題なし、
WordPress初心者、Webサイト制作初心者には、ありがたいテーマの一つと言えます。

Webサイト部品がドラッグ&ドロップで簡単に設置・削除できる他、サイトのレイアウト・デザインは、予め用意されたテンプレートの選択で簡単に着せ替え可能です。

※リンク先を見るとお分かりいただけますが、
　66に及ぶオリジナルテンプレートが用意されています。
Massive Dynamic - Business WP Theme & Visual Website Builder

【補足情報】こちらのテーマの問題点

ドラッグ&ドロップだけでWebサイトが簡単にできてしまいとても便利な「Massive Dynamic」ですが、そのようなビルダー機能を実現するためにかなり特殊な構造となっており、動作がモッサリ、重たく感じることが度々あります。

また、iPad miniなどの一部機種でモバイル表示した場合、
ナビゲーションのメニュー項目が正常表示されないという現象が確認できました。

【不具合現象】
下図のように、メニューの項目が表示されたり、されなかったり、、、といった現象が発生。

画面1.
こちらは、メニュー項目が最後の一つを除いて表示されている

画面 2.
こちらは、メニューがかなり欠けて表示されている

なお、この不具合現象の一貫性、規則性は確認できませんでした。

上記現象の原因・解決策について

こうした現象発生時の原因や有効な解決策は特定できませんでしたが、おそらくは、メニューテキストの背景色が透明（background-color: transparent; ）となっていることによるバグではないかと思われました。

英語にはなりますがこちらのテーマにはサポートもあるので、
詳細はサポートに問い合わせてみようと思います。

最後に

上記のような一部機種での不具合も見受けられましたが、
全般的には大変便利で高機能なテーマであると言えます。

・海外テーマであること、
・有料であること、
という点はややハードルありかとは思いますが、
Webサイトのコーディングが苦手な方、スピーディーにプロ並みサイトを作りたい方には役立ちそう、というWordPressテーマでした。

以上、ご参考まで。

【参考】
CSSで背景画像を使用した際にその上の文字が消える件 | WEB制作会社 マーキュリーシスコム スタッフBLOG : http://www.mercury-sys.com/blog/2007/04/css.html