上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 今回は、ブックマークボタンやランキングボタン配置のチュートリアルです。
 FC2ブログ設定で「ツイッター」「フェイスブック」は配置可能ですが、他にもアイテムを加えたいときに、この設定を使うと、上手く一列に配置できず、見た目がちょっとばかり煩雑な状態になってしまいます。

 その場合、設定を使用せず、テンプレートに直接タグを設置すると、上手く配置できます。
 HTML上部をブックマークタグで汚さずに、本文上部へボタンを配置する方法もこちらに。




まずは、ブックマークタグを取得



 主要なブックマークのタグは、こちらから取得できます。


FC2ブログランキング





ブックマークボタン配置ブロックのベースを作成



 ブックマークボタンを配置すると分かるのですが、意外とフェイスブックボタンの配置が難しかったりします。
 一列に横に並べたつもりでも、


※なんだか適当に配置されている感じに…

 こんな感じで、なんだかあっちに行ったりこっちに行ったり…上図は、改行を加えず、すべてを一行で記述しています。
 こう言う場合は、「div float」か「table」タグを利用すれば、綺麗に配置できます。今回は、綺麗に配置しやすい「table」タグの方を利用します。
 以下のように記述してください。

<div class="bookmarks_icon">
<table><tr>

<td>
<ツイッター用タグ>
</td>

<td>
<フェイスブック用タグ>
</td>

<td>
<はてなブックマークタグ>
</td>
 :
 :
</tr></table>
</div>


 これで、ひとまず「横一列」に綺麗に並ぶようになります。
 しかし、実際にやってみると分かりますが、一部のボタンが横幅(空白)を異常にとり、他のボタンと離れすぎたり、他のボタンが画面から消えてしまったりします。

※隙間が広く開く原因は、デフォルトでボタンの幅が広く指定してあるため。

 そんな時は、直接「ブックマークボタンのタグ」をカスタマイズします。

 まずは、横幅を取りすぎているボタンを確認し、以下のタグを捜索します。

「<a href=~~~~~~~」(ツイッター)
「<iframe ~~~~~~~~」(フェイスブック)

 ツイッターやフェイスブック以外でも、ほとんどのデザイン破壊的ブックマークボタンが、こういったタグを含んでいるはずです。これに、直接スタイルを当て、強制的に横幅を指定します。
「<iframe ~~~~~~>」のタグ内に、「style」を挿入します。

<iframe ~~~~~~ style="width:100px;height:21px;overflow:hidden;">

※横幅、縦幅はボタンによって違います。各ボタンごとに調節してください。

 こうすれば、強制的に横幅と縦幅を指定し、はみ出た部分は非表示にしてくれます。
 ただし、人気サイトなどを運営している方は、ブックマーク数が膨大になると、はみ出す確率が高くなってしまいます。そういった場合は、横に伸びないタイプのデザインのボタンを選ぶと無難かも知れません。




テンプレートへの配置



 テンプレートへボタンを配置することで、毎回記事ごとにタグを貼り付ける手間が省けますし、突然ブックマークサイトの運営が終わってしまったときなど、取り外すのも簡単です。

記事直下へ付ける

 一番スタンダードな配置場所が、記事直下です。この場合は、先ほど作ったタグをそのまま以下の赤字部分と張り替えるだけです。こうすると、デフォルトで設定されているブックマークアイコンと入れ替えることが出来ます。

<!--/more_link-->
<!--追記-->
<!--more-->
<div id="more"><%topentry_more></div>
<div class="bookmarks">
<a href="http://twitter.com/home?status=<%topentry_enc_link>" target="_blank" title="ツイッターでこの記事のことをつぶやく"><img src="http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/default-icon-16x16-twitter.png" alt="Twitter" /></a>
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" target="_blank" title="はてなブックマークに追加"><img src="http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/default-icon-16x16-hatena.png" alt="はてなブックマークに追加" /></a>

</div>
<!--/more-->




追記文直前に表示する

 詳細記事ページのみ、追記文の直前に配置する方法を紹介します。本文と追記部分の間を煩雑なブックマークタグで汚さないように配置します。「position」タグを利用します。(親ブロックを「#more」として、ポジションします)
 手順が少々煩雑なので、注意深くカスタマイズしてください。

[手順1]

 最初に、「記事直下に貼り付ける」方法と同じようにカスタマイズ。
 HTML上では記事下ですが、これをCSSで上に上げます。まずは、HTMLの赤字の「</div>」を青字のように配置します。

HTML
<!--/more_link-->
<!--追記-->
<!--more-->
<div id="more"><%topentry_more></div>
<div class="bookmarks">
<書き換えたブックマークボタン・ランキングボタンなど>
</div></div>
<!--/more-->


[手順2]

 次は、CSSの編集です。以下の一文を新たに追加します。

CSS
#more{
position:relative;
padding-top:50px;
}
.bookmarks{
position:absolute;
top:0;
right:0;
}


赤字部分は、ブックマークボタンが配置されるスペースです。
 ここを開けておかないと、追記文章とボタンが重なってしまいます。

青字部分を「left」とすれば、左寄せできます。
 また、「top」の数値を調節すると、本文との隙間も調整することが出来ます。


 数値の細かい修正が必要です。本文と追記文との空白のバランスに注意してください。
このエントリーをはてなブックマークに追加
Sat.06.25.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。