ワードプレステーマTCD

今や使用するのが当たり前になりつつあるミュニケーションツール「LINE」。MMD研究所の発表によると、全世代で85%以上もの人がLINEを使用しているというほどです。

line
http://news.mynavi.jp/news/2015/12/15/224/

実はLINEには、プライベートでの利用を目的とした「LINE」アカウントとは別に、法人・個人問わず、あらゆるユーザーがコミュニケーション・ビジネス用途で活用できる公開型アカウント「LINE@」があり、フォロワーへの一括送信、1：1トーク、ホーム／タイムラインへの情報発信などが可能となっています。
LINEatImage1
LINE公式ページより

特に最近では、PCからの管理画面が整備され、非常に使いやすくなりましたので、本日はLINE@について紹介したいと思います。このLINE@を使用することで企業やフリーランスなどで活動しているみなさんとファンとのコミュニケーションなど様々な用途でLINEを活用できるようになります。

LINE@で出来ること

LINE@とは、個人間のメッセージのやりとりのLINEとは違い、複数の人にメッセージを送信するなどの、オープンな情報発信が可能になる機能があります。LINE@でできることをまとめると、主に以下の6つになります。

登録してくれている友達全員に一括メッセージ送信
登録してくれた人と1on1のトーク
自動登録メッセージの設定
クーポン・PRページなどの配信
ホームへの投稿
友だち数・ホーム投稿などのインサイトの確認

LINE@の登録

LINE@アプリをインストール

まずは、LINE@アプリをダウンロードしてください。
・App Store：http://nav.cx/efvJWG1
・Google Play：http://nav.cx/4LaWWCn
line@02

アプリにログインします。LINEの登録メールアドレスとパスワードを入力ください。
line@03

アカウントの作成します。アカウント名、写真、業種を設定し、登録します。
line@04

アカウントが下記の用に作成されました。
line@05

アカウントページの作成

続いて基本設定をしていきます。ここからは、PC画面での設定画面で説明してきます。
PC版のLINE@はこちらよりログインできます。
line official account manager

まず、PC画面よりログインを行うと、下記のような設定画面となっています。
ine@09

アカウント情報を設定していきます。左のメニュー画面よりアカウントページをクリックしてください。
line@10

アカウント情報では、カバー画像やロゴの設定から、会社の基本情報や求人情報などを設定する事ができます。各項目を入力ください。
line@07

line@08

友達追加時の設定

基本情報を設定出来ましたら、次は自動応答モードを設定します。
まずは、ユーザーの方が友達登録をしてくれたら自動でアナウンスをするメッセージを設定します。初期設定では下記の用なメッセージになっています。
line@11

変更するには、メッセージを選択し、「友だち追加時あいさつ」をクリックしてください。
line@13

そうすると下記の設定画面が表示されます。
line@14

ここで文面を変更すると友達追加時のメッセージをオリジナルの文章にすることができます。
line@16

ここには、テキストだけでなく、クーポンやスタンプ、画像なども設定することが出来ますのでお好みで設定してみてください。

自動応答モードの設定

続いて、相手がトークを返してくれた場合の設定を説明します。初期設定では1:1のトークができるようになっていますので通常のLINEのようにトークができる設定になっていますが、友達の数が多い場合対応できない場合もあります。そんなときには自動応答モードを使用します。

1:1モードのOFF

自動応答メッセージを使用するには1:1トークをOFFにします。この設定はスマートフォンのアプリからしか出来ませんので、LINE@のアプリより「応答モード」を選択し、下記の画面のように1:1トークを設定出来ないようにしてください。

line@17

自動応答メッセージの設定

それでは自動応答メッセージの設定を行いますが、メッセージには２種類の返答の仕方があります。

自動応答メッセージ：事前に準備した文章を自動でランダムに返信します
キーワード応答メッセージ：ユーザーから送られたワードに合わせた文章を返信

自動応答メッセージ

自動応答メッセージはどんなメッセージを送ってもらったとしても、事前に準備した文章を自動でランダムに返信する設定です。初期設定では、「basic」というテンプレートが用意されており、この文字をクリックすると、編集することができます。
line@18
新しくメッセージを追加する場合には、追加新規作成を押し、設定画面を開きます。
line@20
内容を入力し、保存すると、自動応答できる内容が追加されます。この中から自動でメッセージが送られることになります。
line@21
実際に「テスト」と送ってみると下記のように先ほど設定したメッセージが返ってきました。
line@22

キーワード応答メッセージ

続いて、キーワード応答メッセージの登録を行います。こちらはある特定のワードによってメッセージを送る機能です。まずはメッセージの画面より「キーワード応答メッセージ」を選択します。
line@26
新規作成画面をクリックし、キーワードと応答するメッセージを追加してください。今回は「bloc」「BLOC」「ブロック」というキーワードを入力し、それに対応するテーマの解説をメッセージにいれてみました。
line@23
下記が設定した後の画面になります。
line@24
実際に「bloc」と入力してみると、キーワードに対応するメッセージが自動で返ってきました。
line@25

まとめ

今回は、LINE@の使い方ガイド　〜登録・基本設定編〜として、基礎的な設定の仕方から、自動トークまでを解説しました。LINE@は非常に便利で、いままでメルマガなどで情報配信されていた方には非常に有益なツールではないかと思います。次回は全体へのメッセージの配信の仕方や、１：１のトーク方法、効果的なLINE@の使い方等解説いたします。

サイト管理者にとって、問い合わせメールをサーバで閲覧や管理したいという要望は結構あります。
基本的に問い合わせフォームからは管理者へメールを送信するため、メールをPCに保存しておくのは良いのですが、データが消失する場合を考えるとサーバに残す機能があると非常に安心です。

そこで今回紹介するのは、「Flamingo」というプラグインです。「Flamingo」は、「ContactForm7」で行われた、ユーザーとのやりとりの履歴を管理できるプラグインです。簡易的な顧客管理の機能があります。

Flamingoは、「ContactForm7」と連携するので、プラグインを利用するには、「ContactForm7」を事前にインストールして有効にしておいて下さい。「ContactForm7」の使い方については下記の記事をご覧下さい。

お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ

「Flamingo」の特徴

簡易的なCRM（顧客関係管理）機能
問い合わせフォームから送信された内容とメールアドレスを管理
コメント欄に投稿されたメールアドレスを管理
ContactForm7との連携

「Flamingo」のインストール

管理画面から「Flamingo」を検索してインストールして下さい。

flamingo01

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。
flamingo

Flamingo

「Flamingo」の設定

Flamingoには、設定画面はありません。プラグインをインストールして有効にしただけで利用できます。有効化すると、管理画面に下記のようなメニューが表示されます。
flamingo03

「Flamingo」の使い方

「Flamingo」のアドレス帳

アドレス帳にはコメント欄と問い合わせフォームから送信されたメールアドレスが自動的に追加されています。
flamingo03
メールアドレスをクリックすると、連絡先を編集することができます。編集後は「連絡先を更新」をクリックしてください。
flamingo05

「Flamingo」の受信メッセージ

受信メッセージには問い合わせフォーム（ Contact Form 7）から送信されたお問い合せ内容が自動で追加されています。また、アドレス帳からContactForm7のリンクをクリックすると、その相手との履歴を確認することができます。
flamingo04

件名部分をクリックするとメッセージ詳細画面に切り替わりお問い合せの内容が表示されます。
flamingo06

下記の様にメッセージが確認できます。
flamingo07

まとめ

今回は、「Flamingo」を用いた、簡易的な顧客管理の方法を解説しました。今はまだ、連絡先情報とコンタクトフォーム経由のメッセージの管理という簡易的なシステムですが、今後のアップデートに期待できます。また、ContactForm7は送信されたメッセージを保存できませんので、この「Flamingo」を用いて、残しておくのには便利かと思います。ご参考ください。

サイトにSNSへのシェアボタンを設置したからには、OGPの設置もしたほうが記事を拡散してもらうためには良いです。TCDテーマでも既に一部テーマには実装されている機能で、今後全テーマ共通の仕様としていくために現在アップデート準備に入っております。今回は、Facebookの「admins ID」の確認方法などわかりにくい部分もありますのでOGPの解説と併せてご紹介します。

OGPとは

OGPとは「Open Graph protocol」の略称でウェブページの内容をプログラムが把握しやすい形式で書いたものです。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトルやURL、概要、アイキャッチ画像を正しく表示させる仕組みになります。

OGPの設定を行った後はこのように表示されます。
facebook07

また、Facebookの場合、OGPを設定していないサイトはいいね！を押してもらっても、その人のウォールにしか表示されません。しかし、OGPを設定したサイトであれば、「いいね！」を押してくれた人の友達のニュースフィードにも表示されるようになります。

Facebookでの拡散の利点は、検索してサイトに訪れる人以外のユーザーにサイトを知ってもらうことにあります。そのために、OGPの設定はサイト運営者にとって必須項目と言えるでしょう。

WordPressに手動でOGPを設定する

OGPの設定は、サイトの＜head＞内の＜meta＞要素にソースを記述します。投稿記事と、それ以外のページを条件分岐させています。

<?php if (is_single()) { ?>
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php } else { ?>
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<?php } ?>

下記コードがOGPの設定コードになっています。●の部分には各自のコードやURLを記入ください。

<!DOCTYPE html>
<html><meta property='og:locale' content='ja_JP'>
<meta property='fb:app_id' content='●●●'>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if (is_single()){
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
echo '<meta property="og:type" content="article">';echo "\n";
echo '<meta property="article:publisher" content="●●●">';echo "\n";
endwhile; endif;
} else {
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
echo '<meta property="og:type" content="website">';echo "\n";
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (is_single()){
if (has_post_thumbnail()){
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl )){
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {
echo '<meta property="og:image" content="●●●">';echo "\n";
}
} else {
echo '<meta property="og:image" content="●●●">';echo "\n";
}
?>

OGPの必須プロパティ

上記設定コードについて説明していきます。まずは、こちらの4つは必須のプロパティになります。

og:title

　
ページのタイトルを記述します。ブログであれば、記事のタイトルとなります。省略すると、デフォルトでtitle要素の内容になります。

og:type

オブジェクトタイプを記述します。よく使われるのは、下記の項目になります。
・website：Webサイトのトップページを表します。
・article：記事を表します。Webサイトのトップページ以外のページ、ブログの記事などに。
・profile：人物を表します。個人のプロフィールページなどに。

og:url

シェアしたいURLを絶対パスで記述します。指定しない場合は自動で取得してきてくれるようです。

og:image

シェアされたときに表示させる画像があるURLを絶対パスで記述します。また、画像のサイズも指定できます。「content=”●●●”」の黒丸の部分には画像のURLを入れてください。OGP用の画像サイズは「1200×630px」が推奨サイズになります。

OGPのオプションプロパティ

og:locale

サポートする言語の設定です。日本語にするため、「ja_JP」としています。

og:site_name

サイト名を記述します。ここでは、管理画面の「設定」→「一般」で設定されている「サイトのタイトル」を「＜?php bloginfo(‘name’); ?＞」で表示してます。

og:description

ページの説明を記述します。一般的にはmeta descriptionと同じ内容を入れるケースが多いです。

Facebook専用のプロパティ

fb:app_id

FacebookでOGPを使うには、Facebookでadmins IDを取得し、それを記述します。取得方法は次の項目で説明しています。

article:publisher

黒丸の部分にFacebookページのURLを入れます。これを設定しているとFacebookで共有された時に、まだそのページにいいね！していない人が見た時にページに対してのいいね！ボタンが表示されるようになります。

fb:admins IDの確認

チェックしたいアウントでログインしてから以下のURLにアクセスしてみてください。アクセス後、アドレスバーに表示されているURLが自分のプロフィールページのURLなのでコピーします。
https://www.facebook.com/profile.php

このようなURLとなります。
https://www.facebook.com/[ユーザー名]

続いて、こちらのサイトからadmins IDをチェックします。
Find my Facebook ID

facebook01

表示された数字があなたのadmins IDとなります。
facebook02

Facebookの「Open Graph Debugger」で確認

最後に、Facebookで用意されているデバッガで、OGPの記述が正しいかどうか確認します。
OGPの記述だけでなく、それが他のHTMLソースと衝突している場合もエラーになりますが、このデバッガは、何が何とあたっているかなどの原因を教えてくれます

https://developers.facebook.com/tools/debug/

まずは、サイトのURLを入力してください。
facebook04

入力が無い場合や、HTMLの衝突がある場合には、このようにエラーが表示されます。ご自身のHTMLを確認しデバックを行って下さい。
facebook05

成功すると、OGPの設置が可能となります。

TCDテーマのOGP設定画面

上記の通り、OGP設定を手動で行おうと思うと結構な労力です。TCDテーマのFacebook OGP/Twitter Cards設定機能（※一部テーマで実装、順次実装アップデート予定）では、テーマオプションから「fb:admins ID」、Twitterアカウント名を設定するだけでOGP設定ができるようになっています。
facebook06

まとめ

OGP設定をすることで、各種SNSにおいて、視覚的なわかりやすさでユーザーにインパクトを与えることができます。そのため、SNS上で拡散される場合には、OGP設定は必須の設定とも言われます。Facebookなどは仕様も変わりやすく、定期的にOGPのAdmins IDを確認する必要もありますので、これを機に設定を確認してみてはいかがでしょうか。

TCDテンプレートのソーシャルボタン機能では、WEBフォントアイコンデータを使用していますが、文字化けして豆腐文字になってしまっていたりということがあるようです。これは、ワードプレスでWEBフォントを使用する時に起きる原因のためで、今回はその原因や対処法についてまとめましたので、もし表示がされないということがありましたら、記事を参考ください。

snsicon01

サーバーが対応していない

Webフォントのフォーマットは、WOFF（Web Open Font Format）、EOT（Embedded OpenType）、SVG（Scalable Vector Graphics）、SVGZ（gzip圧縮されたSVG）、TrueType、OpenTypeなどがあります。しかし、Webサーバーによっては拡張子が.eotや.otfファイルのものをダウンロードしないようになっていることもあります。ロリポップやさくらサーバー（どちらも2005年あたりに契約の古いサーバ）で確認されています。

対処方法

.htaccessが書ける場合は、フォントを置いているフォルダに以下を書いた.htaccessのファイルを入れます。ただし、.htaccessの編集を誤ると、サイトが表示されなくなることがあります。ですので、.htaccessファイルを編集する前は、必ずバックアップを取って、失敗した時にいつでも復旧できるようにしておいてください。

<ifmodule mod_mime.c="">
    AddType font/opentype         .otf
    AddType font/eot              .eot
    AddType font/truetype         .ttf
    AddType application/font-woff .woff
</ifmodule>

これで拡張子が.eot、.ttf、.otf、.woffのものがフォントとして認識してもらえるようになります。

クロスドメインを許可していない

フォントを利用するサイトのドメインとWEBフォントを設置したサーバのドメインが異なる場合に利用ができないことがあります。

クロスドメイン制約によりFirefoxでFont AwesomeなどのWEBフォントを表示できない
http://blog.lowaivill.com/development/cross-domain/

さくらのサーバーだとIE9以降でwebfontが文字化けする
http://qiita.com/ikedahidenori/items/a33236a40986cd22f37d

対処方法

フォントファイルを置いているディレクトリ直下の.htaccessに以下を追記します。「”」の中で書いているURLを許可したいドメイン名に置き換えてください。

<ifmodule mod_headers.c="">
  <filesmatch "¥.(ttf|otf|eot|woff)$"="">
    Header set Access-Control-Allow-Origin "http://design-plus1.com/tcd-w/"
  </filesmatch>
</ifmodule>

対象ファイルの拡張子を FilesMatch タグで指定し、アクセスを許可するドメインを Header set Access-Control-Allow-Origin にて指定します。すべてのドメインからアクセスを許可する場合はワイルドカード “*” を指定します。

ブラウザがOFF設定になっている

ブラウザの問題により、表示がされないことがあります。これは各使用者の問題のため、制作サイドとしてはどうすることも出来ない問題ですが、変更方法について説明しておきます。

対処方法

・IEの場合
インターネットオプションから、［ユーザー補助］をクリックし、「Webページで指定されたフォントスタイルを使用しない」のチェックをはずします。外しましたらOKをクリックしてください。
sns

・Firefoxの場合
オプションから、［コンテンツ］タブをクリックし、「フォントと配色」の右にある［詳細設定］をクリックします。
snsicon02

詳細が表示されましたら、「Webページが指定したフォントを優先する」のチェックボックスをONにします。
sns03

プロトコルが混在している

「Google Web Fonts」では、フォントを指定する際に「http://～」から始まります。しかし、表示するサイトのURLが「https://～」で始まっていると、Webフォントが表示されません。

対処方法

単純にWebフォントを呼び出している箇所をhttp://からhttps://に置き換えるとフォントが表示されます。しかし、両方混在のまま使用したいという場合もあるかと思いますので、その時は、埋め込みリソースからプロトコル部分（HTTP、：HTTPS）を省略します。ちなみにこれはgoogleが推奨しているコーディングのやり方です。

Googleが推薦するHTMLとCSSのコーディング方法

src: url('http://design-plus1.com/fonts/');
/* ↓↓ */
src: url('//design-plus1.com/fonts/');

まとめ

今回はSNSボタンやWebフォントが表示されない時の原因や対処法について解説させていただきました。webフォントは非常に便利ですが、トラブルが起こった時にどうしたらいいのかと手間取ってしまうことがありますので、その際にはこちらを参考ください。また、TCDのソーシャルボタン機能に関しての記事はこちらにありますのでよければご覧下さい。
TCDテーマに新機能！ソーシャルボタン＆クイックタグのご紹介

Webフォントって良く聞きますが、難しそうと思っていたり、日本語に対応する良いWebフォントがなかったりしていて、導入を後回しにしていた方も多いかと思います。今回は、そんなWebフォントの基本操作と設定方法について解説しました。思いのほか簡単に設定できますので、サイトの印象を変えたい場合等は、一度試してみてはいかがですか。

Webフォントとは

Webフォントとは、CSS3から新たに追加された仕様です。CSSを使ってブラウザ上で任意のフォントを表現できる機能になります。CSS3の普及に伴ってWebフォントの開発は加速し、今やWebデザインを行う上では欠かせないテクニックとなっています。WebフォントはサーバーにアップロードしたフォントデータをCSSで呼び出して利用するので、ユーザーの閲覧環境に依存せず、誰が見ても同じフォントで表示されるようになり、ブラウザが違う場合や、スマホで見た場合でも指定したフォントを表示することができるようになりました。このようにWebフォントは、制作したWebデザインを正確に出力するために欠かせない機能となっています。

尚、Webフォントは著作権が発生します。多くの場合、商用・個人関係なく利用できるWebフォントが多いのですが、利用の際にはチェックしておくことをお勧めします。

Webフォントのメリット・デメリット

メリット

・ユーザーの環境に依存せずWebデサインに合ったフォントを利用できる。
・デザイン性の高い文字も画像ではなく、テキストのためSEOに有利となる。

デメリット

・Webフォントのデータを読み込むための時間がかかる。
・日本語Webフォントは種類が少なく、データも重い。

使用手順

Webフォントの設定は簡単で、CSSコードとHTMLコードを記述するだけで実装出来ます。使用手順以下の通りになります。

利用したいWEBフォントファイルを用意する
CSSでフォントファイルを指定する
CSSでフォントを適応する

利用したいWEBフォントファイルを用意する

まずは、利用するWebフォントですが、GoogleでWEBフォント検索してもらってもいいですが、今回は最も有名なGoogle Fontsを例に紹介して行きます。

Google Fontsをクリックすると、下記の画面が表示されます。

webfont01

画面には4つのタブがあり、好みに合わせて4通りの表示形式を設定することができます。また、「Preview Text:」に文字を入力するとブラウザ上に任意の文字を表示させることができます。

webfont02

・Word（単語表示）
・Sentence（文表示）
・Paragraph（段落表示）
・Poster（ポスター表示）

今回は、「Design-plus」という文字をテキストで入力し、「Lobster」というスタイルを選択しました。
webfont03

CSSでフォントファイルを指定する

続いて、CSS側でフォントデータを指定します。

まず、指定用の、タグを取得するには「Quick-use」ボタンをクリックします。
webfont04

下記のような画面が表示されますので、「フォントの太さ」「文字セット（基本はLatinでOK）」を設定します。
webfont05

設定が出来たら、テーマにCSSを読み込みます。方法は、以下の3通りあります。
・Standard（HTMLで読み込み）
・@import（CSSで読み込み）
・JavaScript（JavaScriptで読み込み）

webfont06

基本的には、header.phpのheadタブの間にStandardタブにある以下のようなコードを挿入します。

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

もしCSSで読み込みたい場合には、style.cssなどの先頭に@importタブにある以下のようなコードを挿入します。

@import url(https://fonts.googleapis.com/css?family=Lobster);

CSSでフォントを適応する

最後に、style.cssなどにスタイルを記入します。

まずは、ブラウザの開発ツールなどでフォントを変更したい部分のCSSセレクタを確認します。ブラウザの開発ツールについてはこちらの記事を確認ください。

サイト検証・カスタマイズに便利なChromeデベロッパーツールの基本的な使い方

webfont07

実際に導入すると、こちらのようなフォントが、
webfont08

この用に変更されました。
webfont09

まとめ

今回はWebフォントの設定方法について解説させていただきました。google fonts以外にも、TypeSquareやFONTPLUSなどのWebフォントもありますので、色々とお試し下さい。また、もし設定しても、Webフォントが表示されないということがありましたら、前回の記事、SNSボタンやWebフォントが表示されないときのよくある原因と対処法が参考になるかと思いますので合わせて活用いただければ幸いです。

画像が多くなると、読み込み速度が遅くなりますが、今回紹介する「BJ Lazy Load」は、画面のスクロールに合わせて画像を読み込んでくれるプラグインです。ユーザーに見える部分以外の画像読み込みを遅延させることで、画像の表示速度をあげる機能になっています。それではプラグインの解説をしていきます。

「BJ Lazy Load」のインストール

管理画面から「BJ Lazy Load」を検索してインストールして下さい。

BJ03

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。
BJ04
BJ Lazy Load

「BJ Lazy Load」の設定

プラグインをインストールし、有効化したら、設定の項目に「BJ Lazy Load」が追加されていますので、確認して詳細設定を行って下さい。

BJ06
以下の画面が設定画面になります。
BJ05

Apply to content
コンテンツに遅延ロードさせるかの設定です。「Yes」にしないとこのプラグインが作動しません。

Apply to post thumbnails
サムネイル画像に遅延ロードさせるかを設定です。

Apply to gravatars
Gravatar（ブログへの投稿やコメントの際に名前の横に表示される画像）を使ったコメント欄の画像を遅延ロードさせるかの設定です。

Lazy load images
画像ファイルを遅延ロードさせるかを設定です。必ず「Yes」にしてください。

Lazy load iframes
ソーシャルメディアやアフィリエイトなどのiframeで表示させているコンテンツを遅延ロードさせるかの設定です。

Theme loader function
LazyLoadを起動するコードを記述する場所の指定です。通常はデフォルト設定の「wp_footer」で起動しますが、機能しない場合は「wp_head」に変更してみてください。

Placeholder Image URL
遅延ロードで画像を読み込むまでの間に表示される画像を指定します。基本的には何も入力しなくて良いです。その場合は空白ですが、すぐに画像が読み込まれますので問題ありません。表示させる場合は画像のURLを記入します。

Skip images with classes
遅延ロードさせたくない画像のクラス名を指定します。

Threshold
読み込みを開始する数値を画像までの距離（ピクセル）で指定します。スクロールに遅れなく表示させたい場合は 400 ぐらいにしておくと、遅延なく画像が表示されます。

これが設定画面になります。各項目は英語になっておりますが、説明を読み設定下さい。基本的には設定を変えず、そのままの状態でも使用できるかと思います。

TCDテーマでの効果の検証

「BJ Lazy Load」の設定ができましたら、効果の検証を行ってみます。今回は、ファーストビューで写真だけが表示されるWordPressテーマ「photek (tcd024)」でテストした結果となります。速度の測定にはGTmetrixというアプリケーションを利用しました。

プラグイン設定前

こちらがプラグイン設定前の値になります。Page load time(ページ読み込み時間)が16.9sという値になりました。
BJ01

プラグイン設定後

プラグイン設定後の値になります。Page load time(ページ読み込み時間)が14.1sとなりました。
BJ02

上図のように、Page load time(ページ読み込み時間)：16.9s　→ 14.1sとなり、2.8秒の速度アップが数字上でました。今回のように、画像の多いサイトなどには効果的なプラグインになると思います。数字以上に、体感スピードが早くなっているように感じます。

まとめ

「BJ Lazy Load」のプラグインを用いることで、ページの読み込みスピードがあがり、ユーザビリティが向上します。その結果、ページの離脱率が下がる事でSEO効果もあがると言われています。しかしながらプラグインを多様しすぎると、それだけで表示速度が落ちる事もありますので、ご注意して使用ください。

7月度の全投稿ページ（固定ページ・カスタム投稿のページ除く）から、アクセスの多かった記事のランキングをご紹介します。また、人気記事に関連する記事なども合わせて紹介いたします。

1位「WordPressを初導入したらまず最初にすべき24の設定」

http://design-plus1.com/tcd-w/2011/04/wp-liteuser.html

1位は不動のこの記事です。この記事では、WordPressは、その機能の豊富さに、始めて利用する初心者ユーザーは驚くことがあります。しかし、実際にいつも使うメニューというのは決まってきますし、初期設定も（人によりますが）ほんのわずかの設定だけで事足りることがほとんどです。当記事では、どなたにもお使いいただける「ココだけはおさえておきたい」初期設定をご紹介しています。

2位 Google Mapsの表示にはAPI登録が必須になりました

http://design-plus1.com/tcd-w/2016/06/google-maps.html

2016年6月22日から新規サイトでGoogle Mapsを使用する場合はAPIキーが必須になりました。突然地図が表示されなくなったとお困りの方も多いのでないでしょうか。今まで既存サイトで使っていたGoogleMapsは、今のところはAPIキー無しでも表示するようです。ただし、環境によっては表示されない現象が発生しているようで、TCDテーマでも随時対応させていただいております。地図が表示されずにお困りの方はこちらの記事をお役立てください。

3位企業内コミュニケーションツールには「Slack」がおすすめ＜操作編＞

http://design-plus1.com/tcd-w/2015/10/slack03.html

3位となったのはコミュニケーションツールSlackについての記事になります。Slackとは、一言でいうと社内等でのコミュニケーションを行うツールです。Slackはチャットでのやりとりが中心となっており、海外では「Eメールの時代は終わった」と言われるように、Slackやチャットワーク、Hipchatのようなチャットツールが多くの会社で使われてきています。
弊社でもSlackを導入することで劇的に業務のスピードが速くなり、その結果、TCDシリーズのリリース速度のUPにつながりました。そんなSlackの使い方を解説しています。
また、操作編だけでなく、登録編、画面構成編も合わせてご覧下さい。
Slack<登録編>
Slack<画面構成編>

4位　「コピペでOK！「Contact Form 7」を使ったかっこいいお問い合わせフォームテンプレート集」

http://design-plus1.com/tcd-w/2015/09/contactform7.html

こちらの記事では、カスタマイズをしたフォームを用意しました。コピペでOKになるようにしていますが、ご自身で改良しながら活用下さい。このようなテンプレートを用意しております。

デフォルトフォーム
一般企業用のフォーム
採用情報用のフォーム
商品問い合わせフォーム
資料請求用のフォーム
メールマガジン用のフォーム
説明会用のコンタクトフォーム

5位豊富なデザインのGoogleMapが簡単に使えるWordPressプラグイン「TCD Google Maps」

http://design-plus1.com/tcd-w/2016/01/googlemap.html

4位は、TCDプラグイン「TCD Google Maps」に関する記事です。

2016/7/7 Ver1.1にて10種類追加使用出来るMAPのデザイン数が増えています！

Google Mapsをデフォルトのデザインで利用する方も多いと思いますが、カスタマイズするとなると少々の知識が必要になるためそのまま使うという方が多くいます。そんな時に便利なのがWordPressプラグイン「TCD Google Maps」です。豊富なデザインが揃っており、サイズやズームの度合い、住所を管理画面から変更し、ショートコードで記事中に簡単に入れることが出来ます。

また、2位の記事でもご案内させていただきましたが、GoogleMapは2016年6月22日から新規サイトでGoogle Mapsを使用する場合はAPIキーが必須になりました。こちらに登録方法を案内させていただいておりますので、ご覧下さい。
http://design-plus1.com/tcd-w/2016/06/google-maps.html

５位「お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ」

http://design-plus1.com/tcd-w/2011/03/contact-form-7.html

「WordPressを初導入したらまず最初にすべき24の設定」の中でも紹介していますように、「Contact Form 7」はWordPressの代表的なプラグインになります。お問い合わせフォームはサイトのゴールになりますので、しっかり設置しましょう。

また、先日のバージョンアップで 4.4 になりましたが、アップデート後に管理画面やお問い合わせフォームにエラーが表示されるようになった方もいるかもしれません。簡単に解消できますので、詳しくはこちらを確認ください。
http://contactform7.com/ja/configuration-errors/

6位　InstagramをWordPressと連携する方法

http://design-plus1.com/tcd-w/2016/07/instagram.html
SNSの連携はもはやファンブログや企業サイトでも欠かせないツールとなっています。有名なSNSの中には、Facebook、Twitter、Instagramがあります。その中でも特にInstagramは世界で5億人、国内でも1000万人を越え、特に20代の女性を中心に勢いを増しているSNSです。弊社への問い合わせでも「Instagramとの連携はできますか？」などの問い合わせが増えて来ており、記事へのアクセスも多く今回6位となりました。

7位　「固定ページに特定カテゴリーの投稿一覧を表示させる方法」

http://design-plus1.com/tcd-w/2015/12/custom01.html

固定ページの中に、例えばお店のお知らせ記事の一覧や関連の記事一覧を載せたい時ってありますよね。この記事では、特定のカテゴリーの記事一覧を固定ページにショートコード入力だけで表示させる方法をご紹介しています。表示件数も制御できるので、知っていると意外と便利なテクニックです。

8位　「引っ越しも楽々？　WordPressで構築したサイトを丸ごとコピーできるプラグイン「Duplicator」」

http://design-plus1.com/tcd-w/2014/10/duplicator.html

「Duplicator」というプラグインは、現在運用しているサーバの記事はもちろん、テンプレートやプラグインの状況を含めて、まるごとそのまま別の環境にコピーすることができます。やはり、サイトを他のサーバに引っ越したり、テスト環境から別の環境にコピーするという方が多いということですね。

おすすめの使い方として、ワードプレスをカスタマイズする際に別のサイトを立ち上げてこちらのプラグインでコピーを行い、テスト環境を作成するということがおすすめです。というのもワードプレスでは「テーマの編集」などでカスタマイズを行いミスがあるとテーマの編集画面からは戻る事ができなくなるためです。FTPソフトで問題のファイルを戻す事で修正はできますが、WordPressが初めてという方にはハードルが高そうです。

「TCD LABO」でカスタマイズ方法を紹介していますが、バックアップを確実にとり、上記のような工夫をしながらカスタマイズを行ってみて下さい。

9位　「お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ」

http://design-plus1.com/tcd-w/2011/03/contact-form-7.html

10位　「WordPressテーマのインストール方法」

http://design-plus1.com/tcd-w/2010/10/theme-install.html

初めてテーマを変更したり、久々にテーマを変える時の備忘録として無くてはならない記事です。WordPressテーマ（テンプレート）のインストール方法を解説しますのでこれを気にテーマを変更してみてはいかがでしょうか？

まとめ

7月度はGoogleMapについてのお問い合わせを多くいただきました。Googleや各種SNSは突然仕様が変わることがあり、それをいち早くキャッチし、ユーザーのみなさまにお届け出来ればと思っております。また、インスタグラムに関しての記事も多く閲覧いただいており、人気の高さを感じる7月でした。8月も暑さに負けず良質な記事をアップしていきますのでよろしくお願い致します。

本日は面白いプラグインを見つけましたのでご紹介します。LINEやFacebookメッセージのように会話形式でブログを表示できる、プラグイン「Speech Bubble」です。このプラグインを使うとこのような表示ができるようになります。

デザインプラス

今日もブログを読んでいただきありがとうございます。

ユーザー

今日はどんなプラグインなんだい！？

このように、Lineのように会話風にブログ記事を書く事ができるようになります。それではインストール方法や設定方法を解説していきます。

「Speech Bubble」のインストール

管理画面から「Speech Bubble」を検索してインストールして下さい。

bubble01

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。

Speech Bubble

「Speech Bubble」の使い方

プラグインを有効化するだけで細かい設定は必要ないのもこのプラグインのいいところです。どのように表示するのかというと、いつも記事を書くように、「投稿」⇒「新規投稿」へ移動してください。

そこに、下記の記入をするだけです。

[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”デザインプラス”] 今日もブログを読んでいただきありがとうございます。[/speech_bubble]

[speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”ユーザー”] 今日はどんなプラグインなんだい！？[/speech_bubble]

上記のショートコードを記事に記載いただくと、最初に表示したものがでるかと思います。

ショートコードの解説

それではショートコードの中身を解説していきます。

セリフ変更

セリフを変更するには、下記の●の部分を変更いただくだけで変更可能です。
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”デザインプラス”] ●●●●[/speech_bubble]

デザインプラス

会話を変更するのはこのように簡単にできます。

名前の変更

名前を変更するには、下記のデザインプラスとなっている部分をを変更いただくだけで変更可能です。
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”デザインプラス”]今日もブログを読んでいただきありがとうございます。 [/speech_bubble]
↓
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”夏男”]もうすぐ夏休みですね。デザインプラスは8月13日（土）〜8月16日（火）が夏期休業になります。
8月16日（火）が夏期休業になります。 [/speech_bubble]

デザインプラス

thinkは名前のとおり「考える」デザインになっています。

ユーザー

次はどのTCDテーマにしようかな〜

と、こんな形で様々な吹き出しがありますのでお好みのものをお使いください。

人物の向きと、吹き出しの種類の変更

【type=”L1”】を変更することで向きを変更出来ます。

デザインプラス

L1をR1に変更してみました。

【type=”L2”】を変更することで考える吹き出しに変更出来ます。

デザインプラス

L1をL2に変更してみました。

アイコン画像の変更

デフォルトの設定では、こんなシンプルな感じのアイコンになっていますが、設定の変更によって好きな画像や写真に変更することができます。
変更方法ですが、FTPツールを利用して、直接画像をアップロードします。

また、おすすめのFTPソフトの紹介はこちらでしています。
初心者におすすめの無料FTPソフトベスト3

それでは変更方法について解説します。
①使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。
例：ドメイン＞public_html＞wp-content＞plugins＞speech-bubble＞img

②使用したい画像（jpg, png, gif, svg, tif）を、imgフォルダ内にアップロードします。(ファイル名は半角英数字を使ってください）

③Speech Bubbleのショートコードの【icon=” ○○.jpg“】の部分で、先ほどアップロードしたファイル名を指定します。

これでお好みのアイコンで会話風のブログを作成することができます。

まとめ

本日はちょっと面白いプラグイン「Speech Bubble」を紹介しました。ちなみにこのプラグインの優れているもうひとつの点は、会話風の内容の部分がテキスト表示ということです。テキスト表示になることで検索ワードとしてSEOに関係してきます。非常にありがたいですね。最後に、この記事を書いてみて思うのは、会話風のブログを書く場合センスが必要かもしれませんね。実は非常に設定は簡単なプラグインなのですが、記事の解説以上に会話を作る事に苦労しました。。。

TCDテーマでは、お客様の要望やよりよい商品開発を行うため、アップデートを都度行っております。

通常のテーマアップデートに関しましては、こちらの記事を参考に簡単にアップデートを行っていただけますが、
http://design-plus1.com/tcd-w/faq/theme-update.html

独自のカスタマイズをされているお客様からは、以前より「CSSやPHPなどのファイルの変更・修正をした場合に、アップデートした内容を各ファイルのどこを変更(追加・修正)したかサイト上に記載するようお願いできないでしょうか？」という依頼がございます。

TCDとしては、カスタマイズはお客様の責任において実施して頂くことをお願いしておりますため、変更箇所の細かい記載は、これからも控えさせていただきます。しかし、そういった要望があるのは、事実で、今回は、少しでも更新作業を簡単にするための、マージソフトを紹介させていただきます。

マージソフトとは

マージとは、テキストやソースコードファイルを素早く比較し、差異の有無を検出しファイルを結合することです。Diff（ディフ：ファイル比較）ソフトとも言われ、2つのファイルを比較するソフトウェアのことをいいます。この何行目のどの部分に差異が生じているのか表示するソフトを利用すれば、更新された新しいファイルのどこに改変・修正があったのかの差分を目視でチェックすることができます。また、ファイル名やフォルダ名、タイムスタンプ情報を比較して異なる場合に検出したり、一致する行または差異のある行を色付きのハイライト表示したり、空白（スペース）や改行コードを無視したり、比較した実行結果をCSV、HTML、XML形式で出力したりなど、各ツールによって機能が用意されています。

それではおすすめのマージソフトをご紹介させていただきます。

オンラインマージソフト「Mergely（マージリー）」

diff01
http://mergely.com/

Mergely（マージリー）はオンラインで差分を比較できるソフトです。直感的に操作でき、ダウンロードも不要なのでおすすめです。

「Mergely」の使い方

テキストの比較

使い方はとても簡単です。比較したいソースコードやテキストをコピーして左右に貼り付けます。今回は、左に元ファイル。右に更新されたファイルとして説明していきます。
diff02

左右のファイルに違いがあれば、下図のように、ハイライトして差分を教えてくれます。
diff03

また、色を変更したい場合は、「Options」→「Colors…」より変更できます。
diff06

diff07

マージ機能

マージ機能とは簡単に言うと左右のソースコードを結合してくれる機能です。非常に便利ですが、かならず元のファイルのバックアップは残すようにしてください。使い方ですが、左右のコードを入れ替えたり、クリアしたりしますが、まずは下図のように差分のある箇所を表示ください。
diff04

差分のある箇所には右矢印がでているのがわかります。元にファイルを戻したい場合はこちらをクリックしてください。
diff08

逆に元ファイルに変更箇所を追加したい場合は、更新ファイルの左矢印を押してください。
diff09

以上の操作で変更箇所を簡単に追加したり、元に戻したりすることができます。

TCDテーマのアップデート方法

それでは、最後に今回のマージソフトを使用し、TCDテーマをアップデートする方法を解説いたします。

更新ファイルのダウンロード

update1
【ダッシュボード】より、
①の【テーマ更新】をクリックし更新情報をご確認ください。
②の【最新版のテーマをダウンロードする】をクリックし、最新版のテーマファイルをダウンロードします。

アップデートの必要ファイルを確認

次に、テーマの、どのファイルが変更になったかを確認ください。
http://design-plus1.com/tcd-w/update

diff10

FTPソフトからダウンロード

FTPソフトを利用して、現在のファイルをダウンロードします。おすすめのFTPソフトに関しては、こちらの記事を参照ください。
初心者におすすめの無料FTPソフトベスト3

テーマファイルは基本的には下記のファイルに保存されているかと思います。
/●●●.com/public_html/wp-content/themes/テーマ名

ここから変更のあるファイルをローカルフォルダへダウンロードします。
diff11

差分の確認とマージ

Mergely（マージリー）を使用し、さきほど解説した方法で、左に元ファイル、右にアップデートファイルを貼付け、差分の確認を行います。追加が必要な場合は、マージを行い更新ファイルを元のファイルに、追加し保存してください。

FTPでアップデート

ファイルの変更ができましたら、先ほどダウンロードした手順と逆の方法で、FTPソフトでアップロードを行うとアップデートが完了します。

まとめ

以上で、マージソフトの解説とマージソフトを使用したTCDテーマのアップデート方法の解説を終了します。TCDテーマはカスタマイズが自由になっておりますが、カスタマイズされている場合、そのままアップデートしてしまうとカスタマイズ箇所が消えてしまいます。そんな時は今回のようなマージソフトを使い、変更箇所のみをアップデートしてもらうことで効率的にアップデートができるようになります。よければお使いください。

WordPressはテーマオプションやウィジェット機能により、ページの制作が簡単にできるのが利点ですが、更にコードを書かずにレイアウトが出来るようになったらいいという要望もあります。今回は固定ページのみですが、無料で使用でき、基本的なテキスト入力や画像をグリッドでレイアウト可能なプラグイン「beaverbuilder」を紹介します。ちなみに有料版では、投稿やカスタム投稿タイプ、ボタンなど様々な機能があります。

プラグインについて知りたい場合は、こちらの紹介動画をご覧下さい。

「beaverbuilder」のインストール

管理画面から「beaverbuilder」を検索してインストールして下さい。
bb01

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。

beaverbuilder

「beaverbuilder」の使い方

プラグインを有効化し、「固定ページ」⇒「新規投稿」へ移動してください。そうすると下記の図のように、ページビルダーのタブが表示されます。タイトルを入力し、ページビルダーを選択ください。

bb03

ページビルダーを選択すると、有料コンテンツの紹介が表示されますので、取り消しを押して下さい。有料のライセンス契約されている場合は、レイアウトテンプレートを選択できます。

bb04

下記がページビルダー画面になります。

bb05

「行のレイアウトかモジュールを選択し、始めましょう！」とありますので、右のタブから選択し、ドラッグ&ドロップで配置してください。
bb06

例えば、２カラムを配置するとこのような形になります。
bb07

カラム自体を編集をしたい場合は本のようなマークの部分をクリックし、カラムを削除したい場合は、×印をクリックしてください。
bb14

カラムの編集では、テキストや背景、枠線のカラーの設定や、マージンの設定なども行えます。
bb08

続いて、基本モジュールを配置してみます。基本モジュールでは、HTMLやテキスト、画像や動画などを配置することができます。
bb21

例えば、HTMLを配置すると、下図のようにHTMLタグが使用できます。
bb11
bb12

また、カラム同様に、マージンなどの設定も簡単にすることができます。
bb10

続いて、画像の設定です。こちらも基本モジュールから「画像」をドラッグ＆ドロップで配置します。画像ファイルは、メディアファイルから選択するか、URLで直接指定するかによって画像を設定することができます。更にキャプションをつけたり、リンクを画像に設定することも簡単にできます。
bb13

最後にモジュールの中には、ウィジェットなども配置することができます。TCDテーマオリジナルのウィジェットも反映されますので、標準的なカレンダーだけでなく、デザインされた記事一覧などもウィジェット選択覧に表示されます！

bb22

bb23

設定してみると、このようになります。ウィジェットによっては、最低表示幅がある場合もありますので、カラムを設定している場合は、サイズにご注意ください。
bb15

全ての設定が完了したら、ページ上部の「完了」を選択し、編集を確定させます。

bb16

以上で固定ページの作成が完了しました。全て直感的に操作が出来、固定ページを作成するために必要なことはほぼ出来るほど、高機能です。本当に便利ですが、更に驚くことは、「beaverbuilder」を無効にした場合です。

「beaverbuilder」を無効にした場合

通常、ページビルダー系のプラグインを使用した場合、そのプラグインを外すと、ショートコードがたくさん残ってしまい、ページの修復が大変となります。しかし、このプラグインの場合はプラグインを外した場合もHTMLタグによって残っていますので修正も簡単にできるかと思います。ただし、カラムの設定やウィジェットの設定などは外れてしまいますのでご注意ください。

「beaverbuilder」にて設定したページ
bb24

プラグインを無効にした場合、このようにページが残ります。
bb25

まとめ

以上で「beaverbuilder」の解説を終了します。ページビルダー系では、これ以上のプラグインはないのではないでしょうか。日本語にも対応し、無料で使用でき、操作も簡単かつ高機能です。さらにプラグインを外した場合もショートコードなどのゴミも残らずに使用出来ます。気になる点があるとすると、多少プラグインの操作性が重いと感じる事がありますが、Xサーバーなどを使用していれば問題なく使用できるかと思います。もし、直感的にページ作成をしたいという場合はこちらを使用してみてください。

また、公式ページではデモ体験などもできますので、試してみてもいいですね。
https://www.wpbeaverbuilder.com/?fla=626

WordPressでは記事を公開する際に、公開状態をパスワード保護に設定すると、パスワードを知っている人のみが閲覧できるようにすることができます。しかし、保護ページはタイトルに「保護中」と表示され不格好だったり、テキストの変更ができないなど不便な点があります。そこで今回は、そんな保護ページ部分をカスタマイズし、自由にテキストなどを変えれる方法を紹介いたします。

投稿記事をパスワード保護にする方法

まずはおさらいも兼ねて投稿記事を保護する方法について解説します。

「投稿ページ」⇒「新規投稿」より記事を作成します。通常であればすぐに「公開」ボタンを押す所ですが、パスワード保護をかけるには、「公開状態」の編集を選択ください。すると下記の画像のようなパスワード入力画面が表示されますので、設定し、公開します。これでパスワードがかかった記事ができます。

pass

保護ページをカスタマイズする方法

パスワードをかけた投稿記事を確認すると、下図のように表示されます。
pass02

パスワード保護した記事は図のように、タイトル前に「保護中:」の文言が追加され、「このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。」という文章の下にパスワード入力欄が表示されます。このままの状態でも、このページが閲覧するためにパスワードが必要な記事だということはわかります。

ただし、もう少しわかりやすくしたい場合や文章を任意のものに変更したいという場合は、functions.phpを編集することカスタマイズすることができます。

functions.phpは記述を間違えるなどのエラーを起こすと画面が真っ白になり、修復には時間がかかります。カスタマイズの際には必ずバックアップをとってから操作ください。また、テーマのカスタマイズで起きた問題に関しましては、サポート対象外となってしまいますのでご了承ください。

保護中の文言を削除する方法

「保護中：」という文字列を消すには、functions.phpに次のコードを書き加えてください。functions.phpの場所は、TCDのテーマファイルであれば、「public_html/wp-content/themes/テーマ名」にあるはずです。基本的にはfunctions.phpの一番最後に貼付けるのがおすすめです。

add_filter('protected_title_format', 'remove_protected');
function remove_protected($title) {
       return '%s';
}

このように保護中が表示されなくなりました。
pass03

参考記事：WordPress – 保護ページタイトルから「保護中」を削除 | technolog.jp

テキストを変更する方法

続いて、「このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。」というテキストを編集していきます。先ほどの保護中と同様に下記のコードを追加してください。

function my_password_form() {
  return
    '<p>ここに好きなテキストを入力します<p>
    <form class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post">
    <input name="post_password" type="password" size="24" />
    <input type="submit" name="Submit" value="' . esc_attr__("パスワード送信") . '" />
    </form>';
}
add_filter('the_password_form', 'my_password_form');

このようにテキストの表示が変更になりました。formタグ内は送信に重要な項目なので誤って変更しないように注意ください。
pass04

Cookieの期限を変える

最後に、Cookieの有効期限を変更方法を解説します。このパスワード保護機能はデフォルト設定では、パスワードのCookie保存期限が10日に設定されています。そのため、一度パスワード入力すると、10日間はパスワードの入力がなくても記事が表示されてしまいます。そこで最後にこのCookie保存期限を短くする方法を説明します。

functions.phpに以下のコードを追加してください。

function custom_postpass_time() {
    require_once ABSPATH . 'wp-includes/class-phpass.php';
    $hasher = new PasswordHash( 8, true );
    setcookie( 'wp-postpass_' . COOKIEHASH, $hasher->HashPassword( wp_unslash( $_POST['post_password'] ) ), time() + HOUR_IN_SECONDS, COOKIEPATH );
    wp_safe_redirect( wp_get_referer() );
    exit();
}
add_action( 'login_form_postpass', 'custom_postpass_time' );

今回の設定では、1時間に設定していますが、時間を変更する場合は、「HOUR_IN_SECONDS」の部分を、10分であれば「600」など、秒数を指定しすると設定できますし、１日にする場合には「DAY_IN_SECONDS」と設定ください。

参考
Custom Post Password Cookie Expiry Time – Gists – GitHub
https://gist.github.com/3259814

まとめ

以上で解説を終了します。パスワード保護ページは特定の人にみてもらいたい記事などには便利な機能ですが、少し不格好なのがネックです。こちらの記事を参考にお好みの表示に変更してみてください。ちなみにパスワードで保護する場合というのは特定の人に見てもらいたいという場合と、記事を確認してもらいたいという場合があるかと思います。記事を確認してもらいたい場合等でしたら、プレビュー状態の記事をみることができるようになるプラグインなどがございますので、こちらも参考ください。
下書き記事を第三者が確認できるようにするプラグイン「Public Post Preview」

使っているサーバー環境にもよりますが、Wordpressの「管理画面>メディア」からアップロードできるファイルの最大サイズにはあらかじめ限界を設けられています。

たとえばこのように30Mと限界があり、仮にこれより大きいサイズのPDFがあれば上限をアップできなくなります。
Wordpressにアップロードできるファイルの最大サイズを上げる3つの方法

この場合どれだけ圧縮してもアップロードできないので、上限を引き上げるカスタマイズができないかという質問がございましたので今回その方法を3つご提示させていただきます。

1、テーマファイル（Function.php）をカスタマイズ

@ini_set( 'upload_max_size' , '50M' );　//アップロードできる最大ファイルサイズ
@ini_set( 'post_max_size', '50M');　//ポストデータに入る最大ファイルサイズ
@ini_set( 'max_execution_time', '300' );　//スクリプト実行時間の最大

このコードをFunction.phpを追加することでアップロードできる最大サイズを上げることができます。上記では50Mに設定しました。

ただし記述を誤ると管理画面が真っ白になりますので、必ずバックアップをとるか子テーマに記述しましょう。

2.htaccessに追記する

php_value upload_max_filesize 50M　//アップロードできる最大ファイルサイズ
php_value post_max_size 50M　//ポストデータに入る最大ファイルサイズ
php_value max_input_time 300　//ユーザー側のアップロードを受け付ける最大秒数
php_value max_execution_time 300　//スクリプト実行時間の最大

ルートディレクトリにある.htaccessに上記のコードを追記します。
.htacccessはWordpressのデフォルトの重要な記述がたくさんありますので、編集の前にバックアップを必ず取っておきましょう。
サーバーによっては.htaccessだけ別の場所にあり、管理画面から行えることもあります。

3、php.iniを作り編集する

upload_max_filesize = 50M　//アップロードできる最大ファイルサイズ
post_max_size = 50M　//ポストデータに入る最大ファイルサイズ
max_execution_time = 300　//スクリプト実行時間の最大

php.ini-developmentがディレクトリに含まれていれば、それをコピーし名前を変えてphp.iniとし追記すれば簡単にできます。なければ一度php.txtをローカルのアプリケーションで作りファイルをアップロードした後名前を変えて作りましょう。

あれ、WordPressの画面が真っ白！！

いままでの投稿記事は！？固定ページは！？
いままでの苦労が水の泡。。。

と、WordPressを使用している方は一度は経験があるのではないでしょうか？

本日はそんないざという時のための対処方法を解説します。

まずは深呼吸

画面が真っ白になって、一番してはいけないのは慌ててサイトをいじくり回し修復不可能にしてしまうことです。まずは深呼吸して落ち着きましょう。

サイトが真っ白になった原因

画面が真っ白になる理由は、プログラムに問題があるからです。大抵の場合以下が真っ白になった原因です。

カスタマイズしたテーマのPHP（特にfunctions.php）
WordPressアドレスの修正ミス
インストールしたプラグインによる原因

ちなみに画面は実は真っ白ではありません。本来は画面上にエラーメッセージが表示されているのですが、WordPressでは、デフォルトでエラーメッセージを表示しないよう設定されています。その設定を変更し、エラーメッセージを表示させましょう。

エラーメッセージを確認する

エラーメッセージを表示するには、WordPressの設定ファイル（wp-config.php）を修正します。
FTPソフトから設定ファイル（wp-config.php）をダウンロードしてください。

error01

おすすめのFTPソフトはこちらを参考ください。
初心者におすすめの無料FTPソフトベスト3

WordPressインストール先のフォルダにある設定ファイル（wp-config.php）を開いて、次のコードを探してください。

エラーメッセージの表示／非表示を切り替えるコード（wp-config.php）

define('WP_DEBUG', false);

初期設定では「WP_DEBUG」が「false」に設定されているので、「false」を「true」に変更してください。

エラーメッセージを表示する設定

define('WP_DEBUG', true);

もし、この記述がないときは、末尾にあるrequire_once(ABSPATH . ‘wp-settings.php’);よりも前に追加してください。

エラーを修正する際には、「WP Maintenance Mode」などを利用し表示をメンテナンス画面にすることをおすすめします。
簡単！おしゃれにサイトのメンテナンス中を知らせる画面を表示させるプラグイン「WP Maintenance Mode」

PHPが間違っていないか確認

エラーが表示されたところで、原因を解決していきます。主にエラーには下記の３つがあります。

Parse error: syntax error, unexpected …　

と表示される場合には、構文エラーです。例えば、改行や括弧の括りがおかしくないかなど確認しましょう。

Fatal error: Call to undefined function …

未定義の関数が呼び出されたというエラーです。関数が記述されているべきファイルが読み込まれていなかったり、ファイルが破損していた場合に発生します。

Fatal error: Cannot redeclare …

定義済みの関数を再度定義しようとした場合に発生するエラーです。プラグイン同士が同じ関数名を利用しようとした場合などに発生します。

プラグインを確認

上記エラーメッセージの
①Fatal error: Call to undefined function …
②Fatal error: Cannot redeclare …
が発生した場合はプラグインが原因である可能性が高いです。

プラグインを有効化してすぐに真っ白になった場合は①が原因。
WordPressのバージョンアップで真っ白になった場合は②の原因が考えられます。

どちらにしても、プラグインを停止することでエラーから回復することが出来ます。

もし、管理画面に入れない場合はFTPソフトより、「plugins」のフォルダの名称を変更します。これにより、プラグインを強制停止状態にできます。

その後、①の場合は、プラグインを削除。②の場合はダウングレードや別のプラグインに変更する。最後にフォルダ名を元に戻して下さい。

以上でプラグインが原因の場合のエラーは解決されるはずです。もしこれで解決出来ない場合は、キャッシュ系のプラグインが原因の可能性があります。

キャッシュファイルを確認

キャッシュ系のプラグインを入れている場合は、それが原因になることがあります。カスタマイズなどをしておらずに突然真っ白になった場合は、キャッシュファイルに問題があるかもしれません。プラグインを確認し、キャッシュファイルを削除してみてください。

まとめ

以上でWordPressの画面が真っ白になった場合の対処法についての解説を終了します。解決するためにはまずは焦らない事が重要です。そしてエラーメッセージを表示し、原因を探して下さい。どうしても修復が出来ない場合は、テーマをアップロードし直す事をおすすめします。そのためにも普段からバックアップをとることを習慣にしてください。バックアップのプラグインではこちらがおすすめです。

定期的にオンラインストレージにバックアップしてくれるWordPressプラグイン「BackWPup」

Attachment Taxonomies

デフォルトのWordpressのメディア管理が日付けによる並び替えしかできないため、それをカテゴリーやタグによっても並び替えを行えるようにするのがこのプラグインです。

特に複数の管理人でワードプレスを運営したときなどは、自分が過去に追加した写真を探すだけでも一手間です。

弊社テーマTCD024(PHOTEK)を使った写真メインのフォト系サイトを作るなら、写真をカテゴリーやタグで分別したり、写真を撮った管理人ごとに分ければ、より写真管理をスムーズに行えると思いましたのでご紹介させていただきます。

プラグインのインストール・有効化

管理画面＞プラグイン＞新規追加　で「Attachment Taxonomies」を新規追加

メディアライブラリにカテゴリーとタグを追加し写真管理をスムーズにするプラグイン「 Attachment Taxonomies 」

インストールし有効化
tcd20160904miya003

Attachment Taxonomies使い方

使い方は簡単です♪
管理画面＞メディア　で写真を選択します。
右下に「さらに詳細を編集」がありますのでそれをクリック。
tcd20160904miya005

記事投稿と同じようにこの画面からカテゴリーやタグを追加しておきます。
ここでは猫の写真をカテゴリー分け（動物）し、タグに動物名（猫）、投稿者名を設定してみました。
tcd20160904miya006

あとはこんな感じで記事から画像を追加するときでもカテゴリーとタグをセッティングできます♪
メディアライブラリにカテゴリーとタグを追加し写真管理をスムーズにするプラグイン「 Attachment Taxonomies 」

追加した写真を後日調べたいときはカテゴリーやタグで並び替えることができるので分かりやすいです。
メディアライブラリにカテゴリーとタグを追加し写真管理をスムーズにするプラグイン「 Attachment Taxonomies 」

以上、メディアライブラリにカテゴリーとタグを追加するプラグイン「 Attachment Taxonomies 」のご紹介でした。

追記：カテゴリー・タグを追加するだけでは物足りない人には「Media Library Assistant」がおすすめ！

↑で紹介した機能では物足りない方には弊社で以前紹介したプラグイン「Media Library Assistant」がおすすめです。

WordPressのメディアを管理するプラグイン「Media Library Assistant」

こちらは「 Attachment Taxonomies 」と同じく画像にカテゴリーやタグを追加してメディア管理することができる機能に加え、

・ショートコードで画像に追加したタグでタグクラウドを生成
・特定カテゴリーの画像ギャラりーを簡単設置
・キャプションやALT（代替）文で画像を検索するためのサーチBOX機能
・画像ファイルにメタデータ付加（Exif, DCF, IPTC, XMP)

などを管理画面から行えるようになります。

tcd201609060003

日本語版のインストールや詳しい使い方は

WordPressのメディアを管理するプラグイン「Media Library Assistant」

を参考にしていただけますと幸いです。

弊社では、WordPressのテンプレートを発売しており、日本向けのオリジナリティ溢れるサイトを作成しています。どのテーマも一つ一つ情熱を籠めて作られていて、最高のテンプレートばかりです。

例えば、下記のようなテンプレートがあります。

AMORE (tcd028)
圧倒的な完成度とカスタマイズ性を誇るパララックス用WordPressテーマ「AMORE (tcd028)」

http://design-plus1.com/tcd-w/tcd028

VENUS (tcd038)
世界トップクラスのリーディングカンパニーの為の最先端の企業サイトテンプレート「VENUS (tcd038)」

http://design-plus1.com/tcd-w/tcd038

TCDテーマを使用すれば、上記のようなかっこいいサイトを安価に手に入れる事ができ、初期設定やカスタマイズが管理画面からできるようになっているので、簡単にサイト構築する事ができます。

TCDテーマ一覧
http://design-plus1.com/tcd-w/theme_navi

しかしながら、WEBサイトを作成し、検索順位を上位にあげたり、ファンを獲得していくには、ある程度のコンテツを作っていく必要があります。サイトを作成する目的によりますが、多少ワードが使用できる方で、サイトもチラシ程度の１ページのサイトでいいという場合には、今回紹介する「ペライチ」というサービスを使用するのも手かもしれません。

pera01

ペライチ
https://peraichi.com/

ペライチとは

ペライチとは株式会社ホットスタートアップ様が運営されている、2016年4月より始まったホームページ作成ツールです。「あっ！と驚くほど早く簡単、誰でもホームページ作成」ができるとうたっているサービスです。筆者自身も様々なホームページ制作ソフトを使ってみましたが、本当にクリックだけでサイト作成ができるほど簡単にサイト制作から公開までできます。

ペライチでサイトを作成

それではペライチでサイトを作成してみます。

登録

名前やメールアドレスなどを入力し、無料会員登録を行います。登録自体は２、３分で完了します。
pera03

素材集め

どんなサイトを作成する場合も画像やテキストなどの素材が必要です。無料で良質な画像を使用したい場合には、こちらのサイトがおすすめです。

パッと選べて便利なクオリティの高いフリーの写真素材サイトまとめ

サイトにインパンクトを与えるフリーの動画素材サイト20選

ページの作成

それではページを作成していきます。まずは、テンプレートより、目的にあったテンプレートを選びます。25種類のテンプレートがあり種類もカテゴリも豊富です（2016年9月2日時点）。今回はカフェ風のテンプレートを選択してみました。

pera05

pera06

こちらがテンプレートを選択した状態の画面です。
pera07

サイトの作成は基本的に画面の＋記号の部分を押すと、ブロック要素が追加できます。ブロックの種類には、下記の要素があります。

告知用（そのテーマの構成要素。トップメイン（テキストセンター）など）
ナビゲーション（ヘッダーナビ）
メイン（トップ画面の種類を選択）
背景画像/色（背景画像や背景動画の選択）
画像＋テキスト（画像を配置）
EC（よくある質問やランキングなど）
ポイント（問い合わせなど）
リスト/ステップ（チェックリストや流れページ）
ボタン/フォーム（ボタン）
テーブル（テーブル）
区切り線（二重線や破線など）

この中から設定したい項目を選び配置していきます。中にいれる文章はワードのように入力するだけなので難しい操作はないかと思います。サイト作成の際には事前に構成を手書きでラフスケッチしておくとイメージができあがっていいかと思います。細かいカスタマイズはできませんが、大抵のサイトづくりに必要な要素はありますので、希望に近いものはできるかと思います。

ページ情報編集

画面の設定ができたら、ページ情報編集を行います。ここでは、

ページURLの設定（独自ドメインは有料）
ページ名(title)
ページのキーワード(keyword)
ページの説明文(description)
ファビコンの変更
OGP（SNSシェア設定）
Google Analyticsの設定
タグの埋め込み（有料）

などが設定できます。SEOを行う上では、こちらの設定をしっかりしておくといいかと思います。

ペライチの利用が向かない人

非常に簡単にお洒落なLPサイトが作成できるペライチですが、こんな方には向かないかもしれません。

自由度の高いデザインをしたい
公開ページ数がたくさん必要
PV数（閲覧数）が多い方、多くの方に周知したい方
PV数の上限が多い
コストを押さえたい方（有料版を使用して運用する方）
長期的な運用を考えている方

自由度の高いデザイン

ペライチはサイトの作成が簡単な反面、デザインの自由度はかなり低いという印象です。特に、決められたレイアウトの範囲内でのデザインをすることになるので、自由にキャッチコピーや画像を動かすことは出来ません。これは操作を簡単にするためには仕方のないことで、ペライチを使うメリットとも言えます。カスタマイズなどの自由度の高いサイト構築にはやはりWordPressが向いていると思います。

公開ページ数の上限

無料版では公開ページ数の上限は１ページです。有料版でも3ページか5ページと少し少なめです。1ページに付き300円/月額で増加もできますが、たくさんのページを作成しなければならないユーザーにとっては向かないかもしれません。

PV数の上限

サイトを沢山の人にみてもらいたい。サイトでアフィリエイトをしたいという方には向きません。それは、ペライチにはPV数の上限が設定されており、無料版では1万PVまで、通常で2万PV、プレミアムで3万PVといった制限があります。それ以上は要相談ですが、公式ページにも、下記の用に記述があります。

全公開ページの合計PV数の上限。上限を超えても継続して利用できますが、著しく上限を超えた場合は運営側の判断で掲載を止めさせていただく場合もございます。

ちなみに、TCDのサイトでは、30万PVを月間で超えていますので、ペライチでの運用は難しいですね。。。

コスト面

では有料版にした場合のコストについて考えてみます。JimdoやWIXなどのサービスでも言える事ですが、ページを増やしたい、独自ドメインを使用したいと言った場合には有料サービスを使用します。

ペライチの料金プランは、下記の用になっています。

pera02

例えば、プレミアムプラン（1年契約）で５ページ作成し、3万PV以下で運用した場合（ドメイン代は除く）には、このくらいの価格になってきます。高いとみるか安いとみるかは、ユーザー次第ではありますが、ランニングコストはサービスを使用する上では見極めが必要です。

1年(365日) 合計 20,196円
2年(730日) 合計 40,392円
3年(1095日) 合計 60,588円
4年(1460日) 合計 80,784円
5年(1825日) 合計 100,980円

テーマを購入する

デモサイト

10位　「Opinion (TCD018)」

018
白を基調とする知的なデザインが印象的な「Opinion」は、先進的なレイアウトや徹底的に計算された広告配置によってアクセス数と売上をどこまでも引き上げます。TCDでの累計販売数では堂々の1位で、国内でもっとも利用されている有料のWordPressテーマなのではないかと思います。

テーマを購入する

デモサイト

まとめ

5月から8月はパララックスサイトが圧倒的な人気です。「AMORE」や「AGENT」を始め、発売したばかりの「MAG」や「ORION」の反響も大きいです。弊社では、9月からもユーザーの度肝を抜くような画期的なテーマ開発が行われており、これからも皆さまの期待を良い意味で裏切るような、テーマを開発し続けます。今後ともどうぞよろしくお願いいたします。

8月度の全投稿ページ（固定ページ・カスタム投稿のページ除く）から、アクセスの多かった記事のランキングをご紹介します。また、人気記事に関連する記事なども合わせて紹介いたします。

1位「WordPressを初導入したらまず最初にすべき24の設定」

http://design-plus1.com/tcd-w/2011/04/wp-liteuser.html

WordPressは、その機能の豊富さに、始めて利用する初心者ユーザーは驚くことがあります。しかし、実際にいつも使うメニューというのは決まってきますし、初期設定も（人によりますが）ほんのわずかの設定だけで事足りることがほとんどです。当記事では、どなたにもお使いいただける「ココだけはおさえておきたい」初期設定をご紹介しています。

2位 Google Mapsの表示にはAPI登録が必須になりました

http://design-plus1.com/tcd-w/2016/06/google-maps.html

3位　「コピペでOK！「Contact Form 7」を使ったかっこいいお問い合わせフォームテンプレート集」

http://design-plus1.com/tcd-w/2015/09/contactform7.html

デフォルトフォーム
一般企業用のフォーム
採用情報用のフォーム
商品問い合わせフォーム
資料請求用のフォーム
メールマガジン用のフォーム
説明会用のコンタクトフォーム

4位吹き出しの会話を手軽に使えるプラグイン「Speech Bubble」

http://design-plus1.com/tcd-w/2016/08/speech-bubble.html

「Speech Bubble」のプラグイン記事が4位となりました。これは意外な結果でした。たまにブログをみていると会話風の書き方をされているブログが見受けられますが、これはそれを簡単に実現するプラグインです。他の人とは違うサイトにしたいという要望は多くあるのかもしれません。そういう意味ではTCDのテーマ一つ一つが似たようなものはなく、オリジナリティ溢れるテーマを販売しております。お気に入りのテーマを見つけて”あなたらしさ”を表現したサイトにしてくださいね。

TCDテーマ比較ナビ
http://design-plus1.com/tcd-w/theme_navi

5位企業内コミュニケーションツールには「Slack」がおすすめ＜操作編＞

http://design-plus1.com/tcd-w/2015/10/slack03.html

5位となったのはコミュニケーションツールSlackについての記事になります。Slackとは、一言でいうと社内等でのコミュニケーションを行うツールです。Slackはチャットでのやりとりが中心となっており、海外では「Eメールの時代は終わった」と言われるように、Slackやチャットワーク、Hipchatのようなチャットツールが多くの会社で使われてきています。
弊社でもSlackを導入することで劇的に業務のスピードが速くなり、その結果、TCDシリーズのリリース速度のUPにつながりました。そんなSlackの使い方を解説しています。
また、操作編だけでなく、登録編、画面構成編も合わせてご覧下さい。
Slack<登録編>
Slack<画面構成編>

6位　「固定ページに特定カテゴリーの投稿一覧を表示させる方法」

http://design-plus1.com/tcd-w/2015/12/custom01.html

7位豊富なデザインのGoogleMapが簡単に使えるWordPressプラグイン「TCD Google Maps」

http://design-plus1.com/tcd-w/2016/01/googlemap.html

7位は、TCDプラグイン「TCD Google Maps」に関する記事です。

2016/7/7 Ver1.1にて10種類追加使用出来るMAPのデザイン数が増えています！

8位　「引っ越しも楽々？　WordPressで構築したサイトを丸ごとコピーできるプラグイン「Duplicator」」

http://design-plus1.com/tcd-w/2014/10/duplicator.html

「TCD LABO」ではTCDテーマのカスタマイズ方法を紹介していますが、バックアップを確実にとり、上記のようなプラグインで工夫をしながらカスタマイズを行ってみて下さい。

9位　「お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ」

http://design-plus1.com/tcd-w/2011/03/contact-form-7.html

10位　InstagramをWordPressと連携する方法

まとめ

7月に続き、8月度もGoogleMapについてのお問い合わせを多くいただきました。まだまだトラブルで悩まされているお客様も多いようで、早い解決のために尽力していきます。そんな中「Speech Bubble」の記事が予想外にもアクセスを集めました。他とはちょっと違うブログを書きたいという要望は多いのかもしれません。またランクインはしませんでしたが、「WordPressでも使用できる、Webフォントの基本操作と設定方法」も人気がある記事でした！WEBフォントに興味のある方はぜひチェックしてみてください。9月はプラグインに関する記事だけではなく、新しいWEBサービスについてもご紹介していきます。

TCDのサイトを訪問される方や購入を検討しているユーザーの方にはホームページを初めて作成する方が多くいらっしゃいます。ホームページ制作初心者の方の多くが「WordPress」という言葉は知っているけど、どんなメリットがあって、逆にどんなデメリットがあるのか知りたいと思っているかと思います。そこで本日は初心に戻り、WordPressのメリットとデメリットについて解説したいと思います。

WordPressとは

wp01

そもそも「WordPressとは何か」からお話します。WordPressは世界で一番使われているCMS（コンテンツマネージメントシステム：Webサイトを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築したり編集したりするソフトウェアのこと）であり、有名な企業のサイトでは、クックパッド、東京大学、博報堂、スポーツの業界では、浦和レッズなどでも使用されています。

CMSって何？となる方もいるかと思いますが、簡単にいうとブログシステムです。ブログは一般的になっていますよね。アメブロやはてなブログなどが有名です。自分の書きたい記事を自由に書いて、投稿して世に公開していくシステムです。

じゃあホームページとの違いはと言われると、それはデザイン性です。一般的にホームページはHTMLやCSSで書きますが、これを業者にお願いすると、専門知識がないと更新ができなくなり、ちょっとしたテキストや画像の変更などでもお金がかかる。「こんなことでこんなに！？」という方もいるのではないでしょうか。じゃあブログのように自分で簡単に投稿や編集が出来て、かつデザインも大手のサイトのようにかっこいいものを作りたい。

それを叶えてくれるのがWordPressです。つまり、WordPressはブログとホームページの良いとこ取りソフトウエアだと思ってもらえたらいいと思います。それでは、そんなWordPressのメリットとデメリットについて解説していきます。

WordPressを利用するメリットとは

WordPressは使って行くほど本当に便利だと感じれますが、筆者なりにまとめると以下がWordPressのメリットだと思います。

サイト構築が簡単
テンプレートが豊富
プラグイン
カスタマイズやテーマの情報が多い
カスタマイズが自由自在
管理や引き継ぎが楽
SEOに有利

サイト構築が簡単

1つめのメリットですが、サイトの構築が簡単です。WordPressは、先ほど伝えましたように、ブログ形式でホームページが作成できるツールです。そのため、HTMLやCSSの知識がなくても、ブログ感覚で簡単にページの作成や更新を行う事ができます。基本的には、「文字の入力」と「画像の貼付け」でホームページが作成・更新できます。下記がWordPressでの記事の作成画面です。

wp02

ワードと同じような感覚で、文字の太さや色を変えたり、画像や動画を挿入することができます。また多少知識があれば「テキストモード」でHTMLやCSSを使用しながら書く事もできます。

テンプレートが豊富

2つめのWordPressのメリットとして、テンプレートの種類が豊富です。WordPressをダウンロードしただけではデザインはされていない状態で非常にシンプルです。そこにお好みのテンプレートを設定して行きますが、無料のものから有料のもの、日本製から海外製まで多種多様です。下記がテーマの設定画面です。

wp03

色々とテンプレートを探す時間もショッピングをしている感覚で楽しいのですが、おすすめは日本製の有料テンプレートです。海外製のものはデモサイトをみるとおしゃれなのですが、日本語をはめた瞬間にとたんにダサくなったりします。これはテンプレートが悪いのでなく、英字に合わせてデザインをしているからです。目的はデザイン性のよいサイト構築だと思いますので、日本語向けにデザインされているテンプレートを導入するほうが無難です。

また、サイト構築が簡単といっても、無料のテンプレートでは、設定画面までは改良されているところは少ないです。ホームページ制作が初めての方は、「簡単にデザイン性の良いサイト」をということをしたいと思いますので、数千円で有料のテンプレートを購入することが悩む時間を考えると結果的に安く済むと思います。

少し、宣伝になってしまいますが、TCDでは、様々なテンプレートを販売しています。最高峰のデザイナーが1pxまでこだわったデザインに、プログラマーが初心者でも扱いやすいようテーマオプションなどの操作性もとことん追求して開発されています。世界一のWordPressテンプレートを目指し、オリジナリティ性の高い新しいテーマもどんどんでていますので、よければご覧ください。

TCDテーマ一覧

プラグイン

3つめのメリットですが、プラグインが非常に豊富です。プラグインとは機能を追加するプログラムで、管理画面から簡単に、無料で追加していくことができます。プラグインを利用すると、セキュリティー対策ができたり、問い合わせフォームを簡単に作れたり、Facebookやinstagramと簡単に連携できたりします。本当にできないことは無くなるのではないかと思うくらいに豊富なプラグインがあります。下記がプラグインの追加画面になります。

wp05

ただし、プラグインを使用しすぎると、サイトの表示が重くなったりすることもあるのでプラグインの多用は注意くださいね。

カスタマイズが自由自在

初心者向けで、本格的なサイト作りはできないのかと言えばそうではないのがWordPressの良い所です。ある程度の知識やスキルがあれば、ホームページの環境や機能からデザイン構成まで自由自在にカスタマイズできます。

カスタマイズやテーマの情報が多い

カスタマイズやこんなことをしてみたいといった際に情報が多い事は非常にメリット性が高いです。ワードプレスは世界中に利用者がいますので、とにかく情報が豊富です。例えば、「WordPress　カスタマイズ」とgoogle検索するだけで、1,190,000件もヒットしました（2016年9月現在）。わざわざ参考書を買わないとわからない、セミナーにいかなければ教えてもらえないということではなく、ネット検索でこれほどの情報がでてくるのです。また、TCDでもカスタマイズサイトを立ち上げています。カスタマイズされる際には参考にしてみてください。

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

管理が楽

WordPressを企業サイトに導入するメリットは、管理が楽になるというところにあります。サイト構築が簡単ということはさきほど伝えましたが、構築が簡単であれば管理も楽になります。例えば、役職によって、サイト全体を改良出来る人、投稿だけができる人で権限を与える事も簡単にできますし、出張先などでの更新なども簡単に行えます。また、担当者が変わった場合にも引き継ぎが簡単にできますし、業者に頼んだ場合にも他の業者にチェックしてもらう事もできる。挙げればきりがないですが、これはWordPressを使用する非常に高いメリットです。

SEOに有利

最後にSEOに強いというメリットがあります。SEOとはサイト検索での集客力です。サイト検索で上位にあがるほど集客力はあがって行きますが、WordPressを使う事は、Googleの検索エンジン担当のマット・カッツ氏が推奨しています。

WordPress is a great choice

WordPress automatically solves a ton of SEO issues.

WordPress takes care of 80-90% of
(the mechanics of)
Search Engine Optimization (SEO)

（訳）
ワードプレスを選ぶことは、非常に良い選択です。なぜなら、ワードプレスは、SEOに関する多くの問題を自動的に解決してくれて、SEO（サーチエンジン最適化）の手法の80%～90%に対応するように作られているからです。

（Matt Cutts、「WordCamp San Francisco 2009」での講演映像の3:11～の部分より

ただし、これはWordPressを利用すればサイトで上位にあがるということではありません。サイト上位にあげる一番はコンテンツ（記事の質）です。良質な記事を書き、たくさんの人に喜んでもらえれば必然と検索順位はあがって行きます。

デメリット

非常にメリットのあるWordPressですが、デメリットもあります。そのトレードオフを考慮しシステム導入を考えてみて下さい。

表示速度

WordPressは動的にページ生成するためページの表示が静的ページより遅くなる傾向があります。静的ページとは、作成したページがそのまま表示されるようなページのことです。逆に動的ページとは表示するタイミングで作成されるページのことです。

例えば、会員制サイトの会員情報のページには氏名や住所などが表示されるようになっています。そこに表示される内容はサイトにログインしている人によって異なります。こういったサイトではページのテンプレートが用意されており、データーベースから引っ張ってきた氏名や住所などを使ってページを作成しているため、人によって表示される内容が異なるのです。

そのため、サーバーが表示するのが通常のホームページより遅くなってしまうというデメリットになります。

費用面

上記の表示速度を改善するにはある程度性能の高いサーバーを用意する必要があります。弊社ではXサーバーを推奨していますが、Xサーバーでは月1000円程度の維持費がかかります。それに独自のドメインとると、年間で1万5千円程度のランニングコストがかかります。完全無料でやりたいという人には少し抵抗があるかもしれませんが、ビジネスとして使用したい人にはかなり安い経費だと思います。

セキュリティー面

最後に、WordPressはオープンソースであることによって、プラグインやテーマ、数々の情報など、無料でその恩恵を受けられているわけですが、その反面では、ハッカーからの攻撃に対し脆弱性があるともいえます。こちらの記事を読んでいただければわかりますが、世界中の人が使用しているシステムですので、その分サイトを狙われる可能性もあるわけです。

WordPressをハッカーから守ろう!!ログイン履歴管理プラグイン「Crazy Bone」

ただし、こちらは対策をしっかりしておけば問題ありません。また、誤解があるかもしれませんが、WordPressがセキュリティーに弱いということではなく、どのようなシステムでも同様のハッキングはあり得ます。大事なのは自分の大切なサイトは自分で守るという意識です。自分に限っては大丈夫ではなく、サイト作成する際の最初にしっかり対策をしておきましょう。最低限しておく対策方法はこちらにまとめました。導入の際の参考にしてみてくださいね。

最低限これだけはしておこう！WordPressのセキュリティを強化する5つの方法。

WordPressの導入

以上でメリットやデメリットについてご理解いただけたかと思います。では、どう導入したらいいのかという方はこちらに解説サイトを用意しましたのでご参考ください。

WordPressの使い方大全集

まとめ

以上でWordPressのメリットとデメリットについての解説を終了します。今回の記事で十分WordPressのメリットやデメリットは理解していただけるかと思いますが、実際に使用いただけるとその便利さがわかるのがWordPressです。

今や、小学生でもサイト構築していく時代になってきました。それだけ情報配信をしたいというニーズが高まっているということですが、より影響力のある情報配信にはデザイン性は非常に重要です。どんなにいい人と出会ったとしても初めて会った時の格好がボロボロの服だとその人の事を知ってみようと思わないとの同じです。

WordPressを利用し、自由度の高いオリジナリティ溢れるサイトを構築し、良質なテンプレートを使い一流のデザインを手に入れ、最高のコンテンツを発信してみてください。

Aberdeen Groupの調査によると表示速度が1秒遅くなることでページビューが11%下がり、カスタマー満足度が16%下がり、コンバージョン率が7%下がるそうです。

特に最近は閲覧者のほとんどがスマホユーザーなので、ページ表示速度の低下はそのまま売り上げに直結する問題です。

また、ページの表示速度を上げ、離脱率が下がり、回遊率（ページセッション）があがればWEBサイトが検索エンジンに高く評価され
つまるところSEO的に有利に働くケースがあります。

なのでもし少しでも表示が遅いと感じたら何かしら対策を打っておくといいかもしれませんね。
それではさっそく使えるページ表示速度を上げるTipsを紹介していきたいと思います。

１：P3 (Plugin Performance Profiler)で原因を調査

サイトの表示が遅いときの原因はプラグインの入れすぎや一部のプラグインがかなり処理速度を遅延させているといったことが多いです。
そんなときはP3で原因のプラグインを調査し、そのプラグインを（特に必要でなければ）停止するか一部の機能を制限してみてください。

・WordPressが重い！！その原因を発見するプラグイン「P3 (Plugin Performance Profiler)」
http://design-plus1.com/tcd-w/2016/03/p3-plugin.html

２：キャッシュ系プラグインを導入する

キャッシュ系プラグインで有名なのがこの2つです。
・W3 Total Cache
https://wordpress.org/plugins/w3-total-cache/
・WP Super Cache
https://wordpress.org/plugins/wp-super-cache/faq/

WordPressで作った動的サイトはユーザーからWEBサイト表示をリクエストされると毎回データーベースにアクセスしているため、その分時間がかかっています。
これらのプラグインを使えばデータベースやブラウザでキャッシュを作ることができるのでページ表示速度が大幅に向上します。

ただしデメリットはサイト内の変更がすぐにユーザー環境に反映されない可能性があることと、.htaccessやconfig.phpなど結構重要なファイルを書き換えるプラグインですのでカスタマイズしている場合不具合を生じさせやすいことです。

あとはパーマリンクをデフォルトから変更しないと使えません。

３：画像を軽量化する

サーバーにアップする前に画像の形式やサイズが適切かを考えましょう。

PNG形式をJPEGに変換し、大きな画像はすべてトリミングやリサイズして落としてからアップするようにします。

Media4xが提供している「JPEG & PNG Image Compression」というウェブサービスを使ってもファイルサイズを落とせます。

・WordPressサイトを快適に運用するためのTips【画像圧縮編】
http://design-plus1.com/tcd-w/2014/04/image_tips.html

４：プラグインで画像を軽量化する

「EWWW Image Optimizer」というプラグインを使えば画質をほとんど劣化させずにファイルサイズを圧縮することが可能です。

・WordPressを軽量に!!画像を圧縮するプラグイン「EWWW Image Optimizer」
http://design-plus1.com/tcd-w/2016/06/ewww-image-optimizer.html

また「WP Resized Image Quality」は画像をアップしたときに勝手にリサイズしてくれる便利なプラグインです。

・WordPressサイトを快適に運用するためのTips【画像圧縮編】
http://design-plus1.com/tcd-w/2014/04/image_tips.html

５：CDNから画像を読み込む

CDN（コンテンツデリバリネットワーク）とは、ファイルサイズの大きい画像やプラグインなどのデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワークのことをいいます。

このCDNをうまく活用すればサーバーへの負荷を大幅に低下させることができるようになります。

・これは使える！JetPackプラグインのおすすめ機能
http://design-plus1.com/tcd-w/2016/01/jetpack.html

６：画像の読み込みを遅延させる

テキストコンテンツから先に表示させ、画像を遅延させて表示させるという方法もあります。
プラグイン「BJ Lazy Load」を使えばそれを楽に実装できます。

・サイトの表示速度を改善するプラグイン「BJ Lazy Load」
http://design-plus1.com/tcd-w/2016/08/bj-lazy-load.html

７：余計なオブジェクトを削除

思い切ってサイト内の余計なアニメーションやスライダー、ウィジェットなどのオブジェクトを減らし
サイトを軽量化させコンテンツのみで勝負する作戦に踏み切るのもいいかと思います。

8：Headのお掃除&CSSの簡略化

サイトを長く運営していると細かいカスタマイズなどで余分なJavascriptやCSSを消し忘れ溜まってきがちになるので要らないコードは削除していきます。

プラグイン「Head Cleaner」はWordPressのhead要素にある重複タグやコメント、空白などを削除し、クライアントからのリクエストに素早く応えることで高速化することを可能にします。
またJavascriptの読み込みを遅延させたり、CSSの最適化なども出来ますので便利です。プラグインを停止すれば全て前の状態に戻ります。

・WordPressサイトを快適に運用するためのTips【クリーニング編】
http://design-plus1.com/tcd-w/2014/04/cleaning_tips.html

９：サーバーを変更する

海外のサーバーは安価でハイスペックなものが多いですが、単純に接続距離の問題で国内サーバーの方が表示が速い場合がございます。

また多くの人がレンタルサーバーを使っていると思いますが、レンタルサーバーは複数の人たちが同じ1つのサーバーを共用している状態ですので低価格のサーバーほど利用者が多く、1つのサーバーをさらに多くの人数でシェアしています。

したがって同居人のアクセスが急増すれば、自分のところに「重たさ、つながりにくさ」などの悪影響が出ることもあります。

もしサーバー会社の安いプランで運用しフラストレーションを感じているなら別の上位プランに変更するというのも一手です。

１０：管理画面の遷移が遅くなったら

管理画面の不要なリビジョンや下書きなどのゴミ掃除を行いましょう。

・WordPressサイトを快適に運用するためのTips【クリーニング編】
http://design-plus1.com/tcd-w/2014/04/cleaning_tips.html

何かしらのプラグインで遅くなっている可能性もございます。
そんなときはP3 (Plugin Performance Profiler)で原因プラグインを検索してください。

・WordPressが重い！！その原因を発見するプラグイン「P3 (Plugin Performance Profiler)」
http://design-plus1.com/tcd-w/2016/03/p3-plugin.html

まとめ

そこまで大規模なサイトでなければプラグインを使わなくても、画像のファイルサイズを縮小したりページ内のオブジェクトを最低限にするくらいで対応するので十分かもしれません。
むしろプラグインを導入して逆に遅くなったという例も存在するくらいですので、その辺は適宜ご自身のサイトと相談しながら調整してください。

先日、WordPressのメリットとデメリットまとめという記事の中でWordPressを使用している企業サイトを少しだけ紹介させていただきました。その際にもっとたくさんの企業がWordPressを使用していることがわかりました。今回はサイト作成の参考になるようにWordPressを使用している企業サイトを20社選びましたので、ご覧ください。

コーポレートサイト

クックパッド

日本最大手の料理に関するレシピサイト『クックパッド』のコーポレートサイト
site01
https://info.cookpad.com/

白をベースとしたシンプルで見やすいサイトです。さまざまなユーザーを対象としているため誰がみてもわかりやすいコンテンツ配置や導線が非常に参考になるサイトです。また、海外に営業所もある会社なので英語版のページもあり多言語対応をされるにはお手本になるサイトです。TCDテーマのPreciousを使用するとこういったスタイリッシュなコーポレートサイトが作成できます。

株式会社カカクコム

日本最大手の価格比較サイト『価格.com』のカカクコムのコーポレートサイト
site02 http://corporate.kakaku.com/

プレスリリースやIRニュース、グループニュースを頻繁に更新するために、WordPressを使用していると思われます。こういったお知らせや更新が非常に楽なのがWordPressの特徴の一つです。また、サイトには文字を大きくするなどのユーザビリティーにも配慮され、サイトの速度を遅くしないために余計な画像な動きは省いているのが特徴です。TCDテーマでは、NEXTAGEなどを使用するとこういったコーポレートサイトが簡単にできます。

セーラー万年筆

歴史ある大手万年筆メーカーのコーポレートサイト
site03 http://www.sailor.co.jp/

こちらもプレスリリースやお知らせをトップに持って来ています。また、Facebookやtwitterにて情報配信をしているのも特徴です。グローバルメニューを４つに絞り、見せたい所だけを見せるように工夫している点もわかりやすいですね！

ヤマサ醤油株式会社

大手醤油メーカーヤマサのコーポレートサイト
site04
http://www.yamasa.com/

イラストや写真がふんだんに使われており、WordPressのコーポレートっぽさがないのがいいですね！どうしてもシンプルな作りのサイトだと、似たようなサイトになりがちなのでデザイン性の高いサイトは目を惹きます。また、英語版ではデザインや内容が変わるのはこだわりですね！

ショップ系サイト

3COINS

インテリア雑貨や生活雑貨を販売するショップの公式サイト。
site07
http://www.3coins.jp/

3COINSのサイトも実はワードプレスを使用しています。ショップサイトをワードプレスで作成したい方は参考にしてみてはいかがでしょう。ショップ系サイトは季節によってトップページなどの画像を変えたり、商品を入れ替えたりする必要があり、コーポレートよりも更新頻度があがります。WordPressであればクリックひとつでトップの画像を変えれるので非常に便利ですね。TCDテーマでは、PreciousやBLOCを使用すると商品紹介もできるお洒落なサイトが作成できます。

カラオケ JOYSOUND

直営カラオケ店舗（JOYSOUND・U-STYLE・J-STYLE・U-BOU・SONG PARK）の情報サイト
site05 http://shop.joysound.com/

さすが大手カラオケチェーンのJOYSOUNDです。店舗検索から、予約まで機能が豊富に盛り込まれたサイト構成になっています。しかしWordPressではプラグインを使う事によって同様の機能を自分のサイトにも組み込む事ができます。問い合わせフォームを工夫したい、会員制サイトにしたい、SNSを設置したいなど、まずやってみたいことができないかを考えるのもWordPressの面白さですね。

渋谷109

渋谷109の公式情報サイト
site06 http://www.shibuya109.jp/

渋谷と言えば、「渋谷109」です。渋谷のファッションカルチャーをの代表とも言えるサイトはさすがにお洒落なデザインになっています。やはりサイトの顔はトップページの画像だと思います。訪問者の離脱率をさげるにはファーストビューにインパクトが大事です。ここに特化したテーマ選びをすることが重要ですね！

株式会社Kaeru

大阪にあるお洒落なコワーキングスペース
site08
http://www.osakan-space.com/

非常にわかりやすくこれもワードプレスなのと思ってしまうようなサイトです。スペースの紹介から、料金の表示、メンバー紹介まで、サイト設計のお手本のようなサイトです。

メディア系ポータルサイト

日刊SPA

site09
http://nikkan-spa.jp/

WEBマガジンこそ、ワードプレスでの構築がピッタリなジャンルです。有名な日刊SPAさんもワードプレスを使用しています。カテゴリーわけや広告の挿入方法など非常に参考になります。TCDテーマでは、IZMやOpinionで構築すると簡単にポータルサイトが出来ます。

主婦の友社

料理、育児、ファッションなどに関する雑誌、書籍を発行する主婦の友社の公式サイト。
site10
http://corporate.shufunotomo.co.jp/

こちらも有名な主婦の友社さんのサイトです。カテゴリが多いこういったサイトには本当にワードプレスが向いています。書籍検索をみてみるとその効果がわかると思います。

デジモノステーション

site11
http://www.digimonostation.jp/

モノトーンの色使いで、とにかくかっこいいです。男性をターゲットにしている雑誌なのでカラーも男性が好むデザインにしています。サイト構築では誰がターゲットなのかを最初に設定しておくのは非常に大事ですね。また、家電は流行り、廃りが早いため、カテゴリーの順序などもそれに合わせてすぐにカスタマイズできるといいですね。そういったちょっとの変更が容易なのは、WordPressで良かったなと思う点です。

BLOGOLA

サッカー専門新聞BLGOLAZO web版
site12
http://blogola.jp/

こういったスポーツ系のニュースメディアは記事の更新スピードが肝心です。その点で言えば、パソコンやスマートフォンがあればどこでも記事をアップ出来るWordPressのメリットは非常に高いです。

著名人のサイト

浅田麻央公式ページ

フィギュアスケート「浅田真央」さんの公式ページ
site13

http://mao-asada.jp/

浅田麻央さんもWordPressでサイト作られていたんですね！このサイトにもあるようにギャラリーの見せ方って大事ですね。こういったサイトでは情報だけでなく、その人の画像をみたい。もしくは画像検索からHPに訪問するといったことが多くあります。ギャラリーをみせるための、ポートフォリオサイトにもWordPressは向いていますね♪ポートフォリオサイトの作成にはORIONがおすすめです。

HORIEMON.COM

site14
http://horiemon.com/

ホリエモンこと堀江貴文氏のサイトHORIEMON.COMもWordPressでデザインされています。非常に更新頻度の高い、ニュースキュレーションサイトです。こちらはWordPressの投稿にキュレートしたい記事のURLを入れると、システムがそのページのOGPの情報を自動的に引っ張ってくるシステムになっていて、そこにコメントを書いている感じで更新されていると思われます。

赤塚不二夫公認サイト

site15
http://www.koredeiinoda.net/

おそ松さん流行りましたね！おそ松さんカフェができたり、DVDの売り上げも脅威の数字だったりと女子人気がものすごく高いアニメでした。サイトの方は、グリッドレイアウトが採用されています。コンテンツの一覧性と整然としたスマートな表現を同時に実現できるメリットがあり、非常にスマートで見やすいですね。TCDテーマではFOCUSなどを使用するとグリッドレイアウトのサイトが構築できます。

くまもん公式サイト

国民的ゆるキャラ「くまもん」公式ページ
site16
http://kumamon-official.jp/

くまもんのサイトにもWordPressが使用されています。くまもん人気衰えないですね。くまもんに関するさまざまな情報がちりばめられています。アイコンのピクトグラムを使用すると可愛さが増しますね。

大阪城

site17
http://www.osakacastle.net/

大阪城にもWordPressが使用されていますが、雰囲気でてますね！背景色を工夫するだけでこんなにも印象付けができるという点が学びですね。また、大阪城は観光客が多いためサイトも4カ国語に対応しています。またアクセスもグーグルマップを載せるサイトが増えていますが、個人的にはこういったイラストでのマップの方がわかりやすかったりします。海外の方などネット環境がなくても読める工夫は大事ですね。

企業ブログ

Sony （ソニー）　PlayStation Blog

site18
http://blog.us.playstation.com/

海外のソニーのブログです。PSVR楽しみですね！時代がどんどん変化しています。ここのサイトはデザイン性もすばらしくかっこいいです。ただ、海外のワードプレステーマを使用する場合に注意が必要です。それは、日本語で作成すると急にださくなるという点です。英字向けに作られたデザインに日本語を当てるとスペース等うまくはまらない場合がありますね。できれば日本語対応のテーマを使用することをおすすめします。

マツダ公式ブログ

site19
http://blog.mazda.com/

マツダの公式ブログになります。もともとWordPressはブログソフトのため、ブログを書くにはうってつけです。TCDテーマでもブログをメインとしたMAGというテーマがありますが、サイトのデザインだけでなく、構築のしやすさや、広告設置機能の充実など細部に技術が宿っています。

トレンドマイクロ

トレンドマイクロのセキュリティに関する情報サイト。
site20
http://blog.trendmicro.co.jp/

こちらはウイルスソフトで有名はトレンドマイクロのサイトになります。WordPress唯一の弱点と言えるのがセキュリティー面です。これはオープンソースだからしかたないのですが、しっかり対策しておく必要がありますね。WordPressのメリットとデメリットまとめなどに対策などまとめていますので、興味を持たれた方は参考にしてください。

TCDテーマを使った厳選サイト

最後に、TCDテーマを使った厳選サイトも紹介させていただきましたのでご覧下さい。
WordPressテーマ「INNOVATE HACK(tcd025)」を使用した参考サイト10選
 WordPressテーマ「Opinion(tcd018)」を使用した参考サイト20選

まとめ

いかがだったでしょう。誰でも知っているような有名な企業や著名な方のサイトでもワードプレスが利用されていることがわかります。SEOの観点やカスタマイズが自由自在というメリット、また更新が多いサイトなどにはWordPressを使うメリットは多いです。ただし、カスタマイズなどは初心者の方が行うには少し複雑な部分もあります。ぜひ、TCDテーマを利用し、今回紹介したようなデザイン性の高いサイトを手に入れてみて下さい。

TCDテーマ一覧

LINE@で出来ること

LINE@の登録

LINE@アプリをインストール

アカウントページの作成

友達追加時の設定

自動応答モードの設定

1:1モードのOFF

自動応答メッセージの設定

自動応答メッセージ

キーワード応答メッセージ

まとめ

「Flamingo」の特徴

「Flamingo」のインストール

「Flamingo」の設定

「Flamingo」の使い方

「Flamingo」のアドレス帳

「Flamingo」の受信メッセージ

まとめ

OGPとは

WordPressに手動でOGPを設定する

OGPの必須プロパティ

og:title

og:type

og:url

og:image

OGPのオプションプロパティ

og:locale

og:site_name

og:description

Facebook専用のプロパティ

fb:app_id

article:publisher

fb:admins IDの確認

Facebookの「Open Graph Debugger」で確認

TCDテーマのOGP設定画面

まとめ

サーバーが対応していない

対処方法

クロスドメインを許可していない

対処方法

ブラウザがOFF設定になっている

対処方法

プロトコルが混在している

対処方法

まとめ

Webフォントとは

Webフォントのメリット・デメリット

メリット

デメリット

使用手順

利用したいWEBフォントファイルを用意する

CSSでフォントファイルを指定する

CSSでフォントを適応する

まとめ

「BJ Lazy Load」のインストール

「BJ Lazy Load」の設定

TCDテーマでの効果の検証

プラグイン設定前

プラグイン設定後

まとめ

1位「WordPressを初導入したら まず最初にすべき24の設定」

2位 Google Mapsの表示にはAPI登録が必須になりました

3位 企業内コミュニケーションツールには「Slack」がおすすめ＜操作編＞

4位 「コピペでOK！「Contact Form 7」を使ったかっこいいお問い合わせフォームテンプレート集」

5位 豊富なデザインのGoogleMapが簡単に使えるWordPressプラグイン「TCD Google Maps」

５位「お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ」

6位 InstagramをWordPressと連携する方法

7位 「固定ページに特定カテゴリーの投稿一覧を表示させる方法」

8位 「引っ越しも楽々？ WordPressで構築したサイトを丸ごとコピーできるプラグイン「Duplicator」」

9位 「お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ」

10位 「WordPressテーマのインストール方法」

まとめ

「Speech Bubble」のインストール

「Speech Bubble」の使い方

ショートコードの解説

セリフ変更

名前の変更

吹き出しの種類の変更方法

drop

std

1位「WordPressを初導入したらまず最初にすべき24の設定」

3位企業内コミュニケーションツールには「Slack」がおすすめ＜操作編＞

4位　「コピペでOK！「Contact Form 7」を使ったかっこいいお問い合わせフォームテンプレート集」

5位豊富なデザインのGoogleMapが簡単に使えるWordPressプラグイン「TCD Google Maps」

6位　InstagramをWordPressと連携する方法

7位　「固定ページに特定カテゴリーの投稿一覧を表示させる方法」

8位　「引っ越しも楽々？　WordPressで構築したサイトを丸ごとコピーできるプラグイン「Duplicator」」

9位　「お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ」

10位　「WordPressテーマのインストール方法」

Parse error: syntax error, unexpected …　