ブログ記事を作成する時に頻繁に多用するスクリーンショットですが本日はその作業をちょっとだけ簡略化できるかもしれないtipsについてご紹介します。

WEBサイトのスクリーンショットを取得するプラグイン「Browser Shots」

ウェブサイトの動的なスクリーンショットを WordPressサイトへ取り込むことのできるプラグインです。

これを使えばわざわざブラウザのスクリーンショット機能を使わなくてもWEBサイトのスクリーンショットを記事内に埋め込むことが出来ます。
もちろん画像のアップロードも必要なく、サイトの外観が変われば自動的に変換してくれます。

個人的に使いどころによっては便利だと思いましたので紹介します♪

「Browser Shots」の使い方

プラグインをインストールし有効化すると投稿編集のヴィジュアルモードに新しいアイコンが加わります。

選択するとポップアップでサイトのURLなどを入力する画面が出てきますのでこちらに表示したいページの情報を入力していきます。

完了し「OK」をクリックするとショートコードで記事に埋め込まれます。

あとはプレビューで確認すればこれだけでサイトの動的スクリーンショットが記事内に表示されたことが確認できます。

キャプチャ画像を自動生成するので、サーバーにも負荷をかけずに外観のみを表示してくれています。

プラグインを使わずにPHPで動的スクリーンショットを取得する方法

こちらはテーマファイルをカスタマイズするため、最初にバックアップを取っておくことをお勧めします。

Function.php　に下記のコードを記述します。the WordPress.com の APIを使ってスクリーンショットを取得しています。

//スクリーンショット取得
function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://design-plus1.com/',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wpb_screenshots");

次にショートコードを投稿または固定ページに挿入します。
[screen url=”http://●●●.com” alt=”ALTタグ”]

URLとALTタグを任意のものに変更するだけで先ほどと同じような動的なスクリーンショットをサイトに埋め込むことができます。
widthとheightでキャプチャサイズの指定をすることも可能です。

[screen url=”http://www.yahoo.co.jp/” alt=”日本最大級のポータルサイト。検索、オークション、ニュース、天気、スポーツ、メール、 ショッピングなど多数のサービスを展開。あなたの生活をより豊かにする「課題解決 エンジン」を目指していきます。” width=”600″ height=”400″]

まとめ

意外とブログの記事を書く時にとることの多いスクリーンショットですがこれでなかなか記事執筆の作業がはかどっていいのではないでしょうか。

ただしこの動的スクリーンショットはjQueryなどにより構築された動くサイトにはあまり向いていない面があり、サイトによっては理想的なキャプチャを取得してくれない場合がございますので適材適所でうまく利用できるといいかもです。

それではまた。

記事を作成する時にGIFアニメーションを使用すると、インパクトのある印象を与える事ができ、画像よりも多くの情報を伝える事ができます。例えば、TCDの紹介記事でもこういった具合に使用しています。

LOTUS紹介記事
こちらでは、トップページのエフェクト効果を紹介するためにGIFアニメーションを使用しています。

直感的操作だけでサロン系の美しいサイトが作成できるWordPressテーマ「LOTUS」

TCDオリジナル機能クイックタグの紹介記事
この記事ではクイックタグの操作方法をGIFアニメーションで説明し、わかりやすく解説しています。

クイックタグ機能の使い方②基本的な使用方法と使用例

今回紹介する、LICEcap（ライスキャプ）は、PC上の画面を録画し、瞬時にGIFアニメーションを作成してくれるアプリケーションです。
操作も非常に簡単ですので良ければ、使ってみて下さい。

「LICEcap（ライスキャプ）」のインストール

こちらよりまずはLICEcap（ライスキャプ）をお使いのPCにインストールしてください。こちらはWindowsとmac両方に対応しています。

LICEcapダウンロードページ

ダウンロードサイトにいくと中央のDownloadと書いてあるあたりよりソフトをダウンロードできます。ダウンロードが完了しましたら、お使いのパソコンにインストールしてください。

LICEcapの使い方

LICEcapを起動すると、下記のような画面が現れます。

使い方の手順としては、

1. 撮影する画面を上記の枠内に入れる
2. Recordボタンを押す
3. ファイル名を指定し、「Save」を押すと録画スタート
4. Stopで録画終了

の4ステップで操作を行います。それでは順に操作方法を解説します。

撮影する画面を上記の枠内に入れる

まずは撮影したい画面内に必要な画像を入れておきます。今回はファイルをフォルダに入れるという動きをgifで撮影します。

Recordボタンを押す

枠にスタートの画面をいれたらRecordボタンを押します。押すとすぐに撮影が始まるわけではなく、設定画面が表示されます。

ファイル名を指定し、「Save」を押すと録画スタート

設定画面では、ファイル名を設定します。後ほど詳細の設定は説明しますが、単純に画面を撮りたいだけであれば、ファイル名のみ設定し、Saveボタンを押して下さい。

実際に撮影したい操作を行います。Saveボタンを押した後、3秒後に録画がスタートします。”ファイルをフォルダに移動させる”という動きをさせるとこういったgifアニメーションになります。

Stopで録画終了

撮影が完了したら、「STOP」ボタンを押して撮影を終了します。

そうすると、gifファイルがデスクトップ上に保存され、確認することができます。たったこれだけでgifアニメーションを使った画像が作成できます。本当に簡単ですね。

LICEcapの設定

LICEcapでは、設定を変更することも出来ますので解説していきます。

Max FPS
１秒あたりの画像の枚数を指定出来ます。枚数が多いほどGIFアニメの動作が滑らかになりますが、その分ファイルサイズが大きくなりますので注意ください。

Size
画像のサイズを指定出来ます。こちらもサイズが大きくなるほどファイルサイズも大きくなります。

title frame
GIFアニメーションにタイトル画面を挿入出来ます。右側のTitleのところに表示する文字を入力します。ただし、日本語は使用できませんのでご注意ください。

sec
タイトル画面を表示する秒数を指定出来ます。

Big font
タイトルのフォントサイズを大きく出来ます。

elapsed time
録画の時間経過を表示します。「0:00」という形式で右下に小さく表示されます。

mouse button press
録画中に、クリックボタンを押した場所で○を表示します。

Control+Alt+P pauses recording
キーボードの「Ctrl+Alt+P」で録画を一時停止できるようにします。

.GIF repeat count (0=infinite):
GIFアニメを何度繰り返すか設定できます。0だと無限に繰り返します。

use .GIF transparency for smaller files
チェックを入れるとファイルを小さくするためにGIFアニメーションを透過させます。

Automatically stop after
チェックをいれると、自動で録画を停止させます。また止める時間を指定できます。

GIFアニメーションの注意点

ファイルサイズ

GIFアニメーションを使用すると、ファイルサイズが大きくなり、動作が遅くなる可能性があります。目安としては、数100KB程度に収めると良いと思います。

効果的に使う

GIFアニメーションばっかりのサイトは正直見にくいです。それによって離脱率があがっては元も子もありません。GIFアニメーションを使用する場合はそれを使う事で効果的かどうかを考え、あっても1記事1,2個程度に収めるといいと思います。

まとめ

今回は、GIFアニメーションを簡単に作成できるソフトを紹介させていただきました。LICEcap（ライスキャップ）は全て英語ですが、操作自体は簡単で、またWindowsとmac両方に対応しているのでおすすめです。こういったソフトウエアを使い、より効果的な記事を書いて頂ければと思います。

サイト立ち上げを効率的にするプラグインを本日は紹介いたします。WordPressのサイトをいくつか立ち上げているといつも同じプラグインを導入するということもあるのではないでしょうか。そういった際に、サイトをまるごとコピーする「Duplicator」を使用するのもおすすめなのですが、今回はプラグインをまとめてインストールすることができる「Multi Plugin Installer」をご紹介いたします。

「Multi Plugin Installer」のインストール

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

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

Multi Plugin Installer

「Multi Plugin Installer」の使い方

Multi Plugin Installerを有効化すると下記の画面が表示されます。プラグインのインストール方法には、「プラグイン名やURLから直接インストール」「自身のPC内のデータからインストール」「エクスポートしておいた、設定データを読み込んでインストール」「バックアップからインストール」の4つがあります。

プラグイン名やURLからインストール

まずは、プラグイン名やURLから入力する方法を説明します。下記の画面のように、名前を入力してインストールするのが一番簡単な方法になります。

コピペでインストールできるように、おすすめのプラグインのテキストを記載しておきます。

Contact Form 7
AddQuicktag
TCD Google Maps
Unveil Lazy Load
WP Multibyte Patch
Google XML Sitemaps
Broken Link Checker

インストールに成功した場合はこのように表示されます。

すでにプラグインがインストール済みの場合はこちらのようにインストールに失敗します。

PC内のデータからインストール

PC内にダウンロードしてある、プラグインのzipファイルを選択し、インストールのボタンを押して下さい。たまにですが、自動では有効化がうまく行かない場合がございますので、設定画面より有効化されているかご確認ください。

エクスポートしておいた、設定データを読み込んでインストール

一度インストールしたデータは下記の画像のように設定データとしてダウンロードできます。これをアップロードすることでプラグインをインストールできます。

バックアップからインストール

バックアップのボタンを押すと、現在インストールされているプラグインのバックアップをとることができます。

こちらのファイルをダウンロードしておくことで、次回以降のファイルのアップロードが簡単になります。

まとめ

本日はサイト立ち上げを効率化させる「Multi Plugin Installer」というプラグインを紹介させていただきました。こちらを使用することで複数のプラグインを一括してダウンロードできますので非常に便利です。ただしプラグインは非常に便利ですが、いれすぎるとサイトが重くなったり、安全性の確保されていないプラグインなどではハッキングの対象にもなりかねませんのでご注意してお使いください。

今回はサイト内検索を足がかりに目的のページを探すユーザーを手助けするユーザービリティ向上のためのカスタマイズをご紹介します。
探しているキーワードを蛍光ペンなどでハイライト表示してあげればおそらくユーザーも見つけやすいと思いますので導入してあげるといいかもしれませんよ。

ユーザーが検索したワードをハイライトして表示するプラグイン「Highlight Search Terms」

プラグイン＞新規追加　で「Highlight Search Terms」を検索しインストールし有効化します。
有効化するだけで、ユーザーがWordPress内の検索機能で検索したキーワードをハイライトしてくれます。

サイト内検索を利用してみるとこういう感じで検索したキーワードが蛍光ペンでハイライトされています。

背景色などを変更したい場合はCSSで.hilightを指定してあげてください。

.hilight {
         background:#D3E18A;
}

その他font-sizeやborderなどを指定してあげれば応用が利きます。
あなたのサイトイメージにあったものに変更してあげてください。
TCDのテーマをしている方はテーマオプション＞カスタムCSSに記述してあげるといいでしょう。

プラグインを使わずに検索ワードのハイライトを実装するPHPのカスタマイズ

こちらはテーマファイルをカスタマイズするため、最初にバックアップを取っておくことをお勧めします。子テーマを作成している方はそちらに記述してあげてください。

Function.phpに以下のコードを記述します。

//ユーザーが検索したワードをハイライト
function wps_highlight_results($text) {
	if(is_search()){
	$sr = get_query_var('s');
	$keys = explode(" ",$sr);
	$text = preg_replace('/('.implode('|', $keys) .')/iu', '<span class="searchhighlight">'.$sr.'</span>', $text);
	}
	return $text;
}
add_filter('the_title', 'wps_highlight_results');
add_filter('the_content', 'wps_highlight_results');

［<?php the_title(); ?> ］または［<?php the_content(); ?>］で表示される内容の中から、ユーザーが検索したキーワードにを付与するようにします。

それをテーマオプションのカスタムCSSにて下記コードを追加する形で色指定してあげるという流れになります。

.searchhighlight {
         background:#D3E18A;
}

以上です。ぜひ活用してみてください。

もしカスタマイズに失敗するなどで画面が真っ白になってしまったらこちらの記事を参考に焦らず対処しましょう。
http://design-plus1.com/tcd-w/2016/08/error.html

TCDのテーマにはギャラリー向けのPHOTEKや画像をメインとするコーポレートテーマのVENUSなど画像や写真を中心としたテーマがたくさんありますが、お客様からの要望で画像を保護したいというお問い合わせをいただくことがございます。画像を保護する方法としては、以下の３つが代表的な方法になります。

• 写真にコピーライトを表記する
• 写真にカバーをかける
• 右クリックを禁止する

その中でも本日はコピーライトを画像につける方法をご紹介いたします。コピーライトを付ける事によって、画像を保護する目的の他に、ブランディングにも役立ちます。もしあなたの撮った写真や作成した画像がメディアなどに取り上げられれば、すごい宣伝効果になるでしょう。それでは解説していきます。

コピーライトとは

コピーライトとは著作権のことになります。そして、クレジット表記とは著作権者・原作者などの名前のことで、この両方を記載するのが、コピーライト表記です。このサイトでもCopyright © ワードプレステーマTCD All rights reserved.とありますが、これは、このブログの著作権は”ワードプレステーマTCD”に全てありますということを明記していることになります。記載はしていますが、実はなくても著作権保護の点では問題がありません。なぜなら、日本は「ベルヌ条約」に加入しており、著作物を作成した時点で著作権が自動的に発生するようになっているためです。ただ、「無断で使用しないで」という意思表示にために、多くの方がサイトや写真などに著作権マークをつけています。

コピーライト表記の注意点

画像にコピーライトを表記すると、もちろん画像を盗用されることは減りますが、同時に画像サイトなどでは、デザイン性を損なう可能性もあります。画像の下か上、もしくは角などに、控えめに、ただし著作権侵害を防止するという本来の目的を果たすために、ある程度、人の目に付くところに追加してください。コピーライト表示に必要な表記は、以下の３つです。

• ©マーク
• 最初の発行年
• 著作権者の名前

例：© 2016 tcd.com Ltd.

「Watermark.ws」の使い方

それでは画像にコピーライトを表記する際のおすすめのツールを紹介します。海外のサイトになりますが、「Watermark.ws」というサイトです。

www.watermark.ws

まずは、「Get Started Free」 もしくは 「ENTER」 をクリックしてください。

クリックすると下記の画面に表示されますので、メールアドレスとパスワードを入力し、Continueをクリックしてください。パスワードについてはお好みのパスワードを入力してください。

ログインできましたら、「Select from Computer」 をクリックし、パソコンに保存してあるコピーライトを付けたい写真を選び、アップロードしてください。

画像を選択すると下記のような画面となり画像が読み込まれます。

読み込んだ後の編集画面がこちらになります。

画面の下の方に下記のメニューがありますが、ここからコピーライトを追加ください。このアプリケーションの問題点としては日本語がテキスト入力できません。コピーライトを日本語でされる場合は、テキストではなくLogoボタンより事前に作成しておいた透過PNGの画像を読み込む事で追加できます。

TEXT:テキストを入力できます（※ただし日本語は入力できません。）
Logo:ロゴ画像を入力できます。
Template:登録しておいたデータを読み込むことができます。（ただし有料サービスになります。）
Crop:画像をトリミングできます。
Filter:画像にカラーフィルターをかける事ができます。コピーライトだけならほとんど使用しませんが、20種類ほどのフィルターがありますのでお好みでお使いください。

また、TEXTでコピーライトを追加する場合には、さらに下記のメニューが表示されフォント選択やカラー選択ができます。

この時に、Signを選択しますと、©マークを表示することができます。

編集が終わりましたら、右下の「FINISH」をクリックし、さらにもう一度「FINISH」をクリックします。するとダウンロード画面が表示され画像をダウンロードできます。

このようにコピーライトを簡単につけた画像を作成することができました。

また、このソフトを使用すると、下記のような保護画像もクリック一つで簡単に作成できます。

まとめ

以上でコピーライトによる保護方法の解説を終了します。WordPressにはコピーライトをつけるプラグインもあるのですが、プラグインの多用はセキュリティの観点やサイトの速度低下にもつながりますので、個人的にはこちらをおすすめします。もちろんPhotoshopなどを使用できる方はそちらでもできると思いますが、今回は、有料ソフトなどを使わずに簡単にコピーライトをできる方法を紹介させていただきました。次の機会には「右クリックを禁止するプラグイン」についても紹介させていただきます。

WordPressはオープンソースであるがゆえにセキュリティ面で脆弱性が見つかりやすいです。

記事がそこそこ増えてきてネットでの露出機会が増えると、自分でも気づかぬうちにハッカーの標的の対象になることもしばしばあります。
そこで今日は管理画面のログイン時に「あなたの出身地は？」などのセキュリティ質問を追加するプラグインをご紹介したいと思います。

ログインに画面セキュリティ質問を追加するプラグイン「WP Security Question」

ログイン時に「あなたの子供の時のあだ名は？」や「青春時代の親友の名前は？」などあなたしか知り得ない質問を付け足せるのがこのプラグイン。
当然あなたしか知り得ないわけですから、第三者がそれを突破するのはかなりハードルが高いと思われます。

このプラグインはきわめて軽量ですし、あらかじめ複数質問が用意されておりそれに対する回答を何点か埋めておくだけで使えますのでけっこう便利かもしれません。

「WP Security Question」の使い方

1、管理画面＞プラグイン＞新規追加　
で「WP Security Question」をインストール

2、設定画面にて質問の回答を設定
デフォルトですでに数多くの質問が羅列されておりますので、これに対する回答だけ設定しておく形になります。

いらない質問があれば「Remove」を選択するだけでオッケーです。もちろん質問を日本語にすることも可能です。

ログイン時のセキュリティ質問を追加するだけでよければ「Login Screen」にチェックを入れてください。
以上でログイン認証時に「Security Question」が追加されました。

まとめ

システムというのは必ず「脆弱性」が不可欠です。

ウィルスや不正プログラムは日々進化していますし、そもそもシステムというのは（既知・未知含め）何かしらの脆弱性を含んでいるものです。そのため、セキュリティ対策と同時に、万一ハッキング被害に遭った時のために、バックアップをとっておく事も大事です。

この他にもセキュリティ面で色々対処できる方法がありますので下記ページを参考にぜひ自分でセキュリティを強化してみてください！

新しいサイト立ち上げたり、ブログを書くと、記事が「Google」にインデックスされるまでに時間がかかります。できるかぎり早くインデックスされることで記事等のコピー対策にもなります。今回はクローラーが巡回する仕組みや、こちらから「Google」に新しい記事やサイトを伝える方法をご紹介いたします。

記事がGoogleにのる仕組み

Googleは「Googlebot」というソフトを使い、世界中のサイトを巡回させるシステムをとっています。そのソフトをクローラーといいますが、それが各サイトのリンクを飛び回り、WEBサイトの情報を集めています。特にクローラーは、過去にクロールしたページやWEBサイト所有者から提供された「サイトマップ」情報を手がかりにクロールしていきますので、立ち上げたばかりのサイトやサイトマップを提供していないサイトにはクローラーが来にくいということです。

さらにGoogleでは集めて来た情報を整理するインデックスということが行われます。これが検索キーワードとなるわけですが、Googleの検索で表示されるのはこのインデックスされた情報のみになります。このインデックスがされていなければ絶対に検索にのることはありません。

ちなみにインデックスされているかを調べる方法があります。

Google検索で「site:調べたいサイトドメイン」を入力してみてください。(http://は不要です。)

例えばTCDのサイトを検索してみると、
「site:design-plus1.com」

インデックスされていることがわかります。しかし、「site:design-plus10.com」などとするとインデックスされていないことがわかります。

一度サイトの確認のためにこちらを試してみる事をおすすめします。

インデックスされていない場合の対応

もしインデックスされていない場合は２つの方法でインデックスできるようになります。

• Search Consoleへ登録する
• XMLサイトマップを送信する

Search Consoleへ登録する方法

①まずは、下記のサイトより、インデックスさせたいURLを登録してください。
https://www.google.com/webmasters/tools/

②Googleへログインし、インデックスさせたいサイトのURLを入力してください。

するとサイトの所有権のサイト確認が行われますので、手順にしたがい、Googleの用意した、HTMLファイルをあなたのサイトにアップしてください。

確認が成功すると、クローラーがサイトに訪れるようになります。

XMLサイトマップを送信する方法

XMLサイトマップとは、あなたのWEBサイトのいわば設計図です。XMLサイトマップをGoogleに送信し、登録することで検索エンジンにサイトの構成を把握してもらい、インデックスされやすくなります。WordPressをお使いの場合は、プラグインの「Google XML Sitemaps」が便利です。

「Google XML Sitemaps」のインストール

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

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

Google XML Sitemaps

「Google XML Sitemaps」の使用手順

「Google XML Sitemaps」を有効化したら、さきほどのSearch Consoleの「ダッシュボード」から「サイトマップ」をクリックしてください。

続いて、右上の「サイトマップの追加/テスト」をクリックしてください。

下記のようなポップアップ画面が表示されますので、

「sitemap.xml」と入力し、「送信」をクリックしてください。

これで正常にサイトマップが送信されます。

さらに早くインデックスさせるプラグイン

さらに、一工夫でこちらからGoogle側に記事をアップしたことを伝えるプラグインがあります。それが「PubSubHubbub（パブサブハブバブ）」になります。

「PubSubHubbub」のインストール

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

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

PubSubHubbub

プラグインには特に設定等はありません。有効化するだけで効果があります。また、似たようなプラグインで「PuSHPress（プッシュプレス）」というプラグインもありますが、基本的には同じ使い方ですのでお好みで使用してみてください。

プラグインの効果

さすがに有効化した瞬間インデックスされるというほどの即効性はありませんでした。質や量のないサイトでしたら、テストした感覚としては5日でインデックスされるものが2日でインデックスされるようになるといった速度でしょうか。もちろんもともと評価の高いサイトなどはすぐにインデックスされたという情報もありました。ただ、間違いなくインデックスされる速度はあがっていると思いますので、過度な期待はせず、導入してみるといいと思います。

まとめ

サイトを新しく立ち上げたときには、早くGoogleやYahooなどで検索できるようになってもらいたいものです。もちろん記事の内容や量、質によって検索上位にくるかは変わってきますが、そもそもGoogleにサイトを知ってもらわなければいくら対策しても意味がありません。また早くインデックスされることによって、記事のコピー等の対策にもなります。せっかく苦労して作ったサイトですから、今回の記事を参考に早くたくさんの人に知ってもらうように一工夫しましょう。

サイトやブログを作成しているとビフォア、アフターの比較画像を表現したいということがあります。できる限り比較画像というのは横並びがいいのですが、横並びに画像を配置すると、１枚の画像が小さくなってしまいます。そのため2枚の画像を縦に連続で並べることがありますがそれではユーザビリティーが悪くなりがちです。そこで今回は比較画像を表現したい場合にうってつけのプラグインがありますのでご紹介させていただきます。

このプラグインを使用するとこのような比較画像が簡単に作成できます。こちらはインドのタージ・マハルですが、朝と夕方の景色を比較してみました。

「TwentyTwenty」のインストール

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

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

TwentyTwenty

「TwentyTwenty」の使用方法

プラグインを有効にしたら、特に設定はありません。
下記のショートコードでイメージタグを括るとスライドで比較が行えます。
[twentytwenty]…[/twentytwenty]

上記の画像の設定例
一番最初に表示しました、タージ・マハルは下記のような設定をしています。

[twentytwenty]

<img src=”http://design-plus1.com/tcd-w/wp-content/uploads/2016/10/kizi01.jpg” alt=”kizi01″ width=”660″ height=”400″ class=”alignnone size-full wp-image-5629″ />

<img src=”http://design-plus1.com/tcd-w/wp-content/uploads/2016/10/kizi03.jpg” alt=”kizi03″ width=”660″ height=”400″ class=”alignnone size-full wp-image-5630″ />

[/twentytwenty]

「TwentyTwenty」の注意点

画像を指定される時は、同じサイズの画像を指定ください。サイズが異なると、Before,Afterでの画像の比較が分かりにくくなってしまいます。また画像にリンクをつけていても無視されますのでご注意ください。

カスタマイズ方法

Before,After文字の削除方法

上記のような使い方だと、マークがいらないという場合もあると思います。そういった場合には、下記のCSSを記入いただくと、マークを削除することができます。

.twentytwenty-before-label{display:none}
.twentytwenty-after-label{display:none}

画像に枠をつける

画像に枠を付けたいという場合には、下記のように設定することで枠をつけることができます。線の太さなどはお好みで調整ください。

.twentytwenty-container {
border: medium solid #999999;
}

類似プラグイン「Twenty20 Image Before-After」

「TwentyTwenty」と同様のプラグインで、「Twenty20 Image Before-After」というプラグインもあります。こちらは比較的新しいプラグインです。プラグインを有効化すると、下記のように投稿画面にタグが設定されます。

「Add Twenty20」のボタンを押すと、メディアライブラリが表示されますので、画像を2点選んでください。選択すると、下記の画面が表示されますので、サイズや並びなどの設定を行ってください。

「Insert Shortcode」を押すと、ショートコードが表示され、比較画像が表示されます。

縦分割やサイズを簡単に調整したいという場合には、「Twenty20 Image Before-After」をお選びください。

おすすめの使用方法

最後に比較画像を使ったおすすめの使用方法を紹介します。

設定画面の紹介

このブログ記事のようにWordPressの設定画面を解説したい場合には、表示画面と設定画面をこのプラグインを使い表示させることができます。例えば、Lotusのトップスライダーの解説であれば、下記のようにしてもいいかと思います。

・トップスライダーの設定は、テーマオプションの「トップページ」の項目から簡単に行えます。

といった解説法です。こうする事で設定画面と表示画面が対になっており、非常にわかりやすくなります。

PC表示とスマホ表示の比較

・このサイトはレスポンシブテーマです。PCとスマホの表示の違いを確認してみてください。

その他にも

• iphoneなどのガジェットのサイズや画面比較
• 美容室でのビフォア・アフター画像
• お部屋の改装前・改装後
• サイトのリニューアル前と後

など工夫次第で様々な場面でこのプラグインは活用可能です。ぜひお好みの比較画像を設定してみてください。

まとめ

本日は簡単に比較画像が作れるプラグインの紹介をしました。良質な内容の記事とそれを引き立てる表現力があると自然とアクセスアップにつながります。今回のようなプラグインを使用し、オリジナリティ溢れる記事をこれから書いていって見て下さい。今回紹介した使い方以外にも工夫次第で面白い見せ方ができると思います。

WordPressは今では大手企業でもよく使われていますが、彼らはセキュリティの意識も高いです。
で、ログインURLも見てみるとやはりURLを変えており流石だなと思うわけですが、

そもそもなぜWordPress管理画面のログインURLを変更するのかというとブルートフォースアタックによるセキュリティ破りから防御するためです。

ブルートフォースアタックとは正しい組み合わせが見つかるまで、ログイン資格情報の「推測」を網羅するWEBサイトの最も典型的なセキュリティ侵害です。
あなたのWordPressの管理画面のログインURLがhttp://yoursitedomain/wp-login.phpと分かっている状態ですと、毎日のようにブルートフォースアタックにさらされている可能性があります。

そして万が一にもそのままハッカーに管理画面にアクセスされてしまえば、WEBサイトのファイルを改ざんされたり個人情報の流出につながったりと今までの蓄積を一瞬でパァーにするような重大な被害に及ぶかもしれませんよね。
なのでそもそもログインURLから謎なものにしておけば、ブルートフォースアタックにさらされるリスクもある程度軽減されるかと思われますのでこのカスタマイズはしておくといつか良いことがあると思います。

さて、まずはプラグインを使わずにログインURLを変更する方法から見ていきましょう。

プラグインを使わずに管理画面ログインURLをカスタマイズする

まずはカスタマイズ前に必ずバックアップを取るのを忘れないでください。何かしら記述を誤ったときにすぐに元の状態に戻せるようにするためです。メモ帳などに保存しておくのもいいでしょう。

まずは下記コードを丸ごとコピペして.htaccessに追記してください。
.htaccessはWordPressをインストールしたルートドメインの直下にあります。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^enter/?$ /wp-login.php?45jfvo9204 [R,L]
RewriteCond %{HTTP_COOKIE} !^.*wordpress_logged_in_.*$
RewriteRule ^dashboard/?$ /wp-login.php?45jfvo9204&redirect_to=/wp-admin/ [R,L]
RewriteRule ^dashboard/?$ /wp-admin/?45jfvo9204 [R,L]
RewriteRule ^register/?$ /wp-login.php?45jfvo9204&action=register [R,L]
RewriteCond %{SCRIPT_FILENAME} !^(.*)admin-ajax\.php
RewriteCond %{HTTP_REFERER} !^(.*)yoursitedomain/wp-admin
RewriteCond %{HTTP_REFERER} !^(.*)yoursitedomain/wp-login\.php
RewriteCond %{HTTP_REFERER} !^(.*)yoursitedomain/enter
RewriteCond %{HTTP_REFERER} !^(.*)yoursitedomain/dashboard
RewriteCond %{HTTP_REFERER} !^(.*)yoursitedomain/register
RewriteCond %{QUERY_STRING} !^45jfvo9204
RewriteCond %{QUERY_STRING} !^action=logout
RewriteCond %{QUERY_STRING} !^action=rp
RewriteCond %{QUERY_STRING} !^action=register
RewriteCond %{QUERY_STRING} !^action=postpass
RewriteCond %{HTTP_COOKIE} !^.*wordpress_logged_in_.*$
RewriteRule ^.*wp-admin/?|^.*wp-login\.php /not_found [R,L]
RewriteCond %{QUERY_STRING} ^loggedout=true
RewriteRule ^.*$ /wp-login.php?45jfvo9204 [R,L]
</IfModule>

次にyoursitedomainを自分のサイトのドメインに変更します。yoursitedomainの部分は全部で5箇所あるのですべて置き換えてくださいね。

これだけの作業によりログイン画面が、
http://yoursitedomain/wp-login.php
がログイン不可になって
http://yoursitedomain/wp-login.php?45jfvo9204
でログインが可能となります。

45jfvo9204のところは自分の好きな覚えやすい文字列に置き換えてみるといいでしょう。

「あれ？.htaccessが見つからな～い」ってときはWordPressの管理画面から.htaccessにアクセスできるこのようなプラグインが便利です。FTPソフトを利用する手間が省けます。

https://wordpress.org/plugins/wp-htaccess-editor/

Xserverならサーバーパネルから.htaccessを設定することも可能なはずです。

WordPressのログインURLを変更するプラグイン

プラグインを用いれば上記の作業を一瞬で可能とするので時間短縮の面ではとても便利です。ただしプラグイン自体にもセキュリティの脆弱性を孕んでいることは覚えておかなければなりません。

WPS Hide Login

https://wordpress.org/plugins/wps-hide-login/
ログインURLを変更するならこれだけで十分なプラグインです。管理画面＞一般＞設定からログインURLを変更できるようになります。

iThemes Security

https://wordpress.org/plugins/better-wp-security/
セキュリティを強化する上では高機能すぎるプラグインです。
これはログインURLを変更する以外にも多数の機能があります。

これだけでかなり充実したプラグインであることが分かります。

まとめ

以上となりますが、これだけでもけっこうセキュリティ効果はありそうですよね。
だがしかしデフォルトでのユーザー名の「admin」の使用を避けることや、WordPressやプラグインのバージョンを最新にしておくことも重要なようです。
詳しくは弊社で以前に書いたこちらの記事を参考にしていただけますと幸いです。

最低限これだけはしておこう！WordPressのセキュリティを強化する5つの方法。
http://design-plus1.com/tcd-w/2015/09/security.html

それでは皆さん安心安全な良いWordPressライフを！

ビデオ会議には何を使っていますか？Skype？Googleのハングアウト？実は、便利なわりに意外と知られていないのが今回ご紹介するWEBサービス「appear.in」です。

私はこれを知る前は、ビデオ会議サービスならSkypeやGoogleのハングアウトを使う主義でしたが、「appear.in」を知ってからこちらを頻繁に利用するようになってきました。

ログインや登録が必要のない無料ビデオチャット「appear.in」

このサービスは何と言っても面倒な会員登録サービスが必要なく、そのまますぐに使えるのが特長です（一部機能の使用には登録が必要です）。簡単すぎて使い方をわざわざ説明するほどでもないくらいです。

とりあえずappear.inのホーム画面にアクセスし、自分の部屋（ルーム）の名前を発行してあげてください。
たとえば「tcd」と言った名前にすればルームのアクセスURLがそのまま https://appear.in/tcd となり、このURLをメンバーにメールやラインで教えてあげればすぐにチャットが始まります。

3G、4G、またはWiFiを使用して、同時に最大8人と話すことができます。インストールする必要もなくGoogle Crome、Mozilla Firefox、Operaのブラウザですぐに利用できるのです。

このようにさまざまな画面の共有も簡単にできます。下の人たちは別々の場所にいながら一つの画面を見て合図を出しあっていますね。

・画面共有機能の使い方
下のスクリーンにあるボタンをクリックすると拡張機能をインストールするポップアップが表示されます。どうやらGoogle Cromeで使う場合は拡張機能を実装することになっているようです。

共有画面を選択できます。ブラウザでなくても、keynoteでも株価のチャートでも何でも映し出せます。

これだけ

やはりSkypeやハングアウトとは違ったお手軽さや使い勝手を演出しているのがこの「appear.in」のメリットではないでしょうか。

利用の目的も多種多彩です。

・世界中の専門家と意見を交換できる
・バンドメンバーと楽器を演奏し一緒に音楽を作成するか、または歌う
・様々な学校やグループ間の議論をスポンサーし、ビデオ会議、録音
・教師が自分の専門知識を学生たちに共有する
・会議にやむ負えず遅刻している人間を追加する
・家庭教師の生徒の自宅に行かなくても授業ができる

そしてやはりあった、

WordPressでappear.inを動かせるプラグイン「appear.in WP」

https://ja.wordpress.org/plugins/appear-in-wp/
このプラグインを使えばショートコードであなたのappear.inのルームを表示することができるようです。

あなたのルーム名を埋め込むだけです。

https://wordpress.org/plugins/appear-in-wp/screenshots/
＊お使いのテーマによりましてはサイト内のスクリプトと不具合を起こし正常に表示されない可能性もございます。

まとめ

やっぱりログイン不要で使えるのはいいですよね。
いろいろログインしてるとアカウントの管理が面倒で、しかも結局メモしてもメモした場所すら忘れてしまう横着な僕にとったらこれはとてもありがたいです。

ちなみに海外にいる友人ともこれで会話しましたが、画質も良くて音声が途切れるというようなこともなく、普通に使えました。いろいろ用途を考えてぜひ使ってみてください！

そして企業内コミュニケーションにはSlackもおすすめ↓↓

・企業内コミュニケーションツールには「Slack」がおすすめ＜登録編＞
・企業内コミュニケーションツールには「Slack」がおすすめ＜画面構成編＞
・企業内コミュニケーションツールには「Slack」がおすすめ＜操作編＞

SEOに強いWordPressで小説を公開したい、あるいは社訓・経営理念をホームページに..などなどやはり日本語といえば縦書きですので記事を縦書きできるようにしたいと思った人は少なからずいるのではないでしょうか。

この記事ではWordPressで簡単に記事を縦書きにできるカスタマイズ方法についてご紹介したいと思います。

記事を縦書きにするプラグイン「h2vR for WordPress」

今回は自作PCテクニカルセンター様で紹介されている「h2vR for WordPress」というプラグインをご紹介します。

もともと記事を縦書きにできるjQueryプラグインh2vR.jsをWordPressで簡単に利用できるようにしたプラグインのようです。

プラグインをダウンロード

まずは自作PCテクニカルセンター様で配布されているプラグインのファイルをダウンロードさせていただきます。

管理画面でアップロード

そして管理画面でプラグインを追加→アップロード

解凍せずzip形式のままアップロードしてください。

これで有効化すればheadセクション内にh2vRのjsとcssが読み込まれ記事を縦書きにできるようになります。
縦書きにしたい文章は[h2vr][/h2vr]のショートコードでサンドイッチします。

char=”15″は一列に表示される文字数制限です。1列に最大15字並べられます。

文字を大きくしたい場合はsizeを定義します。

size=”32″でfontサイズ32pxになります。

fontを明朝体にしたい場合はstyle.cssにfont-familyを定義します。

._r_e{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

部分的に文字色の変更を行えばもっと見やすくなります。

クラス（class）の定義も可能

クラス名を付加することでより自由にデザインすることが可能となります。

.design1{  color: #fff;
    background: #f08080;
    padding: 20px;
    border: 1px dashed rgba(255,255,255,0.8);
    box-shadow: 0 0 0 5px #f08080;
    -moz-box-shadow: 0 0 0 5px #f08080;
    -webkit-box-shadow: 0 0 0 5px #f08080;
}

.design2 {
    border: 2px solid #da4033;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.design2::before {
    background-color: #fff;
    color: #da4033;
    content: 'ビジネス会話の基本';
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

参考：コピペで使えるCSSデザイン枠テンプレート
参考：CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン

以上です！記事を縦書きにできるプラグインのご紹介でした。
プラグインダウンロードはこちら→WordPressの記事を縦書き表示するプラグイン！小説同人サイトに便利なh2vRを設置する方法！

たとえば、「WordPress」と英単語で検索すると、カタカナの「ワードプレス」が出てこなかったり、関連するキーワードまで正確に入力する必要がある為、ページ量が膨大だと目的のページを探すのも大変なことがあります。そもそも検索する内容のキーワードの綴りがうろ覚えだと、全く目的のページが探せないこともありますね。それと毎回検索結果ページを表示させるのもちょっと面倒です。

そこで、Google検索のようにサジェストが表示されればいいのになぁ、と思っていたところ偶然見つけたのが「Algolia」という検索プラットフォームです。WordPressのデフォルトのサイト内検索に検索候補を表示する機能（インスタント検索）を実装することができるので、検索結果ページを表示することなく、らくらくと検索でサイトを回遊させることができます。

インスタント検索機能とは

インスタント検索機能とは、Google検索で見られるような検索キーワードを入力し始めると、検索している情報を 瞬時に予測し、検索キーワードに合った検索候補を表示することです。

インスタント検索機能は、ユーザーがキーワードを入力し始めるとすぐにコンテンツを見つけ出すのを手助けし、検索結果ページを表示するよりもはるかに早く所望のコンテンツを取得させることができます。

Algoliaとは

Algoliaは、Webサイトやアプリケーションなどに使うための滑らかな検索エクスペリエンスを構築することを可能にしたクラウドベースの検索プラットフォームです。
有効化するだけでAlgoliaはあなたのWebサイトのすべてのコンテンツをインデックスし、デフォルトのWordPressの検索よりも強力なクラウドベースに交換します。
インスタント検索を実装すれば、ユーザーは、検索結果ページを見ることなく、何の苦痛も感じずに、至って滑らかにコンテンツを取得できることができます。

ちなみにAlgoliaは10,000レコードと月10万クエリまでは無料となっており、それ以上となると月額$ 49（約5000円）から有料プランに変更する必要があります。

Algoliaの使い方

アカウント発行→API取得

まずはAlgoliaの公式サイトに飛びアカウントを発行し、APIを取得する必要があります。

そして右上の上部メニューより「SIGN UP FREE」をクリック。

アカウント情報を入力します。

ログインするとチュートリアルが始まりますが、「Skip tutorial」で飛ばしていただいて結構です。

左のサイドメニューでAPI KEYの確認をし、次にWordPressにプラグイン「Search by Algolia」をインストールします。

WordPressに「Search by Algolia」をインストール

WordPressの管理画面より、プラグイン＞新規追加で「Search by Algolia」をインストールし有効化。

一般的な設定

インストールを完了すれば、初期設定で最初に先ほど取得したAPI KEYを入力します。

「Indexing」でAlgoliaにインデックスさせるページにチェック。

Autocompleteで検索結果に表示させるページにチェック。
サジェストに表示させる記事数などもここから設定可能です。

「Search Page」で「Use Algolia in the backend」にチェック

設定を終了し、無事インスタント検索が実装されたことを確認。

精度の高い分析で集客を効率化

Algoliaの導入はただ単に、検索オプションとしてインスタント検索を実装するだけでなく、ユーザーのサイト内での検索クエリを精密に分析できるという利点があります。

サイト内でよく検索されているキーワードに沿って関連ページをどんどん増やしたり、古いコンテンツのメンテナンスを行えば、よりユーザーに親しまれるサイトに成長していくことでしょう。

まとめ

検索結果が今見てるページの上にドロップダウンリストで出るので、その中のどれかをクリックするのはGoogleの場合よりも早いです。機能もたくさんあり、人気や地理的な位置、タグ、日付などで結果を絞り込むこともできます。

ユーザーにとってはかなり使いやすい検索オプションだと思いますので、よかったら導入してみてはいかがでしょう。

ちなみにWordPressのデフォルトの検索機能をできるだけ向上させる方法として、当サイトでもこれまで数多く紹介されておりますので、ついでにどうぞ↓↓
・サイト内検索の範囲を拡大するWordPressプラグイン「Search Everything」
・Googleカスタム検索のメリットとTCDテーマで利用する方法
・ユーザーが検索したワードをハイライトして表示するWordPressカスタマイズ

WordPressの固定ページを使って、簡単にカッコいい特集ページを作る方法をご紹介します。

今回は、ページの上部にヘッダーも設け、特定タグ・カテゴリーの記事だけを特集ページ内で一覧で表示させる方法です。一度ページを設定すれば、あとは特定のタグやカテゴリーの記事を追加する度に、特集ページにも一覧として追加されます。

例えば、このようなイメージです。固定ページの上部にヘッダーが表示され、その下には特定のタグ or カテゴリーの記事一覧が表示されます。

では、手順を解説していきましょう。

固定ページを使ってテンプレートを作る

WordPressの固定ページは、色んなテンプレートを用意することができるので、まずは特集ページ用のテンプレートを作成します。

メモ帳やmiなどで、「special_postlist.php」と名づけたファイルをご用意ください（ファイル名は何でもok）。次に「header.php」と「footer.php」を読み込む記述とテンプレート名を書きます。

<?php
/*
Template Name: 特別ページ
*/
?>
<?php get_header();  ?>
<?php get_footer(); ?>

次に特定タグ（カテゴリー）を読み込みそれを一覧にするコードを書きます。以下のコードのコピペでそのまま使えます。

タグ特別ページ一覧

<?php
/*
Template Name: タグ特別ページ一覧
*/
?>
<?php get_header(); ?>
<!----ここから----->
<main id="specialwrap">
<div class="specialposts" clearfix">
 <ul class="post_list clearfix">
  <?php
       query_posts('tag=●●&showposts=●●&orderby=date');
  ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
  <li>  
  <h4 class="post_title"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h4>
  <div class="post_img"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>

     <div class="post_excerpt"><?php the_excerpt(); ?></div>

  </li><!-- END .post_list -->
  <?php endwhile ?>
 <?php else: ?>
  <li class="no_post"><p>記事がありません</p></li>
<?php endif; ?>
 </ul>  
</div><!-- END .specialposts -->
</div><!-- END main#specialwrap -->
<!-----ここまで---->
<?php get_footer(); ?>

カテゴリー特別ページ一覧

<?php
/*
Template Name: カテゴリー特別ページ一覧
*/
?>
<?php get_header();?>
<!----ここから----->
<main id="specialwrap">
<div class="specialposts" clearfix">
 <ul class="post_list clearfix">
  <?php
       query_posts('cat=●●&showposts=●●&orderby=date');
  ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
  <li>  
  <h4 class="post_title"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h4>
  <div class="post_img"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>

     <div class="post_excerpt"><?php the_excerpt(); ?></div>

  </li><!-- END .post_list -->
  <?php endwhile ?>
 <?php else: ?>
  <li class="no_post"><p>記事がありません</p></li>
<?php endif; ?>
 </ul>  
</div><!-- END .specialposts -->
</div><!-- END main#specialwrap -->
<!-----ここまで---->
<?php get_footer(); ?>

tag=●●やcat=●●には、管理画面＞投稿＞タグ（カテゴリー）でIDを調べて挿入します（調べ方はこちら）。

showposts=●●には1ページに表示したい記事数を入力してください。

そして、保存したspecial_postlist.phpをFTPやファイルマネージャーから、テーマファイルにアップロード。

これで作成した固定ページテンプレートがページ属性で選択できるようになります。

その際の固定ページのタイトルや記事は空白で構いません。入れても先ほどのコードでは出力されないようになっていますので^^公開すれば記事一覧ページの出来上がりです。

ランディングページの作り方

上記の要領で固定ページを使えば各ページごとにレイアウトを変えることができますので、たとえば1カラムのレイアウトがないテーマでもランディングページのような1カラムのレイアウトを作ることが可能となります。
「header.php」をランディングページ専用に「header-special.php」と名付け、作成してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<title> 特別ページ</title>
</head>
<body>
<!-- BEGIN header -->
	<header id="header">
	<div id="headerinner">
		<div class="lptitle">特別ページ</div>
		<div class="specialnav">
		<div class="mailmagazine">ダウンロード</div>
		</div>
                </div>
　　　　　　　　　　　　　　　　</div>
	</header><!-- END header -->

なぜ「header.php」を使わないかというと、デザインで通常レイアウトと分けるためです。LP用にアクセス解析を設定することもできるようになります。

次にファイル名を「specialpage.php」とし、以下のコードをコピペします。

<?php
/*
Template Name: 特別ページ
*/
?>
<?php get_header('special');  ?>
      <main id="special">
	<!-- ▼表示する記事がある場合、ループ開始▼ -->
<?php
if(have_posts()) :
while(have_posts()) :
the_post(); ?>
<div class="specialheaderimage">
<?php if ( has_post_thumbnail() ) { // 投稿にアイキャッチ画像があるか
 the_post_thumbnail(); } ?>
</div>
	<div class="specialtext">
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

	<?php the_content(); ?>
	</div>
<?php endwhile; else: ?>
	<p>記事が見当たりません</p>
<?php endif;?>
	<!-- ▲表示する記事がある場合、ループ開始▲ -->
      </main>
<?php get_footer(); ?>

そして先ほどと同じくこれをFTPからテーマファイルにアップロードすれば、下記のようなLPが作れました。

スペシャルページヘッダーには投稿のアイキャッチを表示します（推奨幅1200px）。今回は固定ページのタイトルと記事を書いてください。見出しはすべてh2です。

一応、上のサイトのCSS例です。ただしサイトによってびみょーに異なると思いますので、その辺はご自身で微調整お願いします。

/* ============================================================================
 *		スペシャルページ
 * ============================================================================ */

#header {
    background-size: auto;
    background: #fff!important;
    box-shadow: 1px 1px 1px rgba(150,150,150,30);
    padding-top: 20px;
}
.lptitle {
    text-align: left;
    float: left;
    width: 40%;
}
#headerinner {
    max-width: 1080px;
    margin: 0 auto;
}
.specialtext{
     max-width:800px;
     margin:60px auto;
}
.specialheaderimage{
     height:400px;
     overflow:hidden;
}
.specialtext h2{
    position: relative;
    margin: 50px 0;
    padding: 0.2em;
    font-size: 32px; 
    font-weight: bold;
    color: #333; /* テキスト色 */
    border-bottom: 2px solid #ccc;
    font-family:"Century Gothic",Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; 
}
.specialtext h2:before,
.specialtext h2:after{
    content: '';
    border-right: 18px solid #fff;
    border-top: 15px solid #ccc; /* 吹き出し部分の線の色 */
    bottom: -15px;
    position: absolute;
    left: 26px;
}
.specialtext h2:after{
    border-top-color: #fff;
    border-right-color: transparent;
    bottom: -11px;
    left: 28px;
}
.specialnav{
    position:relative;
}
.mailmagazine{
    width:300px;
    position:absolute;
    right:0;
    top:30px;
    background:#ff0000;
    padding:20px 50px;
    text-align:center;
    font-size:30px;
    color:#fff;
}

まとめ

いろいろなページが楽チンで作れるのがWordPressのメリットですね^^

無料ブログではここまでサイトをカスタマイズできません。ちなみにこれと似たようなことは”カスタム投稿タイプ”使えばできると思いますが、このやり方のほうがWordPress初心者の方にとっては取っつきやすいのではないでしょうか？

それではまたお会いしましょう！See you

WordPressはオープンソースなので、とても拡張性が高いうえに、SEOにも強いので今ではお店の集客の強い見方となってくれています。しかしその反面セキュリティに脆弱性が常につきまといハッカーに狙われやすいという傾向があるのも事実です。

したがって、WordPressでサイトを作れば、セキュリティ対策も同時に備えておかなければなりません。そしてその対策の一つとして「管理画面のログインURLを変更する」というのはかなり有効であることが分かっています。

なぜならWordPressのデフォルトのログインURLはhttp://example.com/wp-adminかhttp://example.com/wp-login.phpと共通なので、何も変更がなければハッカーにログイン画面が分かってしまい、そのまま何度もいろんなID、パスワードでログインを試行されるというブルートフォースアタックにより乗っ取られてしまうからです。

だったら、ログインURLを変えてしまおう。ということでWordPressのログインURLを変更する方法については前回はPHPを使わない方法で記事にしましたが、今回、もっと簡単に、より便利なプラグインが見つかったのでご紹介したいと思います。

ログインURLを権限ごとに変更するプラグイン「Login rebuilder」

このプラグインの最大のメリットは管理者や編集者、購読者ごとにログインURLを変更できるところにあります。

会員サイトを作ったときに管理者とユーザーが同じURLでログインするというのも好ましくないですよね。その辺自由に調整できていいと思いました。

ちなみにWordPress私的マニュアル様が作成されたプラグインとなります。
公式に登録されているみたいですので、管理画面＞プラグイン＞新規追加　検索しインストールできます。

インストールしたら有効化します。

「Login rebuilder」の設定

無効なリクエスト時の応答

元の管理画面（wp-login.php）にアクセスしたときの応答になります。

403はアクセス制限などを設定している場合に返されるコード、404はページが存在しない場合に返されるコードになります。
ここではトップページにリダイレクトさせることにしてみました。

新しいログインファイル

管理画面のログインURLを設定します。デフォルトでは「admin-login.php」となっていますが何でも大丈夫みたいです。

第2ログインファイル

購読者や編集者用に分けて第2のログインURLを設定することが可能なようです。

ログ保存

誰がいつログインしたかIP履歴を管理できます。サイトに来ている不正アクセスなどを調べることができます。似たようなプラグインに「Crazy Bone」がありますね。

確認すると確かに変わってました。作業工程自体は2分くらいで終わりました。この2分絶対に惜しんではダメですよね。

まとめ

注意点として、WordPressのログイン画面はwp-login.phpというファイルを使っているのですが、このファイルは不必要だと思って削除しては絶対にダメです。
また、プラグインを無効化しても、任意で作成したログインURL用のファイルが残っていると、そのアドレスからログイン出来てしまうので、使用をやめる場合はそのファイルも削除する必要があるようです。

セキュリティの意識は事業者として大事ですね。関連記事もついでにチェック↓↓
■セキュリティ向上のためのWordPress管理画面のログインURLカスタマイズ方法
■WordPress管理画面のログインにセキュリティ質問を追加するプラグイン「 WP Security Question」

サイドバーウィジェットや任意の箇所に広告をランダム表示させることのできるプラグインをご紹介します。

ASPのバナーはデザインによって成約率が全く違いますので、色々入れ替えてクリック率などを確かめたいときに便利です。Javascriptでも同様のことが可能ですが、このプラグインは「掲載期間の設定」「インプレッション数の制限」「グルーピング」などもできますのでおすすめです。

使い方

インストールと有効化

WordPress管理画面から
→「プラグイン」
→「新規追加」
→「Ads by datafeedr.com」を検索
→「いますぐインストール」
→「有効化」

新規広告の追加

有効化が終わったら左のメニューで「Ads」→「Add New Add」を選択。
するとこのように通常の投稿画面のようなページが出てきますのでそちらに任意タイトルを入力します。

広告タグの貼り付け

投稿欄にはASPなどの広告タグを貼り付けます。

「Data Range」から広告表示の開始日（Start Date）と終了日（End Date）が指定できます。

掲載期間やインプレッション制限

「Data Range」から広告表示の開始日（Start Date）から終了日（End Date）の指定が可能です。
「Impression Limit」を指定すると広告の表示回数を指定できます。ここでは「1000」と指定しているので、広告表示が1000回を超えたところで表示されなくなります。「0」、あるいは空欄の場合は、表示回数が無制限になります。

公開するとこのように一覧が表示されます。インプレッション数などが一覧から確認できます。

作成した広告グループの貼り付け

広告をテーマ内に貼り付けるためにはショートコードまたはPHPのテンプレートタグを取得する必要があります。

WordPress管理画面から
「設定」
→「Ads」
を選択して

まずは
■Enable Shortcodes in Text Widgets：テキストウィジェットでショートコードを使えるようにする　
■Enable an Impression count for admin（s）：管理管理画面でインプレッション数をカウントできるようにする
の2つにチェックをいれます。

ショートコード生成

先ほど作成したグループを選択するとショートコードが生成されます。
広告数（Number of Ads）や順番（Orderby）はお好みあわせ設定してください。

最後にショートコードをコピーして
外観＞ウィジェットで「テキスト」の中に貼り付ければ完了です。

また直接テーマファイル内に組み込みたい場合は、PHPの方を選択しテンプレートタグを任意箇所入力します。

説明は以上となります。

広告管理のプラグインはこちらもおすすめです。
■これは便利！125x125px専用の広告管理WordPressプラグイン「WP125」
■関連記事や広告を記事下に自動挿入するWordPressプラグイン「Add Post Footer」

近年、少子化の影響から婚姻組数、挙式実施率が減少傾向にあり、今後のブライダル市場は減少傾向にあるとささやかれています。

その一方で、経済的な理由から大手の結婚式場で盛大な挙式を上げるのではなく、ホテルウェディングやレストランウェディング、フォトウェディングなどで費用を抑えながらもクオリティーの高い挙式を望むカップルも増えているため、中規模のウェディング場にとっては新しいビジネスの機会と捉えている経営者も増えているのではないでしょうか？

• 大手結婚式場にも劣らないハイクオリティなホームページを低コストで作りたい。
• 圧倒的に美しいビジュアルのホームページで競合との差別化を図りたい。
• SEOに強いと言われるWordPressで自社ホームページを構築したい。
• ポータルサイトの広告費に依存しない集客メディアを育てたい。
• 挙式コンセプトと顧客ニーズをマッチさせることで広告コストを引き下げたい。

そんな、素敵なウェディングプランを提供する事業者のためのWordPressテーマ「STORY」（ストーリー）は、ブライダル業界の新しい集客の形と、競合との圧倒的差別化を図るためのブランディング戦略を提案します。

候補地として”選ばれる結婚式場のホームページ”の役割とは？

新婚カップルが結婚式場を決める際には【挙式のスタイル（教会式・神前式・人前式・ホテル・レストラン・ゲストハウス・フォトウェディングetc）】や【総額費用】だけではなく、【立地】が大きなポイントだと言われています。

たとえば、新郎が関西出身で新婦が東北出身であれば、現在2人の生活基盤のある場所か、新郎新婦のどちらかの地元、もしくは双方のゲストの交通アクセスを考慮して中間地点といったように、結婚式を挙げる場所は必然的に絞られます。

そのため、候補地にある結婚式場の中でトップの地位を確立することが、今後のブライダル業界で繁栄していくための大きなポイントになることは間違いありません。

そして、以前は5～6の結婚式場を”見学してから会場を決める”カップルが多かったのに対して、現在ではインターネットで結婚式場の挙式スタイル・費用・立地など情報を十分に集めることが可能になり、

1～3の候補会場に絞り、”決めてから会場を見学する“というスタイルが主流になりつつあります。

この「見学してから決める」から「決めてから見学する」という転換は、インターネットの普及とともに、スマートフォン所有率も70%を超えたことが大きな要因ではありますが、数枚の小さな写真と予算、収容人数などの少ない情報だけで競合の結婚式場と横並びにされるポータルサイトでは、候補に選ばれるような差別化を図ることは難しく、広告コストばかりがかさみます。

そのため、圧倒的なビジュアルの美しさと情報量、そして言葉では言い表せない感動的なストーリーを展開し、新婚カップルが描く挙式イメージを共有することが、”選ばれる結婚式場のホームページ“の大きな役割になります。

そして、今回私たちTCDは、ブライダル事業を展開されている方の要望、ニーズに応え、一生の思い出に残る結婚式を挙げたい新婚カップルに見つけてもらい”選ばれる結婚式場のホームページ”というコアコンセプトをもとに、【STORY】を作りあげました。

圧倒的なビジュアルでブランディングを実現するトップページ

ホームページを開いた瞬間、スクリーンいっぱいに広がる美しいビジュアルは見る人の感性にダイレクトに訴え、肌をなぞるような絶妙な速度の動きで視線を引き込みます。

ぜひ、デモサイトでご確認ください ⇒ STORYデモサイト

このトップページの画像は、WordPressの管理画面にあるテーマオプションから、最大3枚までどなたでも簡単に設定することができます。（MP4動画やYoutube動画を設定することも可能）

細部にまでこだわったコンテンツ表示とフッターデザイン

また、スクロールするたびにフワッと浮かび上がる各コンテンツから、最下部のフッターまで一切手抜きのないデザインを完成させました。

挙式コンセプトや情報を的確に伝えるレイアウトページ

STORYには、結婚式場の印象を決定するトップページのほかに、挙式コンセプトを伝えるためのランディングページや新婚カップルの知りたい情報を載せることができる、汎用性の高い複数のデザインレイアウトページを用意しており、固定ページの新規作成から選択することができます。

この固定ページは数に制限なく作成することができますので、挙式コンセプトやウェディングプランだけではなく、地図ページや提携ホテルの情報、地方や観光地であればゲストのための周辺観光スポットなどの特設ページなども作成することができます。

テンプレートタイプ.1

テンプレートタイプ.2

テンプレートタイプ.3

お二人の挙式イメージを膨らませるフォトギャラリーページ

先輩カップルの幸せいっぱいの写真は、挙式イメージを膨らませる重要な役割を果たします。結婚式を挙げられたカップルの声やプランナーの感謝の言葉なども掲載することができます。

また、このギャラリーページでは、横長のワンサイズでリサイズするのではなく、ウェディングドレス着用などの写真を美しく魅せるために、縦長画像にも対応したこだわりのギャラリーとなっています。

こちらのギャラリーページも数に限りなく作成することができますので、ウェディングドレスのカタログページやテーブル装花の特集ページなどにも活用いただけます。

広告媒体に依存しない集客のできるのホームページの作り方

SEOにも強いと言われているWordPressでホームぺージを運営することができれば、広告媒体に依存せずに検索エンジンから直接集客が可能になりますので、サイトのタイトルは地域名と挙式コンセプト、そしてブランディングしたい名称などを記載しましょう。

しかし、それだけでは検索エンジンから評価を得ることはできません。

STORYはブログ機能が標準装備されているので、「結婚式でゲストに楽しんでもらうためのサプライズ演出10選」といった、結婚式を考えているユーザーが知りたい情報を発信し、アクセスの集まるメディアにしていくことが大切です。

しかし、検索エンジンは対策するものではありませんので、すでにWEB上ある情報を寄せ集めて記事にする必要は一切ありません。

日々の業務ではプランナーが新郎新婦さんの疑問や質問に対して真摯に答えていると思いますので、疑問や質問をメモしておき、結婚式場の社員同士で共有しながら記事を作りましょう。

また、結婚式を終えた新郎新婦へのインタビューなども記事にすることができれば、これから挙式を考えられているカップルの大きな検討材料になります。

このような、オリジナリティーのある有益な記事を積み重ねていくことで、自然とホームページの信頼度（ドメインパワー）が付き【新大阪　結婚式場】といったキーワードで上位表示される可能性も高まっていきます。記事ページの作り方はこちらを参考にしてください ⇒ 「このWordPressテーマ神ってるっ！」あなたのコンテンツが劇的に生まれ変わる”国内初”のページビルダーとは？

反応率を高め即集客に結び付く効果的な広告の活用方法

検索エンジンから直接集客することができれば広告費はかかりませんが、即集客に結び付く費用対効果の高い広告であれば活用しない理由はありません。

たとえば、検索エンジンの上位広枠に表示されるリスティング広告を使う場合、特に地方の結婚式場であれば【地域名 ＋ 結婚式場】のキーワードでも低コストで出稿することができますが、ユーザーが広告をクリックした際に、クオリティの低いページが表示されてしまえば、即離脱につながり、費用対効果は下がってしまいます。

“選ばれる結婚式場のホームページ“をコンセプトに作り上げたSTORYは、検索エンジン、ソーシャルメディア、そして広告など、あらゆる媒体からアクセスしてきたユーザーの視線を止め、反応率を高めるために各デバイスにも依存しない美しさを実現しています。

ぜひ、お手持ちのスマートフォンでデモサイトをご覧になってください ⇒ TCDテーマ「STORY(TCD041)」

また、スマートフォンに最適化されたフッターバーを採用（表示・非表示の選択可）することで、「ここの結婚式場良さそうだね！」と思ったときに、すぐに電話やお問い合わせなどしてもらえる工夫により、コンバージョンを高め利益に貢献します。

ブランディングとは自社の強みを提示するだけではなく、有益な情報を発信しながら、多くの見込み客や潜在客の認知を獲得し、結婚式を挙げて頂いた先輩カップルの口コミがソーシャルメディアなどで広がり、幸福がつながっていく一連のプロセスのなかで確立していくものです。

理想の結婚式を描く、お二人の思い出と未来を物語で繋ぐ「STORY」（ストーリー）をブランディングにお役立てください。

合わせて読みたいWordPressテーマ【STORY(tcd041)】の関連記事

第1回 : ブライダル業界の集客革新を提案するブランディング戦略
第2回 : あなたのコンテンツが劇的に生まれ変わる”国内初”のページビルダーの使い方
第3回 : 最上級の美しさで訴求するランディングの活用イメージ

WordPressTCDテーマ「STORY」に搭載された新機能のページビルダーについて、早速使って頂いている方から「このWordPressテーマ神ってるっ！」「これはやばい！」「画期的な機能ですね。」との評判を頂きました。

また「ページビルダーとはどのような機能なのですか？」といったお問い合わせも多数頂いておりますので、ここではTCDオリジナルページビルダーの使い方を解説します。

コンテンツが劇的に生まれ変わる”国内初”のページビルダー

ブログの記事は、文章を正しく【構成】することが重要です。しかし、いくら素晴らしい内容の文章が完成したとしても”文字だけを羅列しただけの記事”は読み手が退屈してしまい、離脱につながってしまいます。それではせっかくのコンテンツがもったいないですよね。

そのため、文章を【構成】するだけではなく、画像を用いて視線を動かしたり、項目ごとに小見出しでアクセントを付けたり、タグを活用してグルーピングしながら、読み手を楽しませたり”おもてなし”をする意識をもって、視覚に刺激を与える【構図】を整えることが大切です。しかし・・

• 「CSSなどの基本的な知識がないから自分でカスタマイズするのは難しい」
• 「できればいろいろなプラグインを併用するは避けたい」
• 「もともとデザインとかのセンスを持ってないから自信がない」

このような悩みを持っている方が多いため、私たちTCDは全精力を傾け、検証と改善を繰り返しながら【WordPress初心者でも、自由自在に記事ページがデザインができる”国内初”のページビルダー機能】を作り上げました。

CSSのカスタマイズやプラグイン不要で、このようなデザインの記事ページが作れますので、ぜひデモページをご覧になってください↓

WordPressブログに革命を起こすページビルダーでできること

ページビルダーはブログ記事を作る際に必要となる文章や見出し、画像の挿入はもちろん、記事カラムを分割したり、美しいスライダーやGoogleマップ、タブなどのコンテンツを直観的な操作で追加することができます。

たとえば2つに分割したカラムの左側に画像、右側にタブを追加すれば ↓ のようなレイアウトも簡単に作ることができます。

直観的に操作することができるページビルダーの使い方

通常、WordPressの記事投稿の画面では【ビジュアルエディタ】と【テキストエディタ】が用意されており、どちらかを選択して記事を書くことができますが、TCDテーマのSTORYをインストールすると、【ページビルダー】というタブが追加されています。（まずここで驚かれる方が多いです）

ページビルダーのタブをクリックすると、ページビルダー画面に切り替わり【行】や【コンテンツ】を追加していくことができます。

まず初めに【行を追加する】をクリックしてみましょう。するとポップアップウィンドウが開きますので、任意のカラム数（1から最大6カラムまで選択可）を選択します。また、カラム間のスペースも任意の数値に変えることができます。

さらに、分割された各カラムサイズも直観的な操作で調整が可能です。

カラム数や各カラムのサイズが決まり【追加】をクリックすると、ページビルダー画面に【行】が追加されますので、今度は指定したカラムに【コンテンツを追加】してみましょう。

【画像】【見出し】【キャッチフレーズ】【文章】【Googleマップ】【スライダーの設定】【タブ】の中から、追加したいコンテンツを選択することができます。（ここでは画像を追加してみます）

アップロードした画像にはリンク先URLを指定することも可能です。

指定したカラムすべてに画像を追加すれば、このように簡単に記事内に画像を並べることができます。

もし、各カラム間のスペースが不要であれば、【行を編集する】をクリックして、数値を0にします。

すると画像間のスペースがなくなりました。

スマホの表示方法も変更可能でモバイルファーストに対応

現在の検索エンジンでは、スマートフォン向けのコンテンツページを評価するモバイルファーストを実施しているため、スマホ表示にも意識を向けましょう。

ページビルダーで横並びにした画像は、スマホでも最適な表示ができるように【横並びの状態を解除する】を選択した状態では、自動でレスポンシブ対応になり画像は縦に表示されます。

もし、パソコンと同じように画像を横並びにしたい場合には、【横並びの状態を保つ】を選択することで表示方法を切り替えることができます。

SEO観点を考慮した見出し＆キャッチフレーズの使い方

1カラムの【行】を追加し、【見出し】と【キャッチフレーズ】のコンテンツを追加してみます。

フォントサイズは任意の数値を入力し、フォント色はカラーピッカーで自由に変更が可能です。フォントタイプも【メイリオベース】【游ゴシックベース】【游明朝ベース】から選択することができます。

すると記事内にこのような、見出しとキャッチフレーズが作れます↓

実は、この【見出し】と【キャッチフレーズ】のフォントサイズ、カラー変更、フォントタイプの選択などの機能はまったく同じものなのですが、ソースを見て頂くと、見出しは【H3】で、キャッチフレーズは【H4】で出力されているのが分かると思います。

読み手にはデザイン的な差異で要点を伝え、SEO観点を考慮してH3とH4の使い分けができる仕様になっております。

WordPress初心者でも使いやすいUIを実現したページビルダー

同じ要領で、複数の【行】と【コンテンツ】を追加した後も、ドラッグ＆ドロップで任意の場所に移動することができます。

このように、ページビルダーはWordPress初心者でも使いやすいUIを実現していますので、後はあなたのアイデア次第！ぜひあなたのセンスを活かして素敵な記事やランディングページを作ってください。

ページビルダーを活用して作成したサンプル記事ページ

ページビルダーが搭載されたTCDテーマの詳細は、こちらからご確認ください ⇒ 【STORY (tcd041)】

合わせて読みたいWordPressテーマ【STORY(tcd041)】の関連記事

第1回 : ブライダル業界の集客革新を提案するブランディング戦略
第2回 : あなたのコンテンツが劇的に生まれ変わる”国内初”のページビルダーの使い方
第3回 : 最上級の美しさで訴求するランディングの活用イメージ

普段から使いなれているWordPressで商品やサービスの販売促進ができるランディングページを作ることができれば、さまざまなメリットがあります。

• デザイン会社に依頼せずに自分で作ることができるのでコストを抑えられる
• 広告だけに頼らず検索エンジンから集客ができる自社メディアを構築できる
• ブログを更新するようにいつでも画像やコンテンツの修正が可能

しかし、単なる商品説明ではなく、ブライダル事業や婚活パーティー、ブランド商品など、イメージが大切な商品・サービスを訴求するためには、ランディングページの美しさがとても重要な要素になります。

そのため、ここでは最上級の美しさで訴求することができるWordPressテーマ【STORY】の活用イメージをお伝えします。

最上級の美しさで訴求するランディングページテーマSTORY

STORYのコンセプトは、大手結婚式場にも劣らないビジュアルのホームページとして作り上げていますので、圧倒的な美しさを体感していただけると思います。

そして私たちTCDは、デザインに不慣れな初心者ユーザー様でも、美しい画像とコンテンツ（文章）を用意するだけでデモサイトと同様の美しいページが作れるように、使いやすいテーマオプションを充実させ、さらにページビルダーを開発しました。

テーマオプションから設定するだけで完成するトップページ

STORYのトップページは、WordPressの管理画面にあるテーマオプションから、あらかじめ用意してある画像やコンテンツを上から順に設定していくだけで、このようなランディングページが簡単に完成する仕様になっています↓

婚活パーティーのランディングページイメージ

スマートフォンの表示イメージ

このようにSTORYは、余白の美しい汎用性の高いデザインに完成されておりますので、ブライダル事業や婚活パーティーに限らず、イメージを重視するさまざま業種にて活用頂けます。

オーダーメイドスーツのランディングページイメージ

ブランディングイメージに重要な役割を果たすロゴマークも、テーマオプションから簡単に設定することができます。

高級腕時計専門の販売店ランディングページイメージ

サイト全体のカラーやサブカラーなどもテーマオプションから設定することができますので、ランディングページのイメージ合うように、カラーピッカーを使って調整しましょう。

ハイブランドジュエリーのランディングページイメージ

中央の被写体がメインの画像を選定した際など、ヘッダーにある円形ボタンが不要な場合には、チェックを外すだけで非表示にすることができます。

スマートフォンに最適なコールトゥーアクションを実現

ランディングページでは、コールトゥーアクション（行動喚起）が非常に重要なポイントになります。美しいランディングページで訴求しているのにもかかわらず、どこに問い合わせたら良いのか分かりにくければ、せっかくの見込み客を逃がしてしまいます。

そのため、STORYではスマートフォン専用のフッターバーを採用することで、最適なコールトゥーアクションを実現しています。

フッターバーに表示したい項目は、【書類】【シェア】【電話番号】【メール】【タグ】【鉛筆】から適したアイコンを選択することができます。

あらゆるニーズを想定して作られたテーマオプションの機能

TCDテーマに搭載されているテーマオプションには、ランディングページを作る際に必要とされるあらゆるニーズを想定したカスタマイズが可能な機能を揃えています。

見出しフォントの変更

見出しに使われるフォントも、ランディングページのイメージ見合うように、明朝体かゴシック体のどちらかを選択することができます。

レスポンシブを採用するかの選択

STORYは、スマートフォンでも美しいレスポンシブデザインになっていますが、もしレスポンシブデザインを利用しない場合には、チェックひとつで選択することが可能です。

フッター画像の上に重ねる色の透過率の調整

フッターに配置している画像も、重ねる色の透過率を調整することで表現を変えることができますので、細部にまで一切手抜きのないランディングページを完成させることができます。

その他にも、STORYに搭載されているテーマオプションからさまざまなカスタマイズが行えますので、デザインに不慣れな初心者ユーザー様でも、デザイン会社に依頼せずに自分で作ることができ、コストを抑えることができます。

そして、ブログを更新するようにいつでも画像やコンテンツの修正が可能なので、ぜひあなたの望む美しいランディングページを完成させて、販売促進にお役立てください。

合わせて読みたいWordPressテーマ【STORY(tcd041)】の関連記事

第1回 : ブライダル業界の集客革新を提案するブランディング戦略
第2回 : あなたのコンテンツが劇的に生まれ変わる”国内初”のページビルダーの使い方
第3回 : 最上級の美しさで訴求するランディングの活用イメージ

Googleが試験的に公開した日本語ウェブフォント「Google Fonts + 日本語早期アクセス」の紹介です。
ゴシック・明朝はもちろん、丸ゴやキュートなスタイルのフォントなど9種類の日本語フォントが新たに用意されているようです。

WEBフォントのメリット

WEBフォントのメリットといえば、何と言っても、従来画像等で対処するしかなかった、ニコモジやニクキュウなどのデザイン性の高いフォントですら、テキストに変換できることですよね。

ユーザー環境にも依存することがないので、Webデサインに合ったフォントを利用できます。
しかもテキストで重要なコンテンツを掲載できれば高いSEO効果も生まれてきます。

WEBフォントの詳しい設定方法はこちら→ WordPressでも使用できる、Webフォントの基本操作と設定方法

新たに公開された「Google Fonts ＋日本語早期アクセス」

日本語の文字量は、漢字も含めて膨大です。なので前まで、WEBサイトに日本語のWEBフォントを導入すればフォントの読み込みが巨大なサイズになり、ページ表示速度に悪影響を与えるという懸念がありました。
しかしGoogleがこのように日本初のWebフォントをCDNとして提供し始めたことで、ロード時間はすでに英字フォントにほぼ匹敵するレベルにきているようです。

私が試してみたところモバイルの方でも接続不良がなければほぼ許容できるレベルだと思いました。もし、導入を真剣にお考えの方は、デバイスや回線環境をいろいろ変えてテストしてみるといいかもしれません。

それでは今回、提供されたフォントをいくつか紹介いたします。

M＋1p

「日常的に使うための飽きのこない、それでいてちょっと気になるデザイン」という「M＋1p」。

Rounded M＋1p

「Rounded M＋1p」は明るく伸びやかなデザインです。

はんなり明朝

墨だまりを意識されたという「はんなり明朝」は、女性らしい嫋やかなデザインとなっています。縦書きデザインにも相性ぴったり。
参考：WordPressで記事を縦書きにできるプラグイン「h2vR for WordPress」

こころ明朝

少しほっそりとした、角丸な明朝体です。細筆で書かれたようなまろやかで、軽い感じがする文字です。

さわらび明朝

本文用のフォントとして使いやすくなるようにイメージされデザインされたようです。
今までWEBサイトで明朝体は敬遠されがちでしたが、これならイケるかもしれません。

ニクキュウ

その名の通り、動物の肉球のようなモリっとして、ツヤのあるカタカナフォントです。

ニコモジ

遊び心のあるひらがな・カタカナ対応のフォントです。

「Google Fonts + 日本語早期アクセス」の公式サイトはこちら
詳しいWEBフォントの使い方はこちら→ WordPressでも使用できる、Webフォントの基本操作と設定方法

こういったデザイン性の高いフォントを無償で提供していただけるのは非常にありがたいですね！テーマのカスタマイズにあまり自信がない人でもコピペだけで簡単に導入できますのでぜひお試しください。

「人間が想像できることは、人間が必ず実現できる」とは、SFの父と呼ばれるフランスの小説家ジュール・ヴェルヌの言葉ですが、建造物や乗り物、服飾やインテリアなどのプロダクト、空間デザインや環境保全など、私たちが住んでいるこの世界のすべては人間の想像から生まれました。

イマジネーションを図案に落とし込み、色彩を重ね、住む人、使う人の心と生活の豊かさを提案する。

そんな事業者やクリエイターに最適なWordPressテーマ「MONOLITH」（モノリス）は、洗練されたモーションであなたの想像力をビジュアラーゼーション（視覚可）することが可能です。

「MONOLITH」の最大の特徴であるトップページは、知性と創造性を感じさせるスタイリッシュなビジュアルを実現し、ページを開いた瞬間に4つのコンテンツが緻密に整列する様子は、”建造物が創られていく過程”を想起させます。

この汎用性の高いビジュアルとモーションは、あなたのコンテンツとアイデア次第でさまざまな表情を見せますので、ここでは「MONOLITH」の活用イメージと使い方のアイデアを提案します。

あなたの想像力を視覚可させることが可能なヘッダーコンテンツ

MONOLITHのファーストビューは【何も表示しない】【ヘッダーコンテンツを表示する】【ヘッダースライダーを表示する】の3つから表示したい（表示したくない）コンテンツを選択することができます。

ここで設定する4枚の画像は、当然カラーや構図の違う別々の画像を用意しても良いのですが、ここでは試しに、元々横長の1つの画像（横幅1200px、縦幅660px)を用意し、4つに分割（横幅300px、縦幅660px）した画像を、各コンテンツに設定してみます。

各画像はそれぞれテーマオプションから簡単に設定することができます。マウスオーバー時の重ねる色やリンク先URL、キャッチフレーズや説明文の登録も可能です。

すると、↓このように1つの画像が連続したモーションによって完成するイメージになり、各要素ごとにリンクして別コンテンツに誘導することも可能です。

各画像ごとに”別々の背景を合成”した4つの画像を用意すれば、また一味違った表情で”魅せる”ことができますね。

汎用性の高いヘッダースライダーの機能と使い方

トップページの4つに分割されたコンテンツ表示は、MONOLITHの特徴でもありますが、分割ではなく汎用性の高い【ヘッダースライダーを表示する】を選択することも可能です。

このスライダー画像は、最大5枚まで設定することができます。ここでは以下の4枚（横幅1200px、縦幅600px)の画像を用意してみます。

スライダー画像も、テーマオプションから簡単に設定することができ、リンク先URL、キャッチフレーズを設定することができます。

スライダーが切り替わるスピードの設定も【5～8秒】の間で設定することが可能です。

創造力を掻き立てるMONOLITHトップページの完成イメージ

化粧品・美容関連ホームページの活用イメージ

スマートフォン表示のイメージ

ペットショップ・ペットブログの活用イメージ

スマートフォン表示のイメージ

クリエイターポートフォリオサイトの活用イメージ

スマートフォン表示のイメージ

WordPressテーマ「MONOLITH」（モノリス）は、建築デザイン、インテリアデザイン、不動産デベロッパー向けに緻密に設計された”インテリジェンス溢れるテーマ”ですので、ぜひあなた自身のライフスタイルの創造にお役立てください。