Hike×Hack

ライフハックや日常に役立つガジェットなどを好物とするかけすけ(@kakesuke02)が書くライフハック系ブログ

【連載】バルーン型のソーシャルボタンをブログに設置する方法。 (6)横一列に並べる「テーブルタグ」編

20140423105505

 

※連載の(5)は、自分が使っていない「facebook」のため、欠番にしています。

 

 

こんにちは! Hike×Hackのかけすけ( @kakesuke02 )です!

 

今週もついに土曜日を迎えました。

 

この1週間は「ソーシャルボタンの設置手順」について連載形式のスタイルで書いてきました。そして今日も、その連載に関する記事です。

 

とはいえ、実は今日あなたにお伝えするのは、「ボタンの設置手順」とは少し離れたことです。では、一体何をお伝えするのかというと。

 

「せっかくボタンを設置したけど、縦に表示される!」

「ボタン同士の間隔がなくて、密着してて見づらい!」

 

といった問題に対する解決法です。

 

つまり、「ボタンを横一列に並べる方法」そして「並べた時の密着感をなくす方法」となります。

 

さて、一言に対策といっても、横一列に並べるには、様々な方法があります。私が参考にしたサイトにも「横一列に並べる方法」が書いてありましたが、私はそれとは違う方法でやりましたし、それら以外にもやり方は多種多様です。

 

そのため、私が本日お伝えする方法はあくまで一例であり、「絶対このやり方でやるべき!」というものでもありません。

 

ただ、前もってお伝えしておくべきことがあります。

 

それは、「私はHTML経験がとても浅い」ということ。つまりそのことを踏まえると、私のとった方法が「HTMLの知識や経験が浅くても簡単にできる方法」であることは確かです。

 

「div」や「class」もよくわかっていない私が、どのように横一列に並べたのか。本日は、それをお伝えしようと思います!

 

それでは、「ボタンを横一列に並べて設置する方法」について、みていきましょう!

 

 

≪1.テーブルタグを使って横一列に並べる≫

 

私は、ソーシャルボタンを横一列に並べる方法として、「テーブルタグを使う方法」を採用しています。

 

ここでは「テーブルタグ」についての細かい説明はせず、あくまで「テーブルタグを使ってボタンを設置する手順」に注目してあなたにお伝えしようと思います。

 

これまでの連載で書いてあったように、すべてのボタンは「HTMLコードを貼り付ける」ことで機能しています。私の連載通りに事を進めていれば、「記事下」にそれらのコードが貼り付けられているはずです。

 

本日いじるのは、その「記事下」のHTMLの部分です。コピー&ペーストのみで終わるようにはなっていないため、導入する場合は手動でコードを入力してもらうこととなります。(※私の方法であれば、CSSをいじる必要はありません)

 

自分で入力する、とはいっても、非常に簡単です。構造も難しくないため、ササッと説明させていただきますね。

 

まず、HTMLコードを入力する部分に、「テーブルタグ」を記入しましょう。工程の第一段階としてやってもらうことは

 

1.ボタンのコード全体よりも上の部分に「<table>」と「<tr>」を記入して、

2.ボタンのコード全体よりも下の部分に「</table>」と「</tr>」と記入しましょう。

 

 

20140427101209

 

 

これで、テーブルタグの大枠は設置完了です。これから先の作業はすべて、今設置した大枠の中で行います。横一列に並べることとは関係のないものは、この大枠よりも外に入力してください。

 

さて、テーブルタグの大枠は設置出来たでしょうか。次に、個別にコードを入力するための、小さい枠を作ります。ここでやってもらうことは、

 

1.貼り付けるコードのすぐ上に「<td>」と記入して、

2.貼り付けるコードのすぐ下に「</td>」と記入してください。

 

気をつけていただきたいのは、この「<td>」「</td>」に関しては「それぞれのコードに、個別に入力する」ということです。つまり、貼り付けたいボタンが3つある場合は、「<td>」「</td>」のセットは3つとなります。

 

画像にまとめると、次のような形になります。

 

 

20140427101210

 

 

あとは、上の画像でいう「*コードその1」や「*コードその2」の箇所に、生成されていたHTMLコードをそれぞれコピー&ペーストするだけでOKです。

 

これで、テーブルタグの設置は完了です。この方法で、ボタンを「横一列に並べる」ことができます。もし手順通りにやっても横一列に並ばないようであれば、コードの順番や記述を見直してみてください

 

*

 

テーブルタグの設置は完了しました。ですが、実際にプレビューを見てみると、驚いた方もいるかもしれません。

 

 

20140503093021

 

「ボタンが密着しすぎィ!!」

 

 

≪2.ボタン同士の密着感は「&nbsp;」で解消できる≫

 

これまでの手順通りに、ソーシャルボタンを横一列に並べて設置してみると

 

 

20140502185411

 

 

このように、ボタン同士の間隔がまったくない、非常に密着した状態になってしまうのです。このままでは、はてブとTwitterのボタンが恋に落ちてしまうかもしれませんし、Google+のボタンをTwitterとPocketが取り合うことになってしまうかもしれません。

 

それは回避しなくてはなりません。私のブログにおいて修羅場はご法度です。そこで私は、彼らの間にクッションを置いて上げることにしました。

 

そのクッションとは、HTMLコードの1つである「&nbsp;」にてございます。

 

 

20140502185409

 

 

画像で強調しているように、ボタンのコードそれぞれの末尾に、「&nbsp;」という文字列を入力しましょう。(&nbsp;は「半角スペース」のようなものです)

 

挿入する位置は、先ほど入力した「</td>」のすぐ手前だと覚えていれば間違いはありません。それ以外の箇所に挿入しても機能しないことがあるため、ご注意ください。

 

さて、このようにして、それぞれのコード末尾に「&nbsp;」というクッションを差し込んであげると……

 

 

20140502185410

 

 

お見事!それぞれのボタンにスペースが挿入されて、ソーシャルなボタンたちはつかずななれずの関係を保つことと相成りました。

 

*

 

さて、「ボタンを横一列に並べる方法」については、これにて一件落着です。この記事ではテーブルタグを使う方法をお伝えしましたが、他にCSSを使用する方法などもあります。

 

この記事の方法でどうしてもうまくいかない方や、「もっとスマートなコードにしたい!」という方は他の方法を調べてみてください。

 

 

――あなたの旅先案内人 かけすけ( @kakesuke02 )より

 

 

≪まとめ≫

 

■ コードを貼り付けていくだけでは、ボタンは横一列に並ばない。

■ 「テーブルタグ」を使うことで、横に並べることができる。

■ 「ボタンが密着しすぎ」という場合は、「&nbsp;」を使うことでも解消できる。

 

 

連載記事一覧

(1)はてなブックマーク編

(2)Twitter編

(3)Google+編

(4)Pocket編

■※(5)facebook編はなし。

(6)横一列に並べる「テーブルタグ」編

(7)まとめ編