忍者ブログ

とちにすいはら式+

痒いところに手が届かない雑記ブログ。お金とDTMの話が多め

近未来的音楽素材屋3104式
↑音楽素材はこっち↑

とちにすいはら式+

忍者ブログでソーシャルボタンをキレイに並べて貼る方法の覚書

このブログの各ページにソーシャルボタンを設置してみた。
(現在時刻 05:00)

朝から何をやっているんだ、という感じだが、
そのボタンをキレイに並べるのに苦労したので少しメモ書き。

というのも、各ボタンのコードをそのまま貼り付けると位置がガタガタになったり、
勝手に改行されたりと、ちょっと手を加える必要がありました。

0.前提条件


忍者ブログの「共通タグの設定」の記事下に各ボタンのコードを加えます。
前回忍者一括ボタンはなぜかうまくできなかったので、手動で1つずつ取得。
今回取り上げるのはツイート、いいね、ポケットの3種類のソーシャルボタンです。

1. ツイートボタンのカウントを上側に表示させる


まず、ツイートボタンのコード取得をします。
デフォルトではツイート数は右側に表示されますので、
ツイート数を上側に表示させるにはコードに手を入れる必要があります。

具体的にはaタグにcount="vertical"を加えるとOK。
"https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical"
これでツイート数はボタンの上側に表示されます。

ちなみにツイートボタンのコード取得はツイートボタン取得ページで。
ここで取得したコードを上述の変更を加え「共通タグの設定」の記事下に貼ります。

2.いいねボタン


勝手に幅が取られてしまって、ボタン間に隙間が出てしまいます。
そのため、widthを調整してやる必要があります。

このブログではwidth:70px; height:60pxがいい感じ。
単純に数字を書き換えてちょうどいいところを調整するだけですので、
そう難しいものでもないですね。

ちなみにいいねボタンのコード取得はいいねボタン取得ページで。
ここで取得したコードをを「共通タグの設定」の記事下に貼ります。

3.ポケットボタン


そもそもポケットボタンってなんぞやってものなのですが、
記事などをポケットに入れておけば、あとで読めるというものです。
Evernoteみたいな感じのもの?

なのですが、これをコード取得して貼り付けると、
なぜか改行されてしまって、ボタンが一列に並んでくれないのです。

コードの中にも改行コードが入ってるわけではなさそうで困った。

というわけで、その対処方法。
こちらの記事が同じ現象で参考になりました。

まず、「共通タグの設定」の</head>の項目にスタイルシートを1つ定義します。
(ここに書くのはソースが汚くなるが、今回は無視)

<STYLE TYPE="text/css"> 
<!-- 
.pocket-btn{
 display:inline-block;
}
 --> 
</STYLE>

次に「共通タグの設定」の記事下に、ポケットボタンのコードを貼り付けます。
取得はポケットボタン取得ページで。

で、最後に先ほどのスタイルシートをポケットボタンのコードに適用します。
<div class="pocket-btn">
~ポケットボタンのコード~
</div>

4.みんなキレイに並んでくれました


これでみんなキレイに並んでくれました。
よくよく見ると微妙に高さが違ったりするけど、これは仕方ない。仕方ない。
というわけで、キレイに並んでくれたので寝ます。


関連記事

ブログのレイアウトを変更したいけど出来ない理由
忍者ブログにタグ付けをしてみる
忍者ブログで自作最新記事リストを作る方法

忍者ブログのカスタマイズ。とちにすいはら式+の場合

忍者ブログでグーグル+1ボタンを貼る方法の覚書
忍者ホームページとお名前.comでドメインをあれこれした話

 

拍手[1回]

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント

トラックバック

スポンサーリンク

PR

ブログ内検索

記事書いてる人

運営者:
さいれほ@planet_f108
30代個人事業主のDTMerで3104式の中の人。

音楽以外にはお金の話が好き。株式投資や投資信託もやってるよ。
マイクロ法人立ち上げを目指し、脱雇われ人の道を模索中。

活動域は青森県八戸市周辺。一緒にお仕事しましょう。

プロフィール詳細はとちにすいはら式+についてをご覧ください。

バトルモード3

2016年春M3の企画はバトルモード3!!


ついったー

お問い合わせフォーム

筆者の知識や経験であなたの力になれますか?

必要事項をご記入の上、送信ボタンをクリックすると、運営者宛にメールが送信されます。

ブログ内リンク

レビュー・改造系記事まとめリンク レビュー・改造系記事まとめリンク
PC・トイカメラなどのレビュー記事リストです。

DTM機材レビュー記事まとめリンク DTM機材レビュー記事まとめリンク
DTM機材に関するレビュー記事リストです。

クラブ関連記事まとめリンク集 クラブ関連記事まとめリンク集
音楽を流すクラブにいってきた話まとめ。

トラブル・お悩み解決系記事まとめリンク トラブル・お悩み解決系記事まとめリンク
ソフトのインストールなどで躓いた記事リストです。

サイト作り系まとめリンク サイト作り系まとめリンク
サイトのアクセス増、ユーザビリティに関する記事リストです。

忍者ブログカスタマイズまとめリンク 忍者ブログ運用術から収益化まで
忍者ブログ運用術から収益化までをまとめた記事リストです。

雅楽の舞改めポーチュラカリア成長記事まとめリンク 雅楽の舞改めポーチュラカリア成長記事まとめリンク
2011年から育てている雅楽の舞に関する記事リストです。

とちにすいはら式+アクセスアップ経過記録まとめリンク とちにすいはら式+アクセスアップ経過記録まとめリンク
本ブログのアクセス推移を記録した記事リストです。

お金持ち本まとめリンク お金持ち本まとめリンク
筆者が読んだお金持ち本あれこれまとめリンク。

無職関連の記事まとめリンク 無職関連の記事まとめリンク
無職関連の記事リストです。

スマホでUSENの記事まとめリンク スマホでUSENの記事まとめリンク
スマホで使える有線放送まとめ。データ量も測ってみました。

最新コメント

[01/20 かんりにん]
[01/20 シモハチ]
[04/03 かんりにん]
[04/01 シン]
[04/01 かんりにん]

フリーエリア

QRコード

とちにすいはら式+

サイトご利用上の注意

ブログ記事の著作権はとちにすいはら式+にあります。 引用される際には、必ず引用元として弊ブログのURLも記載していただくようお願いいたします。 記事の一部もしくは全ての無断転載はご遠慮ください。

記事を参考にされる際には、自己責任にてお願いいたします。