通常であれば、上下左右に隙間ができる
テーブルを作成して画像を入れた時に、通常だと上下左右に余白ができると思います。
私がアフィリエイトを始める以前のことで、WordPressの初心者のときに、やりかたがわからなくて、よく悩んだのですが、この上下左右全ての余白をなくして、ピッタリくっつけたい、あるいは、自分の任意の間隔で表示させたいということがありました。
Beforeの表を見てもらってもわかるとおり、作った表にただ画像を入れただけでは、なんだか見栄えが悪くて、綺麗に並べたいなって思ってしまうのです。
性格の問題なのでしょうか？
こういうことを気にしなければ、記事作成に時間をとられることもないとは思ったりするのですが…
ともかく、この投稿ではサンプルの表を使って、上下左右の隙間をなくす方法をお伝えします。
サンプルの表に”女子”のイメージ画像を使ったのは、どうせ学ぶなら、綺麗女子を見ながら学ぶほうがいいかなと思っただけです。
イケメンのほうが良かったと思う女性のかたには、ごめんなさい。
インターネットを検索しても、なかなか答えがない
表に画像を入れた時、上下左右の余白をなくすにはどうしたいいのかと、インターネットを検索しまくったことがありました。
余白ができる理由とか含め、いろんな人が詳しく書いているのですが、そのとおりにやっても解決しなかったのです。
そういう時の初心者の気持ちって、「説明なんかどうでもいいから、こうすればいい」とだけ教えて欲しいだけなんですよね。
勝手でワガママだけど、余白ができる理由なんか知りたくもないのが本音。
画像の下の部分だけ、余白が残る
まずは、表全体を指定した状態で、テーブルのアイコンをクリックして、セルを選択し「セルのプロパティ」を選びます。
次に、「高度な設定」を選択して、スタイルのところに、「padding: 0px;」と入力して、OKボタンを押します。※これだけで余白は消えないので、ここは読むだけにして下さい。
すると、悲しいかな、次のような中途半端な結果になります。
上と左右は余白がなくなっているのですが、各画像の下は余白が残ったままなのです。
| 中途半端なAfter | |
 |
 |
 |
 |
下に残った余白をなんとかしてなくしたい。
でも、インターネットを検索しても、まず書いてあることは、「margin-bottom:0px;」と記述する。
まず100％に近いかたが、そう書いていらっしゃいます。
今でこそ、なぜ、そういう回答になるのかということは理解できますが、私が困っていた事例では、「margin-bottom:0px;」を記述しても、「下」の余白は消えませんでした。
それでは、どうしたらいいのか？
100回以上もインターネットを検索して、たったひとりの人だけが、その答えを書いていらっしゃいました。
下の余白も消す
表全体を指定した状態で、セルのプロパティの「高度な設定」で、スタイルのところに、「padding: 0px; font-size: 0px;」と入れ、OKボタンを押します。
すると、Afterの画像のように、上下左右の余白がまったくない表が、やっと出来上がりました。
なぜ、テキストも入ってないのに、フォントサイズの指定をするのか？と不思議に思われるかたもいらっしゃるかも知れませんが、それはそれで理由があるのです。でも説明は割愛いたします。
ただ、実際には余白を「消している」のではなく、表示のしかたを変えていると思っていただければいいです。
ともかく、「padding: 0px; 」と入れるだけでなく、「padding: 0px; font-size: 0px;」と入れて下さい。
|
|
|
|
After
余白を任意の幅で残す場合
下の余白を含め、上下左右の余白をなくすためには、「padding: 0px; font-size: 0px;」と入れることをお伝えしましたが、「padding: 0px;」の値を変えることによって、任意の余白にすることができます。
この画像の例は、「padding: 3px:」とした場合の例です。
どうでしょうか？
この投稿の最初に表示させているBeforeの表より、こちらのほうが断然、整ってて見栄えがいいはずです。
|
|
|
|
表全体の表示位置を中央にする場合
表を表示位置を中央にしたいと思って、表のプロパティで「配置」という部分を中央に指定したことや、エディタの中央揃えのボタンをクリックしたりといったことはなかったでしょうか？
その場合に、表は中央にいかず、下の画像のように、右側にもう一つ外枠が表示されてしまったなんてことがなかったでしょうか？
で、こういうことをなかなか解決できず、ずいぶん昔のことですが、表嫌いになってしまったことがあります。
表を中央に表示したい場合は、テーブルの記述をテキストモードでこのように変更します。
テキストモードで見ていただくとわかりますが、テーブルの最初の記述は「<table>」で始まり、＜/table＞で終わっています。
この始めの「<table>」という記述を、「<table style="margin: 0 auto;">」に変更します。
これで、表の表示位置は中央になります。
この記事の中で中央に表示しているテーブル（※モバイルで閲覧している場合にはわかりません。）も、この記述になっています。
アフィリエイトには、サイト制作のノウハウも大切
私はもともとウェブデザイナーでもありませんし、ウェブプログラマーでもありません。
誰かに教えってもらったかと言えば、それもありません。
全て自分で学んだのですが、そういう意味では、我流の部分も多くあります。
ただ、我流かどうかは別にしても、自分がこうしたい、どうしたら思うとおりになるのかな？というスタンスでずっと続けてきました。
そういう意味で、自分が思ったとおりになれば、それで良しと考えています。
その昔は、ホームページビルダーとかを買って、ちょっとホームページが作れれば、それだけでたくさんのアクセスをいただけた時代もありました。
でも、今は、WordPressにしても、テンプレートの質がとても良くなって、プロのウェブデザイナーが作ったものと変わらないサイトをド素人が作れる時代です。
もちろん、写真などのギャラリーや動画のサイトでない限り、”情報”は”文字”で伝えるものですから、アフィリエイトにしても、記事の内容が良くなければユーザーは評価してくれません。
評価してくれないということは、アクセスも増えないし、アクセスが増えないから検索エンジンからもそっぽを向かれてしまいます。
しかしながら、どんなにいい記事であったにしても、やはり、見てくれは大切なのではないかと思っています。
いい中身（コンテンツ）には、いい服（サイトデザインやユーザビリティ）をまとわせてやりましょうということです。
人は、中身を知る前に、見てくれで判断する生き物です。
なので、ユーザーを引き寄せるきっかけの一つとして、サイトの見栄えも大切です。
見てくれが良ければ、中身を見ようとしてくれて、その結果、中身も良ければ、ファンにもなってくれる。
そういう意味で、アフィリエイトサイトも、中身が一番ではあるのですが、中身さえよければ、他はどうでもいいという時代ではないのかなと思います。
弘法筆を選ばずとも言いますが、アフィリエイトサイトを作る場合は、良い筆（WordPressテーマや、サイト制作ソフト）を選ぶべきです。
良い道具を持てば、それだけ良い仕事もできますし、同じ仕事でも、道具によって差がでます。
今は、素人であっても、見た目も含め、サイトの質が全体的にあがっていますから、アフィリエイトサイトを作る場合も、サイト制作に必要な知識や技術を身につけ、いろんなサイト見てサイト作りのセンスを磨くということも必要だと感じています。
もちろん、必要なことだけでいいのです。
目的はサイト作りではなく、稼ぐことですから。
【あわせて読んでおきたい記事】
