Quantcast
Viewing all 1404 articles
Browse latest View live

導入するだけ!?シェア数の表示速度をアップするプラグイン「SNS Count Cache」

FaceBookやはてなブックマークなどのシェアボタンをブログに設置するのはもはや当たり前となっていますが、公式のボタンは表示が遅くなってしまうのがネックです。
そこでSNSシェアカウントをキャッシュするプラグイン「SNS Count Cache」をオススメします。SNSシェアカウントは高頻度で各サービスに通信を行う必要があるため、ブログの速度を重くしてしまいがちです。しかし、このプラグインを導入することにより、SNSのカウント数をあらかじめキャッシュしておき、ユーザーに表示してくれるため、頻繁に各サービスと通信する必要がなくなり、ブログが重くなることを防げます。

「SNS Count Cache」のインストール

管理画面から「SNS Count Cache」を検索してインストールして下さい。
Image may be NSFW.
Clik here to view.
snscountcache

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

SNS Count Cache

「SNS Count Cache」の使い方

基本的にはデフォルトでも利用できますが、おすすめの設定と各項目について説明いたします。

シェア基本キャッシュ機能

Image may be NSFW.
Clik here to view.
sns02

対象SNS
バックグラウンドでキャッシュしておくシェア数の対象を選択します。基本的には全てチェックしたおけばよいです。

カスタム投稿対応
デフォルトの空白でOKです。カスタム投稿タイプをキャッシュしたい場合には追加ください。

シェア数のチェック間隔(秒)
定期的に巡回する間隔を指定出来ます。基本的にはデフォルトで問題ありません。もし定期チェックが機能しない場合等には秒数を増やすと解決されます。

一度にチェックするコンテンツ数
定期的にチェックするときに取得する記事数の設定です。SNS Count Cacheは一度にすべての記事をチェックする分けではなく、徐々に蓄積してく仕組みです。基本的にはデフォルトで問題ありません。

一度にチェックするコンテンツ数
定期的にチェックするときに取得する記事数の設定です。SNS Count Cacheは一度にすべての記事をチェックする分けではなく、徐々に蓄積してく仕組みです。基本的にはデフォルトで問題ありません。

HTTPからHTTPSへのスキーム移行モード
SNS Count Cacheは内部でHTTPとHTTPSのシェア数を合算して表示してくれる仕組みとなっています。HTTPからHTTPSへ移行するとURLが変わり、今まで蓄積したシェア数が0になってしまいますが、この機能により表示することが出来ます。HTTPからHTTPSへ移行した人は有効にしておきましょう。まだHTTPの人は無効でOKです。

シェア臨時キャッシュ機能

Image may be NSFW.
Clik here to view.
sns03

これは非常に便利な機能です。シェア数は投稿日から数日間が一番多くなります。そのため、シェア臨時キャッシュ機能は指定期間内は5分(300秒)ごとにシェア数を更新してくれます。

シェア変動分析機能

Image may be NSFW.
Clik here to view.
sns04

ブログ内のホットエントリーを確認したり表示できたりする機能です。ある期間を設定して期間内のシェア数の増分をとることができます。標準では無効となっていますが、増減を確認できるので有効として確認してもいいと思います。

フォロー基本キャッシュ機能

Image may be NSFW.
Clik here to view.
sns05

Image may be NSFW.
Clik here to view.
sns06

Feedlyのフォロー数を取得する機能です。これは、ブログ単位のフォロー数を表示します。自分がFeedly使って無くてもフォロー数表示してくれます。基本的にはデフォルトで問題ありません。

動的キャッシュ機能

Image may be NSFW.
Clik here to view.
sns07

キャッシュがなにもない記事にアクセスが有った場合の対応をしてくれるのがこの動的キャッシュ機能です。
各設定で下記の効果になります。
「有効(同期)」:新しいシェア数を取得するまでページの表示を待つ
「有効(非同期)」:シェア数チェックがバックグラウンドで実行された記事はシェア数の取得を待つこと無く表示
「有効(非同期2次キャッシュ)」:1次キャッシュが無い状態でアクセスされた場合は予備の2次キャッシュを表示させ、バックグランドで1次キャッシュを取得します。どちらかがあればシェア数を表示してくれます。
「無効」:キャッシュがない記事にアクセスがあっても定期巡回まで表示されません。

基本的にはデフォルトの有効(非同期2次キャッシュ)で問題ありません。

データクローラ機能

Image may be NSFW.
Clik here to view.
sns08

定期巡回の効率をあげる為の機能で、基本的にデフォルトでOKです。

データエクスポート機能

Image may be NSFW.
Clik here to view.
sns09

Image may be NSFW.
Clik here to view.
sns10

シェア数の確認

データが蓄積されると各タブで自分のブログのシェア数一覧を確認できます。合計順やFacebook順に表示などもできます。通信簿を見ているようですね。また、Twitterのシェア数はAPIが廃止されたため、Twitterのキャッシュ表示ができなくなっております。

Image may be NSFW.
Clik here to view.
sns11

シェア数の設置

最後にシェア数の設置方法を解説いたします。「SNS Count Cache」でキャッシュされたSNSカウント数をSNSボタンに表示させるには、以下の関数を記載します。

scc_get_share_twitter() //Twitterのシェア数
scc_get_share_facebook() //Facebookのシェア数
scc_get_share_gplus() //Google+のシェア数
scc_get_share_hatebu() //はてなブックマークのシェア数
scc_get_share_pocket() //Pocketのシェア数
scc_get_follow_feedly() //Feedlyのシェア数
scc_get_share_total() //合計シェア数

この記述でそれぞれシェア数が表示されるので、あとはお好みのアイコンをつければ表示されます。シンプルなアイコンがよければ、DESIGN DECK様のものなどがおすすめです。

ただし、TCDの新しく実装されましたSNSの新機能にはすでに上記のコードが実装済みです。プラグインをいれていない状態ではシェア数の表示はされませんが、プラグインをいれるだけで、シェア数の表示が可能となっております。

TCDテーマに新機能!ソーシャルボタン&クイックタグのご紹介

具体的には、sns_btn_top.phpもしくは、sns_btn_btm.phpというファイルに、

<a href="http://twitter.com/share?text=<?php echo $title_encode ?>
&url=<?php echo $url_encode ?>&via=<?php echo $options['twitter_info'];?>
&tw_p=tweetbutton&related=<?php echo $options['twitter_info']; ?>">
<i class="icon-twitter"></i>
<span class="ttl">Tweet</span><span class="share-count">
<?php if(function_exists('scc_get_share_twitter'))
 echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></span></a>

という記載をしており、ここの、

<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?>

が「SNS Count Cache」の記載内容となっております。

まとめ

以上で「SNS Count Cache」の解説を終了します。ホームページの表示速度はユーザーの離脱率に大きく影響しますので、早く表示することはSEOにも効果があります。こちらのプラグインを活用し、たくさんのシェアを集めるサイトを構築していただければと思います。


廃止されたツイッターのカウント数表示を復活させる方法

2015年11月21日からTwitterのツイートボタンの仕様が変更され、ツイート数の取得が不可能になりました。これに伴ってデザインの変更を余儀なくされた方も多いのではないでしょうか。弊社でも現状では、Twitterのカウント数を表示しない設定としていました。

ツイート数を取得するAPI「count.json」提供終了のお知らせ

今までSNSボタンで使われてきた「count.json」は元から公式が提供しているものでは無かったため、あきらめていた方も多いのではないでしょうか。しかし今回紹介するAPIをもちいると、Twitterのシェア数を表示することができます。

「count.jsoon」の登録

Image may be NSFW.
Clik here to view.
twitter01

こちらのAPIはdigitiminimiという会社がリリースしたAPIです。このAPIを利用するにはサイトとメールアドレスを登録する必要があります。
http://jsoon.digitiminimi.com/

しばらくすると「登録完了メール」送られてくるので、記載されているURLにアクセスしてください。
※弊社の場合は5時間程で連絡がきました。

Twitterアカウントを連携するリンクが表示されるので、「連携する」をクリックすれば完了です。
連携を行うと、過去のシェア数を含め、10秒~3分ごとに100ツイートでシェアされます。

また、提携で利用する機能は、以下の2つだけなので、提携しても安心です。

  • タイムラインのツイートを見る
  • フォローしている人を見る

ツイート数を表示させる方法

簡単にツイートボタンを表示する場合には、以下のコードをツイートボタンを表示させたい箇所に貼付けしてください。

<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>
<a href="http://twitter.com/share"
  class="twitter-share-buttoon"
  data-url="<?php the_permalink(); ?>"
  data-text="<?php the_title(); ?>"
  data-count="vertical"
  data-lang="ja">ツイート</a>
<script> widgetoon_main(); </script>

TCDテンプレートで設置するには、下記の用に設置してください。
編集ファイル:bookmark.php
編集箇所:

<li>
<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>
<a href="http://twitter.com/share"
  class="twitter-share-buttoon"
  data-url="<?php the_permalink(); ?>"
  data-text="<?php the_title(); ?>"
  data-count="vertical"
  data-lang="ja">ツイート</a>
<script> widgetoon_main(); </script>
 </li>
 <li class="facebook_button">
  <div class="fb-like" data-href="<?php echo "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI']; ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"></div>
 </li>

SNS Count Cacheでツイート数を表示させる方法

先日公開した記事で、SNSシェアカウントをキャッシュするプラグイン「SNS Count Cache」を紹介しました。こちらを用いるとシェア数を簡単に表示することができますが、Twitterは上記の理由で表示されませんでした。

導入するだけ!?シェア数の表示速度をアップするプラグイン「SNS Count Cache」

今回のAPIを利用して、twitterのシェア数を復活させる方法を紹介いたします。
修正するファイルはSNS Count Cacheのclass-share-crawler.phpというファイルです。以下のディレクトリに格納されています。

includes/class-share-crawler.php

ファイルを開き、下記の用に変更して下さい。

修正前

 if ( isset( $target_sns[SNS_Count_Cache::REF_SHARE_TWITTER] ) && $target_sns[SNS_Count_Cache::REF_SHARE_TWITTER] ) {
	  			$query_urls[SNS_Count_Cache::REF_SHARE_TWITTER] = 'http://urls.api.twitter.com/1/urls/count.json?url=' . $url;
		  }

修正後

if ( isset( $target_sns[SNS_Count_Cache::REF_SHARE_TWITTER] ) && $target_sns[SNS_Count_Cache::REF_SHARE_TWITTER] ) {
	  			$query_urls[SNS_Count_Cache::REF_SHARE_TWITTER] = 'http://jsoon.digitiminimi.com/twitter/count.json?url=' . $url;
		  }

もともとN/Aで表示されていた画面が、
Image may be NSFW.
Clik here to view.
twitter03

こちらのように表示されるようになりました。※キャッシュが蓄積するまでに記事の量によりますが、1時間程かかります。
Image may be NSFW.
Clik here to view.
twitter04

TCDの新しく実装されましたSNSの新機能にはシェア数を表示する仕様となっていますので。「SNS Count Cache」のプラグインを導入するだけで、シェア数の表示が可能となっております。

TCDテーマに新機能!ソーシャルボタン&クイックタグのご紹介

まとめ

以上で解説を終わります。「count.jsoon」の利用には、登録が必要なのと、少しシェア数を取得するのに時間はかかりますが、twitterのシェア数を復活させたいという場合にはこの方法で行う事ができます。手軽にtwitterのシェア数を復活させたいという場合にはこちらの方法をお試し下さい。

TCDテーマの背景を動画にして、よりインパクトのあるサイトへ

今回は、TCDテーマに背景動画を組み込む方法の紹介いたします。

背景に動画を使うだけで、サイトの雰囲気ががらっと変わり、オリジナリティを伝えることができます。ただしデメリットとしては、サイトの表示が重くなることや、デザインによっては文字が見づらくなるといったことがありますので注意が必要です。

背景を動画にしたサイト構築ではcanvas(TCD017)がおすすめです。
今回はcanvasを用い、動画背景のデモサイトを構築してみました。

今回作成したサイト
Image may be NSFW.
Clik here to view.
douga01

http://tcd-wp.net/sample01/

動画背景のカスタマイズ手順

それでは動画を背景にしたサイトの手順を解説していきます。作業としては下記の2点です。

  1. 背景にする動画素材を用意する
  2. 動画をサイトに記述する

動画を背景にすることは難しそうですが、案外簡単にできます。

背景にする動画素材を用意

動画素材を用意

動画を用意するには、下記の4つの方法があります。

  • 動画を自分で撮影する
  • 動画をプロに撮影してもらう
  • 有料動画を購入する
  • 無料動画を使用する

動画を自分で撮影する
まず最初に思いつくのは自分で撮影する方法です。自分でイメージするサイトをそのまま伝えることが出来ます。現在ではiPhoneなどの解像度も上がって来ていますので、スマートフォンやデジカメで気軽にそれなりのものを撮影できます。ただし、自分のイメージ通りにとるというのは結構難しいです。

動画をプロに撮影してもらう
確実ですが、お金はかかります。クラウドワークスなどでお願いしてみてもいいかもしれませんが、しっかりとしたイメージがなければ、希望の動画は作れないかもしれません。

有料動画を購入する
写真素材を販売しているサイトの「Fotolia」などでは動画の販売もしています。有料だけあり、いいものが揃っていますので、早く希望のものを手に入れたい場合はこちらを活用してもいいかもしれません。

無料動画を使用する
最近では無料でも良い動画素材があったりします。今回のデモサイトでは「Mazwai」の動画をお借りしました。商用も可能なので、こちらを活用するのもおすすめです。

動画素材の選び方

「短い、静か、軽い」が動画選びのコツです。

動画の長さは短く
長い動画はファイルサイズが大きくなる上に、最後までみられません。また逆に短過ぎると焦りを感じてしまします。様々なサイトを参考にしましたが、動画は長くても20秒〜30秒程度が良さそうです。

動画は静かにする
サイトを訪れた時にいきなり音が鳴るのはマナー違反です。どうしても音声を流したい場合は、選択できるようにしましょう。また先ほど紹介した「Mazwai」などは音声も入っていますので、音声データを削除する加工などが必要です。ムービーメーカやimovieなどを使うと簡単にできますので、極力音声データは削除しましょう。

動画は極力軽くする
読み込みの遅いWebサイトは、ユーザーの離脱率が高くなります。動画のサイトはどうしても容量が大きくなってしまいます。可能な限り軽いファイルにしましょう。

動画をサイトに記述する

それでは上記に気をつけ用意した動画をサイトに組み込んでいきます。

まずは画像と動画ファイルをワードプレスへアップロードします。
「メディアライブラリ」より「新規追加」でファイルをアップロードします。
Image may be NSFW.
Clik here to view.
douga02

以下のようなコードを

タグ直下内に書けばOKです。
<video autoplay loop poster="http://tcd-wp.net/sample01/wp-content/uploads/2016/05/douga.jpg" id="bgvid">
  <source src="http://tcd-wp.net/sample01/wp-content/uploads/2016/05/douga.mp4" type="video/webm">
</video>

今回のcanvasでは下記のファイルを書き換えました。
編集するファイル:index.php
編集する箇所:
編集前

<?php $options = get_desing_plus_option(); if (!is_paged()): get_header(); ?>

<?php if (!empty($options['index_main_image1'])) { ?><img id="slider_base" src="<?php esc_attr_e( $options['index_main_image1'] ); ?>" alt="" /><?php }; ?>
<div id="slider">
 <?php for($i = 1; $i <= 3; $i++): ?>
 <?php if (!empty($options['index_main_image'.$i])) { ?><img src="<?php esc_attr_e( $options['index_main_image'.$i] ); ?>" alt="" /><?php }; ?>
 <?php endfor; ?>
</div>


編集後

<?php $options = get_desing_plus_option(); if (!is_paged()): get_header(); ?>
<video autoplay loop poster="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.jpg" id="bgvid">
  <source src="http://tcd-wp.net/sample01/wp-content/uploads/2016/05/douga.mp4" type="video/webm">
</video>

合わせてCSSの記述も追加しています。この内容はstyle.cssに記述しても大丈夫です。

<style type="text/css">
video#bgvid {
  min-width: 100%;
}</style>

スマートフォンへの対応

レスポンシブ対応を行う為には、下記を追加します。
編集するファイル:style_sp.css
追加コード:

video {
  width: 100%;
}

以上を設定すると、動画背景のサイトが完成します。
Image may be NSFW.
Clik here to view.
douga01

http://tcd-wp.net/sample01/

まとめ

難しそうに思える動画背景のサイトですが、やり方さえわかってしまえば簡単に実装はできます。ただし、ファイルが重くなる事や見えにくくなることも考慮すると導入するには検討が必要です。とにかくインパクトを与えたいといったサイトでは良いかもしれませんね。

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

先日、TCDテーマの背景を動画にして、よりインパクトのあるサイトへという記事を書きましたが、その際に動画素材のサイトを紹介させていただきました。

今回は、動画素材がダウンロードできるサイトをまとめてご紹介します。お気に入りの動画があればぜひ実際に使用してみてください。

Mazwai

Image may be NSFW.
Clik here to view.
video01

http://mazwai.com/#/

Mazwaiは、はっとするほど凄みのある美しさショートムービーを無料でダウンロードできるサイトです。現在の公開本数は185本! 丁寧に撮影&編集されたその一本一本は、どの動画も見事なクオリティです。商用利用も可能です。動画にマウスを重ねると動画が再生されます。そのまま「右クリック>名前を付けて動画を保存」するとダウンロードできます。

vidsplay

Image may be NSFW.
Clik here to view.
vidsplay

http://www.vidsplay.com/

完全無料・ロイヤリティーフリーで利用可能なサービスです。 全ての素材が高画質で、720p×1080pの動画のみを提供されています。 動画素材は毎週新しいものがアップロードされるので、あなたの欲しい動画素材が見つかると思います。

Videezy

Image may be NSFW.
Clik here to view.
videezy

http://www.videezy.com/

自然や人物など21カテゴリから様々なタイプの動画が提供されています。動画の数も数百点あり、お好みのものが見つかりそうです。ただし、利用にはクレジット記載が必要です。

Pexels Videos

Image may be NSFW.
Clik here to view.
pexels

https://videos.pexels.com/

Pexels Videosは、商用でもクレジットなしで無料で利用できるフルーの動画素材集です。公開されている動画はすべて、クリエイティブ・コモンズ0(CC0)ライセンスのものだけなので、クレジット表記などは一切不要です。安心して商用で利用できます。またサイトも細かくカテゴリー分けされているので、動画も探しやすいです。

orangeHD.com

Image may be NSFW.
Clik here to view.
orange

http://orangehd.com/

約200点の動画数があり、種類も動物や風景、食料品、人物など様々なカテゴリを公開しているサイトです。単純で分かりやすいカテゴリ分けと、ユニークなタグクラウドのおかげで、比較的動画はを探しやすくなっています。

PIXTA

Image may be NSFW.
Clik here to view.
pixta

https://pixta.jp/footage

無料でお好みの動画が無い場合はPIXTAで購入するといいかもしれません。PIXTAはクリエイターが制作した、高品質で低価格が売りの映像・動画素材サイトです。ロイヤリティフリーの素材を有料販売していますが、一部無料素材をダウンロードすることができます。無料動画は毎週火曜日に新しいものが公開され、一定期間中は素材が無料となります。定期的にチェックしておくと、お好みのものを無料で手に入れる事ができるかもしれませんね。

movietools

Image may be NSFW.
Clik here to view.
movietools

http://www.movietools.info/

テレビ局が運営しているサービスなので、プロのクリエイターが作成した高品質な動画背景が手に入ります。動画素材としては、2Dと3Dの動画背景やテロップなどを利用できます。アカウントを作れば、全ての動画素材を無料でダウンロードでき、商用利用も可能です。

depositphotos

Image may be NSFW.
Clik here to view.
depositphotos

http://jp.depositphotos.com/stock-videos.html

PIXTAと同じように、クリエイターが制作した、高品質で低価格が売りの映像・動画素材サイトです。ロイヤリティフリーの素材を有料販売していますが、こちらも無料動画が一部提供されています。PIXTAで見つからない場合はこちらを探すとみつかるかもしれません。

MotionElements

Image may be NSFW.
Clik here to view.
motion

http://www.motionelements.com/ja/free/stock-footage

こちらもPIXTAと同じく有料サイトですが、毎週30種類の無料提供があります。クオリティの高い動画素材が多く、特にCG素材が多いです。

Footfolio

Image may be NSFW.
Clik here to view.
footfolio

http://www.kokcinelo.com/footfolio/

Footfolioは無料動画素材を私用商用を問わず利用できます。「羽」や「花びら」などの素材があり、プロフィール動画などや結婚式などの動画作成には使用しやすい素材がそろっています。

NHKクリエイティブライブラリー

Image may be NSFW.
Clik here to view.
nhk

http://www1.nhk.or.jp/creative/
NHKが創作用素材を無料で提供しているサービスです。生物、風景などの定番のカテゴリから、年代別の懐かしい映像など、NHKならではの動画素材も揃っています。ただし営利・政治目的での利用の禁止されています。

ハイビジョン映像素材集

Image may be NSFW.
Clik here to view.
4k

http://www.openspc2.org/HDTV/

4Kカメラ、ハイビジョンカメラで撮影した自然の動画素材が豊富なサイトです。自然を題材にしたテーマが多く、自然ジャンルの素材を使いたい時にはオススメしです。

ニコニ・コモンズ

Image may be NSFW.
Clik here to view.
nico

http://commons.nicovideo.jp/search/material/video

名前のとおり、niconico動画が提供している素材サイトです。niconicoのログインアカウントを持っていれば誰でも利用することが可能です。独特の素材が多いですが、小ネタの素材を使用したい場合に利用するといいかもしれません。

動画素材.com

Image may be NSFW.
Clik here to view.
dougasozai

http://xn--hhro09bn9j8uh.com/

動画の種類が豊富で、無料の動画も多く提供されています。1つ1つの動画は短いので、背景やちょっとした動画作成にいい素材が揃うかもしれません。

After Effects Style

Image may be NSFW.
Clik here to view.
af

http://ae-style.net/materials/

Adobe After Effectsの操作方法、チュートリアルを紹介するサイトですが、一部無料動画素材を提供しています。使える素材は全部で14種類しかありませんが、シンプルな素材が揃っています。

Lab01

Image may be NSFW.
Clik here to view.
labo

http://www.studio-lab01.com/freebies.html

結婚式用の動画制作に便利な素材が多くあります。動画素材には、文字アニメーションやキラキラ感たっぷりなパーティクル、エフェクトなどがあります。

LifeinMaterial

Image may be NSFW.
Clik here to view.
lifematerial

http://lifeinmovie.main.jp/material/

クオリティの高い「背景動画」素材がロイヤリティーフリーで使用出来るサイトです。
無料で使用できる素材は100個ほど有り、クオリティの高いものばかりです。

nonnofilm

Image may be NSFW.
Clik here to view.
nonnofil,

http://www.nonnofilm.com/item/list/free-movie

NONNOFILMは結婚式のプロフィールビデオなどの映像演出自作を応援されているサイトです。手作りを簡単&華やかにする動画素材やテンプレートが用意されており無料の素材もあるため、華やかな動画素材を探している方はいいかもしれません。

モリモリソザイ

Image may be NSFW.
Clik here to view.
morimori

http://morimorisozai.net/material.php

CG背景素材やエフェクト系の素材が多く、背景用の画像や、動画の上にかぶせるエフェクト&パーティクル映像などを、探している方にはおすすめです。ただし、営利目的には使用できません。

無料映像素材 フリー素材館

Image may be NSFW.
Clik here to view.
fffsf

http://www.namaewallpaper.com/movie/index.html

高画質で綺麗な動画素材が無料でダウンロードできるサイトです。商用利用も可能ですので、綺麗目の素材を探している時には、良いかもしれません。

まとめ

以上が、動画素材のダウンロードサイトの紹介でした。プロにお願いすると数十万かかる動画素材ですが、無料でも非常に高品質な動画素材が多くあります。このような素材をうまく活用し、サイトにオリジナリティを追加できるのではないでしょうか。なお、今回ご紹介したサイトは基本的に無料の素材を紹介していますが、それぞれに使用条件が定められています。ご利用時には、使用条件に十分ご注意ください。

TCDテーマの2016年1月から4月売れ筋ランキングBEST10

TCDテーマでは毎月WordPressテーマに革新を起こす、新しいテーマを次々と発表しています。その中で今もっとも売れているテーマをご紹介したいと思います。テーマ選びの参考になればと思います。

1位 「AMORE (TCD028)」

Image may be NSFW.
Clik here to view.
028

堂々の1位はパララックスデザインのWordPressテーマ「AMORE」でした。パララックスサイトの「ハードルが高い」「パララックスは興味があるけど、簡単には作れない」と諦めていた多くのWordPressユーザー様の目にとまったものと思います。完成度の高いレスポンシブにも完全に対応した「AMORE」は発売から売れ続けている人気テーマです。

2位 「LAW (TCD031)」

Image may be NSFW.
Clik here to view.
028

士業向けに開発されたWordPressテーマ「LAW」が2位となりました。弁護士・税理士・司法書士などをされている方から多く反響をいただいており、また、士業サイトだけでなく一般のコーポレートサイトにも多くご愛用されています。コーポレートサイトでは第一印象で信頼性や専門性を伝えることが重要で、そこからWebサイトのゴールとなる「お問い合わせ」まで自然に繋がっていく“導線の構築”に徹底的にこだわって作られています。

3位 「CORE (TCD027)」

Image may be NSFW.
Clik here to view.
019

インターネットメディア系では一番の売れ筋を誇るのが「CORE」です。是非デモサイトをみていただきたいのですが、「CORE」は“一瞬にしてユーザーを虜にするファーストビュー”にこだわって開発されています。大型メディアやポータルサイトを構築するのに適したテーマで、膨大な情報量を美しく効率的に魅せながら、細部のエフェクトにまでこだわる、妥協を許さない開発チームの技術の結晶ともいえるテーマとなりました。スマホ等でのレスポンシブ表示においても、こだわりが活きていますので、ぜひ色々なデバイスからもご覧になってみてください。

4位 「Precious (TCD019)」

Image may be NSFW.
Clik here to view.
019

根強い人気を誇るロングセラーテーマ「Precious」が4位となりました。商品ページ内のギャラリー機能も人気の理由で、ECサイトのように商品やサービスをPRするのにも最適です。ヨーロッパ調の近代的なデザインは、サイトの訪問者に企業としての信頼性を与えます。イメージ戦略の重要なツールとして、売上アップにつなげることも可能にするテーマとなっています。企業の担当者様や、製作代行業者様にも人気で、特別ライセンス契約数も多いのが「Precious」の特徴といえます。

5位 「SWEETY (TCD029)」

Image may be NSFW.
Clik here to view.
022

スイーツをテーマにしたデモサイトが人気なのが「SWEETY」です。ただ、トップページの画像を入れ替えることでどんな業種にでも対応可能な汎用性のあるテーマなので、コーポレートサイトとしても活用される方が多いです。AMOREと比較される方が多いですが、AMOREが企業サイトやレストランサイトに対して、SWEETYは店舗の中の「商品」を魅せる色彩が強いデザインとなっています。ですので、商品ギャラリーや商品紹介用の固定ページの機能に特化しています。サイトのコンセプトによって使い分けてみて下さい。

6位 「LUXE (TCD022)」

Image may be NSFW.
Clik here to view.
022

ホテルなどのラグジュアリー感を演出した高級感が「LUXE」の際立った特徴です。サイトを開いた瞬間、空間一面に広がる美しさが訪問者をアッと驚かせます。LUXEはデザインが美しいだけでなく、実用性も兼ね備えています。バナーや広告を配する画像スペースも充実しており、情報量が多くてもサイトがうるさくなる心配は全くありません。店舗や企業のサイトが一瞬にしてグレードアップできるので、こちらも企業のウェブ戦略に適したテーマとなります。「Precious」同様、一般ユーザー様だけでなく、特別ライセンスのご契約を多くいただいているテーマの1つです。

7位 「Opinion (TCD018)」

Image may be NSFW.
Clik here to view.
018

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

8位 「VIEW (TCD032)」

Image may be NSFW.
Clik here to view.
018

ブログをギャラリーのように魅せるデザインの「VIEW」。トップページの美しさは眼を見張るものがあり、シンプルに並べられた記事タイルは、ロールオーバーするとスタイリッシュなアクションが加わります。また、VIEWではとにかく機能面が豊富で、「SNSボタンの簡単設置」「オリジナルのクイックタグ機能」「レスポンシブの選択」「見出しタイトルの変更機能」など痒い所に手が届く機能ばかりです。

9位 「Reviewr (TCD026)」

Image may be NSFW.
Clik here to view.
018

売上の上がるアフィリエイトの手段で有効なものの一つに、同ジャンルの商品同士を比較したり、ランキングにしたりする方法があります。しかし、これまでにアフィリ系のテンプレートでデザインが美しいものはほぼ皆無でした。「わかりやすさ」と、集客の要となる「コンテンツを充実」そして、それを構築する「デザイン性」や「操作性」,「カスタマイズ性」。Reviewrはすべてを網羅した、唯一無二なテンプレートになっています。

10位 「AGENT (TCD033)」

Image may be NSFW.
Clik here to view.
018

求人募集に特化したWordPressテーマ「AGENT」。先月リリースされたばかりのテーマですが、急速に販売数を伸ばしランクインしました。「AGENT」は会社の魅力を訴求できるパララックスデザインを採用し、仕事内容を正しく理解してもらうための募集要項作成機能や情報不備によるミスマッチの防止はもちろんとして、企業の理念、ビジョンを魅力的に伝えることによって、モチベーションの高い求職者の獲得を目的に制作されました。要注目のテーマです。

まとめ

いかがだったでしょうか。お持ちのテーマはランクインしていましたか?ここ数ヶ月はパララックスサイトが非常に人気な傾向があるようです。また、発売したばかりの「AGENT」の反響はすごく大きく、4月だけであれば1位の売り上げです。これからも弊社では、これからも皆さまの期待を良い意味で裏切るような、斬新でユニークなテーマを開発し続けます。さらに世界から注目されるテーマを発信して参ります。今後ともどうぞよろしくお願いいたします。

サイドバーが追尾するようになるプラグイン「Q2W3 Fixed Widget 」

記事本文が長くなるとサイドバーがない状態になるということはよくあることです。ただし、記事を読み終えたあとに、サイドバーから他の記事を読んでもらいたいと思っていても、戻らないという人も多いのではないでしょうか。そこでサイドバーを追尾型にすることのできるプラグインを紹介します。

注意点

サイドバーにGoogleAdSenseを表示されている方も多いかと思いますが、グーグルのポリシーに反するためアンカー広告(追従型広告)は基本的に禁止となっております。ただし、先日発表されましたAdsenseの新しい広告「ページ単位の広告」ではアンカー広告(追従型広告)が提供されており、今後は問題なくなる可能性があるかもしれません。

「お試しください:AdSense の次世代型広告、ページ単位の広告」
http://adsense-ja.blogspot.jp/2016/04/adsense.html

「アドセンスの広告掲載に関するポリシー」
https://support.google.com/adsense/answer/1354736?hl=ja&ref_topic=1271508

「Q2W3 Fixed Widget」とは

サイドバーを追尾するプラグインはいくつかありますがその中でもおすすめなのが「Q2W3 Fixed Widget 」です。特徴はなんといっても動きや設定がシンプルということです。サイドバーを単に追従させたいだけであればこれ以上のプラグインはないかと思います。

「Q2W3 Fixed Widget」のインストール

管理画面から「Q2W3 Fixed Widget」を検索してインストールして下さい。
Image may be NSFW.
Clik here to view.
q2w3

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

Q2W3 Fixed Widget

「Q2W3 Fixed Widget」の使用方法

プラグインを有効化しましたら、【ウィジェット】をクリックしてください。そうすると下記のような設定画面が表示されます。

Image may be NSFW.
Clik here to view.
q2w302

【Fixed widget】にチェックを入れると、チェックを入れたサイドバーが追従されるようになります。これだけでサイドバーが追従するようになりますので、確認してみてください。

「Q2W3 Fixed Widget」の設定方法

「外観」から「Fixed Widget Options」を選択することでプラグインの設定が行えます。

Image may be NSFW.
Clik here to view.
q2w303

General Options

サイドバーとフッターが被る場合や、スマホ表示時にサイドバーが崩れる場合にはこちらから設定ください。
Margin Top
ウィジェットのマージントップを設定します。
Margin Bottom
ウィジェットのマージンボトムを設定します。初期設定では、フッターとウィジェットがかぶる場合があるため、ウィジェットの高さに合わせて、マージンボトムを設定します。
Refresh interval
リフレッシュの間隔の設定です。
Screen Max Width
ブラウザの幅を設定します。入力した値よりブラウザの幅が小さい場合には、ウィジェットはついてきません。レスポンシブの場合は適用しないようにするために481pxと設定しておくとよいかと思います。

Compatibility

こちらは基本的にデフォルトでも構いませんが、意味だけ記述しておきます。
Auto fix widget id
自動ウィジェットIDの設定
Enable plugin for logged in users only
ログインユーザーのみプラグインを有効
Inherit widget width from the parent container
親コンテナからのウィジェットの幅を継承
Use jQuery(window).load() hook:
jQueryのload()フックを使用
widget_display_callback hook priority
フック優先度

Custom IDs

Custom IDsでは適用させたいidを一行ずつ入れる事で手動で設定できます。

まとめ

サイドバーが追尾するようになるプラグインには、他にも

  • Standard Widget Extensions
  • Strx Magic Floating Sidebar Maker

がありますが、レスポンシブテーマに対応されていなかったり、サイドバーを含むメインコンテンツエリアを構成している要素のID(#mainや#contentなど)を入力する必要があったりと少し手間がかかる事と、TCDテーマとの相性が悪かったりする場合があります。TCDテーマにおいてサイドバーを追従させたいということであれば、「Q2W3 Fixed Widget」を使用することをおすすめいたします。

下書き記事を第三者が確認できるようにするプラグイン「Public Post Preview」

TCDテーマではメディア運営などのポータルサイト用テーマを多く用意しています。例えば、OpinionCOREなどが特に人気なテーマとなっています。

このようなポータルサイトでは、複数の投稿者で管理しており、非公開状態の記事を確認してもらいたいということがあると思います。本日は、公開前の記事を外部の人に共有できるプラグイン「Public Post Preview」をご紹介します。

Public Post Previewの特徴

Public Post Previewを利用すると、公開前の投稿と固定ページの記事を自分以外の人に共有し、記事の内容を公開前に確認してもらうことができます。Public Post Previewには以下のような特徴があります。

  • 「下書き」「予約投稿」「レビュー待ち」の記事に対して、ログインなしでも閲覧できるプレビュー用のリンクを生成できる
  • プレビュー用リンクに有効期限を設定できる
  • カスタム投稿タイプにも利用できる

Public Post Previewのインストール

管理画面から「Public Post Preview」を検索してインストールして下さい。
Image may be NSFW.
Clik here to view.
ppp02

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

Public Post Preview

Public Post Previewの使用方法

有効化した後は、特に設定などは必要ありません。使用方法としては、まずは、共有したい記事を作成します。下書きにする前では何も変化はありません。
Image may be NSFW.
Clik here to view.
ppp05

記事を「下書き」「予約投稿」「レビュー待ち」に設定すると、投稿画面に「外部確認を許可する」という項目が表示されます。
Image may be NSFW.
Clik here to view.
ppp06

このチェックボックスにチェックをすると、共有用のリンク(URL)が表示されます。
Image may be NSFW.
Clik here to view.
ppp07

このリンクをコピーし、ページを見せたい相手に伝えれば、公開前の下書きページを確認してもらうことができます。また、記事の状態が「非公開」または「既に公開されている」場合には、このプラグインの機能を利用できませんのでご注意ください。

Public Post Previewの有効期限設定

デフォルト設定では、リンクが生成されてから48時間の有効期限が設定されます。48時間を過ぎるとページが表示できなくなります。有効期限を変更したい場合はfunctions.phpを編集する方法とプラグインを使用する方法があります。

functions.phpをカスタマイズする方法

ファイルをカスタマイズするにはfunctions.phpに下記のように設定ください。
・追加する内容(5日間にする場合)

add_filter( 'ppp_nonce_life', 'my_nonce_life' );
function my_nonce_life() {
    return 60 * 60 * 24 * 5; // 5 days
}

Public Post Preview Configuratorを使用する方法

functions.phpをカスタマイズしたくない場合には「Public Post Preview Configurator」のプラグインを利用ください。
Image may be NSFW.
Clik here to view.
ppp03

Public Post Preview Configurator

有効化し、こちらに設定したい時間を記入するだけで使用できます。例えば、24時間にする場合には”24″と記入します。
Image may be NSFW.
Clik here to view.
ppp04

これで有効期限を設定することができます。

まとめ

以上で「Public Post Preview」の紹介を終わります。投稿前に記事を確認してもらいたいという場合には非常に便利なプラグインとなっていますので、ご活用ください。

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

WordPressは、オープンソースのため、カスタマイズが自由に行えたり、様々なプラグインが用意されているというメリットともに、脆弱性が発見されやすく、ハッカーの標的になりやすい。といった特徴もあります。その為、WordPressを利用する時には、セキュリティ上の問題を軽視せず、対策を取って行く必要があります。以前、「最低限これだけはしておこう!WordPressのセキュリティを強化する5つの方法。」という記事を書きましたのでこちらも参考ください。

ただし、どれだけ対策していても未だに、ブルートフォースアタックなどでサイトを書き換えられたという記事を見かけます。

ブルートフォースアタックで感染した|まろらぼ
WordPressブルートフォースアタック対策|ねんでぶろぐ

ブルートフォースアタックとは簡単にいうと、ID とパスワードの組み合わせを片っ端から総当たり式に試し、攻撃をするというハッキング方法です。特に WordPress 3.0以前はデフォルトの管理ユーザー名が「admin」だったので、admin というIDのユーザーがいると想定してそれに対して大量の総当たり攻撃を仕掛けている事が多く有りました。

不正アクセスはどれだけIDやパスを工夫していても、防ぐ事はできませんので、本日は不正アクセスがどれくらいきているかを調べることにも便利なログイン履歴管理プラグイン「Crazy Bone」を紹介します。

Crazy Boneの特徴

「Crazy Bone」はログイン履歴を記録し、それを確認できるプラグインです。ログインに成功した履歴とログインに失敗した履歴を記録することができます。その他にも以下の特徴があります。

  • ログイン履歴を記録・閲覧出来る
  • ログイン履歴にログインエラーの履歴が記録される
  • 第三者のIPアドレスから接続があった場合、ダッシュボードに警告が表示され、自分(管理者)以外の別のユーザーがログインしたことがわかる
  • IPアドレスから接続元の国が分かる。
  • 接続されたIPアドレスのユーザーエージェントから使用しているOSやWebブラウザがわかる

「Crazy Bone」のインストール

管理画面から「Crazy Bone」を検索してインストールして下さい。
Image may be NSFW.
Clik here to view.
CB01

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

Crazy Bone

※以前からCrazy Boneを使用されていた方は、ワードプレスフォーラムでも報告されているように、XSSの脆弱性がありました。現在の「Ver0.6.0」にアップデートされることをおすすめします。

Crazy Boneの使用方法

「Crazy Bone」はプラグインの設定などは不要でインストールするだけで使用することができます。

ログイン履歴の管理場所

ログイン履歴は、ユーザーの設定画面にあります。
WordPress管理画面 → ユーザー → ログイン履歴

ページを開くと、「ログインの可否」「IPアドレスと国」「使用されたブラウザ」「エラーの内容」が表示されます。不正アクセスをチェックするには、ログイン履歴のしたにあるドロップダウンの項目より「login error」を選択し「フィルターを適用」をクリックしてください。
Image may be NSFW.
Clik here to view.
CB05

弊社サイトでもアメリカやウクライナ、ドイツからの不正アクセスがありました。確認すると、「admin」や「administrator」というログイン名で入ろうとしているのがわかります。

ログイン履歴
Image may be NSFW.
Clik here to view.
CB06

ログイン履歴の警告

もしWordPress管理画面に別のIPアドレスからログインがあった場合には、WordPress管理画面の右上に警告が表示されます。
Image may be NSFW.
Clik here to view.
CB03

不正アクセスが合った場合の対策

弊社サイトに「admin」という名前のユーザーは存在しておりませんし、パスワードも複雑なのでログインがされる事はありませんが、やはりユーザー名が「admin」になっててシンプルなパスワードを使ってる場合は大量の攻撃をうけると、突破されてしまう可能性はあります。そのため最低限以下の2つはしておきましょう。

  • 管理ユーザー名をadmin以外にする
  • パスワードは長く複雑なものにし、定期的に変更する

まとめ

WordPressは非常に便利ですが、セキュリティー対策を自身で行う事は必要です。今回紹介しましたCrazy Boneによって、ログイン履歴を確認できるので悪意あるユーザーによるハッキングなどは発見しやすくなるかと思います。また、誤解があるかもしれませんが、WordPressがセキュリティーに弱いということではなく、どのようなシステムでも同様のハッキングはあり得ます。大事なのは自分の大切なサイトは自分で守るという意識です。自分に限っては大丈夫ではなく、サイト作成する際の最初にしっかり対策をしておきましょう。


PCブラウザからスマホサイトを確認する方法

現在では、ホームページへのアクセスは6割〜7割がスマホサイトからというほどスマートフォンへの対応が必須になっており、サイト作成者としては、自分のホームページをスマートフォンからチェックすることは必須作業となっております。しかし、普段、サイトの作成にはパソコンを使用している事が多く、スマートフォンから自分のホームページをチェックする方法を知りたいということは多々あると思います。そこで今回は、パソコンからスマートフォンでどのように見えるのかをチェックする方法をご紹介します

レスポンシブデザインとは

弊社のTCDテーマではスマホサイトに対応するために、レスポンシブデザインを採用しています。レスポンシブデザインとは、ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じURLで、画面サイズに応じて表示を変えるデザインとgoogleで定義されています。レスポンシブデザインを採用する理由は、運営上の管理のしやすさや、デバイスによる表示エラーがしにくい事、SEO効果が高い事などがあります。それではパソコンからスマホサイトを確認する方法を紹介いたします。

Firefoxを使用する場合

スマホサイトを確認する方法は、ブラウザによって変わってきます。FireFoxではアドオンを導入する必要があります。様々なアドオンがありますが、弊社では、user-agent-switcherを使用しています。

user-agent-switcherのインストール

下記のボタンからFirefox Add-onsへ行き、Add to Firefoxでアドオンを追加すれば使用することができます。
user-agent-switcher

下記のような表示がされ、「インストール」をクリックすると、完了です。
Image may be NSFW.
Clik here to view.
uas01

user-agent-switcherの使い方

「ツール」→「Default User Agent」から変更したいUAを選択し、サイトを更新してください。
Image may be NSFW.
Clik here to view.
uas02

またUAを追加したい場合には下記のGitHubよりダウンロードし、「ツール」→「Default User Agent」→「User Agent Switcher」→「Options」でOptionを開きImportからXMLをアップロードしてください。
user-agent-switcher追加UA

GoogleChromeを使用する場合

Chromeではアドオンの追加が無くスマホサイトを確認できます。右上の設定アイコン→ 「ツール」 → 「デベロッパーツール」をクリックしてください。
Image may be NSFW.
Clik here to view.
uas03

下記のような画面が表示されますので、スマホのアイコンを選択し、表示したい画面を確認ください。その後、「更新」をする事でスマホサイトに変更されます。
Image may be NSFW.
Clik here to view.
uas04

Screenfly

スマホサイトの表示はブラウザでの確認だけでなく、オンラインサービスも多くあります。おすすめは、「Screenfly」です。操作も簡単で、様々な機種毎に見え方を確認する事ができます。
Image may be NSFW.
Clik here to view.
uas05

http://quirktools.com/screenfly/

Screenflyの使い方

上記リンクより、Screenflyにアクセスし、フォームの入力欄に表示したいページのURLを入力し、「GO」ボタンをクリックします。下記の画像のように、タブレットやスマホのアイコンをクリックし、確認したい機種を選択すると表示が切り替わります。

Image may be NSFW.
Clik here to view.
usa07

また、一般公開していないサイトを見るときなどは、「Use proxy server」のチェックをオンにして利用してください。第三者に確認してもらいたい時には、シェアを押し、表示されるリンクを送ると、スマホサイトでの表示をみせることができます。

Responsive Design Testing

TCDテーマのような、レスポンシブデザインのサイトをいっきにチェックするためにはこちらの「Responsive Design Testing」がおすすめです。
Image may be NSFW.
Clik here to view.
uas08

http://mattkersley.com/responsive/

Responsive Design Testingの使い方

Screenflyと同じように、フォームの入力欄に表示したいページのURLを入力し「enter」押すと、下記のように、各デバイスにおける表示の仕方を一画面で確認することができます。
Image may be NSFW.
Clik here to view.
usa06

まとめ

以上でパソコンよりスマホサイトを確認する方法の紹介を終了します。TCDのテーマではほとんどのテーマがレスポンシブ対応されており、スマホからのアクセスにも対応しております。今回紹介しました方法を参考に、スマホでの表示の仕方等も工夫くださいませ。ただ、やはり実機での確認が一番確実です。iphoneやipadなどは使用されている方も多くいらっしゃいますので、できれば一度は実機での確認をおすすめします。

Google Analytics解析結果をWordPress管理画面から簡易チェックするプラグイン

サイトを運営する上で、どこからアクセスがあり、その後ユーザーがどのように行動したのかなどの分析はコンバージョン率の向上に繋がる大切な情報となります。サイトのアクセス解析には多くの方がGoogle Analyticsをご利用かと思います。

以前、”WordPressにGoogle Analyticsを設定する方法“を紹介しましたが、今回はそれを更に便利に使用するために、Google Analyticsのアクセス解析をWordPressのダッシュボード上で確認できるプラグイン「Google Analytics Dashboard for WP」を紹介します。こちらのプラグインは現在TCDのカスタマイズ事例紹介サイト「TCD LABO」にて使用しており、そちらを例にご紹介させていただきます。

「Google Analytics Dashboard for WP」の特徴

「Google Analytics Dashboard for WP」を使用すると、Google Analyticsのアクセス解析レポートをWordPressのダッシュボードに表示できるようになります。また、管理画面が日本語化されているのでわかりやすく、Googleアカウントを利用することで、初期設定も簡単です。

※このプラグインを利用するには、アクセス解析ソフトのGoogle Analyticsのアカウントが必要です。
まだの方はこちらの記事を参考にアカウントを取得してくださいませ。
WordPressにGoogle Analyticsを設定する方法

「Google Analytics Dashboard for WP」のインストール

管理画面から「Google Analytics Dashboard for WP」を検索してインストールして下さい。
Image may be NSFW.
Clik here to view.
ana01

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

Google Analytics Dashboard for WP

「Google Analytics Dashboard for WP」の初期設定

プラグインを有効化したら、まずはじめにGoogle Analyticsのアカウント認証を行います。認証にはGoogleアカウントを利用してプラグインの動作を許可する必要があります。設定画面より「プラグインを許可」のボタンをクリックしてください。
Image may be NSFW.
Clik here to view.
ana03

「プラグインを許可」を押すと下記のような画面が表示されますので、アクセスコードを取得し、認証してください。
Image may be NSFW.
Clik here to view.
ana04

アカウント認証の確認画面が表示されますので、クリックして承認します。

「Google Analytics Dashboard for WP」の使用方法

認証が完了すると、Google Analyticsのアクセス解析レポートがダッシュボードに表示されます。様々な項目を調べる事が出来、セッションの部分をクリックしますと、各種表示を切り替える事ができます。ただし、サイト解析を行う上で必要な情報は、「セッション」「使用デバイス」「流入元」「最初に見たページ」程度で十分と考えています。今回は、そちらを中心に確認方法を解説いたしていきます。
Image may be NSFW.
Clik here to view.
ana05

セッション

まずはセッション数の表示です。セッション数とは、サイトの訪問数のことですが、ここでは各時系列毎にセッション数やPV数を確認することができます。参考のグラフはある1日の推移ですが、グラフをマウスオーバーで選択すると、どの時間にどのくらいの訪問があったのか細かく調べる事ができます。
Image may be NSFW.
Clik here to view.
ana06

セッション関連の用語を補足しておきます。
セッション
そのサイトへの訪問のことを言います。サイトを1回閲覧される事で、セッション数が1ということになります。セッション数が1,000なら、選択した期間に1,000回そのサイトが見られていることになります。

ユーザー
そのサイトを訪れた人数のことです。例えば1人のユーザ(同じブラウザで)が3回同じサイトを閲覧した時、セッション数は訪問した数なので3になりますが、ユーザ数は1になります。

ページビュー(PV)数
そのサイトの見られたページの数です。1セッションで10ページを見た場合は、セッション数は1なのに対してページビュー数は10になります。

直帰率
「直帰」とは、ユーザーがページ遷移することなく、1ページを見てそのあとサイトから離脱した、という行動のことを指します。つまり、直帰率とは、全体のセッションのうち、何%が直帰したか、という数字を表わしています。

デバイスの確認

訪問者の使用デバイスの確認をするには「Technology」を選択します。こちらではdesktop(パソコン)、mobile(携帯・スマホ)、tablet(タブレット)の3種類からどのデバイスで閲覧されたのかを確認することができます。
Image may be NSFW.
Clik here to view.
ana12

どのデバイスからの訪問が多いかを把握することで、サイトの改善をどのデバイスに合わせるかということがわかるようになります。

トラフィック

続いて「流入元」を確認するために、トラフィックを確認します。「交通状況」を選択してください。ここでは、どのような経緯でサイトに訪問されたのかを確認することができます。ここを調べる事で新しい訪問者が多いのか、再訪が多いのか確認することができます。アクセスを改善するためにもまずは訪問者の状況を知りましょう。
Image may be NSFW.
Clik here to view.
ana09

Organic
自然検索という意味です。Googleからの自然検索で来たトラフィックということです。

Referral
リファラーと読み、別サイトのリンクから来たトラフィックという意味です。この項目が多ければ、被リンクが多いサイトとも言えますが、急に増加した時は、スパムの可能性もあるので、適度に確認しましょう。

Direct
ダイレクトで来たトラフィックです。直接urlを入力して来るとダイレクトとなりますが、他にも様々な条件があります。参照元の情報が無いことから、ノーリファラーとも呼びます。ノーリファラーとなる条件は、ブックマークや履歴、メルマガなど色々なトラフィックが考えられます。また、スマホからのアクセスも、端末・ブラウザ・アプリによってはリファラーを送りませんのでノーリファラーとなる可能性があります。

ページ毎のPV数

最後にどのページを見られているかを確認します。「ページ」を選択してください。TCDLABOを確認すると、全テーマ共通や人気あるテーマ名での検索が多い事がわかります。人気テーマに対するカスタマイズ事例を充実させること、テーマ共通の内容を増やす事が満足度上昇のために必要ということが解析できます。
Image may be NSFW.
Clik here to view.
ana08

地域

また、地域を選択するとどの地域からのアクセスがあるか調べる事ができます。日本全国のユーザーからご使用いただいていることが確認できますね。地域性のあるサイトを作成されている場合にはこちらもチェックするといいかもしれません。
Image may be NSFW.
Clik here to view.
ana07

地図の表示は、初期設定では、世界地図になっています。アナリティクスの設定より、「バックエンド設定」から地域設定を”JP”と設定すると日本が中心となるように設定できます。

Image may be NSFW.
Clik here to view.
ana11

まとめ

以上で「Google Analytics Dashboard for WP」の使い方とそれを用いた解析方法の解説を終了します。Google Analyticsは奥が深く、もっと詳細な解析を行いたいという場合にはGoogle Analyticsのサイトから行う方がいいかと思います。ただし、解析が初めての方は今回ご紹介した4つの基本を押さえ、サイト改善にお役立てくださいませ。

2016年5月のアクセスランキングBEST10

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

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

Image may be NSFW.
Clik here to view.
WordPressを初導入したら まず最初にやるべき24の設定

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

不動の第1位の記事です。Google検索でも「WordPress 設定」と入力すると上位に表示されるのがこの記事でTCDテンプレートがSEOに定評があるのは、この記事からも証明されています。また、アフィリエイトASPのA8のサイトコンテスト2015の最優秀賞のサイトが使っているテーマがTCDテーマと伺いました。

ちなみにですが、こちらがコンテストの結果発表です。
・【A8.net】A8サイトコンテスト2015結果発表
http://support.a8.net/as/campaign/a8sitecontest2015/result.php

WordPressは、その機能の豊富さに、初めて利用する初心者ユーザーは難しく捉えてしまう方もいます。また、ついつい忘れがちな設定の変更などもこの記事を読み返すことですぐに解決できますね。

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

Image may be NSFW.
Clik here to view.
slack

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

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

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

Image may be NSFW.
Clik here to view.
contact_01

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/

4位「TCDテーマの背景を動画にして、よりインパクトのあるサイトへ」

Image may be NSFW.
Clik here to view.
video

http://design-plus1.com/tcd-w/2016/05/video.html

最近ではサイトを閲覧していると、背景に動画を用いたサイトをよく目にします。動画を使うだけで、サイトの雰囲気がより伝わり、ユーザーにインパクトを与えることができます。TCDテーマでは背景に動画を設定したテーマはありませんが、カスタマイズすることで背景に動画を設定することができます。思いのほか簡単に設定できますのでユーザーにインパクトを与えたいと思っている方は是非参考にしてみてください。

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

Image may be NSFW.
Clik here to view.
video

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

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

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

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

Image may be NSFW.
Clik here to view.
lens

http://design-plus1.com/tcd-w/2016/05/free-video.html

さきほど、TCDテーマの背景を動画にするカスタマイズ方法を紹介しましたが、その中で無料の動画素材集の紹介を行いました。最近では無料でもかなり高品質な動画素材サイトがありますので、余すところなく紹介させていただいております。この記事より多く紹介されている記事はいまのところないのではないかと自負しています。

7位「スタイリッシュな製品レビュー記事が簡単に作れるプラグイン「WP Product Review」」

Image may be NSFW.
Clik here to view.
wpr

http://design-plus1.com/tcd-w/2014/11/wpproductreview.html

WordPressでレビューを主体にした記事やサイトを作るときに、少しでも見た目にこだわりたいときがあります。そんなときに役に立つのが、「WP Product Review」です。シンプルな設定で、見た目もかっこよくグラフやコメント、アフィリエイトのリンク等も挿入することができます。最近発売された、「BLOC」とも相性のいいプラグインだと思います。このようなプラグインを効果的に活用いただければと思います。

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

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

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

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

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

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

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

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

10位「企業内コミュニケーションツールには「Slack」がおすすめ<登録編>」

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

2位の操作編と合わせて登録編もランクインしました。Slackを利用するメリットなどもまとめていますので、導入の際の参考にしてください。

まとめ

5月の記事では動画を背景に使用したカスタマイズ方法など、TCDテーマを使用しながらも他のサイトとは差別化を図りたいという方におすすめの記事を多く書かせていただきました。6月度は良くお問い合わせいただく「Instagram」についての活用の記事などを考えております。これからも更にお役に立てるサイトを目指して行きます。また、サイトで解決できない内容に関しましては、気軽にサポートまでお問い合わせください。6月度も役立つ記事を配信していきます。

記事の投稿時に自動でツイッターへ投稿してくれるプラグイン「WP to Twitter」

投稿した記事をソーシャルメディアに投稿し、読者の方に新しい情報を届けたり、新しい読者を増やしたりすることは今や必須な作業とも言えるのではないでしょうか。ソシャールメディアで有名なものには、FacebookやTwitter、Instagramなどがあります。その中でもTwitterは、公開でつぶやいた内容がどんどんリツイートされることによって、フォロワーのフォロワーすら超えて全く知らない人にまでつぶやきが届くことがあり、非常にオープンなソーシャルメディアであると思います。

今回はそんなTwitterへ投稿を簡単にするプラグイン「WP to Twitter」をご紹介致します。

「WP to Twitter」の特徴

「WP to Twitter」を使用すると、WordPressで作成した記事を公開したり更新したりした際に自動的にTwitterへツイートしてくれるようになります。また、ツイートの文言なども自由に書き加えることもできます。

  • 新規作成時や更新時に自動でTwitterへ投稿できる
  • タグをハッシュタグに変換して付加できる
  • 編集時にもTwitterへ投稿できる
  • カスタム投稿タイプにも対応している

「WP to Twitter」のインストール

管理画面から「WP to Twitter」を検索してインストールして下さい。
Image may be NSFW.
Clik here to view.
Twitter01

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

WP to Twitter

「WP to Twitter」の初期設定

ツイッターとの連携

プラグインを有効化したら、ツイッターとの連携を行います。
Image may be NSFW.
Clik here to view.
twitter03

まずは、Twitterにログインした状態で、「Twitter アプリケーション登録ページ」と表示されたリンクをクリックして下さい。すると下記のページが表示されます。
Image may be NSFW.
Clik here to view.
twitter04

Twitterのログイン画面が表示されるので、使用したいTwitterアカウントでログインをしてください。
Name:アプリケーション名
Description:アプリケーションの簡単な説明
Website:WordPressのアドレス
CallbackURL:WordPressのアドレス

入力後、下にスクロールすると利用規約が表示されます。同意であれば「Yes, I agree」のチェックボックスにチェックを入れ、「Create your Twitter Application」ボタンを押すとアプリケーションの登録が完了します。

続いて、ワードプレスとツイッターとの連携の設定をします。
連携には、下記の部分を入力する必要がありますが、
Image may be NSFW.
Clik here to view.
twitter05

先ほどの入力欄の「Keys and Access Tokens」という欄に記載されているのでそれを入力いたします。
Image may be NSFW.
Clik here to view.
Twitter06

入力を終え、「Twitterとの連携」ボタンを押すと連携が完了します。

ツイッターの投稿設定

続いて、ツイート方法を設定します。

連携が終わった後に改めて、「WP to Twitter」をクリックすると、下の画像のような「ツイートのテンプレート」を設定する画面が表示されます。
Image may be NSFW.
Clik here to view.
twitter07

フォーム内は実際にツイートされる文言なので、自由にカスタマイズしてください。「Basic Setting」の「投稿」タブで、新規投稿時と、編集時のそれぞれの動作を指定することができます。もし、編集の時はTwitterに投稿したくない場合は、下のチェックを外せば投稿されない設定となります。さらにハッシュタグをつけたい場合は、ここで「#tags#」を付加することで、タグをハッシュタグとしてつける事もできます。
またカスタム投稿タイプにも対応しておりますので、お好みでツイッターに投稿したいものにチェックをいれてみてください。

最後に使用できるショートコードを記載しておきます。

#title#: 投稿のタイトル
#blog#: ブログのタイトル
#post#: 投稿の抜粋
#category#: 投稿のカテゴリー (最初の一つ)
#date#: 投稿の日付
#url#: 投稿のURL
#account#: @reference 形式のサイトの Twitter アカウント名 (もしくは、個人設定で値があれば投稿者のアカウント名)
#tags#: タグをハッシュタグにして投稿
#modified#: the post modified date
#cat_desc#: custom value from the category description field
#author#: the post author (@reference if available, otherwise display name)
#displayname#: post author’s display name
#@#: the twitter @reference for the author or blank, if not set

まとめ

以上で「WP to Twitter」の解説を終了します。記事を投稿した際に同時にツイッターに投稿されると大事な記事の拡散を忘れてしまったということがなくなり非常に便利です。記事をツイッターで拡散したいという方は、是非このプラグインをご活用ください。
また先日記事にさせていただきましたが、現在は、twitterのシェア数が記事に反映されない仕様となっております。そのためこちらを参考にシェア数の表示なども設定いただければと思います。
廃止されたツイッターのカウント数表示を復活させる方法

今更聞けない?「meta title 」「meta description」の設定方法

SEO対策として一番最初に行うのが、タイトルやディスクリプションの設定です。タイトルタグやメタディスクリプションは、内部SEOで最も基本かつ重要な設定の一つです。今回はタイトルやメタディスクリプションの基本的な考え方と設定方法について解説します。

「meta title」とは

titleとは、コンテンツのタイトルとなります。以下の様に検索結果に表示される一番重要な部分です。

Image may be NSFW.
Clik here to view.
title01

titleは検索エンジンが最も重要にする要素です。ここにキーワードが入っていないと検索結果に表示されません。そのため、ここの設定を見直す事で検索順位が一気にあがることもあります。それでは設定方法について解説します。

「title」 タグの設定方法

titleの文字数は30⽂字程度で設定して下さい。タイトルの文字数が多いと省略されて表示されることがあり、何のサイトか分かりにくくなります。そのため、titleは検索されたいキーワードを含めたシンプル・分かりやすく記述するのがポイントとなります。

ページタイトルが、titleタグとは別のものに書き換えられる場合

通常検索結果にはtitleタグの記述が用いられるようになっています。しかし、検索されるキーワードによってはそのページのtitleタグがそのまま表示されるのが最適ではないケースも多くあります。そのためGoogleが自動的に最適化して表示する場合があります。その場合には、そのページのmetaタグやhタグ要素などの情報から、代わりとなるページタイトルを自動で生成し書き換えることが起こります。
希望しないタイトルに変更された場合は以下のような方法で改善できます。

  • 全ページにtitleタグを記述する
  • そもそもtitleタグが無いページが検索された場合には表示する情報がないため、Googleが書き換えすることになります。全ページにtitleタグを設定しましょう。

  • キーワードを入れすぎない
  • 同じキーワードを何度も繰り返して使用した場合、検索エンジンからスパムと認識される可能性もあり検索順位が下がる可能性があります。同じキーワードは1語、多くても2語までにしましょう。

  • ページ事にタイトルを変える
  • 全ページに同じtitleタグで記述している場合や、各ページを少し変えただけのtitleタグを記述している場合はタイトルが書き換えられる可能性があります。各ページ毎のテーマに合ったtitleタグを設定し、重複させないことでタイトルが書き換えられる可能性を低くできます。

「meta description」とは

meta descriptionは検索エンジンに伝える、「ページの概要説明」です。以下のように検索結果に表示されます。

Image may be NSFW.
Clik here to view.
title02

メタディスクリプションはタグ自体にはSEOとしての効果がないと言われていますが、最適なディスクリプションを設定することでサイトへのクリック率を高める事ができます。メタディスクリプションに予め文章を入力しておく事で、検索結果に表示される文章をコントロールしましょう。尚、設定しなかった場合は、googleが自動的に記事の中から抜粋し表示してくれます。

「meta description」 タグの設定方法(HTMLとWordPress)

descriptionの文字数は長くても120文字程度にしましょう。先ほども記載しましたが、descriptionタグ自体にSEO効果はありませんので、キーワードやテキストを詰め込まず、検索したユーザー惹き付ける文章にすることを意識しましょう。

TCDテーマにおける「meta title」と「meta description」の設定方法

ワードプレスで「meta title」や「meta description」を設定する場合には、通常は「All in one SEO Pack」などのプラグインが必要となります。しかし、TCDテーマでは、各投稿ページに容易に「meta title」と「meta description」を設定できるようにテーマが作成されています。

下記がTCDテーマの設定画面です。ここにテキストで設定したい内容を入力するだけで設定が出来ます。
Image may be NSFW.
Clik here to view.
title03

「All in one SEO Pack」を使用される場合がプラグインが干渉し不具合が発生する可能性がございますのでご注意ください。

「meta keyword」とは

meta keywordsはSEO的には影響がないと言われているタグです。何故なら、Googleがサポートしているメタタグにも含まれていないためです。
ちなみに、Googleがmeta keywordをサポートしなくなった理由は、コンテンツと関係ないキーワードをmeta keywordに記述するというスパムが広まったことが大きな原因です。将来的にはどうなるかわかりませんが、今の所記載の必要は不要かと思います。

「h1」タグについて

h1は文章における「大見出し」となります。HTML5では、h1タグも複数設定することができるようになりました。ただし、SEO的な観点でいえば、HTML5になってもh1はなるべく1つとすることをお勧めします。

H1タグがロゴに使われている理由

TCDシリーズ各テーマではH1タグをロゴに設定しておりますが、SEOを考慮してH1タグを記事の見出しに使いたいというお問い合わせをいただくことがあります。H1タグを記事見出しに使うことがSEOに効果が有るか否かに関しては意見が分かれるところではあります。

厳密な見出しタグのルールによると、H2タグやH3タグの後にH1タグを表示する事は、文章の構造上間違っていると判断されます。これはSEOとして不利になる可能性があります。

見出しタグのルールにつきましては、以下のサイトを参考ください。
・見出しタグ(h1~h6)の正しい使い方。使用上のルールとは?

弊社テーマでは、ロゴよりも前に文章や見出しがないことから、文章構造ミスを生じる可能性を最小限にするために、H1タグをロゴに設定するという仕様としています。私たちは、H1タグを不自然な形で表示するのではなく、デザインに沿った自然な表示方法を選択することが、長期的に見て最も有効なSEOであると考えています。
※SEOに関しては、あくまでも弊社としての考え方であり、その効果を約束するものではありません。

まとめ

以上でタイトルやディスクリプションの解説を終了いたします。これを機に、SEOの基本的となるキーワードなどを見直してみてはいかがでしょう。しかし一番のSEO対策はやはりユーザーにとって効果的で良質な記事を書く事だと思います。弊社ではこれからもユーザーの皆様のお役に立てる記事を書かせていただきます。

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

WordPressは非常に便利なCMSですが、個人的にメディア(画像・音声・動画)ファイルや添付ファイルの管理ができないのが不便だと思っていました。そこで今回はメディアファイルを管理するプラグイン「Media Library Assistant」をご紹介させていただきます。

「Media Library Assistant」の特徴

WordPressのメディア管理は画像や動画などがすべて同じフォルダに格納される構造になっています。そのため、FTP等で直接フォルダを変更すると記事の投稿時に画像が表示されないなどの不具合が発生する可能性があります。また、後から以前使用したファイルを再利用しようと検索しても、メディアファイルが少ないうちはいいのですが、ファイル数が増えてくると目的のものが見つけにくくなります。「Media Library Assistant」を使用することでファイルが格段に見つけやすくなります。

  • メディアファイル(画像・音声・動画)をカテゴリで整理できる
  • 過去に投稿したメディアファイルも一括整理できる
  • メディアライブラリの検索機能強化

「Media Library Assistant」のインストール

管理画面から「Media Library Assistant」を検索してインストールして下さい。
Image may be NSFW.
Clik here to view.
folda

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

Media Library Assistant

「Media Library Assistant」の日本語化

プラグイン自体は英語ですが、細かい設定は不要です。そのためそのままでも使用できますが、もし、日本語で使用されたいという方はKnowledge Base様が日本語翻訳ファイルを用意してくださっていますので、活用されてもよいかと思います。

「Media Library Assistant」の日本語化ファイルダウンロードファイル|Knowledge Base

翻訳ファイルの設定方法

翻訳ファイルの使用方法についてですが、FTPソフトにてダウンロードした日本語化ファイルを解凍後、適切なフォルダへファイルをアップロードすることで適用されます。TCDテーマにて適用する場合は、下記のファイル
/●●●.com/public_html/wp-content/plugins/media-library-assistant/languages
に、「media-library-assistant-ja.mo」,「media-library-assistant-ja.po」の2つのファイルをアップロードしてください。
Image may be NSFW.
Clik here to view.
folda03

また、翻訳ファイルの編集方法について知りたいという方は以前記事にさせてもらいましたのでご覧下さい。
WordPressの翻訳ファイルを編集する方法

「Media Library Assistant」の使用方法

まずはプラグインを有効化し、メディアファイルを選択してください。そうするとメディアライブラリの表示が下記のように変更になっています。
Image may be NSFW.
Clik here to view.
folda04

このままでは画像ファイルはカテゴリに分類されておりませんので、このあと新しく追加した画像にカテゴリを設定していきます。

メディアファイルのカテゴリ設定

まずは、設定したいカテゴリを追加します。管理画面のメディアより「メディア用カテゴリー」の項目が増えていますのでクリックしてください。
Image may be NSFW.
Clik here to view.
folda05

クリックするとカテゴリ設定の画面が表示されます。
Image may be NSFW.
Clik here to view.
folda07

どこかでみたような画面かと思いますが、これは「投稿ページ」のカテゴリ設定と同じ設定画面になっています。「名前」の欄に設定したいカテゴリー名を入力し、追記ください。今回は例として人を分類するようにするために、「man」[woman][kids]という3つのカテゴリを追記してみました。そうすると下記のようにカテゴリが設定されます。
Image may be NSFW.
Clik here to view.
folda06

新規メディアファイルの追加

カテゴリ設定が完了したら、新しく画像をアップロードしてみます。
Image may be NSFW.
Clik here to view.
folda08

通常通りアップロードすると画像のように右にカテゴリの設定画面が表示されますので、設定したいカテゴリをにチェックをいれてください。これでカテゴリ分類ができるようになります。同様にタグで管理したい場合もメディア用タグから設定できます。設定できましたら、メディアライブラリにてカテゴリを選択すると、カテゴリ分けされた画像のみが表示されるようになります。
Image may be NSFW.
Clik here to view.
folda09

メディアファイルの一括編集

続いて、過去にアップした画像の一括編集方法について解説します。今回は例としてカテゴリに「talent」を追加し、タレント一覧を追加してみたいと思います。
まずは、「メディア」より「詳細一覧」をクリックしてください。
Image may be NSFW.
Clik here to view.
folda10

詳細ページにいきましたら、各画像の横にチェックボックスがありますのでカテゴリを追加したい画像にチェックを入れ、操作のドロップダウンリストより「編集」を選択し、「適用」をクリックしてください。
Image may be NSFW.
Clik here to view.
folda11

そうすると下記のような画面が表示されますので、カテゴリやタグなどを追加したい項目を入力し、「更新」ボタンをクリックしてください。
Image may be NSFW.
Clik here to view.
folda12

下記のような画面が表示されれば一括編集の成功になります。
Image may be NSFW.
Clik here to view.
folda13

メディアライブラリにて「talent」を選択すると下記の用にカテゴリを選択した画像が表示されました。
Image may be NSFW.
Clik here to view.
folda14

まとめ

以上でメディアを管理するプラグイン「Media Library Assistant」の解説を終了します。WordPressの弱点でもあるメディアファイルの管理ですが、このプラグインを活用することで画像が蓄積されてきても、素早い検索ができるようになります。メディアファイルを整理したいという方は非常に便利でかつ簡単に使用できますのでご活用ください。

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

TCDには一日に70通〜80通程度のお問い合わせが届きますが、テーマのカスタマイズに関する内容となると、だいたいは「ここのカラーだけを変更したい」「余白をもう少し狭くしたい」といった部分的なカスタマイズに関するものが多いです。以前ご紹介しましたFirefoxアドオンの「Firebug」を使うと、どのコードを編集すれば良いかがひと目でわかるのですが、今回はGoogleChromeのデベロッパーツールを使用した方法を紹介致します。

以前の記事はこちら
サイトのカスタマイズが劇的に捗るFirefoxアドオン「Firebug」

Google Chromeの「デベロッパーツール」とは

GoogleChromeはブラウザとしては最後発でしたが、その機能の多さや高速さからシェアを大きく伸ばし、2016年4月のデスクトップ向けウェブブラウザーでは、ChromeがInternet Explorer(IE)を抜いてトップとなりました。そして、今はほとんどのブラウザーで無料のデベロッパーツールを利用できるようになりましたが、特にChromeのデベロッパーツールは、非常に機能が豊富で、利用している人もかなり多くいます。

Google Chromeの「デベロッパーツール」の起動方法

検証ボタンを使用の場合

調べたいページを右クリックし、「検証」の項目がありますので、それをクリックします。今回はAGENT(tcd033)を利用して解説していきます。
Image may be NSFW.
Clik here to view.
google01

ショートカットキーの場合

Windowsの場合はF12キーを押す
Macの場合はCommand+Option+Iキーを押す
事でデベロッパーツールが起動します。

上記のいづれかの方法を行うと下記のようなディベロッパーツールが表示されます。
Image may be NSFW.
Clik here to view.
google02

デベロッパーツールの位置を変える

ノートパソコンなどで作業をされている方は下にディベロッパーツールが表示されると非常に操作しにくいので表示方法を変更することをおすすめします。方法はデベロッパーツールの右端に表示されている「丸が縦に3つ並んだアイコン」をクリックします。そこにあるアイコンを押すと、[Dock side」の表示が現れ、左側から「別ウィンドウで表示」「下に表示」「右に表示」が選択できます。
Image may be NSFW.
Clik here to view.
google03

Google Chromeの「デベロッパーツール」の使い方

それではここから使い方を解説していきます。Google Chromeの「デベロッパーツール」には機能が多く有り、その中でも今回は特に良く使用する機能をご紹介させていただきます。

スマホサイトの表示確認方法

まずは、以前PCブラウザからスマホサイトを確認する方法でも紹介させていただきました、Webページからのスマホページの表示確認方法です。方法ですが、以下の手順で行います。

  1. 「検証」ボタンより、ディベロッパーツールを開きます
  2. 「Toggle device mode」のアイコンをクリックします
  3. 画面上部のデバイス選択のセレクトメニューから、エミュレーションしたいデバイス(iphone5など)を選択します。

Image may be NSFW.
Clik here to view.
google05

また表示倍率を変更したり、縦、横の表示も変更できますので、試してみて下さい。

HTMLやCSSの修正確認方法

HTMLやスタイルシートの修正テストを行うことができます。ただし、実際のHTMLやCSSには影響は及びません。あくまでも「表示しているページの、修正をしている箇所」の変更です。更新ボタンを押すと元に戻ります。それでは、確認方法ですが、以下の手順で行います。

  1. 「検証」ボタンより、ディベロッパーツールを開きます
  2. デベロッパーツールのいちばん左にある要素を選択するアイコンをクリックします。
    Image may be NSFW.
    Clik here to view.
    google09
  3. HTMLやCSSの修正したい箇所を、Webページ上で選択します。
    Image may be NSFW.
    Clik here to view.
    google07
  4. 左側(上側)に選択した要素のHTMLが表示され、右側(下側)には適用されているスタイルシートが表示されます。
  5. 修正したい箇所の変更を行います。修正したスタイルは、リアルタイムで反映されますので簡単にチェックが出来ます。
  6. Image may be NSFW.
    Clik here to view.
    google08

ちなみにカラーの変更にはカラーピッカーの機能もあります。カラーピッカーを使用するにはカラー表示されている□の部分をクリックします。そうすると、このカラーピッカーの下の部分に候補となる色が一覧表示されます。候補色をクリックすると、選択中の要素へ適用された状態を確認できます。
Image may be NSFW.
Clik here to view.
google10

Image may be NSFW.
Clik here to view.
google11

現在地を変更して地域差がある検索結果を表示する方法

あまり知られていない事ですが、googleではどの地域で検索しているかによって検索順位が変わります。ベニスアップデートの影響と言われていますが、ディベロッパーツールでは、検索している位置を「緯度」と「経度」で指定して、その地域での検索結果を得ることができます。

  1. 「検証」ボタンより、ディベロッパーツールを開きます
  2. 「Toggle device mode」のアイコンをクリックします
  3. 画面上部のデバイス選択のセレクトメニューから、エミュレーションしたいデバイス(iphone5など)を選択します。
  4. Image may be NSFW.
    Clik here to view.
    google05

  5. キーボードのescキーを押して、コンソールを表示して、左にある「丸が縦に3つ並んでいるアイコン」をクリック。「Sensors」をクリックします。
  6. Image may be NSFW.
    Clik here to view.
    google12

  7. 「Emelate geolocation coordinates」にチェックを入れます。
  8. Latは緯度、Lonは経度を示しています。例として、Latに「34.7」Lonに「135.49」と入力してください。
  9. Image may be NSFW.
    Clik here to view.
    google13

  10. その画面でGoogle検索を行います。「病院」で検索してみてください。
  11. Image may be NSFW.
    Clik here to view.
    google14

ページ下部に表示されている地域を確認すると「大阪市大阪府北区」と表示されているはずです。いま画面に表示されている検索結果は、大阪駅前で検索した結果と同じとなるはずです。

まとめ

以上でChromeデベロッパーツールの解説を終了します。TCDテーマをカスタマイズしたいという場合には、このディベロッパーツールでCSSの適用箇所などを調べる事でカラー変更などの時間短縮に繋がる事と思います。また、デベロッパーツールは本当に多くの機能があり、今回の記事だけでは紹介できていない機能が山のようにあります。興味のある方は更に調べられて、Chromeデベロッパーマスターを目指してみてはいかがでしょう。開発が非常にはかどるようになりますよ。


WordPressを軽量に!!画像を圧縮するプラグイン「EWWW Image Optimizer」

以前、WordPressが重くなる理由としてプラグインが原因の一つであると記事を書かせていただきました。

WordPressが重い!!その原因を発見するプラグイン「P3 (Plugin Performance Profiler)」

ただし、他にもWordPressが重くなる理由に画像ファイルのサイズが大きい事が挙げられます。しかし、人を惹き付けるサイト作りには、画像が欠かせません。そこで、画像のファイルサイズが増えると表示スピードが遅くなるということを解決する、画像のファイルサイズを圧縮するプラグイン「EWWW Image Optimizer」を本日はご紹介いたします。

「EWWW Image Optimizer」の特徴

「EWWW Image Optimizer」を使用すると、アップロードされる画像は全て自動的に圧縮されます。また、過去にアップロードした全画像を1クリックで圧縮してくれます。しかし、画像を圧縮する時に気になるのが、画質が劣化するのではないかということです。これに関しては、デフォルト設定では、ほとんど見分けはつきません。圧縮を必要以上に行えば劣化してしまうかもしれませんが、適正に使えば影響はほとんどありません。

ただしVIEW(TCD032)PHOTEK(TCD024)のような写真ギャラリーサイトや、画像がコンテンツのメインになっているサイトの場合は、事前に圧縮による画質劣化のテストを行う必要があると思います。それでは解説していきます。

「EWWW Image Optimizer」のインストール

管理画面から「EWWW Image Optimizer」を検索してインストールして下さい。
Image may be NSFW.
Clik here to view.
ewww01

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

EWWW Image Optimizer

「EWWW Image Optimizer」の初期設定

インストールが出来ましたら、「設定」→「EWWW Image Optimizer」と進み、初期設定を行います。設定画面は全て英語となります。デフォルト設定でも運用できますが、少し設定をしていきます。設定は大きく分けて下記の3つになります。

  • 「Remove metadata」の設定
  • 「optipng optimization level」の設定
  • 「Hide Conversion Links」の設定

「Remove metadata」の設定

設定画面にいきましたら、まずは「Basic setting」をクリックしてください。「Basic setting」の画面になりましたら、「Remove metadata」にチェックを入れます。「Remove metadata」にチェックを入れてると、EXIF情報を削除する設定となります。EXIF情報とは、撮影した日時や場所などの情報です。写真をそのままアップすると、カメラが記録したEXIF情報から個人情報が漏れてしまう可能性があります。基本的にはデフォルトでチェックされているはずですが、必ずチェックをいれましょう。
Image may be NSFW.
Clik here to view.
ewww03

「optipng optimization level」の設定

つづいて、「optipng optimization level」の設定を行います。まずは、「Advanced setting」をクリックしてください。「optipng optimization level」の設定はPNG圧縮のレベル設定になります。デフォルトの「Lebel 2: 8trials」は、「レベル2:8回圧縮する」という意味です。設定はデフォルトのままで構いません。もし、更に圧縮したい場合は、「Lebel 3: 16trials」程度にしましょう。最大では「Lebel 5: 48trials」まで設定できますが、やり過ぎると画像が劣化するので注意しましょう。
Image may be NSFW.
Clik here to view.
ewww07

「Hide Conversion Links」の設定

最後に「Hide Conversion Links」の設定を行います。「Conversion Settings」をクリックしてください。「Conversion Settings」の画面に移動したら、Hide Conversion Linksにチェックを入れて下さい。理由としては、EWWW Image Optimizerを有効化すると、WordPressのメディアライブラリで、JPG→PNG変換を行えるようになります。しかし、JPGをPNGに変換する事はおそらくありませんので、誤って押してしまわないようにボタンを隠す設定にしておきましょう。
Image may be NSFW.
Clik here to view.
ewww04

Image may be NSFW.
Clik here to view.
ewww08

以上で「EWWW Image Optimizer」の設定は完了です。「Save Changes」をクリックして設定を保存しましょう。

「EWWW Image Optimizer」の使い方

EWWW Image Optimizerを有効化しておけば、画像をアップロードするだけで勝手に圧縮してくれます。EWWW Image Optimizerの影響でアップロードの時間が多少かかるようになります。
Image may be NSFW.
Clik here to view.
ewww06

EWWW Image Optimizerの有効化後画像をアップしました。圧縮の結果、下記のような結果がでました。

Reduced by 2.6% (33.6 kB)
Image Size: 1.21 MB

33.6KB圧縮されています。画像の劣化も閲覧には影響ないレベルです。

過去にアップロードした画像を一括で圧縮する

「EWWW Image Optimizer」には、今までにアップロードした画像もすべて圧縮してくれる機能があります。

「メニュー」 → 「メディア」 → 「Bulk Optimize」を選択してください。
Image may be NSFW.
Clik here to view.
ewww09

過去のメディアファイルを一括圧縮する場合には、「Start optimizing」を、テーマファイルの画像など、メディアファイル以外の画像を圧縮したい場合には、「Scan and optimize」をクリックしてください。
Image may be NSFW.
Clik here to view.
ewww10

以上で、EWWW Image Optimizerによる画像圧縮は完了です!

まとめ

以上で「EWWW Image Optimizer」の解説を終了します。画像を圧縮することでも改善されますが、そもそも、画像を最適なサイズでアップする事も非常に大事です。サイトが重いと感じたら、先に紹介したプラグインの見直しや、今回の画像の見直しを行ってみて下さい。

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

2016年6月22日から新規サイトでGoogle Mapsを使用する場合はAPIキーが必須になりました。おそらくドメインで判断しているのだと思いますが、今まで既存サイトで使っていた GoogleMapsは、今のところはAPIキー無しでも表示するようです。

ちなみに、GoogleMapsの表示には、ver3(現在のバージョン)ではAPIキーが必要でしたが、APIキーが無くてもサイトに地図の表示は行えました。

詳しくはこちらに発表されています。

Geo Developers Blog
http://googlegeodevelopers.blogspot.jp/2016/06/building-for-scale-updates-to-google.html
Google Maps APIs Standard Plan Updates
https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update

対応方法

この仕様変更に伴いTCDテーマでもアップデート対応を行っておりますが、GoogleMapsを使用するためには、APIの取得をしていただく必要性がございます。といっても難しいものではございませんので、次の手順をみながらご対応をお願い致します。

APIキーの取得方法

まずは、Google Maps APIs for Webへアクセスします。

「キーを取得」のボタンを押します。
Image may be NSFW.
Clik here to view.
map01

すると、作業手順がポップアップ画面に表示されますので「続ける」をクリックしてください。
Image may be NSFW.
Clik here to view.
map02

googleアカウントへのログインが必要となりますので、必要な方はログインしてください。googleアカウントをお持ちで無い方はアカウントを作成ください。

「アプリケーションを登録するプロジェクトの選択」という画面が表示されますので、「新しいプロジェクトを作成」のまま「続行」ボタンを押してください。
Image may be NSFW.
Clik here to view.
map03

すると下記のような画面が表示されます。
Image may be NSFW.
Clik here to view.
map04

「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の欄で GoogleMapsを設置するURLを登録します。ここの入力にはワイルドカード( * )が使えますので * を使ってURLを設定します。

記入例
.example.com/*
www等のサブドメインがついた example.com と下位のURL
example.com/*
example.com と下位のURL

例に習って、入力後、「作成」ボタンを押して、もう一度「保存」を押してください。
Image may be NSFW.
Clik here to view.
map05

以上でマップの表示に必要なAPIキーの取得ができました。
Image may be NSFW.
Clik here to view.
map06

APIキーの追加

ここまでの手順で有効になっているAPIは以下の4つになっています。

  • Google Maps Embed API
  • Google Maps JavaScript API
  • Google Static Maps API
  • Google Street View Image API

プラグインやご自身でGoogle Mapsを実装している場合にはこのAPIだけではマップが表示されない場合があります。詳しくは、こちらのAPIの表を確認いただければと思います。

必要なAPIキー
https://developers.google.com/maps/documentation/api-picker?hl=ja

TCDテーマでgoogle mapを使用するには更に、下記の3つのAPIを追加ください。

  • Google Maps Directions API
  • Google Maps Geocoding API
  • Google Maps Elevation API

APIキーの追加方法

それでは、追加方法を解説します。まずは、Google Developers Console Enabled APIs listへアクセスします。ここで、先ほど作成した、「My Project」を選択して「続行」を押し、「Google API」のタブをクリックします。すると、APIの一覧がでますので「Google Maps Directions API」を探してクリックしてください。
Image may be NSFW.
Clik here to view.
map09

有効にするをクリックし、APIを有効化します。
Image may be NSFW.
Clik here to view.
map10

これで「Google Maps Directions API」が追加されました。この順序で他のAPIも同様に行ってください。

APIキーの確認方法

もし、利用状況を知りたい場合やHTTPリファラーのURLを修正したい場合、APIキーを忘れた場合はこちらからプロジェクトを選んでください。
Google Developers Console
先ほどのGoogleMapsを設置画面が表示されますので、ここからGoogleMapsを設置するURLを再設定できます。

APIキーの使い方

Google Mapsを表示するには、ページのヘッダーにGoogleMaps用のScriptを読み込むコードを記入します。そのコードにAPIキーを追加するだけです。

<script src="https://maps.googleapis.com/maps/api/js?key=●●●●●"></script>

また、TCDテーマではテーマオプションにAPIキーの記入欄を設置しましたので、そちらに入力いただくだけで設定可能になっています。
Image may be NSFW.
Clik here to view.
map11

まとめ

以上でGoogleMapsのAPIの設定方法の解説を終了します。GoogleMapが表示されなくなったという方はこちらの設定を行ってみて下さい。

InstagramをWordPressと連携する方法

SNSの連携はもはやファンブログや企業サイトでも欠かせないツールとなっています。有名なSNSの中には、Facebook、Twitter、Instagramがあります。その中でも特にInstagramは世界で5億人、国内でも1000万人を越え、特に20代の女性を中心に勢いを増しているSNSです。弊社への問い合わせでも「Instagramとの連携はできますか?」などの問い合わせが増えて来ており、今回はInstagramを固定ページや投稿で利用する方法を紹介したいと思います。

Instagramとは?

Instagramとは、一言で言うと写真共有SNSです。撮影した写真に様々なフィルターをかけて写真を簡単におしゃれに編集することができます。素敵な写真をアップし、その写真を基にして他のユーザーと繋がることができます。今ではInstagram公式の関連アプリも出ており、画像の加工や予約投稿がスムーズになりました。

Image may be NSFW.
Clik here to view.
insta01

instagram
https://www.instagram.com/

Instagramのワードプレスへの投稿方法

それではワードプレスへの投稿方法について解説していきます。また、今回の投稿用に新しくインスタグラムアカウントを作成し、事前にテーマの画像を数点投稿しておきました。

InstagramとWordpressを連携するには、下記の方法がありますが、今回は特に直接共有する方法と、共有サイトを活用する方法について詳しく解説していきます。

  • 直接共有する方法
  • 共有サイトを活用する方法
  • プラグインを利用する方法
  • その他の方法

直接共有する方法

Instagramへの投稿はスマホアプリからしかできませんが、Wordpressへの投稿はPCサイトからしか行う事ができません。そこで、まずはInstagramのPCサイトへログインしてください。
https://www.instagram.com/

ログインすると下記のような画面が表示されます。
Image may be NSFW.
Clik here to view.
insta02

サイトに画像埋め込むには、埋め込みたい画像をクリックします。
埋め込みたい画像を表示したら、画面右下の「…」というところをクリックしてください。
Image may be NSFW.
Clik here to view.
insta03

すると埋め込みのポップアップが表示されますので、そのままクリックします。
Image may be NSFW.
Clik here to view.
insta04

コードが表示されますので「埋め込みコードをコピー」をクリックします。
Image may be NSFW.
Clik here to view.
insta05

後は、コピーしたコードをペーストで投稿ページや固定ページなどの好きなところに張り付ければOKです。
Image may be NSFW.
Clik here to view.
insta06

ページに貼付けるとこの様に表示されます。
Image may be NSFW.
Clik here to view.
insta07

共有サイトを活用する方法

上記の方法が一番簡単に埋め込みを行うことができますが、一つ一つの記事に対して毎回埋め込みの設定する必要があり手間がかかります。
そこで、ホームページなどで毎回自動で連動してくれるようにしたい時は、 「SnapWidget」というサービスを利用します。

Image may be NSFW.
Clik here to view.
insta08

https://snapwidget.com/

SnapWidgetの使い方

SnapWidgetの使い方を解説していきます。まずはSnapWidgetの無料登録を行って下さい。
Image may be NSFW.
Clik here to view.
insta09

登録を終えると、下記のようなページが表示されます。ここで表示したいパターンを選びます。種類としては、GRID、MAP、SLIDESHOW、SCROLLING、BOARDなどがあります。
Image may be NSFW.
Clik here to view.
insta10

お好みの表示パターンを選び、「CREATE YOUR WIDGET」を選択してください。
Image may be NSFW.
Clik here to view.
insta14

「CREATE YOUR WIDGET」を選択すると各表示方法によって細かい設定画面が出てきます。
Image may be NSFW.
Clik here to view.
insta11

表示デザインによって異なりますが、基本的な入力項目は下記の様になっています。
・ユーザーネーム:表示させたいinstagramアカウントのユーザーネームを入力。
・サムネイルサイズ:表示させる画像のサイズを指定。
・レイアウト:行と列の数を入力。
・フォトボーダー:画像に枠線を付けるかどうかを選択。
・フォトパディング:画像間の余白を入力。
・ホバーエフェクト:画像にカーソルを合わせた時の効果を選択。
・レスポンシブ:スマホに対応したサイズ調整を選択。

設定を終えたら、「GET WIDGET」を選択してください。すると下記のようにコードが生成されますのでそれをコピーしてください。
Image may be NSFW.
Clik here to view.
insta12

コピーしたコードをサイトに貼付けたら、WordpressでのInstagramの表示が可能になります。
Image may be NSFW.
Clik here to view.
insta13

プラグインを利用する方法

今までは、プラグインを使用せずに設置する方法を解説してきましたが、もちろんプラグインもあります。おすすめの二つのプラグインを紹介させてもらいます。

Instagram Feed

Image may be NSFW.
Clik here to view.
insta15

https://wordpress.org/plugins/instagram-feed/
簡単にインスタグラムのフィードを表示してくれるプラグインです。レスポンシブにも対応しており、カスタマイズできる項目も多く、ショートコードを使用するのでウィジェットにも設置が可能です。

こちらのサイトに詳しい解説が紹介されています。
Instagram Feed – インスタグラムの写真&動画を表示できるWordPressプラグイン | ネタワン

Intagrate Lite

Image may be NSFW.
Clik here to view.
insta16

https://wordpress.org/plugins/instagrate-to-wordpress/
※「Intagrate Lite – Instagram Image Publishing」は「Instagrate to WordPress」からプラグイン名が変更になりました。
こちらのプラグインは、instagramに投稿した写真をワードプレスに記事として投稿してくれるワードプレスのプラグインです。アイキャッチなどが設定できるのもこのプラグインの特徴です。

こちらのサイトに詳しい解説が紹介されています。
instagram にアップした写真をワードプレスに自動的に記事投稿してます | 猫の集会.com

その他の方法

その他の方法としてInstagramのAPIを活用する方法がございます。こちらは制作者向けの方法で、今回は詳しくは解説いたしませんが、例えばInstagramキャンペーンなどで、ユーザーに特定のハッシュタグをつけて投稿してもらい、それを自動でアップするといったことをやりたい場合はこちらを使用する必要があるかと思います。詳しい解説はLIG様の記事がございましたので紹介させていただきます。
Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法 | LIG inc.

まとめ

以上でInstagramをWordpressと連携する方法の解説を終了します。Instagramは画像が中心となるSNSであり、その画像の良さが評価されていきます。特にアップする画像には統一感があることが大事です。こういった便利なサービスを活用し、サイトのファンを増やしていきましょう。

初心者におすすめの無料FTPソフトベスト3

WordPressでは管理画面から直接画像がアップできたり、テーマの編集なども行えるため、FTPを使用せずにサイト構築を行うことが可能です。しかし、テーマをアップロードする際などにカスタマイズを行っている場合には、直接FTPを使用し、変更箇所だけをアップデートしてもらう事を推奨しています。そこで今回は、初心者にもおすすめな無料で使えるFTPクライアントを紹介します。今回は、Windowsのみで使えるソフト、WindowsとMacの両方で使えるソフトを紹介していますので、比較しながら、ご自身の環境にあったソフトをお選びください。

FTPとは?

FTPとは、File Transfer Protocol(ファイル・トランスファー・プロトコル)の略で、日本語に訳すと「ファイル転送プロトコル」となります。わかりやすく言うと、サーバーに、ファイルを転送するためのプロトコル(通信規約)です。
※プロトコル=インターネットを利用する際(通信をする)情報伝達(データのやりとり)における「通信規約」のこと

そして、FTPクライアントとはFTPを使用してファイルの送受信を行うクライアントソフトウェアのことを言います。それでは、おすすめのFTPソフトを紹介していきます。

第1位 FileZilla(ファイルジラ)

Image may be NSFW.
Clik here to view.
ftp02

まず、一番おすすめなのがfileZilla(ファイルジラ)です。Windows,Mac両方に対応しています。
タブ切り替えによる複数サーバー接続、同期ブラウズ、タイムスタンプやファイルサイズでホストとローカルのディレクトリを比較するディレクトリー比較、転送したファイルタイムスタンプの維持など、非常に多機能です。サイトマネージャーに設定した情報や設定した項目はインポートやエクスポートできるので、同じ設定を他のマシンに容易に反映させることもできます。

FileZillaのインストール

まずはFileZillaをインストールします。下記のボタンよりダウンロードサイトへ進んで下さい。

FileZilla

ダウンロードページにいくと、WindowsやMacなどのOSごとのファイルがありますので、ご自身の環境にあったソフトウェアをダウンロードください。
Image may be NSFW.
Clik here to view.
ftp10

FileZillaのファイルをクリックすると、自動でダウンロードが始まります。
ダウンロードができましたら、ファイルを解凍してください。その後、FileZillaのアイコンを確認できたら、アイコンをダブルクリックしてFileZillaを起動します。なお、ファイルが開かない場合は、アイコンを右クリックし、メニューの「開く」から再度お試しください。

こちらがFileZillaの画面になります。
Image may be NSFW.
Clik here to view.
ftp12

FileZillaの使い方

はじめにサーバー情報を登録します。
上部左上のアイコンをクリックし、「サイトマネージャー」画面を表示します。

Image may be NSFW.
Clik here to view.
ftp13

開けましたら、「新しいサイト」をクリックし、ホスト・ユーザー・パスワードの項目を入力します。
Image may be NSFW.
Clik here to view.
ftp14

接続に成功すると、ディレクトリ情報が表示されます。ファイルをアップロードするためには、サーバー上のディレクトリ欄に対象のファイルをドラッグ&ドロップします。一方、ファイルをダウンロードする場合は、ローカルサイトのディレクトリ情報欄にドラッグ&ドロップします。

Image may be NSFW.
Clik here to view.
ftp15

接続を終了するには、上部の×印をクリックします。なお、再度接続する場合は、先程登録した接続先情報をサイトマネージャーより選択し、ボタン「接続」をクリックします。

FileZillaを終了する場合は、ウィンドウを閉じてください。

第2位 FFFTP

Image may be NSFW.
Clik here to view.
ftp01

FFFTPはWindows用のFTPクライアントの中で最も有名なFTPソフトです。ソフトを起動すると左側にローカル部、右側にサーバー部がツリー表示されます。ファイルの転送はドラッグアンドドロップでアップロード、ダウンロードが可能です。アスキーモード、バイナリモードなども1クリックで設定できます。ファイルリストの一覧とファイル転送が別スレッドで動作するため、ファイル転送をしながら新たなファイル操作が可能。漢字コードの変換、漢字のファイル名に対応し、サブディレクトリごとまとめてファイルの転送をすることができます。その他に、各種 FireWall、SOCKS、ワンタイムパスワード、マスターパスワードによる起動時のパスワード入力機能も備えています。MacのPCでは使用できませんのでご注意ください。

FFFTPのインストール

まずはFFFTPをインストールします。下記のボタンよりダウンロードサイトへ進んで下さい。

FFFTP

Image may be NSFW.
Clik here to view.
ftp16

FFFTPのダウンロードファイルをクリックすると、自動でダウンロードが始まります。
ダウンロードができましたら、ファイルを解凍してください。その後、FFFTPのアイコンを確認できたら、アイコンをダブルクリックしてFFFTPを起動します。なお、ファイルが開かない場合は、アイコンを右クリックし、メニューの「開く」から再度お試しください。

FFFTPの使い方

起動するためには、フォルダ内のファイルが表示されるので、「FFFTP.exe」を開きます。ファイルを開くと、「ホスト一覧」のウィンドウが表示されますので、「新規ホスト」を選択します。

Image may be NSFW.
Clik here to view.
ftp16

この後は、基本的にはFileZillaと同様の設定を行います。
Image may be NSFW.
Clik here to view.
ftp17

ホストの設定名:任意の名前を入力。
ホスト名(アドレス):FTPサーバ名(FTPホスト名)を入力。
ユーザー名:FTPユーザー名(FTPアカウント名)を入力。
パスワード:FTPパスワードを入力。

設定が完了したら「OK」をクリックします。ファイルのアップロードもFileZilla同様にローカルサイトのディレクトリからウェブサイトのディレクトリへドラッグ&ドロップします。

第3位 Cyberduck(サイバーダック)

Image may be NSFW.
Clik here to view.
ftp03

Macを使用の方に多く使われているFTPクライアントです。Windowsでも使用できます。FTP / FTP-SSL / SFTP / WebDAV / MobileMe / Amazon S3 / Google ドライブなどのサーバーへ接続し、ファイルのダウンロード・アップロード、サーバー上のファイルを直接エディタで編集できます。履歴やブックマークを使うことにより、素早くサーバーへ接続できるのが特徴です。

Cyberduckのインストール

まずはCyberduckをインストールします。下記のボタンよりダウンロードサイトへ進んで下さい。

Cyberduck

Image may be NSFW.
Clik here to view.
ftp17

ダウンロードのページから該当のファイルを保存し、インストールしてください。

Cyberduckの使い方

インストールが完了したら、Cyberduckを開いてください。新規接続をクリックし、上記2つのソフト同様にFTP情報を記入します。

Image may be NSFW.
Clik here to view.
ftp21

Image may be NSFW.
Clik here to view.
ftp19

サーバ:FTPサーバ名(FTPホスト名)を入力。
ユーザ名:FTPユーザ名(FTPアカウント名)を入力。
パスワード:FTPパスワードを入力。

入力できたら「接続」をクリックします。CyberduckではFTTTPやFileZillaと違い、ローカルのファイルは表示されません。アップロードするには「アクションボタン」をクリックし、ファイルをアップロードしてください。
Image may be NSFW.
Clik here to view.
ftp20

最後に、Cyberduckでは「ツールバーをカスタマイズ」を選択から設定をカスタマイズすることもできますので、お好みの配置を自由に設定してみてください。

まとめ

今回は、FTPソフトを紹介させていただきました。ご使用中の環境に合わせてお好みのFTPソフトを選んでみて下さい。個人的な見解としては、たくさんのサイト管理をしていて、大量のファイル転送を行う方はFileZillaがおすすめです。そうではなく、基本的な機能をシンプルに使いたい方にはFFFTP(Windowsの方)かCyberduckがおすすめです。また、テーマをカスタマイズされている場合のアップデートの際には、今回紹介させていただいたFTPソフトを使用し、アップロードしてみてください。

テーマの更新方法については、こちらをご参考ください。
テーマの更新方法を教えてほしい

2016年6月のアクセスランキングBEST10

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

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

Image may be NSFW.
Clik here to view.
WordPressを初導入したら まず最初にやるべき24の設定

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

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

また、この記事は沢山のPVを集める不動の1位の記事です。Google検索でも「WordPress 設定」と入力すると上位に表示されるのがこの記事でTCDテンプレートがSEOに定評があるのは、この記事からも証明されています。SEOの観点で言えば、内部SEOよりもこういった良質な記事を多く書く事が大事だと思います。それでも内部SEOをしたいという質問は多く有りますので、こういった記事を参考ください。

今更聞けない?「meta title 」「meta description」の設定方法

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

Image may be NSFW.
Clik here to view.
slack

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

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

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

Image may be NSFW.
Clik here to view.
video

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

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

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

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

Image may be NSFW.
Clik here to view.
777_250

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

4位は、2016年2月5日にWordPress公式ディレクトリに追加されました、TCDプラグイン「TCD Google Maps」に関する記事です。
Google Mapsをデフォルトのデザインで利用する方も多いと思いますが、カスタマイズするとなると少々の知識が必要になるためそのまま使うという方が多くいます。そんな時に便利なのがWordPressプラグイン「TCD Google Maps」です。豊富なデザインが揃っており、サイズやズームの度合い、住所を管理画面から変更し、ショートコードで記事中に簡単に入れることが出来ます。
また、現在マップの種類を追加するアップデートを行っていますので、すでに追加されている方もよければ確認してみてください。

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

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

Image may be NSFW.
Clik here to view.
contact_01

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位「引っ越しも楽々? WordPressで構築したサイトを丸ごとコピーできるプラグイン「Duplicator」」

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

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

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

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

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

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

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

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

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

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

9位「企業内コミュニケーションツールには「Slack」がおすすめ<登録編>」

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

2位の操作編と合わせて登録編もランクインしました。Slackを利用するメリットなどもまとめていますので、導入の際の参考にしてください。

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

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

WordPressはオープンソースであるため、無料で使用でき、プラグインも豊富なので、世界中で最も利用されているCMSの1つです。ただ、その反面、オープンソースで有るが故に、脆弱性が発見されやすくハッカーの標的になりやすい、といった特徴もあります。WordPressではセキュリティを非常に重要なものとして捉えているそうですが、それでも完璧ではありません。

まとめ

6月度はSNS関連の記事や画像などを整理するプラグインを多く紹介させていただきました。
記事の投稿時に自動でツイッターへ投稿してくれるプラグイン「WP to Twitter」
InstagramをWordPressと連携する方法

7月度はTCDテーマにも使用されているBootstrapについてご案内させていただきます。これからも更にお役に立てるサイトを目指して行きます。また、サイトで解決できない内容に関しましては、気軽にサポートまでお問い合わせください。7月度も役立つ記事を配信していきます。

Viewing all 1404 articles
Browse latest View live