見栄えが恐ろしく悪いので、何とかしたいと思っていたところ、特につまづくことなく解決できたので紹介します。

HTMLとかCSSとか専門的に勉強したことは1秒もないので、こういった文字列が表示されると、内臓がキュッとなってしまいますね。

Web関連のお仕事されてる方にとってみれば、1秒もかからないと思いますが、素人にはサッパリです(-_-;)

ただ一つ分かることは「なんか良くないことが起きてる」ってことだけ。

F5押せば消えることもありますが、また表示されることもある、という状態です。F5押しても根本は解決しません(当たり前)。

このエラーの文字列をよく読んでみると、【No such file or なんとかかんとか…】ってことなんで、ファイルが無い系のエラーっぽい雰囲気を感じとり、うーむと考えてみたところ…分かりました。

共通点アリ。

”No image”の時に出るみたい

エラーが出る時と出ない時の違いを比べてみたところ、スライダーに表示された記事の”画像が無い”ときに、文字列が出てることが分かりました。

アイキャッチの画像も無い、文章のみのコンテンツで出るみたい。

『スライダーに表示させるための画像がどこ探しても無いんですケドー!!』というテンプレ側のメッセージってことですかね。テンプレートさん、申し訳ない(T_T)　そしていつもありがとう。

画像は記事更新時点で入れとこう

ということで、画像を設置すればサクッと解決します。

過去記事の中には「画像は後でいいや!」ってことで、文字しか書いてないのがいくつかありましたが、エラーが出るたびにその場で修正していくようにしています。(いちいち探すのがメンドクs…いので。)

そのうち無くなると思います。

MAGJAMって、記事の表示の仕方とかカッコイイですけど、こういいた謎の文字列が表示されたままでは、訪問者さんにとってみれば萎える原因になりますもんね。

どんなに美味しい飯屋でも、看板にカメムシが100匹貼り付いてたら「おげー」ってなって客が減るのと同じ感じなので、なるべく早めに修正していきたいと思います。

素人のままだと、こういった小さいエラーでストレスを感じるし、修正にも時間かかるし、ある程度の学習は必要になりますね。

ってことで、2015年のやることリストに【HTMLについて学習する】というのを加えたいと思います。

　　　　　　　＞　　　　　　　

デモサイトとか、デザインのカッケーサイト様を参考に、デフォルトから脱却しようということで、いろいろイジってみました。

ウィジェット「DP – アーカイブ専用記事一覧」を使用

MAGJAMに搭載されてる「DP – アーカイブ専用記事一覧」というウィジェットを使うことで、メインコンテンツエリア(サイドバー以外の意)にノーマル・ポートフォリオ・マガジン・スライダーの4つの形式で表示できるようになります。

僕の場合は、特に読んでほしいカテゴリを絞って、新着記事の下に表示しました。

多すぎてもウザいし、なんでもかんでもベタベタ貼ってしまうと、サイトが縦に長くなりすぎて、訪問者の方がウンザリして離脱する可能性が上がるので、サイドバーのラインに合わせる形でトップページの尺を決めました。

①新着記事
②ダンス関連記事
③アフィリエイト関連記事
④ワードプレス関連記事

とりあえず、今回はこの順番で表示させることに。

メインコンテンツエリア下部に設置

どこに設置したらどう表示されるかわからんやったので、地道に試した結果、

僕の場合は「メインコンテンツエリア下部」に。表示させたいカテゴリごとに、このウィジェットパーツを使います。

カテゴリを指定するのは、スラッグ(カテゴリのURLのとこ)を入力すればOK。

僕は一つのカテゴリに絞ってますが、2つ以上表示させたい場合はカンマ(,)で区切れば表示されます。

表示記事数とレイアウトは、なんパターンか試してシックリきたやつを採用しました。F5キー何回も押して確認するのはめんどくさいのですが、我慢しましょう。

インパクトのあるスライダーは最後に。記事のトップ画像の高さ(px)が一定でないと、高さのない画像が表示されたとき、下の白の部分が広くなりすぎて、バランスが悪くなります。

記事のトップ画像のサイズは一定にしておくべきだったなぁ、と過去の自分にパンチしてやりたい気分になりました。

ちなみに新着記事の表示数は、「DigiPress＞詳細設定＞トップページ表示設定」から変更できます。

変更後はこんな感じ

デフォルト感が抜けて、なんかオシャレになったので満足です。

ウィジエットで表示させたことにより、先日設定したカテゴリの色きちんと表示さされています。

※記事下の関連記事で表示されるカテゴリは、リンクカラーに依存する仕様っぽいです。

新着記事はポートフォリオ1で表示してますが、これが10コも連続して並んでいるとコッテリしすぎるなーと思ってたのが解決したので良かったです。

このテンプレを入れた時「このままで十分カッケーな!」って思ってましたけど、いざ色々とイジってみると、こっちの方がスッキリしてて気に入りました(^^)

今回ハマったポイント

トップページのレイアウト変更なんて、サクっと終わらせたかったんに、めっちゃ時間がかかりました。
思うように表示されなくて、『新着記事を無くして、”アーカイブ専用記事一覧”だけで表示したらどうなるか』とか、実験してみたんです。PCの表示は問題なかったのですが、スマホから見たら、、、

『”いいね！”ありがとうございます』じゃねぇし!!!

記事も何もないのに「いいね!ありがとうございます」という、怪しすぎるサイトになってしまうので、新着記事のコンテンツは表示させておきましょう。

PCだけではなく、モバイルの方もウィジェットの設定が必要になりますのでお忘れなく。

スライダーがフルサイズになるけどバグですかね？

MAGJAMのデモサイトのメインコンテンツ上にある“TODAY’S NEW”のように、スライダーで表示させたいんですけども、何度やっても変な感じになります。

フルサイズのチェックを入れてないのに、フルサイズで一枚しか画像が表示されません。

この部分だけで1時間くらいハマりましたが、どうにもなりそうにないので取りあえず諦めました。

アップデートで対応されるのか、どうなのか…。

追記：スマホ表示でバグる

昼間は良かったのに、今見たらスマホの表示がバグりまくっています(困)

ウィジェットで設定してるコンテンツの画像とリンクが、全くの別記事に…。

なんで?

1分以内でできる!『MAGJAM』カテゴリの色変更

ダッシュボード＞DigiPress＞DigiPressビジュアル設定の画面で

「サイト一般表示設定」をクリックしましょう。

　すると”現在設定中のカテゴリ”がズラーっと並んでいますので、色を変更したい部分の「色を選択」をクリック。

※↑既に変更してるので色がバラバラですが、初めて設定する場合は一色になっています。

「色の選択」をクリックすると、カラーピッカーがにょきっと出てきます。無段階で色の指定ができるので、納得のいくまでチューニングすることができます。

続けて他のカテゴリの色を指定する場合は、下にウィンドウが伸びていますのでスクロールして、「色の選択」をクリック→…というのを繰り返します。

色を設定し終わっったら「設定を保存」をクリックしましょう。これで完了です。

設定するとこんな感じ

これが設定後のサイトTOP画像なんですけど(※ポートフォリオ2使用)、カテゴリで指定した色のフィルターが掛かった状態で表示されるようになりました。

パッと見たときに、それがどんな記事なのか判別しやすくなりました。

フッター1に設置しているカテゴリも、指定した色が表示されています。

しかし!

記事本文下の関連記事は、元の設定のまま。「ダンス」は赤で指定していましたが、記事本文の下のパーツのとこの色は変わってくれないようです。MAGJAMのデモサイトを確認しましたが、記事下は共通の色になっていました。

今後のアップデートで改良されることを期待するしかないですね〜。

実はめっちゃ時間かかりました。

「LIGみたいにカテゴリの色変えれるー!!」って思ってたんですけど、最初の「サイト一般表示設定」に辿り着くまで、えらい時間がかかりました。

AttractiveとかMatureとか、DigiPressのテンプレの操作には少々慣れてはいましたが、その先入観が「サイト一般表示設定」までの道のりを遠くしてしまったのかもしれません。

DigiPressのこの画面って、慣れるのに結構時間がかかるんですよね。

「どこをどうイジったら、どうなるのか」というのは、自分で使い倒していくうちに自然に覚えていきますが、慣れるまでは地味で辛いです。

高機能な分、パラメータを設定する箇所も多いし、覚えることが多いので時間もかかります。

だからこそ愛着が湧いて、楽しくブログの更新ができるようになるのかも。

『MAGJAM』はまだまだ使ってる人も少ないし、めちゃくちゃできる事が多いので、コツコツ改造していこうと思います(・∀・)

　　　　　　　＞　　　　　　　

wpXクラウドで取得したドメインにWordPressをインストールする方法を動画で解説してみました。

サーバーとドメインを同じところで取得してるので、WordPressのインストールはとても簡単です。

まず【ドメイン追加】で取得したドメインの追加。(前回動画を参照ください)

ドメイン設定、サイトの名前、メールアドレス、パスワードを入力すれば終わりです。

慣れれば60秒かからないと思います。

http://あなたのドメイン.com/wp-admin/

⬆にアクセスすれば、WordPressのダッシュボードにログインできます。

WordPressをインストール後、すぐにサイトが表示されないことがあるんですが、故障やエラーではなく、

いたって普通のことなので心配無用です。(あるあるです)

すぐに反映される場合もありますし、そうでない場合も。

この待ち時間をぼけーっと過ごすのは非常にもったいないので、教材のインプットやこれから進めていく作業の予定を立てておきましょう。

次回以降の動画では、

WordPressのカスタマイズについて解説していきます。

テンプレートの導入・プラグインの設定は、

これからのサイト運営に必要不可欠な作業になりますので、1つの漏れもなく確実に完了させましょう。

予めブログタイトルやパスワード等を決めておけば、時間を短縮することができます。

IDやパスワードなどの情報は、メモ帳にコピーしておくと便利です。

僕はクラウド上で管理できるEvernote(エバーノート)を使用しています。(無料です)

iPhoneやタブレット、PC(Mac/Win)の全てにアプリを入れてるんですけど、

どこからで情報を確認できるので、めちゃくちゃ便利です。

サポート生にも全員これ使うようにしてもらってます。

PCが使えない状況でも、スマホ使って記事の下書きをしたりできますからね!!

スーパー便利だから『もうこれ無しでは作業できません!!』というくらい重要なツールです。

※お名前.comやムームードメインで取得したドメインの場合は、ネームサーバーの変更の必要があります。

wpXクラウドで独自ドメインを取得&設定方法について動画で解説してみました。

サーバーで独自ドメインも申し込む場合、

上記ドメインサービスに比べて、多少コストが高くなりますが、

DNSネームサーバーの設定が不要だし、支払い先も統一できます。

別々のサービスで契約すると、

・サーバー契約にアカウントが必要
・ドメイン契約にアカウントが必要
・ネームサーバーの変更も必要
・支払先も別々

いろいろ設定がめんどくさいと思う方は、サーバーで独自ドメインも取得してしまいましょう。

wpXクラウドの独自ドメイン(.com)は

1,620円/年

ちょっと高いかもしれませんが、ひと月あたり135円です。

毎月ジュース1本我慢すれば運営できますので、ぜひ投資しましょう。

どうしても安く済ませたい方は、各ドメインのサービスから取得するのがオススメです。

しかし、この場合ちょっと注意が必要で

初年度の料金が安いだけで、契約を更新するたびに料金が上がるパターンがありますので、契約する前には必ずその辺も注意してくださいね。

前回と今回で、サーバーとドメインの取得が完了しますので

続いては、WordPressをインストールしてサイトを立ち上げてみましょう。

【続きはこちら】

▶︎▶︎wpXクラウドで取得したサーバーと独自ドメインに、WordPressをインストールする方法

トレンドサイトの運営に最適なサーバー、wpXクラウドの導入方法について動画で解説していきます。

ネオトレンドアフィリエイト・PRIDEでも推奨されているエックスサーバーですが

サイトにアクセスが集まりすぎた場合
サーバーに負荷がかかりすぎて、転送量オーバーを引き起こす可能性があります。

サーバー側からアクセス制限されてしまうと、
解除には手続きが必要で1週間程度時間がかかる場合があります。

僕はこれまで、転送量超過のためアクセス制限をされたことが2回あります。

Googleアナリティクスを見てみると、リアルタイムが明らかに普段の半分以下のアクセス数に減っていて、
「おかしいな…」なんて思っていたところ、エックスサーバーからメールが……

この状態になるとアクセスが集まったとしても、サイトが表示されなくなり
せっかくのアクセスを逃すだけでなくし、Googleからの評価も下がってしまいます。

ネオトレンドアフィリエイトを実践すると、
エックスサーバーを使っても転送量オーバーになる可能性があります。

サーバー移転は初心者にとってかなりハードルが高い作業になるので、
サイト立ち上げる段階でwpXクラウドを導入しておきましょう。

wpXクラウドを使う2つのメリット

①エックスサーバーに比べ初期費用安く抑えることができる。

エックスサーバーは、初期費用が高いです。

月々1000円程度の金額ですが、初期費用と3ケ月ごとの支払いにより
初回の支払い金額が6,000円を超えます。

まだ利益の出ていない状態で、6000円以上の出費は正直痛いものがあります。

それに比べてwpXクラウドは、初期費用なし。
月500円〜のプランで契約することが可能です。

②転送量ごとに月々のプランを変更することができる。

トレンドサイトは1ヵ月目、2ヶ月目、3ヶ月目と、アクセス量は大きく変わってきます。

嘘みたいな伸び方をします　笑

サイトを立ち上げたばかりのアクセスの集まらない時期は、
一番安いのグレードAで月500円で運営することができます。

サイトの成長に合わせてサーバーのプランを変えていくことによって
最小限の出資で作業して行くことができます。

エックスサーバーは、これができません。

wpXクラウドまとめ

メリットでは書きませんでしたが、
一番強調すべきところはwpXクラウドの”早さ”

安定感抜群なエックスサーバーでさえ、
アクセスが集中すると、表示されるまでもたつきが生じます。

この”もたつき感”はトレンドサイトにとっては致命的。

この数秒で与えるストレスは思いのほか大きく、
せっかくのサイトに訪れた訪問者が直帰してしまう原因になります。

“早さ”
“初期費用が良心的”
“サイトの規模に合わせてプランを選べる”

トレンドサイト運営に関しては、
業界一のエックスサーバーよりも断然wpXクラウドがお勧めです。

【続きの動画はこちら】
▶▶wpXクラウドで独自ドメインを取得する方法

知識や経験のない初心者の方がアフィリエイトに取り組むとき、

がんばって最初の段階で有料のテンプレート(ワードプレス)を買うのがおすすめ、について。

無料のブログサービスを利用してアフィリエイトを行う手法がメインでしたが

リスク回避の面・SEOの面から

ここ数年、独自ドメイン＋サーバーでワードプレスを使ったサイト作成へ移行しています。

2012年に発売されたサイトアフィリの王道教材である”LUREA”でも記してある通り、無料ブログで稼ぐ時代は終わりつつあります。

ワードプレスのシステム自体は無料であり、

テンプレートやプラグインによって、独自のカスタマイズができるのが魅力の一つです。

テンプレートも無料と有料があり、
数えきれないほどのバリエーションがあるのですが

僕は運営する全てのサイトで”有料”のテンプレートを使用しています。

ぶっちゃけると無料のテンプレは使ったことがないです。
(LUREAに付属するリファインsnowは一瞬だけ使ったことがありますが)

“タダ”というのは非常に魅力的に見えます。

Stinger(スティンガー)のような

“無料とは思えない”
“素晴らしい”

テンプレも存在します。

しかし、無料のものは、コスト”ゼロ”以外のメリットがありません。

“無料”かつ”ハイクオリティのもの”であれば、

人気が集中し、みんながみんなそのテンプレートを使用するようになります。

すると、そのテンプレを使ってる自分のサイトは、

一見独自ドメインを使用したオリジナルのサイトなんですけど

独自性が出せない。

似通ったサイトの一つとして認識されてしまう可能性があります。

トレンドアフィリエイト実践者が猛烈に増えている昨今、

Googleのトレンドサイトに対する監視の目は日ごとに厳しさアップの状態。

2013年10月に起きた”トレンドサイト手動ペナルティ祭り”でペナルティを食らったのは、

無料のテンプレを使用していたサイトです。

月数十万を稼ぎ続けるモンスターサイトが、このペナルティを機に収入ゼロになってしまうという、

ある種”事件”のような出来事として、アフィリエイターを震撼させたのは記憶に新しいです。

ちなみに僕は、未だにこの手動ペナルティとは無縁です。

ペナルティの対策はと特に意識してなかったのですが、

サイト運営当初から”有料”のテンプレを使用していたことは要因の一つとして考えられるかもしれません。

トップアフィリエイターもそれぞれ、メルマガなどで自分の見解を述べており
「手動ペナルティの件はテンプレの有料無料は関係ない」とする人もいらっしゃいます。

まー正解はGoogle(神)のみぞ知るところなので、

予想でぺちゃぺちゃと話を膨らませて、正解不正解を考えても仕方がないところです。

僕の見解は、

手動ペナルティは単にテンプレが”有料か無料か”だけが関係しているというわけではないけど、

有料のモノの方がいいよ!と思ってるわけです。

あえて有料テンプレを使う理由

有料のテンプレートのいいところをいくつか。

①初心者に優しい設計

ワードプレスを今まで全く使ったことが無い初心者でも、

無料ブログのように簡単に使えるようになるのが魅力ですね。

カスタマイズもドラッグ&ドロップなどの直感的な操作で可能だし。

FTPソフトでサーバーにアップして、どうのこうの〜という

ややこしいことを全てすっ飛ばしてくれるのが、本当に助かります。

僕がHTMLやCSSの知識が全くなかった初心者の状態で

サイト運営を始められたのも、
作業を続けられたのも、

有料のテンプレートを導入したお陰だと思ってます。

お金をケチったために、細かいところでいちいちつまずいて止まっていたら、

モチベーションはグングン低下して、作業を続けられてなかったかもしれません。

②サポート

ワードプレスのシステムバージョンアップへの対応を

キッチリと責任をもってやってくれるところにあります。

無料のテンプレって、所詮”無料”なので全てが制作者のさじ加減ですからね。

無料のサービスの不具合に”義務”はありません。

無料なので、不具合が起きても何も言えない訳ですよ。

無料のサービスを使っているのに、クレームなんてもってのほか。

もしも、

テンプレ制作者が「アップデートは今後しません」とでも言おうものなら、

それはもうどうしようもない訳です。

その点有料のものは、サポートがキッチリしている。

メールサポートだったり、
バージョンアップの対応だったり、

お金を支払っているのだから、クレームを出すことも可能です。
(クレーム出すか出さんかは個人の自由です)

③デザイン

外観をがらりと変える事ができるので、独自性を出しやすくなります。

無料のテンプレートでも原型が分からなくなるほど、

ソースやCSSを自分でいじれる実力があれば全然OKだと思います。

でもネットビジネスにチャレンジするする人の大部分がWEB系の知識は無いので、

そう易々と手を加えれるものではありません。

スマホやタブレットに対応しているテンプレは、導入するだけで最適化してくれますからね。

デフォルトのままでもカッコいいので、

デザイン面では、相当な楽ができます。

“本気で稼ぐ”つもりなら

絶対稼ぎます!!
本気です!!

こういう熱い気持ちのときに、勢いでテンプレートを買ってしまうのが一番オススメです。

【僕が購入したことがあるテンプレート】

・RefinePro
・DigiPress
・TheWorld

決して安い物ではありませんが、本気で稼ぎたい!と考えてるのであれば

“テンプレの購入”という行動を取って然るべきです。

他にもアフィリエイターに人気のものは

・賢威
・TCD

などがあります。

TCDシリーズは価格も安いので、初期投資を出来る限り抑えたいという方にオススメです。

それぞれ、使いやすさやクセがありますので

利益が出たら色々と購入してみて、勉強するのがいいですね ^ ^

アフィリエイトを始める人の多くは、

できるだけお金を使わずに稼ぎたいと思ってる人がほとんどです。

人間の心理として、

無料と有料があれば、まず無料を手に取る人が多い。

しかし、ネットビジネス業界を見渡してみると

無料のサービスを使い倒して稼ぎ続けている人って存在しないと思います。

結果を出す人、稼げるようになる人は積極的にお金を使う人が多い。

教材を買う人
有料テンプレを買う人
ツールを買う人

情報や設備に投資できる人は、結果が出るのも早いです。

通帳の中に10000円置いておくならば、
テンプレに投資して3ヶ月後30000円に増やす行動を取ればいいと思います。

有料のテンプレを使うことで、自分のサイトへの愛着もモリモリ湧きますし
「やってやるぜ!」と気合いの入り方も違ってきます!!

僕がサポートさせて頂いているチーム生も、
みなさん有料のテンプレートを使用してサイト運営をしていただいてますし

ネオトレンドアフィリエイトの企画参加者の方にも、

有料テンプレの導入をオススメしています。

稼げる人の行動パターン＝有料テンプレ導入

稼げない人の行動パターン＝無料テンプレ導入

「借金してまでテンプレ買うべきだ」とは言いませんが、

無料テンプレを使って、中途半端に取り組むならアフィリエイト自体やらない方がいいと思ってます。

有料テンプレを導入して、無料アフィリエイターと一気に差をつけましょう!!

LikeBoxのレスポンシブ対応させる方法(その②)について解説してます。

前回紹介したLikeBoxのiframeコードをレスポンシブ(横幅可変)対応させる方法なんですが

Facebookの“いいね!”ボタンが消えてしまうということだったので、今回はその解決策を紹介します。

コメントを頂くまで、”いいね!”ボタンが消えてることに気付いてませんでした。
(どうもすいませんでした。。。)

「Facebookのいいねボタンは別にいらんし」という方は、
iframeのままでもOKだと思います。

LikeBoxの設置方法については　⬅こちらを参照してください。

手順は3つ

①LikeBoxコードを”HTML5″で生成

②コードをsingle.phpにペースト(2箇所)

③CSSにレスポンシブ対応コードを記述

①HTML5でコードを生成

HTML5でコードを生成した場合は、
2ヵ所(single.php)にコードを貼付けなければいけません。

メモ帳などに、コードをコピーしておきましょう。

②single.phpにペースト

①のコードをbodyタグ直下にペースト。

②のコードを任意の場所にペースト。

このページでは、記事本文下に設置しています。

定型文
ソーシャルボタン
LikeBox

の順番になっています。

最後に”ファイルの更新”を忘れずに。

CSSにレスポンシブ対応コードを記述

CSSに以下のコードをペーストしてください。

(テンプレRefineProの場合は、custom.phpに記述)

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
width: 100% !important;
}
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

テレビ観ながらでも5分あれば終わりますので、試してみてください。

以上

LikeBoxレスポンシブ対応＋”いいね!”ボタン表示の解決方法でした。

コメント頂きました＊ゆり＊さん、ヘブラカエラさんありがとうございました!

FacebookのLikeBoxをレスポンシブ対応させる方法を紹介します。

前回紹介した“LikeBoxを設置する方法”では、スマホから閲覧した場合に、LikeBoxが大きくはみ出した状態になります。

スマホユーザーが急激に増加しているため、サイト作成をする場合はPC表示のみならず、スマホ対策もきっちりとやっていきたいですね。

ということで、”LikeBoxのスマホ対策”の方法を画像付で解説します。

そして前回HTML5でコードを生成していたんですが、HTML5でコードを生成した場合、ワードプレスのテーマ設定で2ヵ所にコードを貼付けなければいけないので

めんどくさっ

と思ったので(笑)一発で終わらせるために、iframeでコードを生成したバージョンを紹介します。

簡単に導入できますので、画像通りに手を動かしてみましょう。(5分以内に完了できます）

①iframeでコードを生成

iflameで生成したコードをコピーします。

コードを貼付ける時に、赤枠内の”width:500px”を“width:100%”に変更する必要があります。

テーマ編＞単一記事の投稿(single.php)を開き、任意の場所にコード貼付けます。

「ファイルを更新」を忘れずに。

CSSにレスポンシブ対応コードをペースト

最後にCSSにコードを記述して終わりです。

RefineProの場合、custom.phpに記述します。(テンプレによります)

スタイルシートに以下のコードをペーストしてください。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
width: 100% !important;
}
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

LikeBoxレスポンシブ対応まとめ

②width:100%に修正したコードをsingle.phpにペースト

③CSSにレスポンシブ対応させるコードをペースト

たったこれだけ。

レスポンシブ対応なんて、一見ハードルが高そうに思えますが、相当シンプルな作業で実現することができます。

今すぐやってみてください ^ ^

(2014/1/26追記)

CSSにレスポンシブのコードを記述すると、記事画面でソーシャルボタンの“いいね!”ボタンだけが表示されないという情報を頂きました。

解決方法は”➡LikeBoxのHTML5コードをレスポンシブ(横幅可変)対応させる方法”で紹介しています。HTML5のコードで生成したものを記述するだけなので、イージーです！

「後でやろう」と思っても、未来の自分がやってくれることはありません。

こういうのは今この瞬間にやるべきなんです。

たった５分なので、今からトライしてみてください!!

１.２..  続きを読む＞＞

ワードプレスにFACEBOOKのLikeBoxを設置する方法を紹介します

Facabookのソーシャルシャルプラグイン“LikeBox”をブログに設置することにより、

「いいね!」されてる数などが一目で分かります。

LikeBoxで「いいね!」されると同時に
Facebookページにも「いいね!」を集めることができます。

サイトをSNSと連動させることで
検索エンジン以外のアクセスに繋がりますので、ぜひ導入しましょう。

Facebookページとサイトを連動させるプラグイン
『OpenGraphPro』
まだでしたら今この瞬間に導入しておきましょう。

➡WPプラグイン”OpenGraphPro”の設定方法を画像付解説しました【必須】

LikeBox導入手順

[deco_bg image=”paper4″ width=”300″]

〜目次〜
①LikeBoxにアクセスする
②LikeBoxのコードを生成する
③LikeBoxのコードを貼る

[/deco_bg]

画像通りに進めれば簡単に設置することができますので、

今この瞬間にパパっと済ませちゃいましょう!!

(3分もかかりませんよ ^ ^)

LikeBoxにアクセスする

【LikeBox〜Faceboo開発者ページ】
https://developers.facebook.com/docs/plugins/like-box-for-pages

こちらのリンクにアクセスすると、この画面に飛びます⬇⬇⬇

【Facebook Page URL】
ファンページのアドレスを入力。

【Width】
【Height】
【ColorScheme】
任意の値を入力・選択。

入力した値によって、下にプレビューが表示されるので微調整を。

自分のサイトにマッチするサイズやカラーを選択し、

【Get Code】でコードを生成しましょう。

LikeBoxのコード生成

枠内のコードをコピーして、メモ帳かなんかに保存しときましょう。

今回はHTML5で生成しています。

上のコードを
<body>の直後に貼付け、

下のコードを
表示させたい場所(記事下・サイドバーなど)に貼付けましょう

ブログに貼る

WP>ダッシュボード>外観＞テーマ編集

単一記事の投稿“single.php”を選択し、
任意の位置にコードを貼付けましょう。

僕の場合は、記事下かつ関連記事の手前に表示させるようにしています。

行間がつまり過ぎる場合は</br>(⬅改行タグ)を前後に入れて、

バランスをとってください。

【ファイル更新】で反映させるのを忘れずに。

確実にアクセス向上に繋げることができますので、

ぜひぜひチャレンジしましょう ^ ^

もし不明な点などがあれば、コチラからメール飛ばしてください!!

(1/20追記)

このコードを貼付ける方法では、
スマホから閲覧した場合、大きくはみ出てしまいます。
「レスポンシブ対応させるにはどうしたらいいか？」

という質問も頂いたので調べてみました。

➡LikeBoxをレスポンシブ対応(スマホ表示)させる方法