カテゴリー: ブログ

  • wordpress高速化!プラグインだけでモバイルのスコア80オーバー

    wordpress高速化!プラグインだけでモバイルのスコア80オーバー

    ブログの高速化は、永遠の課題ですよね。

    皆さん毎日もがいていると思います。

    今回はプラグインのみで高速化する方法なので、全ての設定の所要時間は20分もかからずに終わります。(私と同じ設定にするなら10分ほど)

    もう知っていると思うので、ブログを高速化するメリットは簡単に紹介します。

    • ユーザビリティ―が上がる(読者がストレスを感じずに読める)
    • グーグルに評価される(検索順位アップ)

    大きく分けてこの2点ですが、これらは結局はブログのPVや収益アップにつながるので、是非やりましょう。

    自サイトのスピードを調べる

    まずは自分のサイトのスピードを調べてみて下さい。

    注)Test my siteは、グーグルクロームで広告をブロックする拡張機能などを使っていたらエラーになるので、停止してから使ってください。

    私のサイトの基本設定は、テーマJIN+アドセンス広告(自動広告+関連コンテンツ)+サイドバー表示(スマホ)のスコアです。

    アドセンスの広告を外して計測した人よりも遅いですが、みなさんも同じ設定だと思うので参考になると思います。

    私はPageSpeed Insightで、モバイルが平均80前後です。(PCは90くらい)

    wordpress高速化のスコアwordpress高速化のスコア

    wordpress高速化のスコア

    結構広告出しているのにこのスピードは、かなりいい方ですね。

    それでは私が主にやっとことと、プラグインを合わせて紹介します。

    wordpress高速化のためのプラグイン

    まず最初に知っていてほしいのですが、表示速度を下げるものを紹介します。

    • アドセンス広告
    • 画像
    • 質の悪いサーバー
    • wordpressのテーマ

    他にも細かいものはありますが、この4点が大きくかかわってきます。

    まずは広告ですが、広告を無くしたら意味がないので、アドセンスは「広告の数を少なくする」、で対処します。

    アドセンスの管理画面から「広告」→「サイトごと」のページから広告の数を編集できるのでやってみて下さい。

    次は画像ですね・・・。

    私は画像サイズを、70KB以下にしています。これ以上は大きすぎるので圧縮したほうがいいですね。

    画像のリサイズ・圧縮に関してはこちらを参考にどうぞ。もしくは、次世代ファイル形式のWebPの設定方法をどうぞ。

    サーバーは月に何百円みたいなのでなければいいと思いますが、私はConoHa WINGと、エックスサーバーが性能も良く安定しているので使っています。

    テーマはJINですね。遅いと評判なのですが、運営チームも頑張ってくれているので言うほど遅いとは思いません。

    長くなりましたが、今から私が使っている、表示速度に関係のあるプラグインを紹介します。

    wordpressの高速化プラグインwordpressの高速化プラグインプラグインのダウンロード方法は、管理画面から「プラグイン」→「新規追加」→「プラグイン名」で検索し、ダウンロードしたら有効化をしてください。

    必ずバックアップを取ってから、作業を始めて下さい!

    Autoptimize

    wordpress 高速化プラグイン Autoptimize

    これはキャッシュ系のプラグインですが、不具合もなく、ほとんどの人が使っていると思います。

    このプラグインは、CSSやJSなどのリソースを軽くしてくれます。簡単に言うと、ブログ内部をきれいにまとめてくれる・スリムにしてくれる感じです。

    このプラグインの良い所として、日本語で設定が出来、何個かクリックするだけですぐに使えるところです。

    設定はこんな感じにしています。(印が付いている部分のみ抜粋しています)

    wordpress プラグインのAutoptimize設定方法 wordpress プラグインのAutoptimize設定方法 wordpress プラグインのAutoptimize設定方法 wordpress プラグインのAutoptimize設定方法

    他は特に触ってないです。

    これだけで、かなりユーザビリティが上がりますよ。

    BJ Lazy Load

    2021年2月追記)
    Wordpressに標準機能としてLazy Loadが搭載されたので、現在は使用していません!!

    wordpress 高速化プラグイン BJ Lazy Load

    Lazy Load系のプラグインは多いので、自分に合ったものを探さなくちゃいけませんが、私はBJ Lazy Loadが不具合もなく動いています。

    Lazy Load系のプラグインは、「記事内の画像が、画像検索にインデックスされない」なんて言われますが、私の場合は完全にインデックスされているので大丈夫です。

    設定もすごく簡単です。(基本、全部YESで」大丈夫です)

    wordpress 高速化 プラグイン BJ Lazy Load

    アイキャッチ画像を遅延読み込みしたくない場合は「Apply to post thumb nails」のチェックを外してください。

    Thresholdは画像を読み込むタイミングで、今は400となっていますが、これは「スクロールダウンをしたときに、画像の位置に400ピクセルまで近づいたら読み込む」と言う意味です。

    200~400の範囲で設定しましょう。

    BJ Lazy Loadで一点だけ注意点があるのですが、2020年2月現在で最後の更新が3年なのです。

    更新されないプラグインは不具合が出るかもしれないし、性能が悪い事もあるので他のプラグインを検討してもいいかもしれません。

    上で紹介したAutoptimizeにもLazy Loadの機能があるので、そちらも試してみて下さい。

    EWWW Image Optimizer

    wordpress 高速化プラグイン ewww image optimizer

    このプラグインは画像を自動で圧縮してくれるので、すごく楽ですよ。

    使い方は、画像を通常通りに記事にアップするだけで大丈夫です。

    設定は2点あります。メタデータを削除にチェックが入っているか、確認してください。(画像のメタデータとは、カメラ情報や撮影位置などの情報が記載されているデータです)

    EWWW Image Optimizer 高速化プラグイン 設定方法

    次に「変換」タブをクリックし、「コンバージョンリンクを非表示」にチェックを入れます。これは、png→jpgなど画像データが勝手に変わらないようにするものです。

    これをすることによって、画質が下がるのを防ぎます。

    EWWW Image Optimizer 高速化プラグイン 設定方法

    WP Fastest Cache

    wordpress高速化プラグイン Fastest cacheの設定方法

    このプラグインは強力なキャッシュ系なので、不具合が出る可能性があります。

    WP Fastest Cacheを試したのですが、どうしてもスマホ表示で不具合が出るし、読み込み速度も全然変わらなかったので今は停止しています。

    通常はこのプラグインを入れると速度がかなり速くなるのですが、なんででしょう?変化なしでした。

    気になる人は入れてみて下さい。

    WP Optimize

    wordpress高速化プラグイン WP optimizeの設定方法

    WP optimizeは溜まったゴミ箱やリビジョンの削除、データベースの最適化ができます。

    リビジョンって更新頻度が多い記事だと、5~60個くらいすぐに溜まるんですよね。

    このリビジョンが多いと、WP自体が重くなるのでブログの表示速度も遅くなります。

    私はデータベースの最適化はAutoptimizeでやっているので、リビジョンを削除する時のみに有効化して使っています。

    その他の時は、削除もしくは停止してますね。

     

    WP Rocket

    WP Rocket

    こちらは年間5000円ちょっと(50USドル)の有料プラグインですが、かなり性能が高く使い勝手も良いです。

    使い始めて1年くらいですが、すっごく満足しています。

    PageSpeed Insightで計測した結果 モバイル

    投稿ページでもこれだけ速いので、サクサクですよ。

    爆速!Wordpressの表示速度を上げるならWP-Rocket!」で詳しい設定方法などを紹介しています。

     

    WP Rocket

    最後に

    今回紹介したプラグインでの高速化は、複数の高速化対処法の1つなので他にもやることはあります。

    • 質の悪いサーバー(乗り換え検討)
    • wordpressのテーマ(速いテーマを検討)

    テーマに関しては「使ったからおすすめするwordpress有料テーマ8選」を参考にどうぞ。結論を言えば、【THE THOR(ザ・トール)】が最強です。

    サーバーは個人的には、ConoHa WINGか、エックスサーバーの2択なので、安いサーバーを使っている人は乗り換えを検討しましょう。

    と言っても、エックスサーバーもコノハも月々の支払は1000円くらいなので、安いですよ。

  • お名前ドットコムの設定方法とはてなブログProの独自ドメインの選び方

    お名前ドットコムの設定方法とはてなブログProの独自ドメインの選び方

    はてなブログProの独自ドメイン設定方法は、比較的簡単にできるので、初心者の方でも30分もあればできますよ。

    Proにしたら自分の好みのURLが使えるので、やっと自分のブログって感じがしますよね。

    カスタマイズも好きにできるし、アドセンスも通りやすいし。

    今回の作業としてまずはドメインを取得するのですが、ドメインの最後って.com、ne.jp、.netなどありますが、これも意味を持っているので自分のブログに合ったものにしましょう。

    ちなみにはてなブログProにまだしていない人は、こちらからProにできます。

    はてなブログ公式ページ

    ドメインの意味

    私が使っているものは.comですが、かっこいいから選びました(笑)。

    意味を知っていたわけじゃないんですが、.comって色々なサイトに使われているので、当時はこれでいいかな~って感じで選んだだけですが、選んで正解でしたね。

    これには意味があり、

    • .com(商業用)
    • .net(ネットワーク用)
    • .inc(法人・株式会社用)
    • .co.jp(企業用)
    • info(情報)
    • org(非営利組織)
    • biz(ビジネス用)

    となります。

    まぁ、実際は用途が違っても選べるので厳格なルールはないのですが、一応意味を知っておきましょう。

    おそらく多くの人が.comを選ぶと思います。初期費用も1000円くらいで安いし、更新料金も安いんですよね。

    ちなみに、10円くらいで販売されている.xyzや.workなどの格安ドメインは、更新すると2000~3000円なんてあるので気を付けて下さい。

    ドメイン名

    ドメイン名はグーグルに何のブログかを伝える意味と、読者にも何のブログか分かりやすい名前を付けるといいですよ。

    覚えやすいとドメイン名で検索されますからね。

    最近流行っているのは、自分の名前.comみたいなのですね。

    自分をブランディング化していくようなサイトに、おすすめですね。

    お名前ドットコムで独自ドメイン取得方法

    まずはお名前.comに行き、希望のドメイン名が空いているか調べます。

    はてなブログProの独自ドメイン取得方法と設定方法

    任意のドメインが空いていれば購入できますが、メールマークがついていたら買えないので別の名前で検索しなおします。

    はてなブログProの独自ドメイン取得方法と設定方法

    ドメインが取得できるなら、お申し込みに進むをクリック。

    はてなブログProの独自ドメイン取得方法と設定方法

    次に内容確認です。

    はてなブログProの独自ドメイン取得方法と設定方法

    Whois情報公開代行は、標準で付いています。

    これは何かというと、ドメインの所有者って簡単に調べられるのですが、情報公開代行が付くことによって、自分の個人情報が表示されずにお名前ドットコムの情報が表示されるようになっています。

    個人情報が漏れないようにするための対策ですね。

    ちなみに昔は有料だったんですよ。1000円くらいとられてたと思います。

    次のWhois情報公開代行メール転送オプションは、全然いらないです。これほど無駄なサービスはこの世に存在しないってくらい、必要ないので無視。

    ドメインプロテクションは、欲しい人はどうぞ。私は設定していないです。

    簡単に言うと、乗っ取りなどを防ぐためのセキュリティです。

    次にメルアドとパスワードを入れて、「次へ」をクリック。

    はてなブログProの独自ドメイン取得方法と設定方法

    次のページは名前や住所などを記入し、最後のページで支払い方法を選択します。

    クレカ・コンビニ・銀行振り込み・請求書で支払いが出来ます。

    クレカだったら通常通り情報を入力してOKですが、コンビニ払いや銀行振り込みは、時間がかかるし手数料も取られます。

    はてなブログProの独自ドメイン取得方法と設定方法はてなブログProの独自ドメイン取得方法と設定方法

    最後に、画面右の申し込むボタンをクリックで完了です。

    1~2分でお名前ドットコムから登録完了の通知が4~5通来るので、確認しましょう。

    はてなブログProの独自ドメイン取得方法と設定方法

    はてなブログProの独自ドメイン取得方法と設定方法

    初回の方は、「ドメイン認証情報のお願い」というメールが来るので、指定されたURLをクリックして認証しましょう。

    独自ドメインをはてなブログに紐づける

    それでは今取得したドメインを、はてなブログに関連付けます。

    まずはお名前ドットコムNaviに行き、ログインします。

    はてなブログとドメインを関連付ける方法

    ログインしたら、上にあるDNSをクリック。

    はてなブログとドメインを関連付ける方法

    更新手続きを~のポップアップが出てきますが、更新画面から移動するでOKです。これいつも出てきてうざいんですよね。

    はてなブログとドメインを関連付ける方法

    「ドメインのDNS関連機能設定」をクリック。

    はてなブログとドメインを関連付ける方法

    次に今登録したドメインにチェックを入れ、次へ。

    はてなブログとドメインを関連付ける方法

    次のページに、「DNSレコードを設定を利用する」とあるので、「設定する」をクリック。

    はてなブログとドメインを関連付ける方法

    次のページの下部に「ホスト名」や「TYPE」と書いたところがあるので、下記のように設定します。

    はてなブログとドメインを関連付ける方法

    • ホスト名・・・www
    • TYPE・・・CNAME
    • TTL・・・3600
    • Value・・・hatenablog.com
    • 状態・・・有効
    • 追加・・・追加

    これらを記入したら変更確認にチェックを入れ、確認画面に進み、間違いがなければ設定します。はてなブログとドメインを関連付ける方法

    はてなブログの設定

    はてなブログのダッシュボードから、「設定」→「詳細設定」に行き、独自ドメインの欄に設定したドメインを入れ、ページ下部にある変更するボタンを押したら完了です。

    はてなブログの独自ドメイン設定方法

    これで終了です。

    最後に

    これで今日から独自ドメインデビューですね。

    今までは無料版だったのでカスタマイズもあまりできませんでしたが、今からは好みのブログにカスタマイズできるので、下記を参考にしてみて下さい。

    テーマInnocentを使っている人だったら、完全にコピペのみで1発でおしゃれなサイトにできるテンプレートを用意したので、「1発コピペで終了!はてなブログInnocentのカスタマイズテンプレート」を読んでみて下さい。

    以下のカスタマイズ集は他のテーマの人でも使えるので、あわせてどうぞ。

    はてなブログのカスタマイズ集(すべてコピペでOK)と収益化方法などのまとめ 

    今スグできる、はてなブログの高速化・9つの対処法 

    アドセンスの申請方法はこちらをどうぞ。

    <2020年>グーグルアドセンス申請方法とはてなブログに貼り付ける方法 

  • はてなブログの無料版で稼ぐ方法・無料版でも稼げるが難しい

    はてなブログの無料版で稼ぐ方法・無料版でも稼げるが難しい

    2019年10月1日より、公式に無料のはてなブログでもアフィリエイトがOKになりましたね。

    ここ最近は、無料版でもアドセンスに通ったって人もいるみたいだし。

    まぁ、はてなブログ無料版で収益を上げたいのなら、アドセンスじゃなくてASPを使わないと稼げないですけどね。

    アドセンスで稼ぎたいならProにしないと、クリックされやすい個所に広告を置けないのであまり意味がないですね。

    では、どうやったらいいのでしょう?

    今回は無料のはてなブログで稼ぐぞ!って人に、その方法を紹介します。

    はてなブログ無料版で稼ぐ方法

    まず最初に知っておかないといけないことは、無料版を使っているとアドセンスじゃほとんど稼げないってことです。

    というのも、記事内の稼げる場所にはてなブログが広告を貼っているので、良い場所が残っていないからです。

    仮に、かなり頑張って皆さんがアドセンス3万円稼いだとしたら、はてな側はおそらく7万円くらい収益が上がっていると思います。

    なんか悔しいですよね(笑)

    じゃあどうやって収益を上げるの?

    はい、ASPを使います。

    こちら「おすすめASP4社を紹介!ブロガーなら登録していないと損だよ」で詳しく解説しているので、後で読んでみて下さい。

    簡単に言うとASPとは、私たちとモノ・サービスを売りたい企業を繋いでくれる仲介者になります。

    アフィリエイトの仕組み ASPとは?

    昔はこういった会社がなかったので、1社1社自分で連絡を取って商品やサービスを紹介させてもらっていたのですが、今はASP経由で提携して、紹介させてもらています。

    簡単になったんですよね。

    詳しくは上で紹介したリンクを見て欲しいので、今回はおすすめの会社を簡単に紹介します。

    バリューコマース・・・案件はそこまで多くないが、サポート体制抜群・情報開示などフェアな会社。詳細はバリューコマースの評判や登録方法・使い方 をどうぞ。

    もしもアフィリエイト・・・報酬が無条件で12%アップするのでお得。案件数はそこそこ。詳細はもしもアフィリエイトの登録方法や使い方をどうぞ

    A8.net・・・案件が多いので、紹介したい商品が見つかりやすいがサポート体制は悪い。報酬を取り消された時のやり取りがすごく面倒。

    注)報酬の振込手数料は、A8以外無料です。

    まずは上記ASP最低2社と、アマゾンと提携しましょう。

    アマゾンで買い物をする人が多いので、アマゾンと提携出来たら稼ぎやすいですよ。

    提携はAmazon アフィリエイトプログラムよりどうぞ。

    アマゾンに受からない人は、もしもアフィリエイトからアマゾンに提携出来るのでやってみて下さい。

    ブログのテーマを決める

    ブログで収益を上げるのであれば、自分の得意分野で収益が上がるような記事を書かなくちゃいけません。

    まずは、自分のブログのテーマを決めましょう。

    例えばあなたの職業がSEだったとします。

    それならSE関連の記事を。

    美容師だったら美容系の記事を。

    車の修理工なら車関係を。

    何当たり前のこと言っているの?って思うかもしれないですが、結構多いんですよね。本職の事を書かずに、自分が書きたい事を書いている人って。

    書きたい事を書くというのは重要ですが、あなたにしか書けないことを書く方が重要なんです。

    あなたの職業=その道のプロなので、その知識を活かしてブログを書いてください。

    仮に趣味の事を書いてもいいですが、本気でやっている趣味の事を書きましょう。

    記事の書き方

    記事の書き方は、書いているジャンルにもよるので一概には言えないですが、記事を書く時は、収益が上がるようなことを書きましょう。

    例えば、「京都に行ってきました」という記事を書く時に、

    • 見出し1・どこどこの観光スポットに行った
    • 見出し2・ここは良し・あそこはダメ
    • 見出し3・どこどこでご飯を食べておいしかった
    • 最後・この記事が誰かの役に立てば幸いです

    はダメですよ。

    典型的な稼げない記事です。アドセンスがあればいいですが、ASPで収益を上げるとなると、これじゃ稼げませんよね。

    ではどうするのか?

    京都に行ったという記事を読む人は、誰でしょう?

    そうです。今から京都に観光に行く人です。

    となると、

    • 飛行機で行く?→ASPでJTBやスカイスキャナーと提携し、チケットの紹介
    • 電車・バスで行く?→予約サイトと提携し、チケットの紹介
    • レンタカーで行く?→レンタカー会社と提携

    また、京都に行くのであればホテルに泊まる可能性が高いですね。それなら、ホテルの予約サイトと提携し、自分が泊まったホテルやおすすめホテルを紹介出来ます。

    ご飯も食べますよね?だったらレストラン予約サイトと提携し、紹介料をもらう事も出来ます。

    京都旅行で持って行って良かったものがあれば、アマゾンでその商品を紹介できますよね。

    今はASPのおかげでどんな職種のサービス・商品もアフィリエイトできるので、無限に紹介できますね。

    このようにあなたが何かをした、お金を使ったという事は、他の人もお金を使うところなので、このサービスのアフィリエイトプログラムってないかな?と探してみましょう。

    どの広告を使うか?

    アフィリエイトの広告には、主にバナー広告とテキスト広告があります。(↓これはアマゾンのバナー広告)

     

    テキストリンクはこれ→金鳥の渦巻き蚊取り線香

    これをうまく記事に絡めて、クリックしてもらうようにします。

    時々申し訳なさそうに広告を設置している人がいますが、自身を持って宣伝しましょう。

    個人的にはテキストリンクがおすすめなので、通常はテキストを使っていますが、アマゾンはカエレバを使えばこんな感じにできます。

    カエレバ 使い方

    カエレバの設定は、「カエレバの使い方や設定方法を画像・リンク付きで紹介」を参考にどうぞ。

    SNSと連携する

    無料版だと自然検索だけで集客するには限界があるので、必ずツイッターやフェイスブックと連携して集客しましょう。

    フォローワーや友達を増やして記事を読んでもらえるようなファンを増やせば、収益化もしやすいです。

    はてなブログ無料版の収入は?

    無料版のはてなで稼ごうと思うと、いくらぐらい稼げるでしょうか?

    私見ですが、1~2年あれば

    • 毎日更新+めちゃくちゃ頑張って月5万~10万円
    • 毎日更新+そこそこ頑張って月3万~5万円
    • 週5更新で月1万~3万円
    • それ以下の更新は月1万円

    このくらいだと思います。

    はっきり言って稼ぎたいなら、wordpressかはてなブログProにしないと稼げません。

    でも頑張れば、月10万円くらいは行けそうですね。

    私の場合は、アドセンス収益が2だとしたらASPの収益は8くらいの割合なので、仮に無料版だったとしても優に収益10万円は超えています。(単純計算はできないですが・・・)

    ぶっちゃけ言うと、Proだから、wordpressだから稼げるわけじゃなく、ライティングスキル(SEOなども)+サイトの質(見た目や高速化、内部SEOなど)+アフィリンクの入れ方が重要です。(無料版だと、高速化や内部SEOには限界がありますが・・・)

    ただし先ほども言ったように、無料版ははてなブログの広告があるので、そちらをクリックされたら私たちには1円も入ってこないのがデメリットですね。

    無料版で稼ごうと思うなら、Proやwordpressの人の3倍・4倍と頑張らないと稼げません。

    はてなブログProに乗り換え

    本気で稼ぎたいのであれば、wordpressやはてなブログProに乗り換えの検討をした方がいいですよ。

    ただし、手遅れにならないうちに。

    仮に無料版で月5万円の収益が出ている時にProに乗り換えをすると、収益がガタ落ちになる可能性があります。

    だってProにする=独自ドメインだから、初めたばかりのドメインはドメインパワーが1なので、今まで稼ぎのあったブログも検索順位が落ちるし、ドメインを育てるのも時間がかかるので思うように上位表示されなくなります。

    注)リダイレクトで記事の評価を受け継げますが、それでも落ちます(経験済み)。

    なので、ターニングポイントは1万円くらいと思います。

    無料版で月1万円の収益が出るのであれば、Proに乗り換えると3~4万くらいはすぐに行くはずだし、評価が落ちて収益が下がっても被害は大きくないし。

    この記事と話がそれるので深くは話しませんが、自分は稼げる!と思うならProにしましょう。

    はてなブログProに登録する

    最後に

    こちらの「はてなブログでアフィリエイトしてお金を稼ぐ方法・決定版」で広告の出し方の具体例や、収益化するために必要なキラーページの解説をしているので、あわせて読んでみて下さい。

    かなり頑張っても稼げない人が多いブログ界で、無料版で稼ごうと、自らハードルを上げるようなものなので、かなり頑張っている人の数倍頑張りましょう。

  • <ブログ初心者>もしもアフィリエイトの使い方・リンクの貼り方を紹介

    <ブログ初心者>もしもアフィリエイトの使い方・リンクの貼り方を紹介

    数あるASPの中でも、もしもアフィリエイトは格段に人気ですね。報酬アップがあったり、使いやすいし、高単価案件も多いので使う人が多いんですよね。

    リンクの使い方も慣れたら簡単にできるので、使いやすいASPですね。

    リンクの使い方や貼り方を紹介しますが、まだ登録していない人は先に登録しておいてください。

    もしもアフィリエイトに登録する

    もしもアフィリエイトの使い方

    まずはプロモーション(広告)の提携をしないと使えないので、提携をしましょう。

    TOPページの検索窓から、任意の会社を探します。もし特定の会社が無い場合は、アフィリエイトしたいサービス、「ダイエット」、「子供用品」、「光回線」などとサービス名を検索して、会社を探します。

    もしもアフィリエイト 広告提携方法

    検索すると色々な会社が出てくるので、よさそうな会社があれば「提携申請する」をクリック。

    似たようなサービスでも報酬(成果)が違うので、良く確認して提携しましょうね。

    もしもアフィリエイト登録方法・初心者向け

    提携には、

    1. 審査あり
    2. 審査なし

    があり、審査なしは即時提携といい、すぐに提携してリンクを貼る事が出来ます。

    審査ありは、審査が通ったらリンクを記事に貼り付けましょう。

    リンクの貼り方

    リンクは主に「バナー」・「テキスト」・「どこでもリンク」・「メール」・「簡単リンク」がありますが、プロモーションによっては、バナーとテキストだけだったりもあります。

    「メール」は、ニュースレターなどのメールに貼り付けるリンクです。

    それでは、アマゾンを使って広告の貼り方を紹介します。

    もしもアフィリエイト登録方法・初心者向け

    トップページの「プロモーション検索」→「提携中プロモーション」広告と提携すると、提携している広告が一覧で表示されるので、任意の広告から「広告リンク取得」をクリック。

    もしもアフィリエイト登録方法・初心者向け

    すると、広告の種類が選べるので、ここから好きなタイプを選びます。

    もしもアフィリエイト登録方法・初心者向け

    全てのリンクは、HTML編集、もしくはテキストエディタで貼り付けます。

    はてなブログの場合は、HTML編集から貼り付け。

    もしもアフィリエイトのリンクをはてなブログに貼る方法

    wordpressの場合は、テキストから貼り付け

    もしもアフィリエイトのリンクをwordpressに貼る方法

    バナー広告の設定方法

    基本的に広告企業のトップページに移動するリンクです

    もしもアフィリエイト バナー広告設定

    バナー広告は、プレビューの欄に出ている広告が表示されるリンクです。

    基本的に、バナー広告は記事内に入れるとクリック率が悪いので、サイドバーに使うことが多いです。

    貼り付け方法は簡単で、「ソース」を記事内にコピペするだけです。

    はてなブログのサイドバーに貼る方法は、「はてなブログのサイドバーに広告を貼る方法」で詳しく紹介しています。

    テキスト広告の使い方

    もしもアフィリエイト登録方法・初心者向け

    テキスト広告も同じで、「ソース」に書かれたコードを貼り付けるだけです。

    ちなみに「(自由テキスト)」と「Amazon.co.jp」と2種類ありますが、自由テキストは自分の好きな言葉に変えてOKで、Amazon.co.jpと書かれているものは、文字の改変をしてはいけません。

    これはもしもに限らずに多くのASPで改変はできないことになっているので、注意してください。

    文字を変えたら報酬が出ないこともあります!

    自由テキストであれば、記事になじむように言葉を変えられるので、おすすめですね。私はほぼ100%、自由テキストとどこでもリンクを使います。

    どこでもリンクの使い方

    もしもアフィリエイト登録方法・初心者向けどこでもリンクの使い方

    自由テキストと並んで、これも使い勝手がいいです。

    自分で指定のページURLを入れて、そのページに移動することが出来、言葉も好きに入れることが出来ます。

    例えば、企業のトップページに説明が長々書いてありなかなか購入ボタンまで行けないようなサイトは、購入ボタンを押した後のページURLを設定すれば、読者もすぐに購入できるので時間の節約にもなるし、離脱を防げます。

    使い方は、「選んだプロモーションを別ウィンドウで開く」をクリックし、サイト内の任意のページURLを「リンク先URL」にコピペします。

    表示されるソースを自分のページに貼れば、完了です。

    かんたんリンク

    最後に「簡単リンク」の使い方です。これを使えば、Rinkerやカエレバを使わなくても、amazon、楽天、Yahoo!ショッピングのリンクを表示できます。

    もしもアフィリエイト 簡単リンクの使い方

    1 もしもアフィリエイトのTOPページの「かんたんリンク」をクリック。

    もしもアフィリエイトでAmazonと提携する方法

    2 楽天とYahoo!ショッピングと提携していない場合は、ページ下部の「対応プロモーション」からクリックして提携します。

    もしもアフィリエイト 簡単リンクでamazonを使う方法

    3 商品名もしくは漠然とした商品を検索します。

    もしもアフィリエイト 簡単リンクでamazonを使う方法

    例として、「NIKE 靴」と検索したら色々と商品が出てきたので、目当てのものをクリックし、正確な商品名をコピペしてもう一度検索に掛けます。

    もしもアフィリエイト 簡単リンクでamazonを使う方法

    4 正確な商品名を入れたら、やっとプレビューが表示されるので、確認します。

    もしもアフィリエイト 簡単リンクでamazonをかんたんリンクで使う方法

    プレビュー通りで良ければ、その下の「HTMLソース」をコピーし、記事に貼り付けます。

    もしもアフィリエイト 簡単リンクでamazonをかんたんリンクで使う方法

    5 するとこの写真のようなリンクが表示されます。

    もしもアフィリエイト 簡単リンクの使い方 超簡単ですね。

    最後に

    慣れれば簡単にリンクを設置できるようになるので、頑張ってください。

    もしも以外のASPも登録していると思いますが、もししていないのであれば下のリンクの稼ぎやすいASPにも登録しておきましょう。

    A8ネットの登録方法と広告リンク全ての使い方を紹介!

    バリューコマースの評判や登録方法・使い方 

    おすすめASP4選!ブロガーなら登録しておかないと損だよ

  • バリューコマースの評判と登録方法

    バリューコマースの評判と登録方法

    数あるASPの中で、私が一番気に入っているのはValuecommerceです。

    何と言ってもフェアで案件もそこそこ多いし、担当が親切丁寧ですね。

    リンクの種類も豊富だし、初心者の為にノウハウ集もあるし。

    バリューコマースはブログを始めたらまずは登録しておきたいASPなので、まだの方は登録しましょう。

    バリューコマースに登録する

    バリューコマースの評判・特徴

    かなり簡単にですが、一番の特徴はこれになります。

    1. スタッフが親切丁寧
    2. 報酬振込手数料は無料
    3. 情報開示をしていてフェアな会社

    実際に私が使ったレビューですが、フェアな会社です。

    「フェア」とは、平等って意味ですね。

    例えば他のASPだと、成果についての詳細を開示していないところが多いのですが、バリューコマースはほとんどのプログラムが情報を開示しているんです。

    例えばこれ見て下さい。あるプログラムの報酬詳細です。

    おすすめASP・バリューコマースの評判や登録方法に使い方

    赤枠で囲ったところってかなり大事なんですが、多くのASPはランクが上がらないとこの部分が見れないことが多いんですね。

    簡単に意味を紹介します。

    • 平均EPC・・・Earn Per Clickの略で、広告の1クリック当たりの収益
    • 提携審査目安・・・プログラムに提携されるまでの目安日数
    • 平均承認率・・・成果が発生して確定する確率
    • 成果確定目安・・・成果が発生して確定するまでの目安日数

    特に重要な個所を赤字で紹介しましたが、これが私たちが広告を掲載する前に知りたい情報なんです。

    平均EPCは広告1クリック当たりの収益ですが、このように計算します。

    成果報酬1000円の広告が10クリックされ2件報酬(2000円)発生→EPC200円(報酬2000円÷10クリック=200)

    注)10件広告をクリックしても、全員が全員商品を買うわけじゃないので、報酬は10件にはならないですね。この例で言えば、実際に買った人が2人です。

    中にはこのEPCが1円や0円と言ったものがあります。という事は、ほとんど稼げないってことです。

    なので一般的に、EPCが高い広告を選んだ方がいいです。

    平均承認率は、例えばレンタル会社のサービスに無料登録したら報酬が出る案件とします。

    成果が10件発生(10人が登録)したのに報酬が5人分しか確定せず、他の5人は何かしらの理由で拒否されたとします。

    となると、平均承認率は50%になります。

    なので承認率は高い広告じゃないと、無駄働きする可能性が大です

    知り合いのブロガーで、何百件の成果が否認された人もいますよ。ゆくゆく見るとその広告の承認率は0.1%とかだったと思います。

    こうなると意味ないですよね。

    この重大な2つの個所をみんなに開示しているのでバリューコマースは評判がいいし、稼ぎやすいんですよね。(すべてのプログラムが開示してるわけじゃないですが、見た感じ99%は開示している感じです。)

    私は主にバリューを使っているのですが、成果はこんな感じです。

    バリューコマースの評判・アフィリエイト報酬まだ承認されていない分もありますが、今月は承認率が82.9%となっています。1クリック当たりの収益であるEPCも85.31円と結構高いです。

    また下の項目で紹介しますが、リンクの種類も豊富で使いやすいんです。

    なので、特に初心者はバリューコマースでアフィリエイトするべきですね。

    審査が厳しい

    私は落ちたことが無いので分かりませんが、ブログを教えている生徒(?)たちが「バリューコマースに受からない!」って嘆いていましたね。

    登録審査における必須事項にも書かれていますが、運営者利用規約や運営ポリシーが遵守されていたら大丈夫だと思うのですが。

    以下の点に注意していれば、受かると思いますよ。

    • プライバシーポリシーや免責事項を明記している
    • 記事は5記事以上
    • 申請時に書き間違いが無い様にする

    プライバシーポリシーなどは当たり前ですが、記事が5記事以上というのは実際にバリューコマースの人に言われました。

    少なくとも5記事以上ないと審査が出来ませんよ By バリューコマースの担当

    これはある企業風アフィサイトを作っている時に、「全記事同時に公開し、リライトしたくないから、公開前に提携させてください。そうしたら、公開時にサイトが完璧になるから」ってお願いしたんですが、上の様に言われました。

    また、他のサイトを見ると最低700文字~1000文字は必要なんて言っていますが、そんなに文字数少ない記事を書くの?って感じです。

    日記ならいいかもしれませんが、ASPに登録して稼ぎたいんですよね?そうであれば必然的に文字数が増えると思いますよ。(文字数が多いのが良いというわけじゃないですが、普通はもっと多くなると思います)

    なので、2000文字を目安に5記事以上書いてみて下さい。

    ランキング

    バリューコマースのランク精度

    2020年5月より契約者ランク制度が始まりました。ちょっと面倒くさいのは、カテゴリーごとにランキングを付けているので、アカウント全体に特典が適用されるわけじゃありません。

    ランキングが上がると報酬が増えたり、提携審査が免除になることもあります。ただし、ランクによって報酬額を変えている広告のみ報酬が上がるので、どのランクでも報酬が同じという広告もあります。

    私はシルバー(上位4%~10%)とブロンズ(上位11%~20%)のランクがありますが、特に報酬が上がったりはしていないので影響がないです。ただ、自分がどのくらいの位置にいるか確認できるので面白いですね。

    バリューコマースのランク精度

    ランキング制度

    概要は以上です。登録がまだな人は、次で登録方法を紹介するのでいっしょにやってみましょう。

    バリューコマース登録方法・手順

    登録には、報酬振り込み用の口座情報が必要です!

     まずはこちらバリューコマース公式ページに行き、会員登録をクリックします。

    おすすめASP・バリューコマースの登録方法

     メルアドを入力し利用規約にチェックを入れ、次へ

    おすすめASP・バリューコマースの登録方法おすすめASP・バリューコマースの登録方法

     確認でメールを送信しますか?と出るので送信

    おすすめASP・バリューコマースの登録方法

     メールにメッセージが来ているので開いて、中にあるリンクをクリック

    おすすめASP・バリューコマースの登録方法

     登録情報の入力です。個人の場合は「個人」にチェックをし、住所などを登録します。

    おすすめASP・バリューコマースの登録方法

    ほとんどの人がレスポンシブテーマを使っているので、「スマホサイトに対応している」にチェックも入れましょう。

    おすすめASP・バリューコマースの登録方法おすすめASP・バリューコマースの登録方法

    最後に、次へを押して確認して登録終了です。今から審査するってメールがバリューコマースから届きます。

    おすすめASP・バリューコマースの登録方法

    一応審査があるので落ちる人もいるかもしれませんが、普通のブログを1~2週間していて記事も10記事くらいあれば通ると思いますよ。(10記事なくてもいいかも)

    2~3日で結果がメールされます。

    ちなみに私が登録した時は、無料はてなブログを使っていたみたいです(笑)覚えてなかったですね。

    おすすめASP・バリューコマースの登録方法

    バリューコマースに登録する

    最後に

    最初にも言いましたが、バリューコマースはフェアで親切なのでたくさんのリンクを使っており、かなりお世話になっています。

    承認率の情報開示をしているので、落胆することも少ないですしね。

    絶対に提携しておきたいASPの1つなので、まずは登録しましょう!

    他の有名ASPは、もしもアフィリエイト、A8、アクセストレードとあるので、こちらも登録しておくことをおすすめします。

    こちらも一緒にどうぞ

    もしもアフィリエイトの登録方法やメリット

    A8ネットの登録方法と広告リンク全ての使い方を紹介!

    おすすめASP4選!ブロガーなら登録しておかないと損だよ

  • A8ネットの登録方法と広告リンク全ての使い方を紹介!

    A8ネットの登録方法と広告リンク全ての使い方を紹介!

    A8ネットは私が知る限りじゃ案件数が最多のASPじゃないかと思うほど、いろんな広告がありますね。

    しかも最大手じゃないでしょうか?

    ブロガーだったら、誰しもが登録はしていると思いますよ。

    A8ネットの管理画面は使いやすいし見やすいので、誰でもすぐに使いこなせると思います。

    まだA8netに登録していない人は、登録の手順を紹介するので一緒にやっていきましょう。

    A8ネット登録方法

    まずは、A8ネットの特徴を簡単に紹介します。

    1. 案件が多いので、アフィリエイトしやすい
    2. サイトが早いのでイライラしない
    3. セルフバックが魅力的
    4. 振り込みに手数料がかかる!

    他のアフィリエイト会社(総称はASPといいます)は振込手数料が無料なのですが、A8は手数料がかかります・・・。まぁ、しょうがないですね・・・。

    振込先銀行によって66円~770円かかります。郵便局が66円と安いので、口座は郵便局にしたらいいかもですね。

    それでは、登録方法をご紹介します。

     まずはA8.netから登録のページに行き、「無料登録でアフィリエイトを始める」をクリック。

    A8ネットの登録方法と使い方

     メルアドを登録して、「I’m not a robot」「規約同意」にチェックを入れ仮登録メールを送信する

    A8ネットの登録方法と使い方

     メルアド登録後すぐにこのようなメッセージが届くので、「登録用URL」をクリック

    A8ネットの登録方法と使い方

     個人情報の入力をします。

    • ログインID・・・基本的に何でも良いですが、ニックネームやサイトの名前でOK
    • 区分・・・個人なら個人にチェック

    A8ネットの登録方法と使い方

    名前などの重要個所は、絶対に間違えないように!名前が違うと、口座登録の時に登録できないかもしれません。

    A8ネットの登録方法と使い方

    ↑このサイトを持っているかいないかですが、もうすでにブログなどがあるのなら「お持ちの方」をクリック。もし何もない人は左をクリックして「ファンブログ(無料ブログ)」の設定をします。これは設定だけ必要なので、ファンブログを使っても使わなくてもOK

     ↓サイトを持っていない人向け。セルフバックでA8アカウントが欲しい人は、全て適当に入れればOKです。ファンブログを始めたい人は、URLなど考えて入力しましょう。

    下記は例です。

    A8ネットの登録方法と使い方

    5.1 サイトを持っている人向け。全て正直に書いて大丈夫なので、見栄を張らずとも全員審査に受かります。

    • 月間訪問者数・・・5以下でもOK
    • 月間ページビュー数・・・100以下でもOK
    • サイト紹介文・・・簡単に「日記です」などでもOKだし、詳しく書いてもOKです

    A8ネットの登録方法と使い方

     口座情報入力です。報酬の振り込みに使うので、正しいものを間違いない様に書きましょう。(修正可能です)

    先ほど言ったように、ゆうちょは振込手数料が66円と安いので、郵便局の口座を持っていたら、それがいいかもです。

    A8ネットの登録方法と使い方 最後に確認画面に行くので、記載事項に違いがないか確認しましょう。

    すべて完了したら、すぐに登録完了のお知らせが来ます。

    A8ネットの登録方法と使い方 ちなみに私は、無料はてなブログを使っていたみたいで、名前がはてなブログ様ってなってますね。(笑)

    A8.net

    A8netの使い方

    A8ネットの使い方Topページにログインすると、「レポート」「プログラム検索」「プログラム管理」「ツール」とあり、その上に検索窓があるので、基本これを使って提携したい広告を探します。

    探し方は、結構自由にできます。

    • 「靴」や「服」、「化粧品」など漠然としたもの
    • 「NIKE」や「アディダス」などブランド名・企業名
    • 「ダイエット」「筋トレ」などでもOK

    もしくは、アマゾンなどの通販サイトと提携も出来ます。(Amazonならもしもアフィリエイトがいいですが・・・)

    登録したばかりでどことも提携していないと思うので、いろいろ自分に合った広告主を探してみて下さい。

    では、この広告を例にして、見方を紹介します。

    A8ネットの使い方

    • 提携審査・・・審査ありはブログを審査されるので、提携まで時間がかかる事があります
    • 即時提携・・・すぐに提携されるので、すぐに広告をブログに掲載できます
    • 再訪問期間・・・読者がクリックしてもその日は購入しなかった場合でも、その期間内であれば成果につながる
    • 成果確定目安・・・成果が発生してから確定するまでの目安日数です。中には300日なんてものも有るので注意!

    報酬も高いし気に入ったという事であれば、「詳細を見る」をクリックして条件を確認し、よければ下の方にある「提携申請する」をクリックで、提携します。

    a8ネットの使い方

    A8ネット・広告の作り方、リンクの設置方法

    提携後に「プログラム管理」→「参加中プログラム」から提携しているプログラムを探し、広告を作ります。

    提携した広告主から、広告リンク、もしくは商品リンクを作って記事に貼り付けます。

    A8ネット・広告の作り方、リンクの設置方法

    いづれかのリンクをクリックしたら、「広告タイプ」というところがあるので選び、下の「広告リンクを表示」をクリックします。

    A8ネット・広告の作り方、リンクの設置方法

    まずは「広告リンク」からです。

    バナー広告の貼り方

    ↓これがバナー広告

    A8net・バナー広告の使い方

    バナー広告は、バナーですね。

    素材をコピーするをクリックして、テキストエディタやHTML編集で記事に貼り付けるだけです。

    A8ネット・広告の貼り方

    A8ネット・広告の貼り方 はてなブログ

    バナー広告は主にサイドバーに貼ることが多いですね。記事中にも貼ることはありますが、私はほぼ無しです。クリック率悪いですもんね。

    テキスト広告

    A8ネット・テキストリンクの使い方

    テキストリンクも、素材をコピーするをクリックしてテキスト(HTML編集)で記事に貼り付けるだけですが、こんな感じ(←これはクリックしてもどこにも移動しません)になります。

    記事になじむし、自然に読者を誘導できるので使うことが多いですね。

    テキストリンクの使い方で、上手な使い方を紹介しているので一緒に読んでみて下さい。

    メールリンク

    読者にメール登録してもらった場合は、このメールリンクを使います。

    私の知り合いは、このメールリンクだけで結構な収益をあげています。ブログのアクセス数に影響されないので、メール登録読者が多い人は有効活用できます。

    A8ネット・メールリンクの使い方

    使い方は上と同じで、素材をコピーするをクリックしてメールに貼り付けるだけです。

    商品リンクの作り方・使い方

    商品リンクは、好きなURLを指定してリンクを作る時に使います。

    例えば商品が多くあっていろんなページがある広告主だったら、トップページに移動せずに、狙った商品のURLに読者を移動させることが出来ます。

    今回は例として、サーバー会社のMixhostでやります。

    A8ネット 商品リンクでバナー広告を作る方法

    商品リンクに使うURLは、必ずページ上に記載されている赤カッコのURLの中から選びましょう

    同じ企業のページでも、仕様や値段が違うことがあるので、中にはアフィリエイトリンク専用のページがある企業もあります。

    バナー

    まずは先ほどのリンクをクリックすると、MixhostのTOPページに行きます。ここで任意の使いたい画像を探すのですが、今回は一番上にあったウルトラマンの画像を使います。

    A8ネット 商品リンクコードでバナー広告を作る方法

    この画像の上で右クリックをし、画像のアドレスとリンクのアドレスをコピーします。

    A8ネット 商品リンクでバナー広告を作る方法

    A8に戻り、リンク先URLと掲載画像URLに今コピーしたURLをペーストし、下の赤枠部分のURLを自分のブログに貼り付けたら完了です。

    A8ネット 商品リンクコードでバナー広告を作る方法

    基本的にその企業にある画像はどれを使ってもいいはずですが、今回のウルトラマンの画像や人物画像は2次転用してはいけない可能性もあるので、極力人物などが写っていない画像を選んだ方がいいと思います。

    と言うのも、一度だけですが別のASPで人物の画像を選んで使ったら、その俳優さんの所属会社との契約なのか「人物画像を使っている場合は別の画像に差し替えて下さい」というメールが来たことがあります。

    人物画像を使う危険性

    最近は著作権の事がうるさいので、気を付けた方がいいですね。

    テキスト

    テキストリンクは任意のテキストを使えるので、役に立ちます。

    というのも、中には指定のリンクテキストが長くてダサい会社もあるので、こう言ったときはこのテキストリンクで自分でテキストを作ります。

    • 任意のURLを選び、任意のテキストにする

    ただし、あまりにも誇張表現があるテキストは成果キャンセルされるので、一般常識の範囲で作りましょう。

    フリー素材

    メルマガなどのメールに使う専用のものです。

    ただしこれはテキストでなく、URLが作成されるだけなので、見た目はこんな感じになります。

    https://px.a8.net/svt/ejp?a8mat=35S1Fvevejvpenvb;eopvkLVDmVmvve5e13bml;b

    最後に

    A8は案件数が多いのでお勧めですが、個人的に成果が出やすいと思うのはもしもアフィリエイトと、バリューコマースです。

    もしもは報酬が12%アップするし、バリューは必要な情報を開示しているので、初心者でも稼ぎやすいですよ。

    登録がまだの人は、こちらも登録しておきましょう!

  • wordpressにWebPを初心者でも簡単に設定する方法・エックスサーバー

    wordpressにWebPを初心者でも簡単に設定する方法・エックスサーバー

    ここ最近よくWebP(ウェッピー)て言葉聞きますよね。

    PageSpeed Insightでブログを計測しても、大体画像のことを言われますし。

    以前から気になっていたのですが、.htaccessを触らないといけないから敬遠していたんです・・・。

    ただしいつかはやらないといけないのでと思い、やってみたらなんと5分で終わったのでご紹介します(笑)

    wordpressを、エックスサーバーを使っている人は言っときますけど、超簡単です。

    WebPとは?

    WebP(ウェッピー)とはファイルの形式で、よく聞くのはJPGやPNGですね。簡単に言うとこの仲間で、画質はキレイだけど容量が軽いものになります。

    ウェブサイトは軽いに越したことは無いので、やっていた方がいいですね。

    今回使うのは簡単にできる、Ewww Image Optimizerです。

    プラグインで一括編集するので、既存の画像を簡単にWebP化できるし、今後アップロードするものは全部WebPに自動変換されます。

    PNGは画質が一切落ちずに30%くらい圧縮できますが、JPGはちょっと画質が落ちます。それでも25%くらい圧縮できるので、問題ないですね。

    wordpressにWebPを設定する方法

    流れとしてはこのようになります。

    1. プラグイン・Ewww Image Optimizerをインストール
    2. サーバーで.htaccessを編集
    3. Ewww Image Optimizerで変換する

    この3つになります。

    Ewww Image Optimizerの設定

    Ewww Image Optimizerというプラグインを使うので、まずはこれの設定をします。

    ブログの画像をWebPにする方法

    私はもう使っているので「有効」になっていますが、通常はここに「今すぐインストール」と出ているので、クリックし、有効化します。

    プラグインの設定画面に戻り、設定をクリック。

    Ewww Image Optimizerを使って画像をWebPにする方法

    今から3か所チェックを入れます。

     ベーシックタブ・メタデータを削除にチェック。画像の位置情報などの余計な情報を消すためです。

    Ewww Image Optimizerを使って画像をWebPにする方法

     変換タブ・コンバージョンリンクを非表示にチェック。これは勝手に画像がPNG→JPG、JPG→PNGなどに変換しないようにするためです。

    Ewww Image Optimizerを使って画像をWebPにする方法

     WebPタブ・JPG、PNGからWebPにチェックし変更を保存をクリック

    Ewww Image Optimizerを使って画像をWebPにする方法

    変更を保存をクリックすると、その下にコードが出てくるので、これを.htaccessにコピペします。右下に大きくPNGと書かれていますが、設定が上手く行けば緑でWebPと表示されます。

    Ewww Image Optimizerを使って画像をWebPにする方法

    エックスサーバーの設定

    .htaccessを編集するので、必ずバックアップを取ってからやってください!

    エックスサーバーにログインし、サーバーパネルに行きます。

     .htaccess編集をクリック

    Ewww Image Optimizerを使って画像をWebPにする方法・エックスサーバーの設定方法

     ドメインを選ぶ

    Ewww Image Optimizerを使って画像をWebPにする方法・エックスサーバーの設定方法

     .htaccess編集をクリック

    Ewww Image Optimizerを使って画像をWebPにする方法・エックスサーバーの設定方法

     変更前はこの様になっています。この先頭にコードをコピペします。コピペだけなので間違えることは無いと思いますが、一字一句消さないように慎重にペーストしてください。

    Ewww Image Optimizerを使って画像をWebPにする方法・エックスサーバーの設定方法

    Ewww Image Optimizerを使って画像をWebPにする方法・エックスサーバーの設定方法

    最後に右下にある「確認画面へ進む」をクリックし、間違いなければ「実行する」を押して完了です。

    wordpressに戻って、プラグインのページしたにあるアイコンがWebPになっていたらOKです。

    wordpressのサブディレクトリをWebP化する方法

    要バックアップ!!

    上で紹介したやり方では、サブディレクトリに作ったwordpressには適応されないので、FTPソフトやウェブFTPを使ってサブディレクトリの.htaccessを編集します。

    本来であればFilezillaなんかを使った方がいいのですが、大したカスタマイズじゃないので私はエックスサーバー上からやりました。

    マネしないでくださいね。

     ログイン後に「ファイル管理」をクリック

    wordpressのサブディレクトリにをWebp化する方法

     任意のドメインを選ぶ

    wordpressのサブディレクトリにをWebp化する方法

     Public_htmlをクリック

    wordpressのサブディレクトリにをWebp化する方法

     サブディレクトリのフォルダ(私の場合はlife)をクリック

    wordpressのサブディレクトリにをWebp化する方法

     .htaccessにチェックを入れ編集をクリック(.htaccessをクリックするとファイルがダウンロードされます)

    wordpressのサブディレクトリにをWebp化する方法

     Ewww Image Optimizerで表示されたコードを先頭にコピペ(コピペする前に元々書いてあるものをメモにコピペしておきましょう)

    wordpressのサブディレクトリにをWebp化する方法

    確認して間違ってなければ実行をして完了です。

    プラグインに戻ると、先ほど赤でPNGと書いてあったものが、緑でWebPになっていればOKです。

    Ewww Image Optimizerで変換する

    wordpressの管理画面に戻り、設定→Ewww Image Optimizerをクリック。

    Ewww Image Optimizerを使って画像をWebPにする方法

    ページ上の方に「一括最適化」と書かれたリンクがあるので、これをクリック。

    Ewww Image Optimizerを使って画像をWebPにする方法

    次に、最適化されていない画像をスキャンするをクリックを押すと、全ての画像がWebPに変換されます。

    Ewww Image Optimizerを使って画像をWebPにする方法

    写真の数にもよりますが、10分くらいかかったサイトもありました。

    WebPに変換された確認方法

    PageSpeed Insightで速度計測するなら、これを見ても確認はできます。

    WebPに変換されたか確認

    変換されていない写真もあるみたいですが、次世代規格になっていますね。

    他の確認方法は、自分のサイトに行き、右クリックから「検証」をクリックし、サイトの中身をチェックします。

    WebPに変換されたか確認

    画面が2つに分かれるので、その右側の「Network」→「Img」をクリックして「Type」で確認できます。

    WebPに変換されたか確認  ここでWebPとなっていたら変換されていますが、なってないものも時々あります。

    何故でしょう?

    分かり次第追記しますね。

    速度はどのくらい上がったのか?

    WebPにしてどのくらい速度が上がったのか

    3つのサイトをWebPに変えてトップページの速度を図ってみましたが、まぁまぁの変化ですね。

    もうちょっと劇的に変わるかと思っていたのでちょっとショックですが、5分程度の作業で速度が上がったので、悪くないですね。

    記事のページは、WebP変換前をスクショしていなかったのですが、10くらいスコアが上がっていました。

    WebPにしてどのくらい速度が上がったのか

    最後に

    WebPは今後必須になって来るので、必ずやっておきましょうね。

    高速化のためにWebPも大切ですが、遅いテーマを使っているといくら頑張っても遅いので、テーマ選びも重要ですね。

    私は最近いくつかのテーマを買ったので、レビューも書いています。

    「使ったからおすすめするwordpress有料テーマ8選」も一緒に読んでみて下さい。

  • はてなブログ・リライト方法を実例画像付きで紹介

    はてなブログ・リライト方法を実例画像付きで紹介

    ブログを毎日投稿しているのに、PVが伸びない?

    もしくは、グーグルのアルゴリズムアップデート、直撃しちゃいましたか?

    ブロガーであれば避けては通れない道ですね・・・

    こうなると記事のリライトをするか、待つしかありません。

    みんなは「リライト」をしないといけないのは知っていると思いますが、正しいやり方を知っている人はどのくらいいるんでしょう?

    リライトを制するものはブログを制するってくらい重要なので、しっかりやっていきましょう。

    リライトの注意点

    リライトはいつやってもいいわけじゃなく、ブログを始めたばかりの人だったら新規投稿をしてから2ヶ月くらいを目安にやっていきましょう。

    というのも、記事を投稿して時間がたってからページの評価が上がるので、すぐにリライトしたらページの評価が下がることもあるし、検索順位も上がらないことが多いです。(個人的には、評価が下がる事が多いです)

    また、ある程度のデータがないとサーチコンソールでクエリが出てこないので、ちゃんとしたリライトが出来ないって面もあります。

    では、リライトする個所を紹介します。

    ブログ・リライトの方法・やり方

    右に、1・文章、2・見出し、3・タイトルと番号を打ちましたが、これがリライトする順番です。

    なぜかと言うと、

    • (良くも悪くも)文章のリライトが一番変動が少ないので順位が大幅に変動しにくい
    • 見出しは重要な部分なので、下手すると大きく変動するから
    • タイトルの変更は違うページとみなされることもあり。クエリ自体変わるので影響大

    なので、まずは文章から変更していきます。

    文章をリライトする

    コツは面倒くさがらない!

    文章をリライトする時に見るところは、「情報量が足りているか」どうかです。

    手を抜いて書いていないか、誤字脱字はないか、逆に書きすぎて情報量が多くなりすぎてないかもチェックしていきます。

    では、どういった情報を追加したらいいのか?

    ウィキペディアで調べたり、競合ブログを読んで確認してください。コピーはダメですが、自分に足りない情報を書いているのであれば、参考にしましょう。

    忘れてはいけないことは、情報量を増やすことでなく、読者が分かりやすい・納得いく・知りたい情報を追記するんです

    あなたが書きたい事、他のブログが書いている事を追記するんじゃなく、読者が知りたい事を追記しましょう。

    また、ブログを始めたてのころは成長具合が早いので、2週間前、1か月前に書いた記事を読むと、恥ずかしいくらい下手だと感じることがあるので、リライトがしやすいと思います。

    私は、見出しの文章全部消して完全に書き換えることもありますよ。追記するよりも、書きやすいときがあるんですよね、

    ブログ・リライトの方法・やり方

    見出しリライトをサーチコンソールを使ってやる方法

    見出しは重要な個所なので、検索順位が上の方にあるものは考えてからリライトしましょう。もしかしたら、リライトしなかった方が良いなんてこともありますよ。

    さて、見出しのリライトは、サーチコンソールを使います。

    左側にある「検索パフォーマンス」をクリックすると、グラフが表示されますよね。そこの上部にある「+新規」「ページ」にリライトしたい記事のURLをコピペします。

    リライトのやり方・見出しの変更方法

    ここにURLをコピペし、適用。

    リライトのやり方・見出しの変更方法

    すると、このURLの表示回数やクリック率などが分かります。で、この下に行くとクエリ(検索されているキーワード)が表示されるので、このキーワードをチェックします。

    リライトのやり方・見出しの変更方法リライトのやり方・見出しの変更方法

    見出しに付け加えるのは、このクエリたちです。

    これは読者が検索したキーワードなので、これが読者が欲しい情報なんですね。

    でも全部付け加えたらいけませんよ。

    キーワードが多すぎても検索順位って上がらないので、記事の流れに沿ったものを1~3つ付け加えましょう。

    検索順位が圏外なんて言う記事があったら、文章を全部消してこのクエリのみを使ったキーワードでリライトしたら、検索順位はほぼ間違いなく上がります。

    ただし、面倒くさいですね。そんなことするなら新しい記事を書きたいって思うと思いますが、クエリは読者が知りたい事を教えてくれるので、言わば答えが分かったテストなので、やった方がいいですよ。

    見出しリライト2

    これは記事を書く時によく使うのですが、キーワードプランナーを使ったり、関連キーワードGRCなどを使って見出しになるものを調べます。

    簡単なので関連キーワードで例を見ましょう。

    β版なので時々バグりますが、基本的に使いやすいです。

    検索キーワードに調べたいキーワードを入れると、検索ボリュームが多い順に「Googleサジェスト」に表示されます。

    ブログのリライトのやり方・見出しの変更方法

    例えばアドセンスで調べると、

    1. アドセンスとは
    2. アドセンス 審査
    3. アドセンス 収益

    と書いているので、これを順に見出しにして書けばOKです。

    各キーワードをクリックするとグーグル検索に行くので、ここで上位表示されるサイトをチェックしてどんなことが書いてあるのか参考にしましょう。

    タイトルのキーワード

    リライトで一番破壊力が大きいのは、タイトルを変更することです。

    全然違う記事にも変更できますしね。

    どんな時にタイトルを変更するのか?

    まずはサーチコンソールを調べます。

    リライトのやり方

    この記事は平均CTR(クリック率)が2.9%とかなり低いです。

    私は7%以下だと「タイトル変えようかな?」って思うのですが、こんなに低いものはタイトルを変えたらクリック率が上がる可能性が高いので検討した方がいいです。

    ただし、自分の記事よりも上に表示されているサイトが何かを見てから、変更します。

    例えば、

    • 上位サイトは企業のサイト(その商品の販売会社やアマゾンなど)
    • ウィキペディアなど

    などの太刀打ちできないサイトであれば、タイトルは変更しない方がいいです。

    これはある商品のレビュー記事なのですが、クエリを見てみるとその商品名だけのビックワードだったら3.5位、3.9位で検索上位にはその企業の商品ページがあるだけです。

    商品名+レビューになると私のサイトが一番になります。

    CTRも7%でめちゃくちゃ悪いわけじゃないので、触らずにしています。

    次に、下の画像は検索があまりないし削除しようかと思ってた記事なので、タイトルを数か月前に変えたものです。

    リライト・タイトルを買えるメリット・デメリット

    6ヶ月間のCTRが3.5%→3か月間のCTRが3.7%→28日間のCTRが4.8%→過去7日間のCTRが6.3%と上昇しました。

    掲載順位も変わっているので一概にも言えませんが、CTRは上がっていますね。

    どんなことをやったか?これです。

    • できれば26文字以内に収める
    • 重要キーワードを左詰め
    • 読者がクリックしたくなる・読みたくなるようなタイトル

    タイトルに入れるキーワードは、多くても3つくらいにしましょう!

    キーワードが多すぎると、検索1位を取る事が難しくなります。

    実例として、この記事のタイトルは「ブログのリライト方法を実例画像付きで紹介」ですが、

    1. ブログ(キーワード)
    2. リライト(キーワード)
    3. 実例画像付き(クリックしたくなる)

    としています。

    みんなも自分がクリックしたくなるようなタイトルを考えて、やってみて下さい。

    私はタイトルを考えるのに、5分10分かかることもありますよ。

    最後に

    リライトは本当にきついですが、これが出来る人は少ないのでやれば検索順位も上がるし、ライティングのスキルも付くので、必ずやりましょう。

    ちなみにリライトした記事は、「いつ・何を変更したか」をメモに書いておくと後々検証が出来ますよ。

  • はてなブログのヘッダーに画像の設定とカスタマイズ

    はてなブログのヘッダーに画像の設定とカスタマイズ

    はてなブログのヘッダーに画像を入れてオリジナリティーを出したい人って多いと思うので、簡単にできる方法を紹介します。

    結構幅が合わなかったり、スマホだと大きくなったりして面倒だったのですが、その点もコピペで対処できるように紹介します。

    ヘッダーに画像を入れる

    画像を入れると言っても、写真などは極力入れない方がいいです。だって表示速度が遅くなるので、グーグルに嫌われるからです。

    仮に画像のサイズが70KBであっても表示速度の足を引っ張るので、止めた方がいいです。高速化に関しては、「今すぐできるはてなブログの高速化・9つの方法」を参考にどうぞ。

    写真をアップしたい人は、次の項でやり方を紹介していますが、まずは一般的で一番表示速度に影響しにくい画像を作成し設定する方法を紹介します。

    今日はサンプルに、こんな画像を2分で作ってみました。

    はてなブログ ヘッダーに画像を入れる方法 はてなブログ ヘッダーに画像を入れる方法

    分かってますよ。かっこよくないって・・・。

    これは今回の記事のために作っただけで、私は普段は画像を使っていません。(笑)

    使ったのはCanvaというサイトで、以前「アイキャッチ画像の設定方法とカスタマイズ方法」という記事で使い方を紹介しました。

    使いやすいサイトで、いちいち使い方を習わなくても直感で分かるサイトですので是非使ってみて下さい。

    今回はヘッダー用の画像なので、1000px X 200pxで作ってくださいね。

    Canavaの使い方

    Canvaに行き、「デザイン作成」をクリックし、カスタムサイズを選択して幅・高さを1000X200にします。

    Canvaの使い方

    まずは何も書かれてない白のキャンバスが出てきます。

    このキャンバスをクリックすると左上に虹色の四角が出てくるので、それをクリックし、任意の色を選びます。私は青を選びました。

    次に左側にある「素材」をクリックすると、いろいろなアイコンや画像が使えるので、好きなものを使います(有料アイコンあり)。私はレンチを使いました。

    レンチをクリックすると左上に四角で今の色が表示されるので、またこの四角をクリックし、好きな色に変えます。

    次に、もう一つのレンチを反転させます。アイコンをクリックしたら左上に「反転」と出てくるので、水平に反転。ついでに色も替えました。

    次は「テキスト」→「見出しを追加」を選び、自分のブログのタイトルを書きます。

    最後にBLOGの文字を斜めにしたのですが、文字を書いたら曲がった矢印が出てくるので、これをクリックしたままタッチパッドを左右に動かすと、角度を変えることが出来ます。

    最後に画面右上の下矢印を押し、ファイルをPNGかJPGに選び、ダウンロードしたら完成です。

    オリジナルヘッダー画像の作り方 はてなブログにヘッダー画像を入れる方法

    慣れていないと時間がかかるかもしれませんが、Canvaはアイキャッチ画像にテキストを入れるため毎回使うので、覚えていたほうがいいです。

    ヘッダー背景の色と画像の色を合わせておけば、横幅が変わっても画像が途切れることがありません。

    アイキャッチ画像にテキストを入れたらこんな感じになり、読者も記事をクリックしやすくなりますよ。

    はてなブログ アイキャッチ画像のカスタマイズ

    ちなみに今回の画像は圧縮した後は10KBだったので、表示速度にはちょっとしか影響しないと思います。

    はてなブログにヘッダー画像を入れる方法

    ここからが本題ですが、ヘッダー画像・写真のアップ方法を紹介します。

    まずは「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「ヘッダー」に行き、「ファイルを選択」から今作った画像、もしくは任意の写真をアップします。

    はてなブログ ヘッダーに画像を入れる方法

    これでOKのはずなのですが、レスポンシブなのにモバイルで見た時がこんな感じなんです。

    はてなブログ ヘッダーに画像を入れる方法 モバイル サイズ設定

    なぜ?レスポンシブなのになんでこんなにはみ出しているんでしょう?

    と言うことで、これをCSSで収まるようにします。場所は「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」に貼ります。

    @media (max-width:480px) {
    .header-image-only #blog-title {
    height: 60px;
    }
    .header-image-only #blog-title #blog-title-inner {
    background-size: cover;
    height: 70px;
    }
    }

    これで完成です。

    はてなブログ ヘッダーに画像を入れる方法

    はてなブログ ヘッダーに画像を入れる方法

    ヘッダー画像を横幅いっぱいに表示する方法

    ヘッダー画像を写真でアップすると、PC表示がこんな感じになります。

    はてなブログ ヘッダー画像に写真を使う時の幅を調整するカスタマイズ

    これはやばいので、やり方を変えてカスタマイズしてこんな感じにします。

    はてなブログ ヘッダー画像に写真を使う時の幅を調整するカスタマイズ

    幅は横いっぱいに広がるのですが、その分大きめの画像と画質が良いものをアップしないといけないので、個人的にはお勧めしません。

    かなり圧縮しても70~100KBくらいあると思いますが、これは記事を開いたときに最初の方に読み込まれるので、完全にグーグルの推奨事項から外れてますね。

    しかもかなり圧縮する=画質が悪くなる、です。画質がいいものを使いたい=重い=表示速度が遅くなり、ユーザビリティが悪くなる=離脱率が多くなる=PVが減る、です。

    まぁ、それでもしたいという人はいると思うので、簡単に紹介します。

    この場合は、先ほど設定した「ヘッダタイトル画像の画像を外す」のを忘れないように。

    1. はてなフォトライフに幅2000px以上・高さ300pxくらいで画像をアップ
    2. 画像のURLを取得する

    ヘッダー画像を横幅いっぱいに表示する方法ヘッダー画像を横幅いっぱいに表示する方法

    最後に下記CSSを「デザインCSS」に貼り付ければOKです。(2行目の背景画像URLに、今取得したURLを貼り付けて下さい)

    #blog-title {
    background-image: url("背景画像URL");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;/* 中央寄せ */
    height: 300px;/* 表示したい画像の高さ */
    margin: 0;
    padding: 0;
    top: 0;
    width: 100%;/* 幅100%に */
    overflow-x: hidden;
    }
    #title,#title a {
    -webkit-text-shadow: 0 1px 2px #000;
    text-shadow: 0 1px 2px #000;
    color: #fff;/* タイトル名の文字の色 */
    margin: 0;
    padding-top: 120px;/* タイトル名の上からの位置 */
    text-align: center;/* タイトル名中央寄せ */
    }
    #blog-description {
    color: #fff;/* 説明文の文字色 */
    -webkit-text-shadow: 0 1px 2px #000;
    text-shadow: 0 1px 2px #000;
    }

    <参考・minimal greenさん

    最後に

    ヘッダーはブログの顔なので、ぜひオリジナルなものを作って他のブログとの差別化を図りましょう。

    その他のカスタマイズは、「はてなブログのカスタマイズ集(すべてコピペでOK)と収益化方法などのまとめ」で紹介しているので是非読んでみて下さい。

  • はてなブログに何分で記事を読めるかを表示するコピペカスタマイズ

    はてなブログに何分で記事を読めるかを表示するコピペカスタマイズ

    最近他のブログを読んでいると、読了時間が表示されたサイトがありますよね。

    こう言ったものです。↓

    はてなブログに読了時間を表示するカスタマイズ

    個人的には必要ないかなと思うのですが、あったらちょっとおしゃれかなとも思い、やり方を探していたんですね。

    そしたら簡単にコピペで2分でできたので、皆さんにも紹介しますね。

    記事を何分で読めるかを表示するカスタマイズ

    このカスタマイズはJava scriptを使うので、表示速度にちょっとですが影響します。

    なので、すでに表示速度が遅い人や絶対にこれが必要って人以外は、無くてもいいかなと思います。

    まぁ、ここは個人の自由ですね。

    それでは今回参考にさせていただいたのは、すずろぐさんの記事です。ありがとうございました。

    コードはこれになります。

    <script type="text/javascript">
    addEventListener('DOMContentLoaded', function() {
    var wpm = 800;
    var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
    var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';
    $('.entry-content').prepend(message);
    }, false);
    </script>

     

    3行目のvar wpm = 800は、800文字を読むのに1分と計算しているので、自分で好きに変えることが出来ます。

    5行目のfont-size : 80%は、文字の大きさです。大きくしたい場合は100%など好きに変えて結構です。

    その横のcolorは#999999としていますが、これも好きに変えてOKです。カラーはHTML色見本で調べることが出来ます。

    また、この記事は約‘+ Math.ceil(length/wpm) +’分で読めます。の赤文字部分も変更可能です。

    次にこのコードを、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「記事」→「記事上」にコピペします。

    はてなブログに読了時間を表示するカスタマイズ

    以上です。

    言葉を変えて、「あなたなら1分で読めます」にしてみました。

    はてなブログに読了時間を表示するカスタマイズ

    最後に

    おしゃれなので導入したい人は多いと思いますが、カスタマイズのし過ぎは表示速度に影響するので、ほどほどにしておきましょう。

    また、カスタマイズしたコードや日付・場所はメモに書いて保存しておくと、整理する時などに助かりますよ。

    コピペカスタマイズについては、はてなブログのカスタマイズ集(すべてコピペでOK)と収益化方法などのまとめで紹介しているので併せて読んでみて下さい。