カテゴリー:アフィリエイトブログの記事一覧

カテゴリー:アフィリエイトブログ
WordPressのサイト(ブログ)が重い、スマホで閲覧したら強制的に落ちるときの原因と対策

 

ここでは、Wordpressのサイト(ブログ)が重い、スマホで閲覧したら強制的に落ちるときの原因と対策について紹介する。

 

WordPressのサイト(ブログ)が重い、スマホで自分のサイトを閲覧したら、強制的にサイトが落ちる原因

 

スマホで何気なく自分のサイトを見ていると、あるページだけが強制的に落ちるという摩訶不思議な現象に見舞われた。

 

パソコンからは、正常に見れるのにスマホだけがダメなのだ。

 

で、色んなサイトの記事を見て原因を調べていると、

「スマホで閲覧したときにサイトが落ちるのは、処理が追いついていないからだ」というものを見つけ、

そうなのかと、そのサイトに書いてある通りに、

 

・再起動

・キャッシュの削除

・観覧履歴の削除

・不要なアプリの削除

・必要のないタブの削除

 

など、あらゆることを試してみたけど、やはりサイト(ブログ)は落ちる。

 

他の原因

 

で他にも原因はないかと探っていたら、どうも画像を大量に投下していたページのみが強制的に落ちることに気がついた。

 

このことに気づいた私は、画像サイズが大きいのがいけないのかもしれない、と投稿や固定ページの編集画面でサイズを縮小してみたりしたけど、

どうもスマホで閲覧したときだけ「そのページが強制的に落ちる」という現象が続いている。

 

なので、また色々と調べていたら、その特定のページは、全てスマホカメラで撮った写真を大量に使用していたことに気づいて、もしや、「リサイズしていないのが原因なのでは?」という情報にたどり着いた。

 

めがね

リサイズとは
リサイズとは、画像編集ソフトなどで、画像の縦横の画素数(ピクセル数)を変更することを言います。
リサイズは、大きめな写真画像を縮小したりすることで、ハードディスク容量を削減するなどの効果があります。

 

画像のリサイズ方法

 

で、対策として実際にリサイズする場合には、基本的には「手動でリサイズする方法」と「自動でリサイズする方法」の2つがある。

 

①手動でリサイズする方法

手動で行う場合には、画像編集ソフトを使ってWordpressにアップロードする前にリサイズを行う。

 

メリット

確実にWordpressに軽い写真画像をアップロードすることができ、個別にサイズを指定できる。

 

デメリット

オリジナルの写真画像と加工した写真画像の2枚がパソコン上に残る。

上書き保存した場合には、オリジナルの写真画像は削除される(ゴミ箱行き)。

めんどくさい(作業が)

 

②自動でリサイズする方法

自動で行う場合には、Wordpressのプラグインを使用して、アップロード時に自動でリサイズし、アップロード後の以前の画像もリサイズが可能。

 

メリット

プラグインを使用して、自動でリサイズするのでかなり楽。

オリジナルの写真画像は手元に残るので、後で必要になった、というときでも対応ができる。

 

デメリット

プラグインをインストールしなければならない。

一括リサイズでエラーとなり、リサイズされない画像も中にはある。

 

という2つである。

めんどくさいかもしれないが、サイト(ブログ)に容量の大きい写真画像を載せる場合には、一つ一つリサイズするのが基本のようだ。

しかし、Wordpressならプラグインでリサイズした方が楽ではある。

 

手動でリサイズする方法

 

まずは、手動でリサイズする方法を紹介する。

 

 

このクソ重い(3840×2160/3MB)画像をリサイズしてみたいと思う。

 

 

ここでは、「PhotoScape」という無料の画像編集ソフトを使用する。

めがね
無料ソフトをインストールしたり使用したりする時には、ウイルス対策ソフトを入れてからにした方が無難です。

 

では、画像編集ソフトでリサイズしたい画像を選択する。

画像を選択したら、次は「リサイズ」ボタンをクリックする。

 

 

任意の「幅」を入力しよう。

 

 

「幅」の数値を変更することで、「高さ」の数値も自動で入力される。

これで、OKだったら「OK」ボタンをクリックする。

 

 

あとは、「名前をつけて保存」ボタンをクリックし、「別の名前」を付けて保存すればリサイズは完了である。

 

 

実際にリサイズした画像をWordpressにアップロードしてみるとわかるのだが、かなり軽くなったと言える。

サイズを少し変更するだけで、容量が3MB➡287KBまで下がったのだ。

 

自動でリサイズする方法

 

では、自動でリサイズする方法を紹介する。

 

自動でリサイズするには「Imsanity」というプラグインを使用する。

これは画像(写真)を自動でリサイズしてくれる優れもの。

以前アップロードしていた画像(写真)なども、自動でしてくれるので手動でリサイズするのがめんどくさい方にはこちらが最適だ。

めがね
Imsanityの設定方法と使い方に関しては、こちら(下記)を参照してください。

 

Imsanityの設定方法と使い方【画像(写真)を自動でリサイズしてくれるプラグイン】

 

まとめ

 

 

プラグインでのリサイズを終えた後は、本当に軽くなった。

サイトのスピードが一段階上がった感じである。

 

ちなみに、私は最初自分で画像編集ソフトなどを使い、一枚一枚リサイズしていた。

正直なところ、かなりめんどくさいが手動でやった方が確実ではある。

しかし、リサイズする写真画像が数千枚とかなら、プラグインでリサイズした方が手っ取り早い。

私も後半からは、プラグインを使用することにしたのである。

ヒッキー
めっちゃ早いんよ。

 

で肝心のスマホで閲覧した時の状態であるが、サイト(ブログ)の画像を全てリサイズした後は、スマホでもサクサクと読めるようになっていた。

それにより、強制的にサイト(ブログ)が落ちるということはなくなったようだ。

 

やはり、スマホやデジカメで撮った写真画像はかなり重く、サイト(ブログ)に負担をかけていたようだ。

ちなみに画像ファイルを圧縮する「EWWW Image Optimizer」というプラグインも、一緒に起動させておくともっと軽くなる。

ヒッキー
めちゃくちゃかるいんよー。

 

以上で、Wordpressのサイト(ブログ)が重い、スマホで閲覧したら強制的に落ちるときの原因と対策についての解説は終了する。

 

関連記事

 

Imsanityの設定方法と使い方【画像(写真)を自動でリサイズしてくれるプラグイン】

EWWW Image Optimizer(日本語)の設定方法と使い方|画像ファイルを簡単圧縮

カエテンWPをアップデートしたら、記事装飾パーツが上手く表示されない(レイアウトが崩れた)ときの対策

 

ここでは、カエテンWPをアップデートしたら、記事装飾パーツが上手く表示されない(レイアウトが崩れた)ときの対策を紹介する。

 

カエテンWPをアップデート後に記事装飾パーツを表示させる方法

 

 

私は、カエテンWPのテンプレートをアップデートするべく、

「アップデート用サブテーマ」をダウンロードし、「カエテンWP テーマ本体(最新)」をダウンロードして、カエテンWPのメンバーズサイトの流れ通りに進めていき下記の通りに進めた。

 

①アップデート用サブテーマをインストール後、有効化

②カエテンWPテーマ本体(古い)を削除

③カエテンWP テーマ本体(最新)をインストール後、有効化

 

そして、最後の作業(③のカエテンWP テーマ本体(最新)をインストール後、有効化)を進めていたら、サイトのレイアウトが崩れていることに気付いてしまった。

 

 

メンバーズサイト

 

一応カエテンWPのメンバーズサイトにも、「サイト表示がおかしいときの対処方法」が載っていて、
これによるとたぶん原因は、「Google Chromeのブラウザのキャッシュが残っている」といったことらしい。

ちなみに、キャッシュ系プラグインを導入している方はこっも原因となる場合があるそうなので注意である。

 

そして、私はレイアウト崩れの対策として「F5」を押してサイトを更新しようとしたが、びくともしなかった。

なので、とりあえず諦めてパソコンの電源を落としてみた。

 

 

そうしたら、上記のようにしっかりと装飾パーツが反映されていた。

レイアウトの崩れも直っていたのであった。

ちなみに、電源を落として直ったのは、別のカエテンWPのテーマを導入している折り紙のサイトであってこのサイトではない。

 

スーパーリロード

 

実際、レイアウト崩れを直す方法としては、メンバーズサイトには「F5を押す」という方法以外にも「スーパーリロード」という方法も載っているので「F5」を押してダメだったら、「スーパーリロード」を試してみるといいかもしれない。

このサイト(ヒッキーラボ)は「スーパーリロード」で綺麗になった。

ビジュアル画面も「スーパーリロード」で元通りになった。

 

スーパーリロード

Google Chrome Windows( & Ubuntu など)

●Ctrl + F5

●Shift + F5

 

で、もしそれでもダメな時は、私のように一旦電源を落としてみるのも良いかもしれない。

【超重要】インフォトップの広告リンクの作成と貼り方(WordPress編)

 

ここでは、インフォトップの広告リンクの作成と貼り方(Wordpress編)について紹介する。

とその前にインフォトップでは、広告リンクを貼る際に、とても重要な点があるのでそこをまずは紹介する。

 

インフォトップの広告リンク(テキスト、バナー画像)は機能しないから要注意!

 

 

インフォトップの広告リンクには、通常のASPと同様に「テキストリンク」と「バナー画像リンク」がある。

 

◆テキストリンク
ーメルマガ用フォーム
ーテキストリンク用フォーム
◆バナー画像リンク
ーバナーフォーム

 

しかし、インフォトップでは、普通のASPと同様にリンクを作成して、Wordpressに「テキストリンク」と「バナー画像リンク」を貼ると、投稿ページや固定ページなどを切り替えたりすることで誤作動し、広告リンクが普通のリンクになるらしい。

 

なので当然のごとく、インフォトップのリンク広告では利益は出ず、私たちアフィリエイターは、商売ではなく「善意の押し売り」を、ただただ毎日毎日汗水たらしてしていた、ということになる。

 

吐きそうだ・・・

ヒッキー
オェェェ

 

インフォトップの注意書き

 

インフォトップのリンクについて、詳しく調べてみると、以前は注意書きみたいなものがあったようだ。

しかしながら、今は見当たらない。

削除されたのだろうか、それはわからないのである。

 

アフィリエイト報酬が欲しい人

 

で、アフィリエイト報酬が欲しい、という人は、

要するに「テキストリンク用フォーム」と「バナーフォーム」を使ってはいけない、ということである。

なので、私たちアフィリエイターはインフォトップで広告リンクを作成するときには、必ず「メルマガ用フォーム」で広告リンクを作成しなければならないのである。

じゃないと、ただの善意の押し売り、となってしまうから注意されたし。

 

それと、インフォトップで広告リンクを貼った後は、必ず、アフィリエイト管理画面から、「アクセスカウンタ」に進んで「URL誘導」の項目の数字などが変化しているかどうかを確認した方がいいのだ。

 

インフォトップの広告リンクの作成と貼り方(Wordpress編)

 

では、実際にインフォトップで広告リンクを作成していく。

まずは、インフォトップに移動しよう。

めがね
もしインフォトップへの登録がまだの方がいましたら、こちらからどうぞ(下記)

 

インフォトップ

 

ログイン

 

 

インフォトップに移動し、アフィリエイター登録が終わった方(終わっている方)は、サイトの上部にある「アフィリエイターはこちら」をクリックして、「ログインボタン」をクリックする。

 

 

するとアフィリエイターログイン画面が開くので、そこに「ログインID」と「パスワード」を入力して、「ログインボタン」をクリックする。

これで、インフォトップへのログインは完了である。

 

広告リンクを作成

 

 

インフォトップにログインしたら、「商品指定リンク作成」をクリックする。

ここでアフィリエイトの「広告リンク」を作成するのである。

 

 

そうしたら、このような画面が表示される。

ここでは、アフィリエイトしたい商品名を入力する。

試しに「賢威」と、商品名の項目に入力する。

入力後は、「検索ボタン」をクリックしよう。

 

 

下記にスクロールすると、検索した商品が上記のように表示される。

フォーム生成の項目にある「生成ボタン」をクリックする。

 

 

すると、「商品指定リンク作成フォーム」が現れる。

そこには、選択した商品の報酬額や商品説明などが詳しく書かれているので、よく確認しておこう。

 

 

下記に進むと、テキストリンクの項目に「メルマガ用フォーム」があるのでそこのURLをコピーしよう。

あとは、このURLを自分のサイトやブログに貼り付けるだけである。

これで、アフィリエイト報酬が得られるようになる。

 

WordPressの投稿ページor固定ページに広告リンクを貼り付ける方法

 

WordPressの投稿ページor固定ページに、インフォトップの広告リンクを貼り付ける場合には、まず投稿ページor固定ページのビジュアル画面に移動する。

 

 

ビジュアル画面に移動したら、リンクを作成した商品名などを入力する。

ここでは、「賢威」と入力する。

ちなみに、メルマガ用フォームにある文言をそのままコピペしてもOKである。

SEOに強い戦略的テンプレート「賢威7」~

 

そうしたら、賢威の文字を選択し、上記にある「URLのリンク設定」をクリックする。

 

 

「URLをペーストするか入力して検索」という欄に、さっきコピーした「メルマガ用フォームのURL」を追加する。

 

終わったら、「エンターキーのボタン」をクリックする。

 

 

これで、賢威のアフィリエイトリンクの作成は完了である。

試しに「プレビュー画面」で確認してみる。

 

ヒッキー
リンクが表示されとる。

 

ここでは、リンクをクリックして、商品(賢威)ページに飛ぶことができるかを確認しておこう。

 

商品リンクを別ページで開きたい場合

 

ちなみに、商品リンクを別ページで開きたい場合には、リンク文字(賢威)にカーソルを持って行きクリックする。

そして、「鉛筆マーク」をクリックする。

 

 

「歯車アイコン」をクリックする。

 

 

「リンクを新しいタブで開く」にチェックを入れる。

終わったら、「更新ボタン」をクリックする。

 

 

これで、商品リンクを別ページで開くことが可能になるのである。

 

 

あと、同じ要領で商品リンクを貼るのを文字ではなく、ボタンの画像にすることでボタンをクリックするとその商品ページに移動させることができるから、コンバージョンがアップするやもしれない。

 

広告リンクが機能しているかを確認する方法

 

広告リンクを作成して、サイトやブログにリンクを貼った後は、必ずインフォトップでリンクが正常に機能しているかを確認した方がいい。

 

 

でその方法はというと、インフォトップの管理画面から、「アフィリエイト管理」をクリックする。

 

 

次は、移動したアフィリエイト管理画面のメニュー欄にある「アクセスカウンタ」をクリックする。

 

 

そうするとアクセスカウンタのページに、今クリックした商品の詳細情報が表示されるのである。

ここでは、「URL誘導」がリンクをクリックした数になる。

 

ちなみに、これをメルマガ用フォーム以外の広告リンクで作成し、リンクをクリックしても何にも表示されないからリンクが機能していないことがわかるのだ。

以上で、インフォトップの広告リンクの作成と貼り方(Wordpress編)についての解説は終了する。

ブログの写真に枠をつける方法(フレーム加工)

 

ここでは、ブログの写真に枠をつける方法(フレーム加工)を紹介する。

 

画像加工ツール(PhotoScape)で加工

 

まずブログの写真に枠をつける方法としては、3つの手法がある(たぶん)。

 

で、一つ目は「画像加工」という、ツールで加工する方法。

私は、「PhotoScape」というツールを使用して加工した。

では作業に入る。

PhotoScapeに移動しよう。

 

ダウンロードはこちらからどうぞ。

PhotoScape

 

 

PhotoScapeに移動したら、「画像編集」を選んで、加工したい写真を選択する。

◆ファイルを選択(ここでは、ヒッキーラボ2)

◆写真を選択

 

 

そうしたら、加工画面が表示される。

選択した写真画像が大きい場合には、加工がしにくいので、「縮小」のアイコンを数回クリックしよう。

 

 

するとこんな感じで加工しやすくなる。

 

 

次は、下部にある「オブジェクト」を選択する。

 

 

オブジェクトでは、「四角のアイコン」を選択し、色は「黒」、線は「直線(普通)」、厚さは「3」、を選択する。

 

 

そうしたら、写真の四隅に合わせて、四角い枠を取り付ける。

左クリックして、そのままスライドさせれば簡単に枠をつけることができるのである。

 

 

加工が終わったら、こんな感じになる。

あとは「保存」をするだけである。

 

テンプレートのタグで加工

 

二つ目は、Wordpressのテンプレート(カエテンWP)のタグ機能を使って加工する方法。

ちなみに、テンプレートによっては装備されていない場合がある。

そうした場合には、他の2つの方法を推薦する。

めがね
ここでは、「カエテンWP」のテンプレートを使用します。

 

では、新規投稿画面に移動しよう。

 

 

投稿ページに移動したら、まず「メディアを追加」で写真のファイルをアップロードして、投稿画面に挿入する。

終わったら、「テキスト画面」に切り替える。

 

 

テキスト画面では、写真の画像コード(<img~~)を全て選択して、上記にある「ボックス3」をクリックしよう。

 

 

無事に「ボックス3」のコードが追加されると、写真に枠がついた形になる。

 

 

「プレビュー画面」で確認するとこんな感じになる。

ヒッキー
猫パンチ!!

 

 

ちなみに、画像を大きくするとそれに合わせて枠も大きくなるのである。

 

imgタグの編集(コードを追加)

 

三つ目は、imgタグを編集する方法。

 

では、新規投稿画面に移動しよう。

 

 

投稿ページに移動したら、「メディアを追加」をクリックして、写真ファイルをアップロード後、画像を投稿ページに挿入する。

挿入後は、「テキスト画面」に切り替える。

 

 

テキスト画面では、「imgタグ」を編集する。

「ここにコードを追加」という部分に下記のコードを追加する。

ちなみに、枠自体を加工したいという場合には、下記のサイトに詳しく書いてあるぞ。

チルの工房

http://chillslab.blog52.fc2.com/blog-entry-93.html

 

 

コードを追加したらこんな感じになる。

どこに追加したのかが分かりにくい、見にくいという場合には下記を参照である。

これで、「imgタグ」の編集は完了である。

 

 

「プレビュー画面」で確認するとこんな感じになる。

ヒッキー
猫パンチ猫が、表示されとる。

 

以上で、ブログの写真に枠をつける方法(フレーム加工)についての解説は終了する。