【連載】バルーン型のソーシャルボタンをブログに設置する方法。 (6)横一列に並べる「テーブルタグ」編
※連載の(5)は、自分が使っていない「facebook」のため、欠番にしています。
こんにちは！ Hike×Hackのかけすけ( @kakesuke02 )です！
今週もついに土曜日を迎えました。
この１週間は「ソーシャルボタンの設置手順」について連載形式のスタイルで書いてきました。そして今日も、その連載に関する記事です。
とはいえ、実は今日あなたにお伝えするのは、「ボタンの設置手順」とは少し離れたことです。では、一体何をお伝えするのかというと。
「せっかくボタンを設置したけど、縦に表示される！」
「ボタン同士の間隔がなくて、密着してて見づらい！」
といった問題に対する解決法です。
つまり、「ボタンを横一列に並べる方法」そして「並べた時の密着感をなくす方法」となります。
さて、一言に対策といっても、横一列に並べるには、様々な方法があります。私が参考にしたサイトにも「横一列に並べる方法」が書いてありましたが、私はそれとは違う方法でやりましたし、それら以外にもやり方は多種多様です。
そのため、私が本日お伝えする方法はあくまで一例であり、「絶対このやり方でやるべき！」というものでもありません。
ただ、前もってお伝えしておくべきことがあります。
それは、「私はHTML経験がとても浅い」ということ。つまりそのことを踏まえると、私のとった方法が「HTMLの知識や経験が浅くても簡単にできる方法」であることは確かです。
「div」や「class」もよくわかっていない私が、どのように横一列に並べたのか。本日は、それをお伝えしようと思います！
それでは、「ボタンを横一列に並べて設置する方法」について、みていきましょう！
≪１．テーブルタグを使って横一列に並べる≫
私は、ソーシャルボタンを横一列に並べる方法として、「テーブルタグを使う方法」を採用しています。
ここでは「テーブルタグ」についての細かい説明はせず、あくまで「テーブルタグを使ってボタンを設置する手順」に注目してあなたにお伝えしようと思います。
これまでの連載で書いてあったように、すべてのボタンは「HTMLコードを貼り付ける」ことで機能しています。私の連載通りに事を進めていれば、「記事下」にそれらのコードが貼り付けられているはずです。
本日いじるのは、その「記事下」のHTMLの部分です。コピー＆ペーストのみで終わるようにはなっていないため、導入する場合は手動でコードを入力してもらうこととなります。(※私の方法であれば、CSSをいじる必要はありません)
自分で入力する、とはいっても、非常に簡単です。構造も難しくないため、ササッと説明させていただきますね。
まず、HTMLコードを入力する部分に、「テーブルタグ」を記入しましょう。工程の第一段階としてやってもらうことは
１．ボタンのコード全体よりも上の部分に「<table>」と「<tr>」を記入して、
２．ボタンのコード全体よりも下の部分に「</table>」と「</tr>」と記入しましょう。
これで、テーブルタグの大枠は設置完了です。これから先の作業はすべて、今設置した大枠の中で行います。横一列に並べることとは関係のないものは、この大枠よりも外に入力してください。
さて、テーブルタグの大枠は設置出来たでしょうか。次に、個別にコードを入力するための、小さい枠を作ります。ここでやってもらうことは、
１．貼り付けるコードのすぐ上に「<td>」と記入して、
２．貼り付けるコードのすぐ下に「</td>」と記入してください。
気をつけていただきたいのは、この「<td>」「</td>」に関しては「それぞれのコードに、個別に入力する」ということです。つまり、貼り付けたいボタンが３つある場合は、「<td>」「</td>」のセットは３つとなります。
画像にまとめると、次のような形になります。
あとは、上の画像でいう「*コードその１」や「*コードその２」の箇所に、生成されていたHTMLコードをそれぞれコピー＆ペーストするだけでOKです。
これで、テーブルタグの設置は完了です。この方法で、ボタンを「横一列に並べる」ことができます。もし手順通りにやっても横一列に並ばないようであれば、コードの順番や記述を見直してみてください。
*
テーブルタグの設置は完了しました。ですが、実際にプレビューを見てみると、驚いた方もいるかもしれません。
「ボタンが密着しすぎィ！！」
≪２．ボタン同士の密着感は「 」で解消できる≫
これまでの手順通りに、ソーシャルボタンを横一列に並べて設置してみると
このように、ボタン同士の間隔がまったくない、非常に密着した状態になってしまうのです。このままでは、はてブとTwitterのボタンが恋に落ちてしまうかもしれませんし、Google+のボタンをTwitterとPocketが取り合うことになってしまうかもしれません。
それは回避しなくてはなりません。私のブログにおいて修羅場はご法度です。そこで私は、彼らの間にクッションを置いて上げることにしました。
そのクッションとは、HTMLコードの１つである「 」にてございます。
画像で強調しているように、ボタンのコードそれぞれの末尾に、「 」という文字列を入力しましょう。( は「半角スペース」のようなものです)
挿入する位置は、先ほど入力した「</td>」のすぐ手前だと覚えていれば間違いはありません。それ以外の箇所に挿入しても機能しないことがあるため、ご注意ください。
さて、このようにして、それぞれのコード末尾に「 」というクッションを差し込んであげると……
お見事！ゴリ押しではありますが、それぞれのボタンにスペースが挿入されてボタンは良い距離感を保つことと相成りました。
*
さて、「ボタンを横一列に並べる方法」については、これにて一件落着です。この記事ではテーブルタグを使う方法をお伝えしましたが、他にCSSを使用する方法などもあります。
この記事の方法でどうしてもうまくいかない方や、「もっとスマートなコードにしたい！」という方は他の方法を調べてみてください。
≪まとめ≫
■ コードを貼り付けていくだけでは、ボタンは横一列に並ばない。
■ 「テーブルタグ」を使うことで、横に並べることができる。
■ 「ボタンが密着しすぎ」という場合は、「 」を使うことでも解消できる。
――あなたの旅先案内人 かけすけ( @kakesuke02 )より
連載記事一覧
■※(5)facebook編はなし。
