カテゴリー：アフィリエイトブログ
ホームPage 3 / 6‹ 前12345次 ›最後 »
スマートフォンでWordPressの表（table）を横スクロールできるようにする方法

 

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

 

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

 

 

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

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

 

 

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

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

 

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

 

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

 

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

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

 

CSSカスタマイズ

 

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

 

 

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

 

 

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

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

 

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

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

 

➡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のサイト（ブログ）が重い、スマホで自分のサイトを閲覧したら、強制的にサイトが落ちる原因

 

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

 

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

 

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

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

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

 

・再起動

・キャッシュの削除

・観覧履歴の削除

・不要なアプリの削除

・必要のないタブの削除

 

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

 

他の原因

 

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

 

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

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

 

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

 

めがね

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

 

画像のリサイズ方法

 

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

 

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

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

 

メリット

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

 

デメリット

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

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

●めんどくさい（作業が）

 

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

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

 

メリット

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

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

 

デメリット

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

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

 

という２つである。

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

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

 

手動でリサイズする方法

 

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

 

 

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

 

 

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

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

 

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

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

 

 

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

 

 

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

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

 

 

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

 

 

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

サイズを少し変更するだけで、容量が３MB➡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を押す」という方法以外にも「スーパーリロード」という方法も載っているので「F５」を押してダメだったら、「スーパーリロード」を試してみるといいかもしれない。

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

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

 

スーパーリロード

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編）についての解説は終了する。

カテゴリー
アフィリエイトブログ
タグ
ホームPage 3 / 6‹ 前12345次 ›最後 »