このサイトのWordPressテンプレートを Twenty Sixteenへ移行してみました

このサイトを WordPress v4.2.2 にアップグレードし、WordPressテンプレートを Twenty Fifteenから、Twenty Sixteen (2016) テンプレートに移行。その内容を以下に共有します。移行直前までのこのサイトのTwenty Fifteenでの通常外観は以下の通り。

TwentyFifteen1

スマホなどの細長画面の場合は、以下の通りでした。

TwentyFifteen2

WordPress 4.2.2では、Twenty Sixteenは使えますが、外観のテンプレートのところにはそのままでは表示されないようです。そこで、[外観] [テーマ]の以下の、[+ 新しいテーマを追加] をクリック。

WordPress Thema

するとTwenty Sixteenが表示されますので、クリックしてインストールします。すると、以下のようにダッシュボードの [外観] [テーマ] に、Twenty Sixteenが表示されるようになるため、こちらを [有効化] して切り替えます。

TwentySixteenThema

すると以下のように、Twenty Sixteen に切り替わりました!Twenty Fifteenの良かったシンプルを受け継ぎつつ、右側のコンテンツ・サイドバーが復活しました。(Twenty Forteenにはあった) これは、バナーや広告等を表示するのに便利です。

TwentySixteen1

縦長にすると、以下の感じ。周りに黒い枠ができて、浮き上がっているように見えます。

TwentySixteen2

また、色も良い感じで変えられる様になりました。これまでは、色の変更は中途半端だったのでWordPressで実施せず、テンプレートのソースコードを変更していたのですが、[外観] [カスタマイズ] [色] で変更できます。これであれば、一瞬で全体を好きな色に変えられるので、素晴らしいですね!これは私的には画期的です。さっそく、自分の他のサイトと同じような以下の色に変更しました。これなら一瞬ですね。

TwentySixteenColor

投稿のページは以下のように表示されます。フォトは左端までで、文章は左側に投稿者や日付、カテゴリなどのヘッダー情報が表示されるため、左側が少しあきます。

Twenty Fourteenなどは左側のメニューが分離されているイメージだったのが、ここでは一体的になったのが良いですね。全体的に画面の一体感が出て、パンフレットを見ているような印象になりました。広く感じます。

TwentySixteenPost

あと、タイトルの英文字が大文字に変換されるのが嫌いなので、[外観] [テーマの編集] で style.css で 「uppercase」 のある行を全てコメントアウトして無効にしました。

同じく style.css の 「font-family」 を以下のように、別のフォントを指定することで、フォントを変えることができます。フォントが変わると、サイトの雰囲気、変わりますね。

/**
 * 3.0 - Typography
 */

body,
button,
input,
select,
textarea {
 color: #1a1a1a;
/*font-family: Merriweather, Georgia, serif; コメント */
 font-family: sans-serif;

 font-size: 16px;
 font-size: 1rem;
 line-height: 1.75;
}

Twenty Sixteenは、色が変えられるところと、画面に一体感が出たところが気に入りました。他のサイトはまだTwenty Fourteenのままだったので、Twenty Sixteen への移行をしたいと思います!

 

FacebookTwitterGoogle+Line

サイトの作り方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


FacebookTwitterGoogle+Line

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

このサイトを、WordPress v4.1 にアップグレードし、v4.0 で使っていたテンプレート Twenty Fourteenから、v4.1 から新しく加わった WordPress テンプレート Twenty Fifteen (2015) テンプレートに移行しましたので、こちらで共有します。

まず、ダッシュボードの上部に表示された [WordPress 4.1 が利用可能です ! 更新してください。] をクリックし、[いますぐ更新] をクリックしてv4.1に更新しました。すると、Twenty Fifteen テンプレートの紹介になり、「 Google の Noto フォントファミリーのおかげで完璧に言語をサポートします」と書いてありました。今回からNotoフォントを採用したのですね。フォント とその カスタマイズ に関しては後述です。

v4.1にアップグレードしても、テンプレートは変わってないので、この時点では元のTwenty-Fourteenのままで、以下の画面です。

2014

ダッシュボードは全体的に変わらず、Count Per Dayなども通常通り使えるようです。

そこで、[ダッシュボード]の[外観]の[テーマ]を表示し、新しくWordPress 4.1で追加されたテンプレート 「Twenty Fifteen」を選択すると、テンプレートが変更され、以下のようなシンプルな画面に。

2015

以前のTwenty Fourteenは色を黒っぽくカスタマイズしていたので、白っぽくなったのは当然としても、結構変わりましたね。以下のような変化がありました。

  • 一番上のメニュー・バーが表示されない。
  • 全体的にフォントが(明朝系に)変化。
  • 日付や作成者の情報が、記事の下に表示される
  • 左のサイドバーが、全体のスクロールに合わせてスクロールされず常に表示されるようになった。
  • 右側のコンテンツ・サイドバーが表示されない。
  • トップページ上部のおすすめコンテンツ(のグリッド)が表示されない。
  • 各ページ上部のアイキャッチ画像の両端が余白となる場合がある。
  • AddToAnyの、FacebookやTwitterへの連携用アイコンが表示されない。

メニューはどうなったの?と思って、[外観]の[カスタマイズ]の[ナビゲーション]でメインメニューを既存のものを選択したら、今まで最上部に横にメニューが表示されていたものが、左のサイドバーの上部に縦にメニューが表示されるようになりました。

全体的に横に横断する部分が無くなり、縦の列で分けることでスマホ等への対応をしているように見えます。ちなみにスマホのような狭い画面では、サイドバー部分は以前は下の方に表示されましたが、Twenty Fifteenでは最初は表示されません。上の方の右に表示されるメニューアイコンを押すと、上部にサイドバー部分が表示されるようになりました。

[外観]の[ウィジット]を見ると、サイドバーの設定はありますが、コンテンツ・サイドバーやフッターの設定は無くなっています。フッターはともかく、コンテンツ・サイドバーはアフィリエイト用広告を表示する右横の縦列として重宝していたのですが・・・。

[カスタマイズ]を見ると、[おすすめコンテンツ]が無くなっています。こちらも、トップページの最初の上部におすすめの投稿ページのイメージがグリッドやスライドで表示できて気に入っていたのですが・・・。

編集画面は、[集中編集モード]ボタンが加わり、そのボタンを押すと周囲のメニューやカテゴリーやタグのボックスが消えます。が、私は元々あまり周囲は気にしてなかったのであまり有効な変化ではない気がしてます。あと、テキスト編集部分が字が大きくなって実際に表示される画面とのギャップが少し大きくなった気がします。

あと、フォントも前のものが気に入っていたのですが、Twenty Fifteenは明朝調になってしまい、ちょっと残念です。
そこで、[外観][テーマの編集]の「スタイルシート(style.css)」の「3.0 Typography」にある、font-family: “Noto Serif”, serif;  の部分がこのように Serif系に指定されているため、その部分をコメントアウトし、以下のように sans-serif に置き換えるようにカスタマイズしました。こうすると日本語は明朝系からゴシック系に変更になるため、Twenty Fourteen同様になります。
(一番上の画面イメージと、今見ているこの部分のフォントが異なっているのが分かりますか?)

/*        font-family: “Noto Serif”, serif;  コメントアウト*/
font-family: “Noto Serif”, sans-serif;

私はこのSans-Serif系のフォント(MS Sans-Serif等)が好きで、メールなどはこのフォントで統一しています。




良くなったのは本文下の、「前の記事」「次の記事」のところで、これは文字のリンクだけでなく、以下のようにアイキャッチのイメージも表示されるようになりました。これは分かりやすいですね!

2015-next

とりあえず、こちらのサイトは、2015年1月1日より、 WordPress テンプレート Twenty Fifteen (2015)で運用を開始しました!ただ、全般的に私の気に入っていた部分が変わってしまったので、他のドメインのTwenty Fifteenへの移行はまだ躊躇しております・・。

⇒その後このサイトは、Twenty Sixteenに移行しております。




 

FacebookTwitterGoogle+Line

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

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

<=レンタルサーバーと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) アフィリエイトで稼ぐ第一歩

 


 



 

FacebookTwitterGoogle+Line

自分 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してください!




FacebookTwitterGoogle+Line

アフィリエイト で 稼げるか 提携 してみて分かった!



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

【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 アフィリエイト編】
Googleの次は、アフィリエイト仲介大手のA8に入会しました。A8はいろいろな会社のアフィリエイトをA8経由で利用することができるようになります。楽天やamazonも含め、かなり幅広い会社と楽に提携できるため、便利です。

http://www.a8.net/ にて入会しました。A8の口座が三井住友銀行なので、三井住友銀行であれば振込み手数料は少なくてすみそうです。



Googleは自分でクリックしてはいけないのですが、A8は自分で広告を活用して購入するセルフバックをむしろ推進しています。例えば自分のカードを自分のA8の広告バナーから購入すると、自分にキャッシュバックが入ります。どうせカードを作る必要があるなら、A8経由で作ると数万のキャッシュバックがあったりするのでお得ですね。

A8の中でお勧めなのは、[ツール]メニューの[楽天ツール]にある、「楽天モーションウィジェット」です。これはWebページを開いた人が、過去に自分が楽天で参照した商品を優先して表示してくれる広告で、「あ、そういえばこの商品気になってたんだ・・・」とクリックする確率は高いと思われます。こういった広告のテクニック(アドテク)、進んでいますねー。

それともう一つ、この touchstone.jp の大きなコンセプトの一つは日本の良いスポットを海外に英語で紹介することなので、海外の人が英語で日本の商品を購入できることが必要です。その目的に合致するのが、Rakuten Global Market。海外の人が英語でShoppingして、日本から輸入するすることができ素晴らしいサイトです。

 


 

⇐2) WordPress構築編へ

⇐1) 独自ドメインとサーバ獲得編

FacebookTwitterGoogle+Line

WordPress でこの Webサイト を 立ち上げ て分かった!


⇒WordPressの導入はこちらをご覧ください

【WordPress プラグインの導入】

WordPressを導入したサーバー(私は touchstone.jp)にログインすると、ページの一番上に WordPress のバーが表示され、サイト名のメニューを開くとダッシュボードを表示することができます。すると、左にメニューが出てきますので、そこで[プラグイン]を開き、[新規追加]を選ぶとプラグインを検索し追加できます。私は以下のようなプラグインを導入して使っています。

 Count Per Day 唯一これは必須と思っているビュー・カウンターのプラグインで、プラグインの[count]タグか、Counterで検索してからインストールし、有効化してます。日々どこの国の人が何回くらい見ているかが一目瞭然です。どのサイトから参照されているかや、どのページが一番アクセスされているかが分かって便利です。

WP Multibyte Patch: 改めて追加する必要があるのか分かりませんでしたが、WordPressの日本語修正を含むパッチです。念のためインストールし、有効化しておきました。

Share Button AddToAny: Admin系のプラグインで、導入すると投稿の下に、FacebookやTwitterへのLike/+1ボタンが表示できます。せっかくの投稿は、Facebookなどで皆さんに共有いただきたいですよね。

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

その[設定][ディスカッション設定]は注意して設定するようにしてくだい。私は[新しい投稿へのコメントを許可する]は、オフにしてコメント不可にしています。(ディスカッションしたいサイトではないため) また、[設定][メディア設定]は表示されるイメージのサイズが決まるので、何通りかやってみることをお勧めします。私は中サイズを、480 x 300にセットしています。(縦が大きいとバランスが悪くなるため)

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

【WordPress の外観変更】
[外観]メニューで、色やメニュー/サイドバーなどへの表示を変更することができます。好みで変更してください。 [テーマの編集]で、スタイルシートを直接変更することもできますが、上級者向けですね。

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

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

上級者は、最初にドメインに導入したWordPressに対しマルチ・サイトの設定をすることで、一つのWordPressで複数サブドメインを実現することができるので、チャレンジしても良いでしょう。

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

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

⇒3) アフィリエイト編へ続く

⇐1) 独自ドメインとサーバ獲得編

 

FacebookTwitterGoogle+Line

レンタルサーバー でこの Webサイト を 立ち上げ て分かった!

この touchstone.jp をどのような経緯で、どのように構築したか、これから Webサイト を構築される方の参考になればと思いここに記録します。

【きっかけ】
まずきっかけになったのは、私の会社(外資系IT会社)に海外から来る外人たちが皆一様に、 「せっかく日本に来たのでどこか面白いところがあったら教えて欲しい」 と聞くので、確かに外人に分かりやすい日本のスポットを紹介する Webサイト って無いなぁと思いました。

そう考えると、自分が海外旅行や主張に行った時も、確かに現地でどっか行ってみたいと思った時に気軽に参考にできる Webサイト は少なかったです。

2020年の 東京オリンピック 目指してたくさん外人が日本に来ようかという時に、こりゃ良くないと思い、微力ながら日本のスポットを紹介する Webサイト を立ち上げたいと思い至りました。で、そのサイト運用代くらいは アフィリエイト で リカバリ できないかなと。この記事はそう思い立ってからの奮闘を実録したものです。


【レンタルサーバ選び】
2014年10月中旬に、全くこのあたりの経験の無かった私はまず情報収集からはじめました。アメブロとかはやってましたが、どうもデザイン等に自由がきかないし他の有名人に埋もれてしまうので、自分だけのWebサイトが作れないかなぁと漠然と思っていました。

それでWebのブログ・サイトを立ち上げて、スマホからも気軽に参照したり投稿できるようにしたいと思ってネットを検索していたら、WordPressというソフト(無料のオープンソースでCMSと言う分野らしい・・・コンテンツ管理ですね)が一番良く使われているようでした。WordPressの情報サイトに、WordPressが利用可能なレンタルサーバ情報があり、コレだ!と思いました。さすがに自分でサーバー買って運用する暇は無いので、クラウド的なレンタルサーバーであれば楽に運用できそうです。

ロリポップやさくらといった、かなり安価なのもありましたが、私はエックスサーバー(Xserver)というのに目をつけました。ネットで見る限り評判良さそうだし、名前も何かなじみがあるし、何といってもWordPressとそれに必要なMySQLの自動インストール機能があるというのが魅力的でしたね。

Xserverは、月1000-1200円とロリポップほどではないにしてもそこそこ安いし、初期構築費用が3000円から半額キャンペーンになっていたので、最初の3ヶ月で5000円ちょっとのを思い切って申し込みました。

ドメイン編

【独自ドメイン取得】
まず、Webサイト立ち上げで一番重要なのは、サイトの「ドメイン名(xxxx.comとか)」だと思いました。志は高く、次のGoogleやYahooを目指さないとと・・。

このXserverの[お申し込み]から ドメイン 新規取得の[お申し込みフォーム]の[新規ドメインの申し込み]で選択できるドメインをチェックできるため、そこでいろいろ入力してみて検討しました。(ドメイン取得は「お名前.com」とかも検討しましたが、結局はレンタルサーバと同じところが良いかなと思い、ドメインもXserverになりました)

最終的にはいくつかの候補の中から家族会議で、このtouchstone.jpにしました。検索してみたら、他に似た名前のサイトで主要なものも少なかったですし。もう一つ、xxxx.ne.jpという候補も良かったのですが、.ne.jpは登録が大変そうで高価だったのでやめました。.jpも、.comや.netに比べたらちょっと高いのですが(.jpは5千円ちょっと)、.comとかは思いつくドメイン名はほとんどもうreserveされているため、取れなかったです。

touchstoneのに込めた意味は、コンセプトのページをご覧ください。

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

驚いたことに、数日後にコンビニで料金を振り込んだら、数分後に使えるようになったというメールが届きました。

使えるようになったら、サーバーパネルにメールで来るサーバーIDでログインし、[ドメイン設定]の[ドメインの追加設定]で先に取得した独自追加ドメインの名称をインプットしてドメインを追加しました。www有りと無しと両方ですぐにWebサイトにアクセス可能になります。

【WordPressの導入】
早速、元々の目的であったWordPress(v4.0)を導入しました。Xserverは自動インストール機能があるため、サーバーパネルで[自動インストール]を選び、[プログラムのインストール]から[WordPress 日本語版]の[インストール設定]をクリックすれば、何も考えなくても自動で導入できます。
その際、インストールURL(右のパスはブランクでよい)と管理者用ID/Password等を入力し、[自動でデータベースを生成]を選択すると自動でMySQLも導入されて楽ちんでした。

WordPressの導入についてもっと詳しく知りたい人は、こちらのWordPressの使い方解説サイトを参照ください。

⇒2) WordPressセットアップ編に続く

 

FacebookTwitterGoogle+Line