楽天アフィリエイトのアフィリエイトリンクは、スマホではうまく表示できない
WordPressで、楽天アフィリエイトのリンクを貼ろうとすると、PCではきれいに表示されるのですが、スマホだと、はみ出てしまって、ちょっとみっともない画面になります。この場合、Wordpressの「カラム」という機能を使って、切れないように表示させる方法があります。
スマホで切れないように表示させる手順
そのやり方を順番に解説していきます。
①ブロックを追加
まず、「投稿」を作ると、下のような白紙の画面が出ると思いますが、下の画面のうち、黒字に白いプラスが書かれている部分をクリックして、ブロックの追加を行います。
②「カラム」の追加
そうすると、追加するブロックの種類がいくつか出てくるので、その中から、「カラム」を選択します。
そうすると、カラムの種類を聞いてきますので、ここでは、「５０／５０」を選択します。
③カスタムHTMLの挿入
そうすると、画面が左右に分かれます。それぞれに楽天アフィリエイトのHTMLのリンクを貼っていきます。左側のカラムには画面のみを、右側のカラムには、テキストのみを挿入します。下は楽天アフィリエイトでの画面です。通常は、「画像＋テキスト」でアフィリエイトリンクを作ると思いますが、ここでは、画像とテキストのリンクをそれぞれ別に作ります。（下は楽天アフィリエイト上の画面です）
④HTMLタグの貼り付け
楽天アフィリエイトで作った画像のHTMLを左の欄に、テキストのHTMLを右の欄に貼り付けます。貼り付ける時には、挿入するものの種類として、「カスタムHTML」を選択して貼り付けます。
この画面上だと分かりにくいですが、このような四角い中に「＋」と表示されたコラム（ボックスのようなもの）が、左右にそれぞれ作られており、それぞれその中の「＋」をクリックすると、ブロックが挿入できるようになっています。
表示されたブロックの中で、「カスタムHTML」を選択します。
左の枠には、楽天アフィリエイトで作った画像のHTMLを、右の枠にはテキストのHTMLを挿入します。
⑤完成
それぞれ貼り付けをして、公開をすると、ようやくアフィリエイトリンクの完成です。
下が完成したアフィリエイトリンクです。スマホ上だときれいに表示されるのですが、PCで表示すると、左右が開いてしまっています。HTMLのタグ「div style=”text-align: center;”」を入れて、中央に寄せると多少見栄えがよくなります。
みなさんもチャレンジしてはいかがでしょうか？
でもかなり面倒臭いので、多少見栄えが悪くてもいいや、と思う人は、はみ出たままでもいいかも知れません。
コメント