カテゴリー別アーカイブ: Webサイト

自分だけの ブログ・サイトの作り方

皆さん、自分だけの ブログ(blog)・サイト を持ちたいと思ったことはありませんか? 私が一番思ったのは、某アメブロで自分のブログを立ち上げた時に、自分の ブログ に女性用下着の広告ばかりが表示された時です。やはり、自分のイメージのデザインのホームページに、自分の好みの広告が載った、自分の ブログ・サイトを持ちたいですよね。

以下の ブログ・サイトの作り方 の手順に従って構築すれば、自分だけのアドレス(ドメイン名)を持った、自分が自由にデザインできる ブログ サイトを立ち上げることができます!

クラウド(レンタル・サーバー)代が月1000円くらいかかりますが、それくらいで自分のサイトが持てれば安いものですよね!?

サイトの作り方1) -独自ドメイン取得 編

レンタルサーバー で サーバー を申し込むと、今見ていただいているこのサイトのように、 http://xxxx.xsrv.jp/ という自分で決めた名前(xxxx)を含む …

サイトの作り方2) -エックスサーバー設定 編

【レンタルサーバーお試しの申し込み方法】 エックスサーバー(Xserver) に上の イメージ をクリックしてアクセスすると、以下のような画面が表示されます。 …

サイトの作り方3) -WordPressでブログ作り 編

【WordPressのコンテンツ作成】 WordPress で ブログ作り の手順を以下に共有いたします。  …

サイトの作り方3.1) -WordPress テンプレート Twenty Fifteen への移行編

このサイトを、WordPress v4.1 にアップグレードし、v4.0 で使っていたテンプレート Twenty …

サイトの作り方4) -WordPressおすすめプラグイン 編

  【WordPress プラグイン活用とは】 WordPressプラグイン とは、WordPress 本体ではできない追加の便利機能で、容易に導入・活用することができます。例えば WordPress本体では、 …

サイトの作り方5) -アフィリエイトで稼ぐ 最初の一歩 編

アフィリエイト  を活用すると、自分の ホームページ に貼り付けた提携広告を閲覧者が クリック することで …

サイトの作り方5.1) -アフィリエイトの広告例

アフィリエイトの広告例 Google AdSense: …

サイトの作り方6) -Googleと情報共有して SEO対策 編

Webサイト を作ったからには、たくさんの人に見ていただきたいわけで、そのためには Google の検索結果の上位にリストされたいというのは皆同じですよね。そのためには Googleさん と 情報共有 …

サイトの作り方6) -Googleと情報共有して SEO対策 編

Webサイト を作ったからには、たくさんの人に見ていただきたいわけで、そのためには Google の検索結果の上位にリストされたいというのは皆同じですよね。そのためには Googleさん と 情報共有 することが大切だと思っています。つまり、こちらの情報を提供して、Google からもこちらをどう見ているか情報を提供してもらうことですね。それを気長に続けることが、検索エンジン最適化 SEO: Search Engine Optimization につながると思います。

そうはいえ、最低限やるべき事はありまして、おすすめはWordPress で何らかの SEO プラグイン を利用することです。WordPress も SEO対策 は良くできていると思いますが、さらに SEOプラグイン を使うといろいろ教えてくれます。私は「Yoast WordPress SEO」を使っています。このような基本的な対策を行うことで、以下の基本が分かってきます。

  • まずそのページがどのような用語で検索されるかを想定
  • その用語が、タイトルやURL、本文に多く出てくると検索されやすくなる
  • 従ってURLは文字のパーマリンクで、検索して欲しい文字を入れた方が良い
  • タイトルの文字数は少ない方が良い。多いと1単語の重みが減り、検索結果も尻切れになってしまう
  • Googleに自分のサイトマップを登録し、自分のサイトを検索してもらい易くする
  • 他のサイトのページからリンクしてもらう

いずれも重要ですが、おそらく一番努力すべきは、最後の他からリンクをしてもらうことです。ただこれは、お金を払って多数リンクしてもらうようなバレバレな事をすると逆効果のようです。

もう一つ自分でやるべき事は、Googleへのサイトマップの登録です。Googleに自分のサイトの最新状況をお知らせすることで、検索エンジンが見回る(クロールする)際に最新のページも認識してくれます。

私はWordPressの「Yoast WordPress SEOプラグイン」を導入しているので、その[SEO][XMLサイトマップ]メニューから入り、まず「XML サイトマップの機能を有効にするには、このチェックボックスをオンにします。」のチェックボックスをチェックしました。その下の[XMLサイトマップ]のボタンを押すと、作成されたサイトマップ(とその目次のインデックス)を見ることができます。要するに、このWebサイトにどんなページが存在するかのリストです。最後の「変更を保存」ボタンで保存することでページが追加されれば自動的にサイトマップをGoogleやYahooに通知することができます。

次はそのサイトマップをGoogleに登録します。
https://www.google.com/webmasters/tools/home?hl=ja からGoogle ウェブマスター・ツールに自分のGoogle IDでログインしてください。[サイトを追加]などで自分のドメイン名(URL・・・私は touchstone.jp )を入力すると、自分のサイトである事の確認に入ります。「メタタグ(HTMLタグ)を使用して確認できませんでした」 といったメッセージが表示されます。[おすすめの方法]でHTMLファイルを送付する方法もありますが、私は[別の方法]タブの[HTMLタグ]で選びました。すると、以下のようにメタタグ(HTMLタグ)が画面に表示されるため、その部分をコピーして、自分のサイトのホームページの<head>セクション内に貼り付けます。

webmaster metatag

具体的には、Yoast WordPress SEOを使っている場合は、[SEO][ダッシュボード]のGoogleウェブマスターツールに指定します。もしくは、[外観][テーマの編集]にある、ヘッダー(header.php)の、</header> の直前にコピーし、[ファイルを更新]しても可能です。更新後、ウェブマスターのページに戻り、[確認]ボタンを押して確認できれば、仕込みは完了です。複数のドメインを持っている場合は、Google ウェブマスター・ツールの[ホーム]でサイトを追加できます。

ウェブマスター・ツールの、それぞれのサイトの[サイトのダッシュボード]にある[クロール]の[サイトマップ]で、サイトマップのGoogleによる解析を確認できます。サイトマップがまだ追加されていない場合は、右上の[サイトマップの追加/テスト] ボタンで追加します。ボタンを押すと、URLを入力するボックスが表示されますので、そこでサイトマップやサイトマップ・インデックスのXML名を入力してください。私の場合、Yoast WordPress SEOで作成したサイトマップ・インデックス、「sitemap_index.xml」を入力しサイトマップをテストしました。同様に[サイトマップを送信]するとそのサイトマップがGoogleに送信され、画面をリフレッシュすると。サイトマップがリストされるようになります。これでGoogleに自分のサイトの現在の内容を共有することができました。

webmaster sitemap

以下のように、[クロール]の[クロールの統計情報]でどの程度のページがGoogleクロールでチェックされているか、わかります。

webmaster analytic

ウェブマスター・ツールの[検索トラフィック]の[検索クエリ]で、どのページが何度検索で表示され、その中で何回クリックされたかを確認することができます。これで自分のサイトがどのように検索され、どのようにアクセスされているか、一目瞭然ですね。このサイトは、「oneshopmobile」 に関する検索が一番多かったです。皆さん、oneshopmobile でネット注文するとどうなりそうか、人の経験が知りたいようです。

webmaster_query

また、Googleアナリティックスを使うことで自分のサイトの分析をしてもらうこともできます。
http://www.google.com/intl/ja/analytics/premium/ のURLに自分のGoogle IDでログインすることで簡単に利用可能です。ウェブマスターと同様に、各ページのヘッダーにメタタグを挿入することで、サイトへのユーザーのアクセス状況などを確認することができます。[レポート]で以下のような利用状況を見ることができます。

google_analytics_report

一連の流れをやっていて思ったのは、要するにGoogleの検索エンジンで上位に表示してもらうということは、Googleと仲良くしてもらえるようこちらも情報提供するということですね!


サイトの作り方5.1) -アフィリエイトの広告例

アフィリエイトの広告例

Google AdSense:
上のタイトル下 (320×50)
左サイドバー上 横長カスタム(200×60)
左サイドバー下 レスポンシブ(動的サイズ)
本文下 (336×280)

Amazon広告ランキング (パソコン・周辺機器)固定タイプ (468×60)

Amazon広告ランキング (家電・カメラ)可変タイプ (240×100の2×2)

Amazon広告ランキング (本)可変タイプ (240×100の1×2)

Amazon広告ランキング (洋書)可変タイプ (240×100の1×2)

以下は、楽天モーション・ウィジット(A8より)

総合・画像タイプ(468×60):

総合・画像タイプ(468×160):

商品ランキング 総合(468×60):

楽天ゴルフ(234×60)

楽天カード(234×60)

楽天トラベル

楽天トラベル(468×60)

るるぶトラベル(224×33)

JTB(468×60)

一休(468×60)

エクスペディア(468×60)

ShutterShock(728×90)

楽天ペット専用ホテル


楽天トラベル(234×60)


エクスペディア(234×60)


るるぶ(234×60)


JTB(234×60)


楽天ペットホテル(縦長)


楽天ゴルフ


楽天カード


楽天ショッピング(234×60)


はりっぱ旅行(1×5)



エックスサーバー 234×60


A8(234×60)


A8(190×80)


エックスサーバー(200×200)


画像素材 250×250


サイトの作り方5) -アフィリエイトで稼ぐ 最初の一歩 編

 

アフィリエイト  を活用すると、自分の ホームページ に貼り付けた提携広告を閲覧者が クリック することで 報酬 がもらえます。私はあまり自分のWebサイト が広告でコテコテになるのは好まないですが、サイトの運営費を リカバリ するくらいは 稼ぐ ことができるかなと思って始めました。 アフィリエイト で稼ぐ ための最初の一歩をご紹介します。

<=自分Webサイトの作り方、全体の流れはこちらから

<=4) WordPressプラグイン活用まではこちら

【Google AdSenseの活用】

まず最初に提携すべきは Google です。さすが検索技術の会社で、こちらのWebサイトの内容を解析し、その内容に合った旬な広告をダイナミック に表示してくれる コンテンツ・マッチ型 で、クリックだけでも報酬が得られます。

まずは10記事くらいあらかじめ作成しておいて、まだ他のアフィリエイト を貼り付けない状態で(もしくは広告をオフにした状態で)、Google AdSenseの[今すぐ開始]から始めて、審査を申し込みます。その際、Googleアカウントが必要になります。(既存のもので大丈夫)

広告表示サイトとして自分のサイト(私は http://touchstone.jp/) を入力します。一週間ほど審査がかかるという情報もありましたが、私は即日Googleメールに「承認」と返事が来ました。

早速アドセンスのホームのページで利用規約を読んで、広告を貼り付けました。振込み金額はGoogleが独自に決めるとの事で、どれくらいのモノかはよくわかりませんでした。自分で自分のページのクリックをしてはいけないと、何度も注意書きがあるので、注意しないといけないですね。

広告は[広告の設定]メニューで、[+新しい広告ユニット]で広告のサイズやスタイルを指定することで作成できます。適当に指定しても作れるので、いくつか作ってみて貼り付けてみるとよいでしょう。私はスタイルで自分のホームページのカラーと合わせた色を作成しました。

私はGoogle AdSenseはどのページにも表示したかったので、WordPressの[外観][テーマ編集]で、サイドバー・テンプレートのsidebar.php の sidebar-1 の前に縦長のバナーを挿入し、投稿ページテンプレートの content.php の </div><!– .entry-content –> の直前に四角いバナーを挿入しました。

ちなみに、WordPressのGoogle AdSense用プラグインである、Google Publisher Plugin (Googleサイト運営者向けプラグイン)をインストールしてみましたが、挿入場所やサイズを自分の思うようには対応できないようで、結局使っていません。

広告をコンテンツに貼り付けて数時間たったら、Googleの分析が完了したのか、広告が表示されるようになりました。(それまでは黄色い四角が表示されてた)

また、サブドメインを追加したため、Google AdSenseのホーム画面のメニューから[設定][アカウント][サイト管理]のサイト追加でサブドメインを追加し、広告対象サイトに簡単に追加できました。

【アフィリエイト仲介のA8活用】

次は、アフィリエイト仲介大手のA8に入会しました。A8はいろいろな会社のアフィリエイトをA8経由で利用することができるようになります。楽天やamazonも含め、かなり幅広い会社と楽に提携できるため、便利です。 http://www.a8.net/ にて入会しました。A8の口座が三井住友銀行なので、三井住友銀行であれば振込み手数料は少なくてすみそうです。

Googleは自分でクリックしてはいけないのですが、A8は自分で広告を活用して購入するセルフバックをむしろ推進しています。例えば自分のカードを自分のA8の広告バナーから購入すると、自分にキャッシュバックが入ります。どうせカードを作る必要があるなら、A8経由で作ると数万のキャッシュバックがあったりするのでお得ですね。 A8の中でお勧めなのは、[ツール]メニューの[楽天ツール]にある、「楽天モーションウィジェット」です。これはWebページを開いた人が、過去に自分が楽天で参照した商品を優先して表示してくれる広告で、「あ、そういえばこの商品気になってたんだ・・・」とクリックする確率は高いと思われます。こういった広告のテクニック(アドテク)、進んでいますねー。 それともう一つ、この touchstone.jp の大きなコンセプトの一つは日本の良いスポットを海外に英語で紹介することなので、海外の人が英語で日本の商品を購入できることが必要です。その目的に合致するのが、Rakuten Global Market。海外の人が英語でShoppingして、日本から輸入するすることができ素晴らしいサイトです。

【海外Affiliateの活用】

私は英語の海外の人向けサイトも持っているので、英語のAffiliateも活用しています。海外のAffiliateは意外と審査が厳しいようで、なかなか承認がもらえませんでした。(.jp だからですかね?) その中で、海外のAmazon.comはすぐに承認がもらえましたし、商品バナーのパターンも豊富なので活用しています。 http://www.amazon.com/ の[Become an Affiliate]から申し込み可能です。いろいろ英語で入力が必要ですが、アメリカ在住でなければ税金の問題は基本的に関係ありませんので、Tax関連は関係ないと入力いただければ大丈夫です。支払い方法はなかなか難しい問題ですが、私はチェックの送付を選んでいます。

<=自分Webサイトの作り方全体に戻る




サイトの作り方4) -WordPressおすすめプラグイン 編

 

【WordPress プラグイン活用とは】

WordPressプラグイン とは、WordPress 本体ではできない追加の便利機能で、容易に導入・活用することができます。例えば WordPress本体では、いつどのくらいどの ページにアクセスされたかといった情報は分かりませんが、 プラグイン を導入することで容易に確認することができました。(上のフォト参照)

<=自分 Webサイトの作り方、全体の流れ はこちらから

<=3) WordPress で ブログ作成 まではこちら

基本的にダウンロードできる プラグイン は無料ですが、一部は 「基本機能」 だけとなっており、 「拡張機能」 を利用するためには有料となる場合もあります。私は有料のプラグインを使ったこと無いので・・・ここで紹介するプラグインは全て無償のものです!

WordPress のダッシュボードの左メニューの[プラグイン]の中の[新規追加]をクリックすることで、様々な追加プラグインを検索し導入することが可能になります。WordPressにはたくさんプラグインがあり過ぎて最初はどれを使ったら良いか皆目検討がつかないと思います。解説も英語ですしね・・。以下にいくつか WordPressおすすめプラグイン を紹介しますので、まずこちらを試してみてください。全て Twenty-Fourteen でちゃんと動いてます。

【WordPressおすすめプラグイン】

 Count Per Day
これは絶対必須!と思っているビュー・カウンターのプラグインです。日々どのページがどれくらいアクセスされているか確認できます。[新規追加]で「Counter」で検索してからインストールし、有効化します。以下は私の touchstone.jp の例ですが、上のグラフや、左の列でいつ何人がサイトを訪れ(visitors)、何ページ見られたか(Reads)一目瞭然です。おまけに、中央二列目のように、どこの国からアクセスして読まれたかも国旗で表示され、分かってしまいます。右半分では、どのページがいつどれくらい閲覧されているか分かるので、どういったページを公開すれば読んでもらえるか対策が立てられますね。こちらは是非、まず一発目に導入ください。

count-per-day

Share Button AddToAny:
Admin系のプラグインで、導入すると投稿の下に、FacebookやTwitterへのLike/+1ボタンが表示できます。せっかくの投稿は、TwitterやGoogle+などで皆さんに共有いただきたいですよね。公開当初に是非入れたい機能です。私は自分のサイトをFacebookなどで人に紹介することが多いので、自分のためにも重宝しています。

Content Views (Query posts by category… and display posts on page in grid layout without coding – Content Views):
私はどのWordPressサイトも、最初のトップページでこちらを使っています。以下の画面例の左半分で、各投稿の上に表示しているアイキャッチ画像の一部のサムネイルと、タイトルと、数行の記事が自動的に表示されます。私は、投稿のタグに「hottopic」と追加してある投稿がここにリストされるように設定しています。トップページで最新記事のいくつかを紹介したい時に超便利です。

content-views

Redirect:
私は二度ほどサイトの整理を行い、元のドメインの記事を新しいドメインに移行しましたがその際にとても活躍したプラグインです。こちらを導入して、移行元の投稿に、新しい移行先の投稿のURL(アドレス)を指定しておけば、検索エンジンなどで移行元の投稿がひっかかってアクセスされても、自動的に新しい移行先の投稿の方に転送(リダイレクト)されます。

このあたりが、私がWordPressサイトを構築する際に必ず導入するプラグインです。他にもたくさんプラグインありますので、いろいろトライしてください!

=> 5) アフィリエイトで稼ぐ最初の一歩




 

 

サイトの作り方3) -WordPressでブログ作り 編

<=WordPress導入まではこちら

【WordPressのコンテンツ作成】

WordPress で ブログ作り の手順を以下に共有いたします。
WordPress にログインすると、一番上に黒いエリアで 管理者メニューが表示されますので、そこから [ダッシュボード] に入ってください。以下のような画面が表示され、そこに WordPress の管理者用画面が集約されています。ここでは Twenty-Fourteen テンプレートの例で示します。

wordpress

上のように上部メニューの[+新規]で[固定ページ]や[投稿]をクリックするか、左の[投稿]や[固定ページ]メニューから[新規追加]をクリックすると自分のページが追加できます。真ん中の広くて白い文字の領域にタイプして、右の[公開]ボタンを押すだけ!簡単に自分の記事を公開できます。

【固定ページと投稿ページの違いと作り方】

「固定ページ (Page)」と「投稿 (Post)」の違いは最初ちょっと分かりにくいかもしれません。「投稿」は、ブログのようにどんどん追加していく記事と思ってください。次々に番号が振られ、蓄積されているイメージです。以下の私のホームページでいえば、左に縦に黒い「サイドバー」に、その投稿記事の一覧がリストされます。私は自分の写真が売りなので、代表的な投稿記事を、上部や真ん中下部にある写真付きで並べています。(表示の仕方は後述)

touchstone-eye

「固定ページ」は、こういった日々蓄積するブログの投稿記事ではなく、まさに上の、全体をまとめた最初の1ページのトップページや、右上のメニューにある、「Concept」ページのようにこのサイトのコンセプト概要をまとめたページに活用します。そういったこのサイトで固定的に利用されるページが、「固定ページ」です。ただ、基本的な書き方や公開の仕方は「投稿」と変わりありません。扱い方が違うだけですね。

[固定ページ]メニューで固定ページを新規追加し、それをダッシュボードの[設定][表示設定]メニューのフロントページの指定でその固定ページを指定することで、このURLの最初に表示されるTopPageとして登録ができます。(投稿ページは-選択-のままでよい)

画像はいずれの場合も上の方にある[メディアを追加]ボタンで、追加したい位置に追加しますが、各ページの上部にある大画像は、右下の[アイキャッチ画像を設定]で設定してください。

 

【WordPressの見た目の変更について】

ダッシュボードの[外観]メニューで、サイト上部やサイドバーなどへの表示を変更することができます。最初広く公開する前にいろいろと変更してみると良いと思います。

下の[おすすめコンテンツ]では、サイト上部に投稿記事のイメージ紹介を追加することができます。上の画面例では、ラスベガス、ローマ、シンガポールの記事の画像とタイトルが横並びで紹介されています。この[レイアウト]は[グリッド]です。[スライダー]にすると、一つの大きな画像が表示され、クリックすると次々画像が切り替わります。[タグ名]を「featured」にしておくと、各投稿の「タグ」のところに「featured」と追加した記事が紹介されます。

[サイトタイトルとキャッチフレーズ]では、サイトの左上に表示される文字(上の画面の例では、「touchstone.jp」)や、サイトタイトルの右に表示されるキャッチフレーズを変更できます。

[ウィジェット]では、左の縦のサイドバーに表示する項目を設定できます。上の画面の例では、サイト内の「検索」と、「最近の投稿」が表示されています。最近の投稿は件数設定を大きくしておけば、多くのこれまでの投稿をリストすることができます。このサイドバーはスマホなどの横幅が小さな画面ではメインの記事の下に表示されます。

[コンテンツサイドバー]はメイン記事の右に縦に表示される部分です。アフィリエイトの宣伝バナーとかを置くには良い場所で、上の画面例では右下の「ローマ観光」という宣伝バナーが表示されています。

[エディター]メニューの「テーマの編集」で、スタイルシートを直接変更することもできますが、上級者向けですね。通常WordPressで作ると白い画面になりますが、上の画面例では「style.css」の「color:」や「background-color:」の指定を変更することで色を変えています。(000000が黒で、ffffffが白。ff0000は赤で、00ff00は緑、0000ffは青になります)

【WordPressの設定変更】

ダッシュボードの[設定][メディア設定]は表示されるイメージのサイズが決まるので、何通りかやってみることをお勧めします。私は中サイズを、480 x 300にセットしています。(縦が大きいと記事とのバランスが悪くなるため)
私はイメージのサイズは全体的に、上のアイキャッチ画像は1038×576、通常の記事の途中に挿入する画像は960×540など、サイズを決めてアップロードして揃えるようにしています。

[設定][パーマリンク設定]は、[投稿名]にして、必ず名前を編集するようにしています。数字だと分かりにくくなってしまうし、URLが表示された時に名前の方が内容が分かりやすいかと思います。

【WordPressの設定についての注意】

WordPress導入後に、サイトのメールに「モデレートしてください」というメッセージがたくさん届くようになりました。よくあるようです。自分の投稿に、参照したページへリンクを貼るとピンバックが送信されるためとのことです。WordPressの[設定][ディスカッション設定]の、[この投稿に含まれる全てのリンクへの通知を試みる]をオフにすることで回避できます。

その[設定][ディスカッション設定]は注意して設定するようにしてくだい。私は[新しい投稿へのコメントを許可する]は、オフにしてコメント不可にしています。(ディスカッションしたいサイトではないため)

【WordPressをサブドメインに導入】

画面例の touchstone.jp は、最初英語と日本語が混在していましたが、GoogleのAdSenseなど広告を表示するためには一つのサイトでは不便であることが分かったので、サブドメインを使って分離することにしました。

エックスサーバー(Xserver)のサーバー・パネルのトップの[サブドメイン設定]で[サブドメインの追加設定]をし、ドメイン(touchstone.jp)の前にサブドメイン名(何でも良い)を入力すればあっけなくサブドメイン作成が完了します。当然無料です! 再びエックスサーバーのサーバー・パネルのトップで、左下の設定対象ドメインは変更せず、[自動インストール]の[プログラムのインストール]で[WordPress日本語版]の[インストール設定]を表示。[インストールURL]の部分でサブドメイン付きのURLを選択し[インストール(確認)]を実行することで、サブドメインに新しいWordPressの導入が完了します。

上級者は、最初にドメインに導入したWordPressに対しマルチ・サイトの設定をすることで、一つのWordPressで複数サブドメインを実現することもできるのですが、かえって複雑になるのであまりお勧めできません。

なお、新しいWordPress v4.1から提供されるテンプレート、Twenty Fifteenに関しては、以下の記事を参考にしてください。

=>WordPress テンプレート Twenty Fifteen への移行

次は、WordPressに用意されている様々なプラグインの中から、便利な機能をご紹介します。

=> 4) WordPressの便利なプラグインの活用

その次はいよいよアフィリエイトにチャレンジしますが、最初に利用するGoogle AdSenseのためには、まずは10ページくらいは作成しておいた方が良いので、がんばって投稿してください!

=> 5) アフィリエイトで稼ぐ第一歩

<=自分Webサイトの作り方、全体の流れはこちらから



 

サイトの作り方2) -エックスサーバー設定 編

<=自分Webサイトの作り方、全体の流れはこちらから

【レンタルサーバーお試しの申し込み方法】

エックスサーバー(Xserver) に上の イメージ をクリックしてアクセスすると、以下のような画面が表示されます。この画面の右の 「サーバー無料お試し 最大10日間」 のオレンジの 「お申し込み」 ボタンか、上のメニューの [お申し込み] メニューをクリックして レンタルサーバー を申し込むことができます。 とりあえず申し込んで無料で使ってみて 、イケそうだったらお金を振り込んで継続というのも可能なので、気軽に始められました。

xserver

[お申し込みフォーム] で [新規お申し込み] で [利用規約] に合意すると、[新規サーバーの申し込み] で サーバーID を入力します。この サーバーIDが  Xserver 上のドメイン名になります。検索して既に登録されていないか、チェックしてください。こちらはこちらで指定しておいて、 独自ドメインを取得した後に独自ドメインのサーバーも(マルチドメイン無制限 のため追加料金無しで)立ち上げることが可能です。

[お申し込み]ボタン を押したら次に メールアドレス等自分の情報を入力してください。一番下に X10、X20、X30 といったプランの選択があります。最初の方は、一番安いセットの X10 を選択されると良いでしょう。3ヶ月で5000円ちょっとのプランですが、後で期間を追加することができ、その際に長期間契約しても良いと思えば X30 などに切り替えると良いと思います。

エックスサーバーでレンタルサーバを申し込んだら、とりあえず無料ですぐに使えるようになります。10日試行期間があり、その間に振り込めば正式契約ということですね。


【レンタルサーバーの使い方】

申し込んだ後に来るメールを参考に、メールアドレスか会員IDでログインすると、[エックスサーバー・インフォパネル]が表示されます。エックスサーバー設定 は、こちらで実施します。下の自分の契約情報の右にある、[サーバーパネル]の[ログイン]でサーバーパネルに入ってください。以下の画面が表示されます。私は契約の前にWordPressを立ち上げてみたりいろいろと試してみました。

xserver-panel

【WordPress導入】

WordPressの導入は、上の画面の[自動インストール]で簡単に導入できます。「MySQL」も一緒に導入できます。いずれも無料です。(一度導入して構築した後に再度導入すると、中身のコンテンツが全て削除されてマッサラになるので、ご注意ください。最初からやり直したい場合には有効です)

[プログラムのインストール]タブで、[WordPress日本語版]の[インストール設定]をクリックしてください。インストールURLの右側は、ブランクでも構いません。[自動でデータベースを生成する]を選択し、データベース(MySQL)も一緒に導入します。最後に[インストール(確認)]をクリックすると導入されます。

設定中に自分でIDやパスワードを指定したり、自動的にパスワードが割り振られたりしますので、それだけメモしておいてください。自分で指定したIDでWordPressにログインして様々な設定を行うことになります。

【レンタルサーバー料金の支払い】

期限(10日以内とか)までに、お金を支払わないと使えなくなってしまいます。最初の[エックスサーバー・インフォパネル]の左のメニューの[料金のお支払い]から、サーバー契約のところで該当契約をチェックしてから[お支払い方法を選択する]をクリックしてください。好きな決済方法が選べますが、私は[コンビニ決済]にしました。画面のバーコードを印刷してコンビニに持っていってお金を払うことができます。
カード番号を入力する不安も無いし、コンビニで料金支払ってから数十分でサーバーが使えるようになったと連絡がきてビックリしました。

決済選択

【独自ドメインの設定】

独自ドメインを取得していたら、右上の[ドメイン設定]から[ドメインの追加設定]でそのドメインを追加してください。その前の[ドメインの一覧]に表示されるようになり、www有りと無しと両方ですぐにWebサイトにアクセス可能になります。簡単ですね!
ドメインを追加したら、イメージとしては一つのレンタルサーバーのコンピューターの中にもう一つ新しい仮想サーバー領域が立ち上がるイメージになります。ですので、WordPressなども、別のドメインですともう一度新しくそのドメイン用のWordPressを導入して使う形になりますので、導入してください。WordPressの管理も別々になります。(一つのWordPressで複数のサイトを運用することはできますが、あまり初心者にはお勧めできません)

[サーバーパネル]はドメインごとに設定になるため、サーバーの設定をする場合には、必ず[サーバーパネル]の左下の[設定対象ドメイン]で、xxxx.xsrv.jp から自分のドメイン名に切り替えるなどしてから、設定してください。(これ、忘れがちです)

=> 3) WordPressでブログの作り方


 

サイトの作り方1) -独自ドメイン取得 編

<=自分Webサイトの作り方、全体の流れはこちらから

レンタルサーバー で サーバー を申し込むと、今見ていただいているこのサイトのように、 http://xxxx.xsrv.jp/ という自分で決めた名前(xxxx)を含む ドメイン名(URL) でサイトを立ち上げることができます。が、やはりどうせ自分だけのWebサイトを立ち上げるのであれば、”xsrv”の入ってない 自分だけのドメイン名 で立ち上げたいですよね。それが独自ドメイン名です。私は、 touchstone.jp という自分のドメイン名を取得して以下のサイトを立ち上げています。

touchstone-eye

ドメイン名はWebサイトの顔ですので、サイトの中身を端的に表した、分かりやすい良い名前にしたいですよね。志は高く、次のGoogleやYahooになった時のことを考えないと・・。

私は以下の 「エックスサーバー」 でドメイン名取得しましたが、 「お名前.com」 なども取得可能です。

いずれもだいたい以下のような画面でまず自分の思う名前を入れてみて、その後ろに付けたい 「.com」 や 「.jp」 をチェックしてみて検索します。

domain-name

Webブラウザで「xxx.com」とか入力してみてサイトが見つからなかった場合でも、「取得できません」と表示される場合があるので注意してください。先に誰かが取得していても、使ってない場合が多いです。誰も使われていないドメイン名は、定期的に売りに出されますのでそれを待つのも手ですが、待てない人はいろいろ入力してみてください。

もう一つ注意すべき点は、.comや .jpなど、最後の拡張子によって値段や手続きが異なる点です。特に、.co.jp や、.ne.jp は、企業であることの証明や個人の印鑑証明が必要になるなど手続きが必要になります。また、総じて、.comよりも .jpの方が高いといった傾向があります。エックスサーバーでは、.jpも、.comや.netに比べたらちょっと高いのですが(.jpは5千円ちょっと)、.comは良さそうな名称は既にほとんどリザーブされているため、取るのは難しいです。

お名前.com で取得したドメイン名を、エックスサーバーで使うことはできますが、少し手順が必要になります。

=> 2) レンタルサーバーのエックスサーバー設定編は、こちら

 

自分 Webサイトの作り方 -初心者向けおすすめ

私は以前から 自分のWebサイト を持つ事に憧れていましたが、ついに自分の ブログ の Webサイト を立ち上げました。その際いろいろと経験しましたので、同様の事を考えている 初心者 の方のために  Webサイトの作り方 の全体の流れを共有いたします。

私は元々 アメブロ (アメーバブログ) に自分の ブログ を持っており、海外や国内の旅行に関するブログを書きためていました。その自分のブログのアクセスが、一日数十件とかになってきたので、「これは自分のサイトを持って アフィリエイト もやっていけるかも!」と思ってWebサイト立ち上げを決心しました。いきなり自分のサイトを立ち上げても中身の コンテンツ が無いと寂しいので、何かしらのネタがある状態で始めたほうが良いと思います。
=>その背景やきっかけは、こちらに詳しく掲載しています。

➡︎プログラムも入れたい場合はこちらを参照

【そもそも何が必要なのか?】

自分の Webサイトを立ち上げるには、そのサイトを稼動させるコンピューターであるサーバーと、ホームページやブログを管理するためのソフトウェアが必要になります。が、普通自分の家にサーバーを置いてずっと電源入れて稼動させて管理するのは大変ですよね。そこで、いわゆるクラウド的な 「レンタル・サーバー」 を借りて、設置や運用を人にまかせてしまうことができます。

また、 ホームページ を自分で一から作るには、 html というタグ言語での作り方をマスターしないといけないため時間がかかります。ブログ作成ソフトとも言える 「コンテンツ管理ソフト(CMS)」 を使えば、普通にブログが作れる人であれば自分のWebサイトのページ(コンテンツ)を作成することができます。

【コンテンツ管理ソフト WordPressとは?】

まず重要なのがそのコンテンツ管理ソフトですが、これは圧倒的にWordPressをおすすめします!私が立ち上げているWebサイトは、touchstone.jp というサイトですが、以下のようなサイトとコンテンツが容易に構築できます。

touchstone-eye

WordPressは、多数の写真やWebページを分かりやすく、効率的に管理できます。例えば、[投稿]を新規追加すると、文字を入力するエディターがWebブラウザ上に表示され、そこに文字を入力して[公開]ボタンを押すと、すぐに公開されます(以下の画面イメージ)。写真を挿入したければ、[メディアを追加]ボタンを押してそこに写真(.jpgなど)をドラッグ&ドロップすると、挿入することができます。しかもWordPressはオープンソースなので、「無料」です!世界中の人がWordPressにどんどん機能を追加してバージョンアップしているため、本当に便利なソフトに仕上がっています。

wordpress

特にWordPressで気に入ったのは、既に多くの無料テンプレートが用意されており、それを活用し変更することで自分の好きなスタイルのサイトが構築できる点です。今使っている2014年版のTwenty-Fourteenというテンプレートは、以下のようにスマートフォンどのモバイル端末等の画面の縦長や横広のサイズに合わせて動的に最適な表示にしてくれるので、スマホでも見て欲しい場合は最適です。

touchstone-mobile

 

【レンタルサーバーの選び方】

私はまずWordPressを使うことを決めて、次にWordPressを導入しやすいレンタル・サーバーを選びました。それが、エックスサーバー(Xserver)です。WordPressの情報サイトに、WordPressが利用可能なレンタルサーバー情報があり、この中から選びました。

ネット上の様々な情報を見てみると、この中でもロリポップやさくらが安価でポピュラーなことが分かりました。が、これらはいずれもWordPressの導入マニュアルを読まないといけないとか、データベースのMySQLも必要で導入して設定が必要とか、「初心者にはちょっと面倒そう」(だから安いんでしょう・・)。見ると、エックスサーバーは、WordPress導入マニュアルが無く、「自動インストール機能あり」。しかもデータベースのMySQLも一緒に自動導入してくれるとのこと。そこそこ安いし、人気もありそうで、何といっても楽そうなのでそのエックスサーバー(以下)にしました。

【エックスサーバーの試し方】

上のイメージをクリックしてエックスサーバーにアクセスすると、以下のような画面が表示されます。この画面の右の「サーバー無料お試し 最大10日間」のオレンジの「お申し込み」ボタンか、上のメニューの[お申し込み]メニューをクリックして申し込むことができます。とりあえず申し込んで無料で使ってみて、イケそうだったらお金を振り込んで継続というのも可能なので、気軽に始められました。

xserver

 

ここでそのまま申し込むと、この今見ていただいているサイトのように、http://xxxx.xsrv.jp/ というドメイン名(URL)でサイトを立ち上げることができます。
が、やはりどうせ自分だけのWebサイトを立ち上げるのであれば、”xsrv”の入ってない自分だけのドメイン名で立ち上げたいですよね。エックスサーバーのレンタルサーバー申し込みの先でも後でもよいのですが、[お申し込み]メニューの[ドメイン検索]で申し込めるドメイン名を検索できます。ここで私は touchstone.jp を見つけてGETしました!


【自分 Webサイトの作り方 の詳細手順】

ドメイン名の取得や設定の仕方や、エックスサーバーの申し込みの仕方、その後のWordPressサイトの作り方は、以下の手順で読んでください。

1) ドメイン名の取得と注意点について

2) エックスサーバーの申し込み方と設定方法

3) WordPressでブログの作り方

3.1) WordPressテンプレート Twenty Fifteenへの移行

4) WordPressのプラグイン活用

5) アフィリエイトの提携の仕方

6) Googleと情報共有してSEO対策

7) IBM Bluemixの環境構築と開発の仕方

それでは皆さん、自分だけのWebサイト作り、Enjoyしてください!