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

カテゴリー:アフィリエイトブログ
サーチコンソール(モバイルユーザビリティ)で問題のあるページを改善した

 

サーチコンソールを何気なく見ていて、検索トラフィックの「モバイルユーザビリティ」を確認してみたらGoogleから「問題のあるページ」を指摘されていた。

 

 

それによると、

サイトに影響を与えるモバイルユーザビリティの問題を解決してください。ウェブサイトにモバイルユーザビリティの問題があると、モバイル検索結果に表示されないことがあります。

などと書かれていて、

 

私のサイト(ブログ)には、

1:クリック可能な要素同士が近すぎます

リンクやボタン同士が十分に離れている状態にしてください

 

2:コンテンツの幅が画面の幅を超えています

横にスクロールすることなくページ全体を表示できるようにしてください

などと書かれていた。

 

 

なので、言われた通り近すぎるリンクなどを離したり、表をスマートフォンで見た時にスクロールできるようにして、しばらく様子を見守っていたところ「問題のある4ページ」が改善された。

 

 

それによって、若干サイト(ブログ)の順位も向上したように感じたので、

私のようにモバイルユーザビリティで「問題のあるページ」を指摘されている場合には、改善するようにした方が無難だと思う。

WordPress Popular Postsが重いようなので、エックスサーバーが推薦する改善方法を試してみた

 

Twitterなどで私も知ったのだが、Wordpressのプラグインに「WordPress Popular Posts」というサイドバーに人気記事を自動で作成してくれるプラグインがあって、

 

これが仕様変更以降、

「サイトやブログの表示速度が遅くなる」ということが言われているようだ。

確かに最初の頃と比べてサイト(ブログ)が遅くなった、と私も感じていたが、「WordPress Popular Posts」が原因だったとは・・・

 

バージョン「4.0.0」での仕様変更以降、「コンテンツ表示速度の低下」や 「サーバーへの過負荷」が発生するケースを多数確認しております。 当サービスでも同プラグインをご利用のお客様が多くいらっしゃるため、 コンテンツ表示速度の向上や、サーバーに対する負荷の軽減が見込める推奨設定をご案内いたします。

 


 

■プラグイン「WordPress Popular Posts」のアップデートについて

「WordPress Popular Posts(4.0.0~4.0.9)」においては、  不具合によりキャッシュ機能が正常に機能しません。  推奨設定でご利用になる場合は、事前に最新版へアップデートしてください。

 

出典:エックスサーバー

 

で、エックスサーバーが推薦する設定があるようなので私もそれを試してみたところ、確かに以前よりもサイト(ブログ)が軽くなったので、

「WordPress Popular Posts」をサイト(ブログ)に導入している方は、やってみた方が良いと思う。

 

ちなみに、推薦する設定で利用する場合にはバージョンが(4.0.0~4.0.9)だと正常に機能しないようなので、最新版へのアップデートが必要。

アップデートしてから、設定を変更するようにしよう。

 

WordPress Popular Postsを重い状態から、軽くする設定方法

 

実際のやり方は簡単だった、2分~3分くらいあれば終わる。

 

 

まず、管理画面(ダッシュボード)から、「設定」へと進んで「WordPress Popular Posts」をクリックする。

 

 

ページが変わったら、「ツール」をクリックする。

 

 

そうしたら、「データ」の項目に移動して設定内容を変更する。

 

○WPPキャッシュ期限ポリシー:「キャッシュする」を選択。

○キャッシュ更新間隔:「1時間」以上を選択。

○データサンプリング:「有効」を選択。

 

設定を変更後は、「適用」をクリックする。

これで、サイト(ブログ)が軽くなる。

ヒッキー
めちゃくちゃかるいんよー。
【カエテンWP-JOY】記事ごとにヘッダー画像、グローバルメニュー、サイドバーなどを入れ替える方法

 

ここでは、【カエテンWP-JOY】記事ごとにヘッダー画像、グローバルメニュー、サイドバーなどを入れ替える方法を紹介する。

 

記事ごとにヘッダー画像、グローバルメニュー、サイドバーなどを入れ替える方法

 

サイトやブログを始める初心者の方は、サイト(ブログ)のテーマ(内容)を一つに絞ることは難しく、いわゆる「雑記ブログ」になりがちである。

 

そんなときは、記事ごとにヘッダー画像、グローバルメニュー(ヘッダーメニュー)、サイドバーなどを入れ替えることで、統一された雰囲気を出すのも良いかもしれない。

ただし、この方法だと「カエテンWP-JOY」のようなヘッダー部分のフリースペースが、前もって搭載されたテンプレートでなくてはならないのが注意する点である。

めがね
カエテンWP-JOYは、下記のページから入手できます。

 

カエテンWP-JOYの入手ページ

 

で、実際に記事ごとにすべてのページを入れ替えるとなると、

例えば、200ページとかの記事数があるとかなり大がかりな作業になると思うので、暇な時にするのがおすすめである。

 

下記のページを参考に進めていけば、簡単に記事ページを切り替えられるのだ。

 

ヘッダー画像
グローバルメニュー
サイドバー

 

切り替えに成功すると、たぶん下記のような感じになっていると思う。

 

 

ヒッキー
成功なんよ~

 

ちなみに、グローバルメニューは投稿と固定の編集ページで修正しないといけないので少しめんどくさいが、全部切り替えるとそれらしいサイトができあがるのでやっておく価値は十分にあると思う。

 

以上で、【カエテンWP-JOY】記事ごとにヘッダー画像、グローバルメニュー、サイドバーなどを入れ替える方法の解説は終了する。

 

関連記事

カエテンWP-JOY(ジョイ)のテンプレートがWordpress初心者にオススメな理由

カエテンWP-JOY(ジョイ)のテンプレートがWordpress初心者にオススメな理由

ここでは、カエテンWP-JOY(ジョイ)のテンプレートがWordpress初心者にオススメな理由について紹介します。なぜWordpress初心者は、カエテンWP...

投稿 2018/01/23

スマートフォンでWordPressの表(table)を横スクロールできるようにする方法

 

通常サイト(ブログ)で大きめの表を作成すると、パソコン画面では問題はないのだが、スマートフォンで表示したときに問題が起きてしまう。

 

そう、画面からはみ出てしまうのだ。

 

 

実際に表示してみると、このように表示される。

スマホでは、画面幅をオーバーしているので、右端に線が入ったりして見にくくなっているし、表を見るときには、ズームアウトしなければならないのだ。

 

 

で、表を横スクロールできるようなカスタマイズを施すと、上記のようにスマホでも綺麗に見せることができる。

また、使いやすさも向上しユーザビリティも上がるはず。

 

ここでは、スマートフォンでWordpressの表(table)を横スクロールできるようにする方法を紹介する。

 

WordPressの表(table)を横スクロールできるようにする方法

 

表を横スクロールできるようにするには、「CSSカスタマイズ」と「HTMLカスタマイズ」を行う必要がある。

まずは、CSSカスタマイズから紹介する。

 

CSSカスタマイズ

 

では、実際にtableを横スクロールできるようにするCSSカスタマイズを行う。

 

 

テンプレートが「カエテンWP-JOY」の方は、Wordpressの管理画面(ダッシュボード)に移動して、「外観」➡「その他オプション」へと進もう。

 

 

カエテンWP-JOYの方は、「<head>内に挿入されます」の欄にCSSコードを入力しよう。

「カエレバやヨメレバ」などのカスタマイズを施している方は、一行空けてCSSコードを入力すればOKである。

 

CSSコードは下記のページを参考にさせて頂いた(2、CSSを編集より)。

このページには、STINGER8などの一般的なテンプレートを使用している方の編集方法も載っているので参考になる。

 

tableを横スクロールさせる方法(2、CSSを編集)

 

 

CSSコードを入力するとこのようになる。

 

 

あとは、「変更を保存」ボタンをクリックする。

これで、CSSカスタマイズは完了である。

 

HTMLカスタマイズ

 

HTMLカスタマイズ方法としては、tableを「divタグ」で囲むだけである。

 

 

 

なので、投稿or固定ページのテキスト画面で表を作成後に上記のコードで、tableを「divタグ」で囲もう。

これで、HTMLカスタマイズは完了である。

 

完成した表

 

「CSSカスタマイズ」と「HTMLカスタマイズ」が完了したら、横にスクロールできる表が完成する。

 

剣と槍の種類(CSSとHTMLのカスタマイズ版)

エクスカリバ― 草薙剣 本庄正宗 グングニル 天逆鉾
偉人 アーサー王 スサノオノミコト 徳川将軍家 オーディン イザナキ

 

イザナミ

 

ニニギノミコト

人物画

 

こんな風に「横スクロールできる表」ができていると思う。

 

カエテンWP-JOY

ただ、この方法だと「カエテンWP-JOY」だと、スマートフォンで表示した場合スクロールバーは表示されないが、スクロールはできる。

 

パソコン版だとスクロールバーがちゃんと表示されるので、ユーザーが困ることはないと思う。

原因はテンプレートの問題なのか、分からないが私は横にスクロールできるようになれば良いのでこれで良し。

 

あと「カエテンWP-JOY」を使用している方で、最新のアップデートがされているバージョンだと、tableタグで普通に表を作るとスマホで閲覧したときに自動でスマホの幅に合わせようとするので画像などが縮小されてしまう事がある。

 

 

そういった場合には、上記のように以前のアップデート前のtableタグを使用すると、限度幅が拡大されるので画像なども大きめに表示できるようになる。

 

tableタグを変更する場合には、上記の一行のみの変更で大丈夫である。

あと、table-00→table-01 に変更すると行の背景色が全て白色になるので、デザイン重視の方は活用したい。

 

まとめ

 

やはりスマホだと、表を表示する場合、はみ出すことが多くなるのでその時は、横スクロール表示にしてやるとユーザーが見やすくなると思う。

以上で、スマートフォンでWordpressの表(table)を横スクロールできるようにする方法の解説は終了する。

 

関連記事

 

見やすい比較表の作り方(WordPress編)

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

 

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