タグ別アーカイブ: ホームページ

独自ドメインでGmailを使おう【ドメイン・サーバー・メールのいいとこ取り】

  • 小
  • 中
  • 大

様々なサービスを利用していいとこ取りしよう

ドメインはお名前.comで取得し、それをエックスサーバーで運用し、メールサーバーはGoogle AppsのGmailを使うことで、快適に作業を進めることができます。

エックスサーバーにも優秀なメール機能は存在しますが、管理人は下記の理由からGmailの方が優れていると思います。

・POPで使わなければならない(これが一番でかい理由)
・迷惑メール機能はあるにはあるが設定が面倒
・メールアプリ(メールソフト)の設定が面倒
・複数のデバイスでメール管理しにくい(一番上の理由と同じ…)
・メールアドレス制作代行したとき設定を説明しにくい
・容量が小さい(MAX5ギガ)

これらの理由から、メールを管理するのはエックスサーバーではなくGmailの方が良いと個人的には思います。

個人でやるにも組織でやるにも、こっちの方がスマートだと思います。独自ドメインでGmailを使うことができれば、様々なデバイスを活用する場合もメールを確認しやすくなり、作業効率も上がるはずです。

まずはドメインを取得



お名前.comは相対的に安い金額でドメインを取得できる業者であるということができるでしょう。

ドメイン取ったらソッコーでネームサーバーをエックスサーバーに振り向けるようにしています。

ネームサーバーの変更すると浸透するまで結構時間がかかるため、早めにやっちゃいます。

ちなみに、エックスサーバーに向けるには、下記のようにネームサーバーを変更します。

ネームサーバー1 ns1.xserver.jp
ネームサーバー2 ns2.xserver.jp
ネームサーバー3 ns3.xserver.jp
ネームサーバー4 ns4.xserver.jp
ネームサーバー5 ns5.xserver.jp

参考→エックスサーバーマニュアル「ドメインについて」

サーバーを用意



エックスサーバーは言わずと知れた人気サーバーです。無制限にドメインを活用できるし、容量も一番安いプランでも200ギガもあります。

何かわからないことがあったら、電話で気軽にお問い合わせできるのも良いですね。管理人もよくお世話になります。

技術的に電話では答えられない場合は、メールでお問い合わせすることもあります。その回答がおそろしく速い。ありがたい限りです。

サーバーの準備ができていない場合は、ネームサーバーの変更よりも先にサーバーの準備をしてしまった方がいいでしょう。

Google Appsに登録する

Google Appsエックスサーバーでドメインが使える状態になったら、先にGoogle Appsに登録しちゃいましょう。

無料で30日間使えますし、お金を払うとしても年6,000円程度です。独自ドメインでGmailを使えるだけでも、格安と言えるのではないでしょうか。

クラウド機能もありますし、複数のドメインを管理することも可能です。作業効率も格段にアップするのではないでしょうか。

DNSレコードをGoogle Apps用に書き換える

ここが一番の難所です。なぜなら、エックスサーバーのマニュアルと、Google Appsのマニュアルとで、書いてあることが違うからです。

結論から言うと、DNSレコードのMXレコード、CNAME、TXTを書き換えます。

エックスサーバーのサーバーパネルにログインし、ドメイン欄にあるDNSレコード設定というところから編集することができます。注意書きにもあるように、設定を間違えるとウェブ表示されなくなったり色々と不具合が起こってしまう場合があるそうなので、注意しましょう。

管理人のDNSレコードはこんな感じです。

DNSレコードの設定

Google Appsのマニュアルには、MXレコードの「内容」の末尾に「.」があったのですが、それをそのまま記述すると「記述が正しくありません」という注意書きが出たので、末尾のドットは外しました。

Google Appsでドメイン登録とユーザー登録する

Google Appsで管理するドメインやユーザーを増やすことで、複数のドメイン、複数のメールアドレスを管理することができるようになります。

例えば職業柄たくさんのドメインやメールアドレスを管理しなければならない場合などでも、お名前.com・エックスサーバー・Google Appsという3つのサービスを併用することで、より効率よく管理することができるようになります。

MXレコードをチェックする

MXレコードに限らず、DNSレコードは書き換えたからといってすぐに反映されるわけではありません。浸透するまでに一定の時間が必要です。

ですから、今、特定のドメインのMXレコードがどのような状態になっているのか、調べたくなることもあるでしょう。

Google Appsには、MXレコードをチェックする機能が備わっています。これを使えば、特定のドメインのMXレコードの状態を調べることができ、さらに問題点なども指摘してくれます。

Google AppsのMXレコードチェッカー

photo by: Bull3t

【Chrome】スマホやタブレット端末でファビコン(ショートカットアイコン)を大きく表示させる方法

  • 小
  • 中
  • 大

ファビコン(ショートカットアイコン)って意外とめんどくさい

サイトのイメージを持ってもらうために重要なファビコン(ショートカットアイコン)ですが、その設定は意外とメンドクサイですね。

画像を用意してサーバーにアップロードして、ファイルに記述して、正しく表示されているかどうか確認して…などなど、やらなければならない作業がたくさんあります。小さな画像1つのためになんでこんなに…と思う方もいらっしゃるでしょう。

しかし管理人は、なぜか昔からオリジナルのファビコン(ショートカットアイコン)が好きで、作ったサイト全てに設定するようにしております。

最近気付いたのですが、Safariでは大きなファビコン(ショートカットアイコン)が表示されているにも関わらず、Chromeでは小さなファビコン(ショートカットアイコン)が表示されてしまう場合があるということです。

最近のブラウザのシェアは、Chromeも無視できない水準にまで上がってきましたので、SafariだけでなくChromeにも対応しておいた方が無難です。

今回は、SafariでもChromeでも大きなファビコン(ショートカットアイコン)が表示されるようにする手順についてご紹介したいと思います。



ファビコン(ショートカットアイコン)の大小の差

小さいファビコン(ショートカットアイコン)まずは、Chromeにおける小さなファビコン(ショートカットアイコン)を見てみることにしましょう。

左の画像が小さなファビコン(ショートカットアイコン)の例ですが、小さいですねぇ。天下のFacebook様でも、Chromeでは小さなファビコン(ショートカットアイコン)が表示されてしまっています(記事執筆時現在)。

これを大きくすることで、サイトのイメージを持ってもらったり、サイトを印象に残してもらうために一役買ってくれます。

大きいファビコン(ショートカットアイコン)左に掲載した画像は、当サイトのChromeでのファビコン(ショートカットアイコン)です。シンプルな画像ですが、大きく表示されているため押しやすく、識別もしやすいと思います。

スマホやタブレット端末で、Chromeのファビコン(ショートカットアイコン)が小さく表示されてしまっている場合は、ぜひ大きなファビコン(ショートカットアイコン)に変更しましょう。以下では、その方法をご紹介したいと思います。

小さいファビコン(ショートカットアイコン)を大きくする方法

まずはファビコン(ショートカットアイコン)に設定したい画像をIllustratorなどで作成しましょう。72×72pxぐらいで十分です。

画像が完成したら、「apple-touch-icon.png」という名前で保存し、FTPでサーバーにアップロードしましょう。

ちなみに、PCサイトでブラウザのファビコンも同時に設定したい場合は、30x30pxぐらいで「favicon.png」という画像も用意してアップロードしておきます。

PCとタブレットとスマホ、全てで表示させるテーマを変えている場合、PC以外のテーマに下記の記述をします。テーマを1つしか使っていない場合は、そのテーマのみに記述すれば表示されるようになります。場所はheadと/headの間です。

<head>

<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/apple-touch-icon.png" />

</head>

このように記述することで、SafariでもChromeでも、大きなファビコン(ショートカットアイコン)を表示させることができます。画像のパスは適宜差し替えて下さい。

上記の記述の他に、「apple-touch-icon-precomposed」という記述があると、うまく表示されない場合があります。

PCサイトにファビコンを設置する場合は、下記のように記述します。

<head>

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.png" />

</head>

こちらも画像のパスは自分のサイトの設計に合わせて適宜差し替えて下さいね。

表示させるテーマ、例えばスマホ用のテーマ、タブレット端末用のテーマ、といった具合に分けている場合、それら全てに個別に画像をアップロードし、テーマファイルに記述するというのがポイントです。

以上が、Chromeでも大きなファビコン(ショートカットアイコン)を表示させる方法でした。



WP SiteManagerでデバイス切り替えボタンを設置してユーザビリティを向上させる方法

  • 小
  • 中
  • 大

WordPressの超優良プラグインの使い方紹介です

WP SiteManagerとは、WordPressの超優良プラグインの1つです。このプラグインだけで色々なことができるのですが、この記事を読んでいる方はもうすでにこのプラグインを利用している可能性が高いと思われますので、詳しい使い方や紹介は割愛したいと思います。

ちなみにWP SiteManagerはFacebookページもありますので、こちらも有益な情報を得ることができるツールとして使うことができます。

このWP SiteManagerですが、とても便利なのは良いのですが、カスタマイズ方法などの情報があまり出回ってなく、今回のデバイス切り替えの件についてもほとんど情報がありませんでしたので、記事を執筆しようと思いました。マルチデバイスだけでなく、パンくずナビやページャーなどにもたくさんカスタマイズしたいところがあるのですが、それがなかなか難しくて悪戦苦闘しております…

今回はその悪戦苦闘が功を奏し、解決することができましたので、ご紹介させていただきます。

デバイスごとにリンクを張る

device-structure
さて、画像のようにデバイスごとに異なるテーマを表示させているとの前提で、各テーマに他のテーマを表示させる方法についてご紹介しておきたいと思います。ちなみにこの記事の画像はアイキャッチ画像を含めて全てWP SiteManagerのサイトから拝借させていただいております。

モバイル表示にさせたい時は

www.example.com/?site-view=smart

と記述すればモバイル表示されます。

PC表示させたい時は

www.example.com/?site-view=pc

と記述することによりPC表示に切り替えることができます。

ここまではプラグインサイトの更新情報に載っているのですが、逆に言うとここまでしか分からなかったので、少しつまずいてしまいました。

結果からいうとリンクを上記のコードの通りに張れば良かっただけなのですが、細かい手順などが分からなかったため、悪戦苦闘してしまいました。

今回は、同じようなことで困っている方のために、具体的な設置方法をご紹介させていただきます。

デザインの参考までにコードを載せておきます

管理人があるサイトで使っているコードを参考までに載せておきます。

footer.phpなど

<div id="footer">
<div class="device-switch">
   <ul>
       <li><a href="<?php echo home_url('/?site-view=smart'); ?>">モバイル表示に切り替える</a></li>
       <li><a href="<?php echo home_url('/?site-view=pc'); ?>">PC表示に切り替える</a></li>
  </ul>
</div>
</div>

いろんなサイトで使いたかったので、URLはPHPを使って呼び出すようにしてあります。このように記述しておけば、他のサイトに貼り付けたとしても正しくURLが呼び出されるはずです。smartやpcのあとにスラッシュを入れてしまうと正しく動作しませんので気をつけてください。

css

/*------------------------------------------------------------
デバイス切り替えボタンの装飾
-------------------------------------------------------------*/
#footer .device-switch ul li a {
    background-color: #好きな背景色;
    border: 1px solid #好きな色(囲み線);
    border-radius: 3px;
    display: block;
    font-weight: bold;
    margin: 5px auto;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    width: 200px;
}

#footer .device-switch ul li a:hover{
	background-color: #好きな背景色(マウスオーバーしたとき);
    color: #好きな文字色;
}

「好きな○○」の部分は、好きな色コードを記述して下さいね。

スマホサイトにPC表示ボタンを設置する理由

最近ではスマホに対応させることが至上命題などといわれていますが、管理人はなぜスマホサイトにPC表示機能を付けなければならないのかが分かりませんでした。

しかし、最近気付いたことなのですが、普段はPCで閲覧していて、外出先などからスマホでアクセスした場合、全然違うデザインだと困ってしまうことがあるということです。

どこになにがあるのか、そのサイトの細かい構造はどうなっているのか、などは普段見慣れているPCサイトの方が分かりやすい場合があります。そのような方のためにも、スマホからもPCサイトを見られるようにしておくという配慮は、ユーザビリティ向上に一役買ってくれるものと思います。

見ている人が快適に閲覧できるようにと考え、スマホサイトからもPCサイトが表示できるようにしました。

しかし当サイトはメディアクエリでマルチデバイス対応させておりますので、今回の方法は使えなさそうです。今回の方法は、デバイスごとに異なるテーマを表示させている場合に有効な手段であると考えられます。

web制作Lv.18 広告の記事を書いて評価する

  • 小
  • 中
  • 大

広告を記事にするとは

1つの記事として広告を紹介することについて考えてみたいと思います。

広告をウェブサイトに含めることは、一見訪問者の迷惑になるのではないかと考えてしまいがちですが、意外とそうではありません。

ウェブサイトのテーマに馴染むようなカテゴリーの広告であれば、ユーザビリティを向上させることにもつながります。訪問者は、そのウェブサイトのテーマ自体に興味があり、複数ページを読んでくれている人もいます。

であるとすれば、そのテーマから逸脱しない内容の広告を含ませることで、「このような商品・サービスもあるのか」と、新たな発見を促すこともできます。

管理人は、以前はウェブサイトの広告はウザくて仕方ありませんでしたが、今では広告もそのウェブサイトの一部であると認識するようになりました。

サイトの管理人が広告を挿入するのは、最終的には報酬を得るためであるという目的もありますが、それ以前にサイトにきてくれている人の役に立ちたいという目的もあるのです。

サイトで、様々な商品やサービスを紹介することで、訪問者にさらに多くの情報を提供することができるようになると考えれば、広告を掲載する意義はあります。

できれば体験を含めて書く

広告として紹介したサービスなどを「体験を含めて書く」ことで、より臨場感あふれるレポートとすることができます。

広告の記事を読む人が求めているのは、広告サイト運営側の情報だけでなく、それを実際使ってみた人の意見も含まれます。

一種のカスタマーレビューのようなもので、実際に使用・体験した人の意見は、新規の顧客に購入の動機付けともなります。

サイト管理人がその商品・サービスを利用したことがなければ、可能ならば実際に購入・利用してみるのも手です。より生々しい、臨場感あふれるレポートを記述することができるようになります。

アフィリエイターの中には、レポートを書くために情報商材やネット上のサービスを利用する人も多くいます。

網羅性も重要

1つの広告だけでなく、そのジャンルの商品・サービスを網羅的に複数紹介することも重要です。

網羅的に紹介することで、サイト訪問者に

「このサイトはたくさん紹介していて便利だ」
「このサイトだけ見ていれば、このカテゴリーの商品・サービスについて詳しくなれる」
「いろいろな商品・サービスを知ることができる」

と思ってもらうことができるようになります。非常に手間のかかる作業ですが、複数のASPを検索し、そのジャンルの商品・サービスを調べ、サイトのテーマに馴染む内容のものをすべて紹介すれば、それだけでユーザビリティの向上になります。

ここで、主要ASPのA8.netの紹介をさせていただきたいと思います。

A8.netは、国内最大級とも言われるASPで、その紹介サービスは群を抜いています。

最初はA8さえ登録していれば、紹介サービスに困ることがないと言われるぐらいです。

たくさんのASPに登録し、そこに紹介されているサービスをつぶさに調べ上げるには、どうしても時間と手間がかかります。その手間を惜しむのであれば、A8.netにとりあえず登録して、その中からサービスを選択するという方法で良いのではないかと思います。

俯瞰で見て評価する

たくさんの商品・サービスを調べ、紹介することで、サービスの評価ができるようになります。

サービス提供元のサイトを見たり、それにまつわるクチコミなどを調べると、評判も分かり自ら評価を下せるようになります。

「サービス名 クチコミ」といったキーワードで検索にかけると、たくさんのレビューやクチコミを調べることができます。実際にそれを使ったことのある人の生の意見が読めるので、自分が評価する際に役立ちます。

これまで、そのジャンルにまつわる商品・サービスを網羅的に紹介することを強調してきましたが、それには理由があります。

網羅的にそのジャンルについて紹介している人の評価は、影響力がありますので、評価も含めて記事を書くようにすると、よりサイト訪問者へ有益な情報を提供することにつながります。

web制作Lv.16 アフィリエイトサイトの記事を書き始める

  • 小
  • 中
  • 大

カテゴリーごとに記事を書く

ここからは、いよいよ記事を書く作業に入ります。この記事は前回の「HP作成Lv.15 アフィリエイトサイトの作成を開始する」という記事の続編ですので、前回の記事をまだ読んでいない方は、先に前回の記事を読むことをオススメ致します。

前回の記事の作業で、エクセルにまとめられた情報を元に、カテゴリーごとに記事を書いていきます。

いろいろなカテゴリーを混ぜて書いてしまうと、情報が交錯して内容も混乱してしまいがちですので、1カテゴリーごとに集中して書いていくのがいいと思います。

一番勉強になるのは記事を書いている瞬間ですので、知識が薄れないうちに、そのカテゴリーを一気に書いてしまうのがいいでしょう。

記事には読みやすいように適度に見出しをつけ、場合によっては文字の色や背景を変えたりして、読者にとって読みやすい、理解しやすい記事を心がけることによって、人気のあるブログにすることができます。

記事を書いたら、タグ付け、アイキャッチの設定、SEOの記述、抜粋の記述を流れで一気に行います。これらの作業を別々に行うのは非効率的です。記事の内容が頭に入っている状態でこれらの作業を行うのがベストですから、めんどくさがらずに一気に仕上げてしまいましょう。

ちなみに、SEOの記述とは、All in one SEO pack の記述のことです。記事を書いた直後に、タイトル、詳細、キーワードを入力します。All in one SEO pack に関しましては、「HP作成Lv.09 All in One SEO Packを導入する」という記事を以前書きましたので、参考にしてみて下さい。

自分の考え方を伝える

記事を書く時は、自分の言葉で、自分の考えを記述するように心がけるのが重要です。

誰かの文章を盗むことなく、自分なりの描写でオリジナリティあふれる内容に仕上げることが肝要です。逆に、誰かの文章や考え方を盗んだ記事ばかり書いているサイトは、存在意義を疑われますし、読者もなかなか増えません。

そのサイトに行かないと手に入らない、読むことができないというレベルの記事を書くことで、たくさんの読者を集めることができるようになります。

見やすくレイアウトする

すべての記事を書き終えるまでは、デザインにはそれほどこだわる必要はありませんが、インデックスを促進させるためにも、記事一覧ページに書いた記事が自動で転載されるようにしておきましょう。

管理人は個人的に、アイキャッチ画像とタイトル、抜粋が表示されているのが好きなので、それらを取得して一覧表示させています。
細かくマークアップすることで、キレイに表示させることができるようになります。

また、記事の中に画像を挿入する場合もありますが、あまり重たい画像を挿入してしまうと、記事の表示速度が遅くなり、読者が離れてしまう原因ともなりますので、サイズは小さくしておくことをオススメいたします。

あなたのサイトを見ている人は、必ずしも電波状況が良いとは限りません。これからはモバイルでのアクセスが増加することを鑑みると、なおさらです。Wi-FiやLTE環境ではなくても見やすいサイトにしておいた方が、アクセシビリティが高いと言えます。

スマホに対応させる

情報提供型のサイトの場合、訪問者の大半はスマホです。少なくとも半分はスマホで見ていると考えておいた方がいいでしょう。

となると、スマホで見やすいサイトにした方が、ユーザビリティが高いということになります。

メディアクエリを使えばcssでスマホ用の表示を別に作成することができますが、初心者には敷居が高いです。メディアクエリはIE未対応なため、特殊な操作も必要となります。

そこでオススメしたいのが、「wp touch」というプラグインです。インストールして有効化するだけで、スマホに対応させることができます。デザインを他と違うものにしたければ、カスタマイズすることも可能です。その際、デフォルトのファイルをコピーして、新たに名前をつけ、そのファイルを読み込ませるようにしてからカスタマイズして行くようにしましょう。

広告を貼る

早く広告を貼って収入を得たい気持ちはわかりますが、広告を貼るのは、記事を全て書き終わったあとです。まだサイトが出来上がっていない状態で広告を貼ってしまうと、読者の信頼が得られませんので、急ぐ気持ちをグッと抑えて、最後まで辛抱しましょう。

全ての記事を書き終えたら、アドセンスやA8などで広告を入手し、貼って行きます。広告がクリックされたり、広告リンクから商品が売れたりしたら、あなたの収入になります。

細かい部分をデザインする

ソーシャルボタンやサイドバーなどの細かい部分も、この段階で修正しておきましょう。

ここまでくれば、どのようなページ、どのようなカテゴリー、どのような内容のサイトかはっきりしていますので、訪問してきてくれた方が使いやすいようにサイトをデザインして行きましょう。

web制作Lv.14 サイトボリュームを増やして「待つ」ことの意義を知る

  • 小
  • 中
  • 大

ホームページを育てるのは、子育てに似ている?

これまでのLvでご紹介してきたように、ホームページを作るのは、いろいろな作業が必要となります。管理人はこれまでに、複数のホームページを作成してきましたが、いつも思うのは、「子供を育てるのに似ている」ということです。

というのも、新たに独自ドメインを取得して、ゼロからホームページを生み出すということは、まさに生まれたての赤ん坊のような状態から始まるということです。ホームページを生み出すには多くの作業が必要ですし、初期設定だけでも数日かかります。さらにそこからコンテンツを充実させ、多くの良質な記事を書く必要があります。検索エンジンで上位表示されるようになるのには時間がかかりますし、成長の遅さも人間そっくりです。

検索エンジンを重視する理由

ホームページにアクセスしてくる人の大半は、検索エンジンからです。ソーシャルメディアからのアクセスもありますが、検索エンジン経由のアクセス数に比べれば微々たるものです。よって、いかに検索エンジンにヒットさせるかがアクセス数を稼ぐためには重要課題となります。

検索エンジンは、赤ん坊のホームページより、大人の(作られてからある程度歳月が経過している)ホームページを優先的に上位表示する傾向があります。大人のホームページの方が信頼されているサイトである可能性も高いですし、ユーザーが満足する可能性も高いからです。

ユーザーは何か疑問に思ったことや、興味があることを検索エンジンで調べます。そして、上位表示されたサイトにアクセスし、情報を得ようとします。上位表示されるサイトというのは一般的に情報が豊富で、サイトそのものの完成度も高いです。

検索エンジンはクローラーというロボットを使って、サイトを循環して数値化しています。その数値が好成績だと、ユーザビリティが高く、有用性も高いサイトであると判断し、優先的に上位表示させようとします。

サイトボリュームを増やそう

ホームページを生み出してから間もない期間は、サイトボリュームを増やすことに徹しましょう。この期間、アクセス数はあまり気にしない方が良いです。せっかく力を入れて記事を書いたり、ホームページに凝ったデザインを施しても、最初のうちはなかなかアクセスが集まらないものです。来ても1日10人前後です。ですから、一通り出来上がるまでは、何人来てくれたとか、何ページ閲覧されたとか、あまり気にしないようにしましょう。モチベーションが下がってしまっては、途中で嫌になってしまいますからね。

丹念に記事を書き続け、100ページを越えるようなサイトを作ることができれば、長期的に安定したアクセスを集めることができます。いきなり100ページなどと言うと、途方もない数字に感じるかもしれませんが、ホームページで扱うジャンルが得意分野でありさえすれば、不可能な数字ではありません。

記事はどのように増やせば良いのか?

いろいろな角度からものごとを描写したり、同じようなテーマで書かれている記事を参考にしたり、関連書籍を読んだり、ニュースを参考にしたり、情報にアンテナを張り巡らせれば、記事のネタは至る所に転がっているものです。

誰が読んでも有用性が低い・役に立たない、という記事はほぼあり得ません。熱意を持って好きなことを熱く語り、的確に描写し、時にはアドバイス的な情報も加えれば、立派なオリジナル記事が書けます。

書けば書くほどサイトボリュームは増えていき、必然的に含まれるキーワードも増えていきます。キーワードを意識して書かなくても、それなりのテキスト量の記事が100個もあれば、大量のキーワードが自然と記事に含まれます。

一通り記事を書き終えたら、ひたすら待つ!

記事を100個書いても200個書いても、すぐにアクセスが集まるとは限りません。SEO対策で大事なのは、良質の記事をたくさん書くことと、待つことです。

待つというのは最初のうちはつらいかもしれませんが、ゆっくりと効果が出てきますので、気長に待ちましょう。人間と一緒で、成長するのには時間がかかるものです。サイトを立ち上げてから、半年もすれば、立派に成長した姿を見せてくれるようになるはずです。手塩にかけて育てましょう!

web制作Lv.13 Welcartでコメント欄を設置してレビュー機能を持たせる方法

  • 小
  • 中
  • 大

管理人は、このサイト等を通じてアフィリエイトに励む傍ら、ホームページ制作業務も行っております(その件につきましては、管理人はこんな人ですというページでも言及しております)。
ホームページの制作依頼をされるお客様の中には、ECサイト構築を希望される方も多く、そのような場合はWelcartを利用させて頂いております。

Welcartとは何か

Welcartとは、WordPressのプラグインとして使用することができる画期的なECサイト構築プラグインです。

WordPressのテーマをそのまま利用しつつ、デザインを変えずにECサイト化させることができるため、非常に気に入っております。

商品を登録する前の配送方法や基本設定等の事前準備がなかなか大変ですが、慣れてしまえばとても使いやすいです。

管理人が気付いたWelcartの互換性

ちなみに、Welcartはコンタクトフォーム7との相性がちょっと悪いです。使えないことはありませんが、誤作動を起こす可能性があります。

コンタクトフォーム7とは、手軽にお問い合わせ機能をつけられる素晴らしいプラグインです。手軽なのに奥が深いため、このテーマだけでも1つ記事が書けそうなほどです。Welcartとの相性が良くないのは残念ですが、使えないことはありませんので管理人は前向きに考えています。

Welcartで何かの設定をしてうまくいかなければ、一度コンタクトフォームを停止し、設定が終わったら有効化し直すことで、うまくいくかもしれません。

管理人自身が経験した誤作動は、配送設定とメール送信でした。
具体的には、配送設定の中でいくつか配送パターンを用意し、それに伴う料金も設定しなければならないのですが、その設定や削除が(コンタクトフォームが有効になっている状態では)できませんでした。メールも、コンタクトフォームが有効になっている状態では送信できませんでした(Welcartには、WordPressの管理画面からメールを送信することができる機能が備わっていましたが、その機能が使えませんでした)。

これらをコンタクトフォーム有効化中に操作しようとすると、うまく設定できなかったりメールが送れなかったりしたことがありました。いろいろ試した結果、コンタクトフォームとの互換性に問題があるようだったので、それらの操作をする際はコンタクトフォームを一時停止させるようにしました。これら以外にも、なにか不具合があった場合、まずコンタクトフォームを停止してみて、再度試してみるとうまくいくかもしれません。

コメント欄の設置方法

さて、それでは本題のコメント欄について説明していきたいと思います。

Welcartを使っていて気付いたのですが、コメント欄の設置ができません。WordPressにはデフォルトでコメントフォームがありますが、Welcartではそれは使えないのですね。コメントテンプレートを使ってもコメント欄は設置できませんでした。

そこで、管理人はfacebookのコメント機能を利用して、レビューのように活用してしまうことにしました。イマドキのECサイトは、レビューが必ず書かれていますからね。レビューをたくさん書いてもらうことで、にぎわっている雰囲気を出すことができます。

facebookのコメント欄

それでは、ここからはfacebookのコメント欄を記事に挿入する方法についてご紹介していきたいと思います。
facebookのコメント欄を設置するのは割と簡単ですが、2つ条件があります。

1つは、facebookのアカウントを持っていること、
2つ目は、このサイトの「HP作成Lv.11 WordPressで箱形ソーシャルボタンをプラグインなしで挿入する方法」という記事を実践している、ということです。なぜ2つ目が条件に入っているかと言うと、コメント欄の設置にはfacebookのアプリが必要であり、そのアプリの作り方がLv.11の記事に書かれているためです。まだ実践されていない方は、facebookのアプリの作り方の部分だけで構いませんので、読んでアプリを作ってから先に進んで下さい。

アプリを作成したら
ここからは、上記2つの条件を満たしているという前提でお話を進めさせて頂きます。

まず、facebookにログインした状態で、facebookコメントにアクセスして下さい。

アクセスしたら、URL to comment onの下の入力欄にコメント欄を表示させたいサイトのURLを記入します。幅や投稿の数をお好みで入力したら、Get Codeをクリックします。

すると、2つのコードが与えられますので、2つともコピーしておきます。1つ目のコードはLv.11で作成したsocial-button.phpに貼り付け、2つ目のコードはコメント欄を設置したい場所に貼り付けます。

social-button.phpというテーマがない場合は、新たに作成するか、ヘッダーかフッターに貼り付けても良いかもしれません(管理人はLv.11を実践しているので、それ以外の方法で動作確認していませんので、ご注意ください)。

コメントがたまれば立派なレビューになり得る
無事facebookコメント欄が設置できたら、あとは良い商品を売り続けてコメントを待ちましょう。商品と一緒に「コメントください」と書いたチラシ等を同梱しても良いでしょうし、レビューを書いてくれた方に何らかの特典を与えても良いでしょう。

コメントが増え、にぎわっている雰囲気を出すことができれば、ますます商品が売れるようになるはずです。

web制作Lv.12 GIMPを使いこなすためのまとめ

  • 小
  • 中
  • 大

ホームページを制作する上で、画像加工は必須の技術ということができると思います。画像を加工するためには、それようにソフトが必要ですが、無料の物と有料の物がありますね。

最も有名なのは、フォトショップというソフトで、値段は単品で9万円以上します。しかもアップグレードする度に追加料金がかかります。すでにアフィリエイトなどで大金を稼いでいる人にとっては痛くない出費なのでしょうが、多くの人、特に初心者にとっては、考えられない金額です。

そこでオススメしたいのは、無料で高機能な画像加工ソフト、GIMPです。

GIMPを使ってみよう

GIMPダウンロードGIMPは無料であるにも関わらず、とても高性能なソフトで、多くの人に愛用されています。もちろん当サイトの管理人も、利用させて頂いております。GIMPは最初は専門用語が多く、難解に感じるかもしれません。しかも管理人はMacユーザーなので、ショートカットキーがうまく使えず、本当に苦戦しました。

しかし今では、何の苦もなく利用できています。GIMPの使い方を詳しく教えて下さったサイト様のおかげです。ここでは、GIMP初心者を念頭に置き、とても分かりやすく開設して下さっているサイトをご紹介していきたいと思います。

基礎知識編

GIMPの基礎知識に関しては、下記の2つのサイトでほぼ網羅されています。最初はレイヤーや透明部分、選択範囲の考え方が分からないかもしれませんが、下記のサイトで詳しく記述されておりますので、参考にして下さい。

ちょっと応用編

  • フォントを自由自在に編集することができるようになる記事
  • 文字に枠をつけたり、文字自体にグラデーションをかけたりと、いろいろなフォントを作ることができるようになるため、重宝します。
    テンミニッツサイトストラテジー

  • メニューバーに埋まったボタンを作ることができるようになる記事
  • かっこいいボタンや見出しを作ることができます。
    Designer’s Guide

  • 矢印を書くことができるようになる記事
  • 矢印の書き方に付いて解説されています。
    Web/DB プログラミング徹底解説

  • GIMPに内蔵されているロゴに付いて詳しく知ることができる記事
  • GIMPにはロゴを作る機能が装備されていて、それを使ったらどうなるのかを解説してくれています。
    GIMP でロゴ作成

  • 写真のふちをぼかすことができるようになる記事
  • 写真のふちをぼかすことで、より芸術的な写真にすることができます。
    PC Life

  • 四角で囲む方法が分かる記事
  • 選択範囲の境界を描写する方法を解説してくれています。
    リカのきままなブログ

カナリ応用編

ここから紹介するページは、けっこう難易度が上がります。しかし、記事をよく読み、記事通りに進めていくことで、素敵な画像を作ることができるようになるはずです。諦めずに頑張って下さい!

  • 光沢のある立体的な3Dテキストを作る方法
  • 管理人はこのサイトを参考に、画像を何枚も作りました。
    GIMP2の使い方

  • 立体感のある矢印を作ることができるようになる記事(英語)
  • カッコいい矢印が作れます。
    GIMP USERS.com

  • かっこいいゴールドの浮き上がるフォントを作れるようになる記事(英語)
  • 重厚感のある金色のフォントが作れます。
    gimpology

  • 完成度が高いアクアボタンを作ることができるようになる記事(英語)
  • ハッキリ言って、完成度超高いです。なれればいろいろな形、いろいろな色のアクアボタンが作れるようになります。
    my gimp tutorial.com

ブラシ・フォント・パターン頒布サイト

GIMPはブラシやフォントをインストールすることで、その利用の幅を広げることができます。フォトショップのブラシも、GIMPのブラシフォルダに入れればそのまま使えます。たくさんの芸術的なブラシやフォントが無料で頒布されていますので、活用しましょう!

さいごに

いかがでしたでしょうか。ここで紹介しているサイトを存分に活用し、画像加工の腕を磨いて下さい。この記事がホームページ制作や画像加工に悩んでいるどなたかのお役に立てれば幸いです。

web制作Lv.11 WordPressで箱形ソーシャルボタンをプラグインなしで挿入する方法

  • 小
  • 中
  • 大

今回は、WordPressのソーシャルボタンについてご紹介していきたいと思います。この記事の目的は、下記の画像のような箱形ソーシャルボタンを(プラグインなしで)設置する事です。

ホームページとSNSを連携させる事により、外的SEOを強化する事につながると言われています。SNSを活用して露出を高める事で、ホームページへのアクセスを促す事になります。ここでは小さいソーシャルボタンではなく、見やすく押しやすい箱形の大きなソーシャルボタンを設置する事を目的としています。

プラグインでも対応可能

WordPressのソーシャルボタン関連のプラグインには、「WP Social Bookmarking Light」という素晴らしいものがあります。本当に簡単にソーシャルボタンを挿入することができる優れものです。

しかも、WP Social Bookmarking Lightをインストール・有効化し、必要な設定を行ったあとであれば、

<?php if(function_exists("wp_social_bookmarking_light_output_e"))
{wp_social_bookmarking_light_output_e();}?>

というタグを挿入すすだけで、「WP Social Bookmarking Light」で設定したソーシャルボタンをどこにでも挿入することができます。普通に設定しただけでは、画面上部または画面下部のどちらかにしか配置する事はできませんが、このタグを挿入する事により、例えば上部と下部の両方に設置する事もできます。

何を隠そう、当サイトのソーシャルボタンは、WP Social Bookmarking Lightで挿入させてもらっています(2012年10月現在)。しかし、使っておいてなんですが、そのカスタマイズ性は低いように感じます。とくにスマホではボタンが小さくて押しにくいように感じます。スマホのような小さな画面では、ソーシャルボタンは更に小さく表示されてしまい、意図したものとは違うものを押してしまう事もよくあります。

そこで、今回は大きな箱形ソーシャルボタンを、プラグインなしで挿入する方法についてご紹介していきたいと思います。プラグインを使うよりは手間がかかりますが、自由度は増えます。何でもかんでもプラグインに頼るのではなく、自力でできることは自力でやった方が、なにかと良いじゃないですか!

箱形ソーシャルボタンを導入する手順

さて、ここからはいよいよ箱型ソーシャルボタンを導入する手順についてご紹介していきます。ここでは、冒頭の写真のような箱形ソーシャルボタンを作成する事を目的としています。mixiとfacebookは、プラグインやアプリを作成しなければならないため、他と比べて少しだけ手間がかかります。

  1. はてなブックマークのソースコードを入手する
  2. コードをsocial-button.phpに貼り付ける
  3. 必要に応じてサイズ等を変更する
  4. cssに記入する
  5. 表示を確認する
  6. Twitterの大きなボタンを探す
  7. Twitterのソースコードを入手する
  8. Twitterのソースコードを変更する
  9. 必要な場所に貼り付ける
  10. mixiのプラグインを作る
  11. mixiコードを入手する
  12. social-button.phpに貼り付ける
  13. social-script.phpを作成してスクリプトを貼り付ける
  14. header.phpに記述する
  15. Google+1ボタンのソースコードを入手する
  16. 変更と貼り付けを行う
  17. facebookのアプリを作成する
  18. facebookのソースコードを入手する
  19. 変更と貼り付けを行う

01.はてなブックマークのソースコードを入手する

はてなブックマークまずは、比較的簡単なはてなブックマークのボタンから始めましょう。

上記の画像から、はてなブックマークの作成ページへジャンプすることができます。当該ページに行ったら、ページ中程の「これまでのボタンもご利用いただけます」をクリック。

次のページでは、自分のサイトのURLとサイトのタイトルを入力します。入力が済んだら、ボタンのタイプを「バーティカルボタン」にします。

プレビューを確認後、ソースをコピーします。

これまでのボタンではなく、Twitterやfacebookのようにバルーン形式のボタンにすることもできます。どちらを選択しても今後の手順に変化はありませんので、一貫性を持たせたいのであれば、バルーン形式の方がバランスが良いかもしれません。どのような形式のボタンにするかは、お好みでお選びいただけます。

02.コードをsocial-button.phpに貼り付ける

新しく、「social-button.php」というファイルを作成し、空の状態のままWordPressのテーマフォルダにアップロードしましょう。

そのファイルの編集は、WordPressの管理画面→外観→テーマ編集から行うことができます。

WordPressの管理画面からsocial-button.phpの編集画面にアクセスし、先ほどはてなブックマークのところでコピーしておいたソースを貼り付けます。

03.必要に応じてサイズ等を変更する

貼り付けたら、サイトURLの部分とページタイトル部分、サイズを下記のように変更します。
サイズは今後作るボタンと大きさを合わせるために、50x50pxにします。

変更前

<a href="http://b.hatena.ne.jp/entry/http://net10man.com/" 
class="hatena-bookmark-button" 
data-hatena-bookmark-title="ネットで毎月10万円稼ごう!" 
data-hatena-bookmark-layout="vertical" 
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 
alt="このエントリーをはてなブックマークに追加" 
width="20" height="20" style="border: none;" />
</a><script type="text/javascript" 
src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" 
async="async"></script>

変更後

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" 
class="hatena-bookmark-button" 
data-hatena-bookmark-title="<?php the_title();?>" 
data-hatena-bookmark-layout="vertical" 
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 
alt="このエントリーをはてなブックマークに追加" 
width="50" height="50" style="border: none;" />
</a><script type="text/javascript" 
src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" 
async="async"></script>

こうする事によって、タイトル名とURLをWordPressの情報から引き出すことができるようになります。

変更が終了したら、後々cssを適用させやすくするために、ソースコード全体をulタグとliタグで囲んでおきます。ulのクラスは、管理人の場合「social_buttons」に設定してあります。

タグを追加したもの

<ul class="social_buttons">

<li>
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" 
class="hatena-bookmark-button" 
data-hatena-bookmark-title="<?php the_title();?>" 
data-hatena-bookmark-layout="vertical" 
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 
alt="このエントリーをはてなブックマークに追加" 
width="50" height="50" style="border: none;" />
</a><script type="text/javascript" 
src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" 
async="async"></script>
</li>

</ul>

04.cssに記入する

さて、まだはてなブックマークだけですが、social_buttonsに入力が終わったので、cssを適用させてみましょう。どのようにデザインするのかは個人の判断に委ねられるところではありますが、管理人の場合、以下のように記述しております。

css

ul.social_buttons {
	margin: 5px 0 0;
}

ul.social_buttons:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;}

.social_buttons li {
	float: left;
	list-style: none;
	padding-right: 5px;
}

このように記述しておけば、ソーシャルボタンたちを左から順に並ばせることができます。右から並ばせたかったり、間隔を変更させたい時は、適宜修正して下さい。この記述は、クラスを「social_buttons」で指定されたulのみこのデザインにするという記述です。他のクラスには干渉しません。

05.表示を確認する

それでは、実際にページに表示させてみましょう。表示させたい場所に下記のコードを入力すれば、social-button.phpを呼び出してくれます。content.phpを使って記事の部分を引き抜いて管理しているのであればcontent.phpに貼り付けても良いでしょうし、そうでなければsingle.phpやpage.phpに貼り付ける事もできます。トップページにソーシャルボタンをつけたいという方は、トップページ用のファイル(home.php・front-page.php・index.phpなど)に貼り付けても良いでしょう。

social-button.phpを呼び出すコード

<?php
    get_template_part('social-button');
?>

このコードを入力した場所に、はてなブックマークのボタンが表示されていたら、成功です!

06.Twitterの大きなボタンを探す

ツイートボタンの入手さて、ここからはTwitterの話しになります。Twitterもはてなブックマーク同様、比較的簡単に箱形ソーシャルボタンを設置することができます。まずは、上記の画像からTwitterのツイートボタンを入手するページにジャンプしましょう。

ジャンプしてすぐ箱型がないのに気付くかもしれませんが、とりあえず「リンクを共有する」というラジオボタンにチェックを入れましょう。するとしたにウィンドウが開きます。開いたウィンドウの最下部に、「ボタンを更にカスタマイズするには、ツイートボタン詳細をご覧下さい。」という記述があるので、そこをクリックします。

ここからは英語ですが、箱形のツイートボタンを探すだけなので、大丈夫です。
画面左側に「Read the documentation for the Tweet Button」というリンクがあるので、そこをクリックします。

07.Twitterのソースコードを入手する

箱形ツイートボタン次の画面の下の方に、左記のような画像がありますので、そのすぐ下にあるソースコードをコピーします。

次のステップでで修正しますが、今はとりあえずこのままの形でsocial-button.phpに貼り付けておきます。

08.Twitterのソースコードを変更する

Twitterで入手したソースコードは下記のようになっていますが、3カ所ほど修正します。修正するのは、いずれもスクリプトタグより前の部分です。

修正前のソース

<a href="https://twitter.com/share" class="twitter-share-button" 
data-url="https://dev.twitter.com/pages/tweet_button" 
data-via="your_screen_name" data-lang="en" 
data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

まず、「data-url="https://dev.twitter.com/pages/tweet_button"」の中にある「" "」の間のURLを、「<?php the_permalink(); ?>」に変更します。

次に、@を表示させないために、「data-via="your_screen_name"」を削除します。半角スペースがなくなったり2つ入ってしまったりしないように注意して下さい。

最後に、日本語にするために、「data-lang="en"」の「en」を「ja」に変更します。

09.必要な場所に貼り付ける

修正が済んだら、Twitterで入手したコード全体をliタグで囲っておきましょう。貼り付ける場所ははてなブックマークのliの終了タグと、全体のulの終了タグの間です(全体をulで囲む)。

イメージ

<ul class="social_buttons">
<li>
はてなブックマークのソースコード
</li>

<li>
Twitterのソースコード
</li>
</ul>

イメージではこのような形になります。今後、ソーシャルボタンの数が増えてきても、同様の処理をします。

ここで表示を確認すると、はてなブックマークのボタンの隣に、ツイートボタンが表示されているはずです。

10.mixiのプラグインを作る

ここからはmixiのソーシャルボタンの設置方法をご紹介致します。mixiでは、プラグインを作る事によってイイネ!ボタンを作成することができます。mixiでアカウントをお持ちでない方は、ここで作成しておきましょう。

まずはこちらからmixi Platformにアクセスして下さい。

アクセスしたら、mixi Pluginをクリック。次に、「mixi Plugin にて提供される機能」の中にある、「イイネ!ボタン」の「詳しくはこちら」をクリック。次の画面に「Partner Dashboard」のリンクがあるのでクリックし、その次の画面で「mixi Plugin」をクリックします。

その次の画面で、「新規サービス追加」をクリックすると、サービス名・サービスのURL等を入力する画面に飛びますので、必要事項を記入し、最後に利用規約を読み、同意できたら同意して入力内容を確認するをクリックします。

11.mixiのコードを入手する

前のステップでプラグインを作成しました。このプラグインを使って、イイネ!ボタンのコードを入手することができます。

大きさは「大」を選択し、プロフィール画像の表示のチェックボックスは外しておきましょう。入力が済んだら、タグ欄にあるコードをコピーします。

12.social-button.phpに貼り付ける

mixiで入手したコードは、前半と後半に分けて、別々に貼り付けます。

<div…〜</div>が前半で、<script type=…〜</script>が後半です。

前半部分は、はてなブックマークやTwitterと同様、social-button.phpに貼り付けます。貼り付けたら、これまでと同様liタグで囲っておきましょう。

13.social-script.phpを作成してスクリプトを貼り付ける

mixiで入手したコードの後半部分(<script type=…〜</script>)は、social-script.phpというファイルを新規作成し、そこに貼り付けます。

まずは空のsocial-script.phpというファイルをWordPressのテーマフォルダにアップロードし、WordPressの管理画面から編集できるようにします。

管理画面から編集できる状態になったら、mixiで入手したコードの後半部分を貼り付けておきます。

14.header.phpに記述する

さて、ここでsocial-script.phpを機能させるために、header.phpに記述を加える必要があります。header.phpのbodyの中に、下記のコードを記述します。

header.phpに記述するコード

<?php
    get_template_part('social-script');
?>

このように記述する事で、social-script.phpを呼び出すことができます。

15.Google+1ボタンのソースコードを入手する

Google+1ボタンここからは、Google+1のボタンを設置する方法についてご紹介していきます。

まずは、上記の画像からGoogle+1ボタン入手画面にジャンプして下さい。サイズは横長の大きいものを選択し、+1情報はバルーンを選択します。

選択が終わったら、右のコードをコピーしておきます。

16.変更と貼り付けを行う

これまで同様、サイトのURLはパーマリンクを呼び出すタグに変更し、mixi同様前半と後半に分けてそれぞれ貼り付けます。

具体的には下記のように変更して前半部分と後半部分をsocial-button.phpとsocial-script.phpに貼り付けます。

social-button.php(前半部分貼り付け)

〜略〜
<li>
<div class="g-plusone" data-size="tall" data-href="<?php the_permalink(); ?>"></div>
</li>
〜略〜

social-script.php(後半部分を貼り付け)

〜略〜
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
〜略〜

17.facebookのアプリを作成する

ここからは、facebookのイイネボタンを設置する方法についてご紹介していきます。facebookでアカウントを持っていない方は、ここで作成しておきましょう。

イイネボタンを設置するために、「App ID」というものが必要になります。App IDを入手するためには、アプリを作成する必要があります。

イイネボタンを作成する前に、アプリの作成方法についてご紹介しておきたいと思います。

アプリを作成するためには、まずfacebook Developersにアクセスします。画面上部のツールバーの「アプリ」をクリックします。

次の画面で、「新しいアプリを作成」をクリックすれば、アプリ作成画面に進むことができますので、必要事項を入力してアプリを作成します。最初はAPP NAMEのみの入力でも作成する事はできます。自分で運営しているサイト名を入力しておけば良いでしょう。

18.facebookのソースコードを入手する

アプリを作成したら、イイネボタンを作成します。こちらからイイネボタン作成ページにアクセスして下さい。

URL to Likeには、自分が運営しているサイトのURLを入力しておきましょう。あとで変更します。

Send Buttonのチェックは外しておきます。

Layout Styleはボックスカウントを選択します。

Widthは75pxに設定しておきます。

Show Facesにはチェックを入れておきましょう。

Verb to displayは「like」としておきます。

Color Schemeは「light」としておきます。

Fontはデフォルトのままにしておきます。

これらの入力が済んだら、「Get Code」をクリックし、コード入手のウィンドウを開きます。ウィンドウが開いたら、IFRAMEを選択します。コードが切り替わったのを確認して、コードをコピーしておきます。

19.変更と貼り付けを行う

これまで同様、social-button.phpにコードを貼り付けますが、サイトURLと大きさを変更します。

サイトのURLはパーマリンクに設定し、高さを65pxに設定します。具体的には、下記のようにsocial-button.phpに記述します。

social-button.phpの記述

〜略〜
<li>
<iframe src="//www.facebook.com/plugins/like.php?
href=<?php the_permalink(); ?>&amp;send=false&amp;layout=box_count&amp;
width=75&amp;show_faces=true&amp;action=like&amp;
colorscheme=light&amp;font&amp;height=65&amp;
appId=000000000000000" scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; 
width:75px; height:65px;" allowTransparency="true"></iframe>
</li>
〜略〜

(appIdは0の羅列に変更してあります)

お疲れ様でした!ここまでの作業を終わらせれば、箱形ソーシャルボタンが設置できるはずです。

参考書籍

本格ビジネスサイトを作りながら学ぶ WordPressの教科書
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 866

この記事は、「本格ビジネスサイトを作りながら学ぶ WordPressの教科書」を参考にして書いております。この本はとても完成度が高く、初心者でも立派なビジネスサイトが作れるようになっております。

ただ、この本のソーシャルボタンに関しての記述は、管理人としてはいまいちだったので、自分なりにカスタマイズし、それを忘れないように今回の記事にしました。しかし、それを抜きにしてもこの本はスゴい。本格的なサイトを作りたい方は必読書であると言えるでしょう。

この本を読んで、何か分からない事があれば、プライムストラテジーのサイト(この本を執筆した人の会社)に行って質問すれば、著者自らが質問に答えてくれるようです。管理人はとくにつまずいたりはしなかったので質問はしませんでしたが、この先何か分からない事があれば、思い切って質問してみようかなと思っています。

追記

facebookのコメント欄を挿入する記事も書きました。
HP作成Lv.13 Welcartでコメント欄を設置してレビュー機能を持たせる方法」という記事ですので、こちらも併せてご覧頂ければと思います。

web制作Lv.10 Akismetを導入する

  • 小
  • 中
  • 大

Akismetは、スパムコメントを排除してくれる便利なプラグインです。あなたのサイトに寄せられたコメントがスパムかどうかを自動的に判断してくれる優れものです。

このプラグインを導入しておくことにより、スパムコメントに悩まされる可能性を大幅に引き下げることができるでしょう。ここではAkismetの導入方法、使い方についてご紹介していきたいと思います。

Akismetを入手する

まずはAkismetをインストールしましょう。といっても、Akismetはデフォルトの状態でインストールされているため、別途インストールする必要はありません。

もし何らかの手違いにより削除してしまっていたら、プラグイン→新規追加から「Akismet」と検索すればすぐに見つかるはずです。

Akismetを有効化する

インストール済みのプラグイン一覧の中にAkismetがあることを確認したら、有効化させましょう。

Akismetを有効化させる赤く囲まれた部分(有効化)をクリックし、次の画面に移動させましょう。

Akismetは他のプラグインと違い、有効化しただけでは使えるようになりません。Akismet APIキーというものを入手し、入力する必要があります。

Akismet APIキーの入手方法

Akismetを有効化したら、画面上部に次のような表示がされます。

Akismet有効化直後の画面表示

この表示の中の、「Akismet APIキーを入力」というリンクをクリックします。Akismet APIキーはAkismetの本家のサイトに行かないと入手できませんので、次の画面のリンクをクリックして本家のサイトに行きましょう。

Akismet本家サイトリンク

このような表示が画面中央にありますので、この表示の中の「キーを取得する」をクリックします。クリックすると、Akismetの本家サイトにジャンプすることができますが、またWordPressの管理画面に戻ってくる必要がありますので、コントロールキー(Macはコマンドキー)を押しながらクリックし、新しいタブでAkismetの本家サイトを開きましょう。

Akismetの本家サイトですること

Akismetの本家サイトからは、Akismet APIキーが記載されたメールを送ってもらう必要があります。そのためにはまず、下記の画像のリンクをクリックしましょう。

本家サイトでまずクリックするボタン

この画像をクリックすると、プランが3つ並んだ画面が表示されます。

Akismetのパーソナルコース今回は、これを読んでいる方が個人でホームページを作っていることを想定し、3つ並んでいる画像のうち「Personal」の中の「SIGN UP」をクリックします。

個人ではなく法人であったり、個人だがたくさんのコメントを受けるようなサイトを構築している場合は、それ以外を選択して頂いても構いません。

次に、支払の意図を選択します。ここでは無料にする方法をご紹介致しますが、サイトの規模や状態に応じて適切な価格を設定することをオススメ致します。

Akismetの価格を無料にする方法無料にするには、価格の下のバーをスライドさせて、左記の画像のような状態にします。

価格をゼロにしたら、左側にある項目を埋めていきます。メールアドレスは確認のため、2回入力するようになっています。ここに入力したメールアドレスに、Akismet APIキーが記載されたメールが届きますので、受信可能なメールアドレスを入力するようにしましょう。

必要事項を入力し、「CONTINUE」をクリックすると、指定したメールアドレスにメールが届きます。そのメールの中にAkismet APIキーが記載されていますので、コピーしておきます。

Akismet APIキーが記載されたメール

上記の画像の、ぼかしがかかっている部分に記載されている文字列が、Akismet APIキーです。

Akismet APIキーを入力する

Akismet APIキーを入手したら、WordPressの管理画面に戻り、所定の位置にAkismet APIキーを貼り付けます。

Akismet APIキーを貼り付ける場所

上記の画像の赤い四角で囲ってある部分にAkismet APIキーを貼り付けます。貼り付けて「設定を更新」というボタンをクリックし、下記の画像が表示されたらAkismetの設定は成功です。

Akismet設定成功画面

この状態になればAkismetの有効化は成立し、スパムコメントを排除してくれるようになります。

参考書籍

本格ビジネスサイトを作りながら学ぶ WordPressの教科書
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 722

この記事を作成するにあたり、上記の書籍に大変お世話になりました。この本は、WordPressで本格的なビジネスサイトを作るためのエッセンスがたっぷり詰まった良書です。

この本があれば、クオリティの高いビジネスサイトが作れるだけでなく、そのカスタマイズの方法や応用の仕方、アクセスアップに至るまで、様々な知識を得ることができます。

WordPressで単なるブログではなく、本格的なビジネスサイトを作りたいと思っている方は、この本を読むことをオススメします。

web制作Lv.09 All in One SEO Packを導入する

  • 小
  • 中
  • 大

HP作成Lv.07 プラグインを導入する」という記事で、インストールしておいた方が良いプラグインについてご紹介致しましたが、今回は(そこで紹介した中でも)特に有用性の高いプラグイン「All in One SEO Pack」に特化した記事を書いておきます。

このプラグインは、タイトルやメタ情報を個別に設定し、内的SEOを強化させることができる言われています。しかし、設定がやや難解で、初心者にとっては敷居が高いプラグインであると思われますので、ここで使い方の詳細をご紹介しておきます。

まずはインストールして有効化させよう

「All in One SEO Pack」をインストールし、有効化しても、それだけでOKという訳ではありません。有効化するとこのような赤い画像が画面上部に表示されます。
All in One SEO Pack有効化直後の画面
この画面上の「the admin page」のリンクをクリックし、All in One SEO Packの詳細な設定を行っていきます。

All in One SEO Packの詳細設定の方法

the admin pageをクリックすると、上の方に英文やら広告やらが表示されますが、これらはあまり気にする必要はありません。

その下に「このプラグインを利用し、すでに募金しています」というチェックボックスがありますが、このチェックは入れなくてもプラグインは利用することができます。

プラグインの状況は、「Enabled」にチェックを入れておきます。Enabledは「使用可能になった」という意味です。

ホームタイトルには、トップページのタイトルとして扱われます。サイトのタイトル(サイト名)を入力しておきましょう。

ホーム詳細(Description)には、サイトの説明を記入します。ここもSEO上重要なメタ情報となりますので、うまく要約して記入するようにして下さい。

ホームキーワードには、サイトのキーワードを入力しましょう。複数のキーワードを半角カンマで区切って入力することができます。

Canonical URLsは、「Canonical属性」という属性を時どうせ設定するか否かのチェックボックスです。チェックを入れておいて問題ありません。

タイトルを書き換えるのチェックボックスは、記事ごとに別のタイトルを決めるか否かのチェックボックスです。人間が見るタイトルは記事のタイトルですが、このチェックボックスにチェックを入れておくことで、All in One SEO Packで別途「検索エンジンが見るタイトル」を決めることができますので、チェックを入れておきます。

投稿タイトルのフォーマット・個別ページタイトルのフォーマット・カテゴリータイトルのフォーマット・アーカイブのタイトルフォーマット・タグのタイトルフォーマット・検索時のタイトルフォーマット・詳細のフォーマットはそのまま(すでに記述されている状態のまま)で構いません。特に変更する必要はありません。

404エラーのタイトルフォーマットは、デフォルトでは英語のサイト用の記述になっておりますので、英語表記が嫌な方は「%request_words%に関するページは見つかりませんでした。」と日本語に書き換えておくこともできます。

固定ページのフォーマットでは、複数のページに関わる固定ページのタイトルタグを設定しておくことができます。運営しているサイトに応じて書き換えておきます。通常はこのままでも構いません。

カスタム投稿用のSEOのチェックボックスは、カスタム投稿タイプを利用する場合にチェックを入れます。通常はチェックを外しておいて問題ありません。

Custom Post Types for SEO Column Supportは、上記のカスタム投稿タイプを利用するチェックを入れた場合に設定します。通常は変更する必要はありません。

Google Plus Profile Sitewide Defaultはグーグルプラスのアカウントを持っていれば記入し、Google Analytics IDはグーグルアナリティクスに登録していればIDを入力しておくと良いでしょう。

メタキーワードとしてカテゴリーを使う・メタキーワードとしてタグを使う・動的に投稿ページのキーワードを生成するの3つのチェックボックスは、チェックを入れたままにしておいた方が、SEO上有利と言われていますので、チェックを入れたままにしておきましょう。

カテゴリーをnoindexにする、アーカイブをnoindexにする、タグをnoindexにするの「noindex3連発」は、チェックを外しておいて下さい。チェックを入れておくと、インデックスされなくなってしまうのでSEO上不利に働いてしまいます。チェックは必ず外しておくようにしましょう。

詳細を自動生成にチェックを入れておくと、記事ごとの詳細(Description)を自動で生成してくれるようになります。運営するサイトの属性に応じて判断して下さい。

カテゴリータイトルを大文字にするのチェックボックスは、日本語のサイトを製作する場合はあまり関係ありませんので、チェックを外しておきましょう。

固定ページを除外するの欄は、検索エンジンにインデックスさせたくないページを記入しておくことで、インデックスを回避させることができます。

投稿のヘッダーに追加記入・固定ページのヘッダーに追加記入・トップページのヘッダーに追加記入の3つには、それぞれのヘッダータグの中に挿入する文章やキーワード・タグなどを追記することができます。

ログの重要なイベントのチェックボックスは、トラブルが起きた際などのログを残すか否かのチェックボックスです。通常はチェックを外しておいて問題ありません。

以上の設定が終わったら、「設定を更新」のボタンをクリックして下さい。

投稿画面での入力方法

All in One SEO Packの詳細設定が終わったら、通常の投稿画面へアクセスしてみて下さい。「All in One SEO Pack」の項目が増えていることが分かると思います。

All in One SEO Pack入力画面

ここにタイトル・概要・キーワード・タグを入力することにより、SEO上有利に働かせることができます。

とくにタイトルは、All in One SEO Packの項目で入力したタイトルが検索エンジンに優先的に反映されるようになりますので、アピールすることができます。

人が見るタイトルはその記事のタイトルとしておき、検索エンジンが見るタイトルはAll in One SEO Packの項目で入力するタイトルであると認識しておいて下さい。

キーワードは半角カンマで区切ることにより、複数のキーワードを入力することができます。

参考文献

この記事を作成するのにはもちろん、当サイトを構築する上で、下記の書籍には大変お世話になっております。この書籍は多くの人が利用している、有名なWordPressテンプレート「賢威」の制作者・松尾茂起氏により執筆されています。

WordPressで加速させる!ソーシャルメディア時代の[新]SEO戦略マニュアル
松尾 茂起
秀和システム
売り上げランキング: 4915

WordPressを知り尽くし、SEOを知り尽くした方の書籍ですので、得るものは多いです。SEOの本質、戦略的な手法を事細かに解説してくれています。さらにこの本の購入特典として、「賢威ライト」というテンプレートが無料で利用できるようになります。

サイトのアクセスアップについて真剣に考えている方、そもそもSEOってどうしたら良いのか分からない・知りたい!という方は、まずはこの本をご一読されることをオススメ致します。

web制作Lv.08 基本的なSEO対策をする

  • 小
  • 中
  • 大

記事を本格的に作成する前に、SEO対策の一環として、グーグルアナリティクスとグーグルウェブマスターツール、さらにPING送信先を登録しましょう。SEO対策とは、検索エンジン最適化の略で、SEO対策を行うことにより、アクセス数を伸ばすことにつながります。

グーグルアナリティクスはアクセス解析に役立ち、グーグルウェブマスターツールはサイトのインデックス促進に役立ちます。PING送信先の登録は、検索エンジンロボットにインデックスされやすくする効果と、サイトの評価を上げるという効果が期待できます。

アクセス解析機能につきましては、無料ブログを利用していた時は、無料ブログの中にアクセス解析サービスが同梱されていましたが、WordPressでホームページを作る場合は自分で登録してアクセス解析できるようにしておく必要があります。

グーグルアナリティクス

グーグルアナリティクスグーグルアナリティクスは、アクセス数の確認をしたり、サイト訪問者の属性を調べたり、ページが何秒間閲覧されているかなどを確認することができるサービスです。

具体的には、どこの地域の人が訪問しているのか、どのブラウザから閲覧しているのか、何ページ見てくれているのか、何分間見てくれているのか、2ページ以上見てくれている人はどれぐらいの割合なのか、などが分かります。

グーグルアナリティクスは、無料であるにも関わらず、分析ツール・コンテンツの分析・ソーシャル解析・モバイルアクセス解析・コンバーション解析・広告の分析など、様々な分析・解析ツールを兼ね備えています。

登録は無料で手軽にできますので、サイトを立ち上げたらすぐに登録しておくことをオススメ致します。

【グーグルアナリティクスの登録方法】
上記の画像からグーグルアナリティクスにアクセスし、アナリティクス設定をクリックし、サイトを追加します。次の画面でサイトのURLや言語環境を選択し、サイト名を入力します。

必要事項を入力し、次の画面に進むと、トラッキングするためのコードを入手することができます。このコードをヘッダーに貼り付けることによって、アクセス解析することができるようになります。

【google-analytics-dashboard】
グーグルアナリティクスに登録したら、google-analytics-dashboardというプラグインをインストールすることによって、WordPressのダッシュボードでアクセス数を確認することができるようになります。

このプラグインをインストールしておけば、アクセス数などの確認をするためにわざわざグーグルアナリティクスのページに行く必要がなくなります。手軽にアクセス解析ができるようになりますので、オススメのプラグインであるといえます。

グーグルウェブマスターツール

グーグルウェブマスターツールグーグルウェブマスターツールは、サイトのインデックス(ページや記事などを検索エンジンに登録すること)を促進したり、サイトの健康診断を自動で行ってくれたり、サイト訪問者がどのようなキーワードでたどり着いたかを確認したり、あるキーワードで検索されたときに自分のサイトが何番目に表示されているかを確認したりできるサービスです。

サイトに何か問題が発生したり、無効なリンクがあったりする時などは、メールやメッセージなどで通知してくれます。

【サイト所有権の確認】
ウェブマスターツールに登録するためには、サイトの所有権を確認する必要があります。これは誰でもそのサイトのアクセス解析ができてしまっては、セキュリティ・プライバシー上問題があるからです。

所有権を確認するには、グーグルから特殊なファイルをダウンロードし、それを自分のサイトにアップロードする必要があります。その特殊ファイルは、ウェブマスターツールにアクセスし、「サイトを追加」をクリックした後、自分のサイトのURLを入力することでダウンロードすることができます。

そのファイル(htmlファイル)を、自分のサイトにアップロードし、ブラウザからそのファイルにアクセスすることで、サイトの所有権を証明することができます。アップロードする場所は、wp-adminやwp-contentなどと同じ階層です。エックスサーバーのファイルマネージャーからアクセスすると、簡単にアップロードすることができます。

ファイルのアップロードが済んだら、ウェブマスターツールの画面からそのファイルにアクセスします。404エラーが出てしまったら、ファイルのアップロードの場所が違うということを意味します。
「google-site-verification: google○○○○○○○.html」
といった具合に、ファイル名が画面上部に表示されたら成功です。

ウェブマスターツールに登録した後も、そのhtmlファイルは削除せずにそのままにしておきましょう。

【サイトマップの送信】
ウェブマスターツールに登録するには、サイトマップを送信する必要がありますが、それにはプラグインで対応することができます。この場合のサイトマップは、人間が見るサイトマップではなく、機械用に作成されたサイトマップです。

Google XML Sitemapsというプラグインをインストールし、サイトマップを作成し、そこで作成したサイトマップのURL(sitemap.xml)をグーグルウェブマスターツールに登録することで、基本的な準備は終了します。

サイトマップを送信してから実際にウェブマスターツールが機能し始めるまで数日程度かかりますので、待ちましょう。

PING送信先の設定

PING送信先の設定はGoogleに登録することとはあまり関係ありませんが、更新情報を通知するという内容は似ていますので、ここで紹介しておきます。

管理画面の設定→投稿設定のページの下の方に、「更新情報サービス」という欄があります。ここに複数のURLを登録しておくことにより、更新情報を広範囲に通知することができます。

初期段階では、「http://rpc.pingomatic.com/」1件だけしかPING送信先が設定されていません。当サイトでは、より広範囲に更新情報を通知してもらうために、以下のサイトを登録しております。広範囲に更新情報を通知させたい方は、コピーしてご利用ください。
http://api.my.yahoo.co.jp/RPC2
http://bulkfeeds.net/rpc
http://blog.goo.ne.jp/XMLRPC
http://blogsearch.google.co.jp/ping/RPC2
http://coreblog.org/ping/
http://ping.bloggers.jp/rpc/
http://ping.blogmura.jp/rpc/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.exblog.jp/xmlrpc
http://www.blogpeople.net/ping/

なお、ここで紹介している更新情報サービスのURLは、「WordPress Codex日本語版・更新通知サービス」に記載されているものと同じものです。

これら全てを登録しておく必要は必ずしもないかもしれませんが、最初に1回だけ登録しておけば、それ以降の操作は必要ありませんので、最初のうちに登録しておきましょう。

自分のサイトの設定を確認する

そもそも、自分のサイトがインデックスを許可していないと、いつまでたっても検索エンジンにインデックスされません。ここで、自分のサイトがインデックスを許可しているか確認しておきましょう。

インデックス許可の確認管理画面→設定→プライバシーで、自分のサイトがインデックスを許可していることを確認して下さい。

チェックの位置が上の画像のような状態になっていれば、インデックスを許可しているという事になります。

SEOに関しましては、次の「HP作成Lv.09 All in One SEO Packを導入する」という記事でもご紹介しておりますので、併せてお読みください。

web制作Lv.06 テンプレートを自作する

  • 小
  • 中
  • 大

サーバーを借り、独自ドメインを取得し、WordPressをインストールしたら、テンプレートを作成しましょう。テンプレートを自作すると言っても、そんな大掛かりなものではありません。

前回の記事「HP作成Lv.05 書籍を購入する」でご紹介した「WordPressレッスンブック」または「WordPressデザインブック」を利用することにより、自分独自のテンプレートを簡単に作成することができます。

テンプレートは「WordPressデザインブック」に軍配

「WordPressレッスンブック」では、index.phpだけで様々な処理を行うテンプレートを作成しようとするのに対し、「WordPressデザインブック」ではhome.phpやcategory.phpなど、複数の専用テンプレートを利用し、カスタマイズしやすいテンプレートを作成することを目的としておりますので、どちらかと言うと「WordPressデザインブック」の方法で作り始めた方が良いかもしれません。

初心者はゆっくり・じっくり始めよう

しかし、初心者の方は、一旦「WordPressレッスンブック」で一通りサイトを作成してからでも遅くはありません。いきなり「WordPressデザインブック」を始めてしまうと、用語の意味も分からず、本に何が書いてあるかも分からない、という状況になりかねません。

一通り「WordPressレッスンブック」にしたがってサイトを作成し終えると、どのようにサイトを構築すれば良いのかのイロハを学べます。基礎的な部分を理解してから、「WordPressデザインブック」に進んだ方が、その後のカスタマイズがやりやすくなるはずです。

functions.phpは、取り扱いに注意!

functions.phpというファイルをいじるときには、注意が必要です。もし間違った操作をしてしまうと、WordPressの管理画面すら見ることができなくなってしまいます。

他のファイルはそれほど神経質になる必要はありませんが、functions.phpだけは細心の注意を払って操作するようにしましょう。

「WordPressレッスンブック」はサイト構築方法の流れの中でfunctions.phpを操作する都度、懇切丁寧に注意書き及び復元方法が書いてあります。そういった面でも「WordPressレッスンブック」は初心者に優しい書籍だと思います。

ちょっと間違えてしまうだけで、何も見ることができなくなってしまうという状況は、本当に冷や汗が出ます。そのときにパニックにならないために、注意書きを添えてくれています。

functions.phpの操作を間違えてしまい、WordPressで何も表示されなくなってしまった場合には、WordPress上で修正することはできません。サーバーのファイルアップロード機能を使うか、ブラウザやフリーソフトのFTP機能を使って、変更前のfunctions.phpファイルに入れ替えてあげることにより、もとの状態に復元することができます。

したがって、functions.phpを変更させる際は、変更前の予備ファイルを用意しておいた方が無難かもしれません。

テンプレートの階層について理解しよう

WordPressは、様々な専用のテンプレートを設置することができますが、それには優先順位があります。例えばトップページを表示する際、home.phpというテンプレートを参照しますが、テーマにhome.phpというテンプレートが存在しない場合、index.phpというテンプレートを参照する、といった具合です。

つまり、必ずしもhome.phpがなければならないというわけではなく、極端にいえばindex.phpさえあれば何でもできてしまうというわけです。しかし、index.phpしか存在しないということは、どのページを見ても同じデザインになってしまうということになってしまい、カスタマイズがしにくいです。

ページごとに異なるデザインにするために、home.phpやarchive.php、single.php、page.phpといった専用テンプレートを用意するのです。ここに例示列挙したものに限らず、さらに細かく分類させることもできます。

archive.phpをさらに細かく分類する場合

月別ページ index.php archive.php date.php
カテゴリーページ category.php
タグページ tag.php
タクソノミーページ taxonomy.php
投稿タイプページ archive-posttype.php
ユーザーページ author.php

試しに、archive.phpをさらに細かく分類する場合についてご紹介してみましょう。ちなみに、archiveは「アーカイブ」と読みます。上記の表は、右に行けば行くほど優先順位が上がるということを示しています。

archive.phpは、月別ページ、カテゴリーページ、タグページ、タクソノミーページ、投稿タイプページ、ユーザーページを表示するときに参照されるテンプレートです。(「表示するときに参照」とは、サイト訪問者が例えば月別ページを見ようと思って月別ページをインターネット上で表示させようとしたときに、WordPress側がどのテンプレートを使ってそのページを表示させるか、という意味です。)

例えば、テーマの中にdate.phpとarchive.phpが両方存在したら、月別ページを表示する時はdate.phpを優先的に参照します。同様に、カテゴリーページを表示する時はcategory.phpを優先し、タグページを表示する時はtag.phpを優先する、といった具合です。

先述した通り、テーマの中にdate.phpもcategory.phpも存在しない場合に月別ページやカテゴリーページを表示させる場合はarchive.phpを参照し、archive.phpもない場合はindex.phpを参照します。

web制作Lv.05 書籍を購入する

  • 小
  • 中
  • 大

サーバーを選んで契約し、独自ドメインを取得したら、WordPressの書籍を購入しましょう。

ここで「書籍を購入する」ということをオススメしたら、
「サーバー・ドメインで金がかかってるのに、また金がかかることをお勧めするのかよ」
「本なんて読まないで済むように、ネットで色々調べてるんだよ」
「本読む時間なんてない」
というクレームが聞こえてきそうな予感がしますが、WordPressの書籍を購入することは、以下のようなメリットがあります。

  1. 全くの素人でもホームページが作れるようになる
  2. 専門用語に慣れることができる
  3. 分からないことがあってもすぐ解決できる
  4. ホームページ作成の仕組みが分かる
  5. 応用が利く
  6. 複数のサイトを維持できるようになる
  7. 早く覚えられる
  8. データCD-ROMや、データダウンロードサービスが付属されていて便利
  9. 一度購入すれば追加料金不要でずっと使える
  10. 断片的でなく体系的に理解できる

オススメする書籍は、2冊です。その2冊さえ手に入れれば、全くの素人の状態でも、少なくとも当サイトのようなデザインのホームページは作ることができるようになります。当サイトは、下記の2冊の書籍を参考にして(というよりそのままパクって)作成したものです。

①WordPressレッスンブック

WordPress レッスンブック 3.x対応
エビスコム
ソシム
売り上げランキング: 2122

まず1冊目にオススメしたいのは、WordPressレッスンブックです。この本は、本当にまっさらな状態の方、今までホームページ・WordPressに触ったことのない方を想定して書かれている本です。カスタマーレビューを見ても分かる通り、かなり評判のいい書籍です。

WordPressのインストール方法の解説から始まり、サイトのデザイン・管理に至るまで、懇切丁寧に記述されている良書です。WordPressをゼロから始めたいと思っている方にぴったりの書籍といえるでしょう。

テンプレートを1から作ることによって、WordPressでのサイト構築方法を段階的に学ぶことができるよう、工夫されています。

    この本の目次

  1. 下準備
  2. 基本的なブログの作成
  3. 記事に挿入した画像のレイアウト
  4. ブログのメニュー
  5. コメントとトラックバック
  6. 固定ページの作成とトップページのカスタマイズ
  7. パワーアップアレンジ

②WordPressデザインブック

WordPressデザインブック3.x対応
エビスコム
ソシム
売り上げランキング: 18870

この本は、前述の「WordPressレッスンブック」の内容をマスターした方・ある程度phpやhtmlの知識がある方を対象として書かれております。過去にWordPressでホームページを作成したことのある方は、この本から始めても良いでしょう。

管理人は、個人的にこの本にはとてもお世話になりました。正直、「WordPressレッスンブック」では満足できなかったのですが、この本のおかげでマトモなサイトを構築することができました。かゆいところに手が届いた感じがしました。これまでも、そしてこれからもお世話になり続ける本だと思います。この本さえあれば、応用次第で様々な種類のサイトを構築することができるようになるでしょう。

    この本の目次

  1. 基本サイトの構築
  2. カスタマイズの準備
  3. 記事の固定ページのカスタマイズ
  4. 記事一覧ページのカスタマイズ
  5. ナビゲーションのカスタマイズ
  6. 固定ページのカスタマイズ
  7. コンテンツの分類と検索
  8. ヘッダーと画像のカスタマイズ
  9. 外部サービスとの連携

上記の2冊を使ってみた感想

WordPressレッスンブック・WordPressデザインブック、新品で買っても2冊合わせて5,880円です。これを高いと思うか安いと思うかは人それぞれの価値観で判断してもらうしかありませんが、管理人は本当に安い買い物だったと思います。

最初の頃は何も分からずただ漠然と「ホームページが作りたい」と思っていましたが、この2冊に巡り会うことができてマトモなサイトを構築することができましたし、本当に幸運でした。

その他の関連書籍

以上の2冊を購入すれば、ひとまず安心と言えます。この2冊の書籍さえあれば、一般的なホームページをWordPressで作成する技術と知識を身につけることができます。

ここからは、さらに深く追求したい・もっとWordPressをカスタマイズしたいという方のために、関連書籍をご紹介していきたいと思います。

WordPress 3.x デザイン&カスタマイズ スタイルブック

WordPress 3.x デザイン&カスタマイズ スタイルブック
エ・ビスコム・テック・ラボ
マイナビ
売り上げランキング: 214456

WordPress 3 サイト構築スタイルブック

WordPress 3 サイト構築スタイルブック
エ・ビスコム・テック・ラボ
毎日コミュニケーションズ
売り上げランキング: 103567

本格ビジネスサイトを作りながら学ぶ WordPressの教科書

これまで、エビスコムさんの書籍ばかりをご紹介してきましたが、ここからはエビスコムさん以外の書籍もご紹介していきたいと思います。

本格ビジネスサイトを作りながら学ぶ WordPressの教科書
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 854

    この本の目次

  1. まず表示させてみよう
  2. 基本サイトの構築
  3. ユーザビリティの向上
  4. SEO対策
  5. コミュニケーション
  6. アクセス解析
  7. SSLによるセキュリティ
  8. 発展的な機能を使う
  9. プラグインを作成する
  10. ハイパフォーマンス化


ランキングを見ても分かる通り、WordPress関連の本ではかなり人気のある本です。本格的なビジネスサイトを作りたいという方にぴったりの本であるといえます。

WordPress デザインワークブック 3.4対応

WordPress デザインワークブック 3.4対応
高橋 朋代 田中 広将
ソーテック社
売り上げランキング: 16009

書籍には不可避的に重複してしまう内容のものがありますが、ある特定の書籍にしか書かれていない情報も必ず存在します。情報を上手に取捨選択して、複数の書籍で勉強することにより、高いオリジナリティ・高いクオリティのサイトを構築していきましょう。

web制作Lv.03 サーバーを選択する

  • 小
  • 中
  • 大

前のLvでは、WordPressの有用性についてご紹介致しました。ここでは、そのWordPressを利用するために、WordPressが使えるサーバーをご紹介していきたいと思います。

エックスサーバーエックスサーバー結論から先に申し上げますと、管理人はエックスサーバーを使っています。
有料サーバーはたくさんありますが、エックスサーバーに決めました。
その理由も(CMSをWordPressに決めた時と同様)たくさんあるのですが、多くの人が共感してくれるであろう理由のみを列挙してみたいと思います。

  1. 簡単にWordPressをインストールすることができる
  2. 電話サポートがある
  3. 動作が非常に安定している
  4. 容量の割には価格が安い
  5. 初期サーバー設定費を実質無料にすることができる
  6. マルチドメイン・サブドメインを無制限に使うことができる
  7. 最安値プランでもMySQLというデータベースを30個管理することができる
  8. 複数のサイト経営ができる
  9. WordPress以外にも様々なCMS・ショッピングカートなどがインストールできる

色々調べた結果、エックスサーバーに落ち着きました

上記に列挙した以外にも、エックスサーバーを選んだ理由はたくさんあるのですが、これぐらいにしておきます。エックスサーバーにWordPressをインストールするのは本当に簡単で、慣れれば1分以内に完了させることができます。「簡単」というのは、初心者に優しいと言い換えることができるのではないでしょうか。

電話サポートも嬉しいサービスですね。メールサポートはどこの格安サーバーでも実施しているサービスですが、電話サポートを行っている格安サーバーはそうはありません。電話サポートは初心者に優しいサービスだと思います。管理人は未だに分からないことがあれば、電話サポートを利用させて頂いております。

エックスサーバー以外の他の格安レンタルサーバーを使っている知人に聞いたところ、動作に不具合があるサーバーも存在するそうです。突然サーバーが固まってしまい、アクセスできなくなってしまうことがたまにあるそうです。

しかし、エックスサーバーでそのような事態に陥ったという話しは聞いたこともありませんし、管理人自身そのような記憶はありません。動作が安定しており、将来アクセス数が増えたとしても耐えてくれるサーバーであるということができます。

エックスサーバーの基本的なスペック

プラン X10 X20 X30
月額使用料 1,050円〜 2,100円〜 4,200円〜
初期費用 3,150円
プレゼントドメイン 無し 有り 有り
MySQL 30個 50個 50個
ディスク容量 200GB 300GB 400GB
データバックアップ 過去7日分
無料お試し期間 最大10日間
マルチドメイン 無制限
サブドメイン 無制限
メールアカウント 無制限
サポート 電話・メール

エックスサーバーの初期費用を実質無料にする方法

これを詳しく書いてしまうと、このページのリンクからエックスサーバーを申し込んでくれる人が少なくなってしまいそうなので、できれば避けたいのですが、これを読んでくれている皆様のフトコロを傷つけないためにも、書いておきます。

とは言っても、何もいかがわしいことをするわけではありません。やることは、A8.netで自己アフィリエイトするだけです。A8.netを利用している方は知っていると思いますが、A8.netには「セルフバック」というサービスがあります。そのサービスからエックスサーバーを検索し、セルフバックを行うことで、初期費用を実質無料にする(厳密に言うと、初期費用を3,000円分引き下げる)ことができます。

A8.netにまだ登録していない方は、上記のリンクからA8.netに登録して下さい。「ブログ作成Lv.09 ASPを利用する」でも書きましたが、A8.netはサイト数・会員数共に日本最大級のアフィリエイトサービスプロバイダー(ASP)です。ここに登録しないことには、何もできませんので、まずは登録することをオススメ致します。

いざ、セルフバックしてみる

A8.netに登録し、ログインすると画面の右上の方にセルフバックのリンクがある事に気付くと思います。そのリンクをクリックすると、A8.netのセルフバックのページに行くことができます。セルフバックのページで、検索欄に「エックスサーバー」と入力すると、エックスサーバーのセルフバック画面が表示されますので、その画面から、エックスサーバーの右にある「セルフバックを行う」をクリックします。

そうすると、本家エックスサーバーのサイトに飛びますので、そこから好きなプランを選択し、申し込みすれば完了です。

A8.netを経由してエックスサーバーを申し込んだとしても、一旦初期費用を(自腹で)支払わなければなりませんが、A8.netから成果報酬として振り込まれますので、実質無料とすることができます。

エックスサーバーエックスサーバーそれでも、当サイトの管理人にドネーションしたいという方は、このページのリンクからエックスサーバーを契約して下さいね♪w

それはともかく、WordPressを使って、ゆくゆくは複数のサイトを運営しようと考えているのであれば、エックスサーバーは一押しのサーバーだと断言できますので、どのサーバーを使うかお悩みの方は、ぜひエックスサーバーをご利用ください。

エックスサーバー以外のサーバーを使いたい方

これまで、エックスサーバーをオススメしてきましたが、何らかの理由でエックスサーバーが使えない・使いたくないという方のために。ここからはその他のレンタルサーバーをご紹介していきたいと思います。ここでご紹介しているレンタルサーバーは、すべてWordPressがインストール可能なものとなっておりますので、ご安心ください。

いくつかのレンタルサーバーがございますが、様々なデータを比較し、契約の参考にして下さい。

ミニバード



月額使用料 263円〜
初期費用 788円
MySQL 5個
ディスク容量 30GB
1円あたり容量 0.114GB
サーバー搭載メモリ 12GB
無料お試し期間 最大2週間
マルチドメイン 最大50個
サブドメイン 最大1,000個
メールアカウント 最大500個
サポート メール
追加FTP 最大2個
転送量課金 無し

ミニバードは、「あまりお金をかけたくない、だけどWordPressを使ってホームページを作成したい!」という欲張りな方にぴったりのレンタルサーバーです。

データベースが5個までしか使えないので、たくさんのサイトを管理するのは難しいかもしれませんが、月額263円という圧倒的な安さでホームページを運営することができるということは、ありがたいことです。

ファイアバード



月額使用料 525円〜
初期費用 1,050円
MySQL 10個
ディスク容量 50GB
1円あたり容量 0.095GB
サーバー搭載メモリ 12GB
無料お試し期間 最大2週間
マルチドメイン 無制限
サブドメイン 最大3,000個
メールアカウント 最大1,000個
サポート メール
追加FTP 最大5個
転送量課金 無し

ファイアバードは、ミニバードを運営する会社と同じ会社が手がけているレンタルサーバーです。金額もスペックも、ミニバードのほぼ2倍と言ったところでしょうか。この安さでこのディスク容量の大きさは驚きです。

50GBの容量があれば、写真や動画もたくさんアップロードすることができるでしょう。

クローバー



月額使用料 1,575円
初期費用 5,250円
MySQL 50個
ディスク容量 150GB
1円あたり容量 0.095GB
サーバー搭載メモリ 12GB
無料お試し期間 最大2週間
マルチドメイン 無制限
サブドメイン 無制限
メールアカウント 無制限
サポート メール
追加FTP 最大10個
転送量課金 無し
バックアップ RAID1システム

クローバーもミニバードやファイアバードと同じ会社が運営するレンタルサーバーです。上記の2つより、さらに性能がアップしていることが分かります。

クローバーなら、本格的にサイト運営することができるでしょう。バックアップは、常時2つのハードディスクにデータをコピーしておりますので、万が一のときに安心です。

ロリポップ

プラン コロリポ ロリポ チカッパ
月額使用料 105円 263円〜 525円〜
初期費用 1,575円
MySQL 0個 1個 30個
ディスク容量 10GB 60GB 120GB
1円あたり容量 0.095GB 0.228GB 0.229GB
無料お試し期間 最大10日間
マルチドメイン 最大20個 最大50個 最大100個
サブドメイン 最大200個 最大15,000個 最大50,000個
メールアカウント 最大400個 無制限 無制限
サポート メール

(注)コロリポプランは、WordPressに対応しておりませんので、ご注意ください。

なお、ロリポプランとチカッパプランでは、WordPressを利用することができます。ロリポップも格安サーバーであるにも関わらず、ハイスペックなプランを揃えており、オススメのレンタルサーバーということができます。

さくらのレンタルサーバ

プラン スタンダード プレミアム ビジネス ビジネスプロ
月額使用料 416円〜 1,250円〜 2,083円〜 3,750円〜
初期費用 1,000円 5,000円
MySQL 20個 50個 100個 200個
ディスク容量 10GB 40GB 80GB 150GB
1円あたり容量 0.024GB 0.032GB 0.038GB 0.04GB
無料お試し期間 最大2週間
マルチドメイン 最大20個 最大30個 最大40個
メーリングリスト 最大10個 最大20個 最大30個 最大50個
メールアカウント 無制限
サポート メール

さくらのレンタルサーバには、もう1つ「ライト」という最安値プラン(月額125円〜)があるのですが、WordPressに対応していないため、上記の表には掲載しませんでした。

さくらのレンタルサーバは、マルチドメインの数が少ないので、大量のサイトを運営することは難しいかもしれませんが、動作は極めて安定しているようです。

さくらのレンタルサーバを使っている人の評判を聞くと、アクセス数が月間50万PV前後でも安定的に動いてくれているとのことです。

エックスサーバー以外も自己アフィリできます

全てのサーバーで確認を取った訳ではありませんが、エックスサーバー以外も自己アフィリエイトすることで成果報酬を得る事ができるサーバーはあります。

その方法は、エックスサーバーと同様ですので、上述したセルフバックの方法を、他のサーバーで実践してみて下さい。セルフバックの検索欄に、希望するサーバー名を入力し、ヒットしたらセルフバックできるということです。

A8.netにまだ登録していない方は、まずA8.netに登録してから、セルフバックしましょう。ちなみに、成果報酬の金額は、サーバーによって異なります。

web制作Lv.02 CMSを選択する

  • 小
  • 中
  • 大

前のLvで、ホームページのイロハについてご紹介致しましたので、今回はより具体的に技術的な面をご紹介していきたいと思います。

この記事の題名にもある通り、ここではCMSの選択についてご紹介致します。CMSとは、コンテンツ・マネジメント・システムの略で、ホームページを作成する土台となるものです。様々な種類のものがあり、価格も有料のものから無料のものまで各種あります。管理人は「WordPress」というCMSを利用しております。

数あるCMSの中からWordPressを選択したのには、様々な理由があります。理由を全て列挙していたらキリがありませんので、多くの方が共感してくれているであろう理由のみ列挙致します。

  1. 無料である
  2. SEOに有利
  3. 多くの人が利用しているので、ノウハウを記した本やサイトがたくさんある
  4. 携帯電話に対応させることができる
  5. スマートフォンに対応させることができる
  6. その他、必要に応じてプラグインを導入することで、簡単にカスタマイズさせることができる
  7. テンプレートが豊富にある
  8. 自作テンプレートも作れるし、自由にカスタマイズできる
  9. プラグインが豊富にある
  10. サーバーに簡単にインストールすることができる

WordPressなら色々できる

これらの理由により、管理人はWordPressを利用してホームページを作成しております。もちろん当サイトもWordPressを利用して作成しております。さらに、管理人がホームページ作成代行業務として業者様のホームページを作成する場合も、WordPressを使っています。

WordPressはよく「ブログツール」と言われますが、管理人はブログだけにとどまらず、お店のホームページを作成するときにもWordPressを利用しています。固定ページを使ったり、トップページだけデザインを変えたりすることで、WordPressでも立派なホームページを作成することができます。

すなわち、WordPressの使い方を覚えることで、様々なホームページを作成することができるようになるということです。

広告も調節できる

無料ブログでは否応無しに広告が挿入されてしまうのに対し、有料サーバーを利用し、WordPressでブログを構築した場合は、一切広告は挿入されません。100%自分の好きなようにカスタマイズさせることができます。

広告も、自分が好きなものを挿入することができますし、広告を入れたくなければ入れないこともできます。

WordPressは初心者に優しいと言われている

管理人はホームページを初めて作ったとき、WordPressを利用しました。WordPressでのアフィリエイトサイトの作り方という記事に出会い、それをそのまま実践していったのですが、初心者向けだなぁと思った記憶があります。

確かに、初めたての頃は紆余曲折もしましたが、最初のサイトは1ヵ月程度で完成した記憶があります。分からないことがあればググって情報収集し、それを即実践し、納得いかなかったらまた情報収集し…という作業を繰り返すことにより、サイトを完成させることができました。

WordPressに関する情報はかなりたくさん出回っています。そういった意味でも、WordPressは初心者に優しいということができるのではないでしょうか。

WordPressとネットワーク外部性

たくさんの人がWordPressを使っているので、優良書籍や優良サイトがたくさんあります。まさに、ネットワーク外部性が働いていると言えるでしょう。ネットワーク外部性とは、あるものをたくさんの人が利用することにより、それを使っている人全員にメリットが生まれる環境を言います。

例えば、iPhoneユーザーが増えることにより、iPhoneケースの種類も増えたり、アプリも多様化するでしょう。ファックスが世界に1台しかない場合と100万台ある場合を比べてみると分かりやすいかもしれません。

このような環境が、WordPressにも当てはまると言えます。たくさんの人がWordPressを使っていることにより、書籍・サイト・プラグインなどもたくさん生み出されます。いわば、WordPressは今が「旬」なのです。

サーバー・ドメインは有料ですが、WordPressは無料ですし、メリット盛りだくさんなので、CMSはWordPressを選択することをオススメ致します。当サイトでは、今後WordPressでのサイト構築方法をご紹介していきます。

web制作Lv.01 webサイトの可能性

  • 小
  • 中
  • 大

webサイト制作はこれまでのSTEPでご紹介してきた知識の集大成です。自由度は最も高く、技術的にも最も難しいのがwebサイト制作です。

当サイトではサーバーもドメインも有料のものを使用することを提案いたしますので、これまでのような無料サービスのみの利用とは金銭面でも異なります。

一段高いレベルに進もう

webサイトを制作するということは、本格的にインターネットビジネスを始めることにもなり、これまでより一段高いレベルでのビジネスを展開することができるようになります。

ブログやTwitterでは、あらかじめ定められた規約に則って進めていくしかありませんでしたが、webサイト制作の場合は公序良俗に反しない限り、何でもできます。デザインも内容も、自由自在です。センスや経験が必要なのは確かですが、ここでもコツコツ努力を続けていくことで、必ずその努力は実ります。

様々な種類のサイトを運営することができる

webサイトはアイデア次第で、全く別のビジネスを展開することもできます。

例えば、mixiのようなSNSを立ち上げることもできますし、ネットショップを開業することもできます。

メーリングリストサイトを立ち上げることもできますし、アフィリエイトサイトを作成することもできます。

サテライトサイトも作成できる

webサイト制作の技術を身につけることで、本サイトの他にサテライトサイトも作成することができるようになります。

サテライトサイトとは、本サイトのアクセス数を上げるために作成する、本サイトの内容を別の角度から描写した別サイトのことを言います。サテライトサイト訪問者たちを本サイトへ誘導するよう構築し、本サイトのアクセスアップを実現させます。

本サイトもサテライトサイトもしっかりした内容のものを作成することができれば、相乗効果でサイトのアクセス数が伸びる仕組みです。

webサイト制作代行もできる

webサイトの制作に慣れたら、外注業務も承ることができるようになります。個人商店や個人美容室などのwebサイト制作依頼業務は需要が高く、webサイト制作のスキルを身につけることで、そのような業務を個人で展開することもできるようになります。

実際、当サイトの管理人は、複数のwebサイトを制作した知識と経験をもとに、上記のようなwebサイト制作依頼業務を受注・製作しております。

毎月10万円の壁を突破できる

げん玉・Twitter・ブログ・アフィリエイトサイト運営・webサイト制作受注業務の5つを柱にすることができれば、当サイトの目標である「毎月安定的に10万円稼ぐ」というハードルは軽くクリアすることができるでしょう。

毎月10万円の壁をクリアした後は、自分自身にノルマを課し、15万円、20万円と目標金額を引き上げていって下さい。

「作りたくても作れない」と考えている人は多い

これまでお話ししてきたように、ホームページ作成に関する知識と経験を手に入れることは、無限の可能性を秘めています。

ホームページは「作りたくても作れない」という人が大勢いらっしゃいます。そこには、有料サービスを利用しなければならないといった障壁もあるでしょうし、技術的に難しいと考えている人も多いでしょう。

新たに1からwebサイト制作の知識を得ようと決意する人は、少ないように感じます。

しかし、何事も最初は誰でも初心者です。素人です。ですが、弛まぬ努力を続けていくことで、上級者へとステップアップすることができるはずです。

インターネットビジネスは万人に拓かれている

インターネットビジネスは、老若男女問わず、全ての人に拓かれているビジネスであるといえます。学歴・職歴は関係ありません。努力し、成功した人が利益を得る場所です。

このサイトを利用し、勉強し、努力を続けている方は、成功する権利があります。Lv.01から順にここまで進んで来られた方は、努力家でしょう。その努力は必ず報われるはずです。

このサイトでは、ここまで成功へのとっかかりを紹介してきたつもりです。インターネットビジネスについての初歩的な考え方・その実践の方法を紹介してきました。

ホームページ作成カテゴリーについて

ホームページ作成カテゴリーでは、初歩的なホームページの作成方法、アクセスアップの方法などについてご紹介していきたいと思っております。

ぜひこのカテゴリーを利用し、webサイト制作のイロハを身につけて頂きたいと思います。