カスタマイズこんにちは!ちょっと図書館から借りている本の返却が迫っているので、読んでいこうと思ったら二日間くらい本だけ読んでたすなふです。!オリジナルデザインのTwitterツイートボタンの作り方。和洋風◎こちらの2つのサイトを並びの参考にしつつ、ソーシャルボタンを個別記事のヘッダに縦並びに並べてみたいと思います。2つのサイトに並べ方の解説があるわけではないですので、こんな感じで並べようという参考であって、並べ方については、私の方法です。HTML規則的に、変な事になっていたら、ご教授頂けると嬉しく思います。今回は、一番初めに、最終的に私はこんな追加をして並べたっていうコードを貼っておきます。・・注:blogger用ですよ。毎回ですが、テンプレートHTMLのバックアップは忘れずに。『&quot;』が『"』になっている。type='text/javascript'>』以後『</script>』の間で、そのようになってる部分がないか確認してみてください。なってたら、まぁ、私の表記ミスですので、ご連絡を(・・;どうしても無理となったら、ひとつひとつのコードは、公式からもってくるなどで対応して下さい。class』は、それぞれ私が自分で決めたものですので、不都合があれば変更して下さい。その場合は、CSSの指示クラスも変更になるかもしれません。cond』『</b:if>』で、個別記事のみに表示するようにしています。cond』と『</b:if>』を消すなどの対応をして下さい。順番に・・・GoogleアドセンスTwitter「ツイート」ボタンFacebook「いいね」ボタンGoogle+1ボタンはてなブックマークボタンFacebook「いいね」横長ボタンというように、説明を加えていこうと思います。Googleアドセンスボタン■Googleアドセンスの登録をして、「コンテンツ向けAdsense」の「広告ユニット」の作成から、336×280のユニットを作ってコードをもらってきます。-->』で、自分で追加した部分が分かるように命名。class』で、div要素にして、CSSでの調整をしやすく、また、divで区切る事で、縦並びに。アドセンスIDと広告ユニットIDは、それぞれ異なりますので、ご使用のものを。公式からもらってきたコードを基本的に貼るだけですが、コピーしてきたコード内で『<!--』『-->』とコメントアウトしてある部分は、『&lt;!--』『--&gt;』と変更が必要な事に注意して下さい。type='text/javascript'>』の後ろと、9行目の部分です。『margin-top:15px;』で、記事タイトルからの余白を少し空けるように。『float:left;』で、左寄せで、右側に要素を回りこませるように設定しています。CSSは、とりあえずHTML部分を全部のボタンが追加出来てから調整したほうがいいです。共有できるように設定してみましょう。class='socialcount'>』を足して、縦並びにするボタン全体を「socialcount」という1つの箱にしています。縦並びの最後、今回では「はてなブックマーク」ボタンのHTMLのすぐ次の行に『</div>』を足すことで、一つのまとまりにします。『<script>~~</script>』の間にあった、『"』は『&quot;』に変更になっています。「TwitterのID」の場所には、ご使用のツイッターアカウントIDを入れて下さい。『data-lang='en'』の部分で、表記は英語に設定しました。both;'/>』は、IEでの表示が崩れたので、なんとかしようと試したところ、これでうまくいったので。他に、いい設定法があるかもしれません。IEの表示を確認しながら、入れるかどうか決めて下さい。both;"/>の部分ですが、カスタムCSSから.socialcount{width:65px;}というように、縦並び部分の横幅を適正に指定してあげれば、なくても大丈夫と分かりました。『heightとwidth』で大きさ調整。!important;』にしてもいいかもしれませんね。『margin-bottom』で、下にある「いいね」ボタンとの余白を調整しています。~~~~~~~~>』の中に、xmlns:fb="http://ogp.me/ns/fb#"を追加。公式の「XFBML」を使用しています。iframeでもいいのですが、動作確認で、「いいね」を押した時のコメント追加機能が出ない感じだったので・・・。src='http://connect.facebook.net/en_US/all.js#xfbml=1'/』の「en_US」で文字表記を「Like」にしています・・・横幅縮小の為。公式からのものでもちろん使えますが、公式のままだと、トップページの「いいね」しか拾わないので、記事毎の「いいね」表示に切り替えています。『href="http://www.sunabox.net"』の部分を『expr:href='data:post.url'』に変更していますよ。})();</script>●CSS部分なしHTML部分は、こちらも、公式からのコードでは『href='入力URL'』になるところを、『expr:href='data:post.url'』にして、記事毎の+1を拾うように変更しています。記事毎のブックマーク数を取れるように変更。alt=』の部分のタグですが、もしかしたら「はてな」のJavaがうまく読めなかった時の代替画像なだけで、消してしまっても動作に影響はないかもしれません。今、自分のサイトで試して様子見中。class='socialcount'>』を挿入していますので、これをこの「はてなブックマーク」ボタンのコードのすぐ後に『</div>』タグを入れて閉じます。これは、左に配置する広告の右に縦並びにするための措置です。★縦並びボタンとしてはここまでですので、関連するCSSとして、.socialcount{margin-top:15px;float:right;}これで、ひとまとめの箱にしている「socialcount」を、右寄せで配置という指定になります。最後に、「広告」「縦並びボタン」の下に、常にトップページ・・・つまりブログ自体の「いいね」数を表示させておくボタンを追加します。ここは、XFBML版を使うと、表記が英語のままになってしまいます(縦並びのほうの指定で使った『<body>』直下コードの指定を使いまわすため)ので、iframe版を使います。height:35px;'/></div>少し見づらいですが、公式から設定仕切ってしまえるような内容ですので、そう困らないと思います。コピペする場合は、「サイトURL」に自分のブログのURLを入れるようにして下さい。bloggerHTML特有の書き換えが必要かもしれませんので、公式から持ってくるほうが楽だと思います。以上!とても長くなってしまいましたが、コピペでもいいし、ひとつひとつでもいいし、見ながらすれば、きっとこのブログの記事ヘッダ部分程度には並べられると思います。広告ブロックを使うと、ちょっと縦並びの意味が分からない残念なことになりかねませんが、それを気にするときっとデザイン出来なくなるので、気にしない事として、ちょっと頑張った感もでるし、見た目も賑やかになるこの並び。一度挑戦するのもいいかと思って、〆ます。その横には「忍者おまとめボタン」でシェアボタンがあるのに。...後日、少し変更を加えています。興味があればご一緒に。参考になった方はシェアしてくださると嬉しいです!https://www.sunabox.net/2012/05/blogger_22.html[blogger]慣れるとこっちのほうがいいかも?ソーシャルボタンを縦に並べて配置する!Twitterのフォローはこちらから!■Twitterによる更新情報などのつぶやきもおこなっております。14:08:00いつも参考させていただいています!上部にAdWordsとソーシャルボタンを設置したのですが、スマートフォンでも同様に表示されてしまい、非常にみずらい形になってしまいます。sunaboxさんのスマートフォンでは表示されていないのですが、どのようにすれば表示されないようにできるのでしょうか。22:08:00ソースもっかい見てます。id='fb-root'>から始まりますね。class='like-standard'~~~>の「いいねstandard」で終わるコード群を添付の画像を参考に</span></span><ここにコード群。></div></div>記事ヘッダーのこの位置に移動させて下さい。class='post-header-line-1'>を閉じている部分だからです。今の場所は記事ヘッダーと本文の間に見えもしますが、もう一つ上の階層に書かれてしまっている状態になります。さっき書いたコメントへの返事がちょっと場所間違ってますね、すみません。あと、コード群の上下にある<p></p>は、記事本文であることを示すタグになるので、広告とソーシャルボタンのコードには必要ないので、消しちゃって下さい。14:17:00コメントありがとうございます。うまくいかない時はしんどいですよね。サイトのソースを確認させて頂きました。id='post-body-'『それぞれの記事コード』'>の下に書いてあります。entry-content」以後は、本文ということになりますので、モバイルでももちろん本文の表示をしないわけにいきませんから表示されたままになっていると思われます。id='post-body』のすぐ上あたりに移動させてあげて下さい。「いいね」ボタンの横幅はどうやら自動調整されるようになっていて、日本語表記だと、思うよりも横長くなってしまうようです。ここのブログでも、英語表記にしているのはそういう理由からですよ~。英語表記だと、だいぶ横狭くなります。post-footer-line-3'>の下辺りにあります。entry-content'」のすぐ下にも同じようなスクリプト呼び出しコードがあります。こちらは「en_US」と英語表記指定ですが、後ろにあるスクリプトの言語に上書きされているのではないのかな?と思います。src='http://connect.facebook.net/ja_JP/all.js#appId=399559920070307&xfbml=1'>だけを(appIdの数字前後の『《』はいらないはずなので確認を)『/body』か『/head』の直前に書いてあげて下さい(「<>」は半角に直してください~)。スクリプトの呼び出しコードは1つで大丈夫です。最後に、ソースを見ていて、ヘッダ下の「いいね」の横長いボタン「standard」ですが、URLの指定箇所が「サイトURL」のままになっていますので、Facebookファンページか、ブログのトップページに変更してあげてくださいね。HomeSocialProfileすなふここは、GoogleChromeの事やbloggerの事等を軸としながら、気になった事を、何も気にせずに書いていこう、そんなブログです。Twitterアカウントのフォロー、ブログについてのコメント、メール等いつでも待ってます。30days)[Windows7]ゴミ箱をタスクバーに移動する方法!デスクトップにアイコンを置きたくない人に最適です。Tweetbotや他のアプリの通知が表示されない!そんな時の対処法の1つをご紹介。miniも新しく!2011モデルとの比較表。驚異の3D天井画~ポッツォのバロック」NHKオンデマンド[blogger]ページ送り機能!「前の投稿」の表示を英語表記に変える方法。v2.0」!綿向山登山!すっかり登山者気分に浸れる雰囲気と、歩きやすい道が気持ちよかった!【ほぼ滋賀県】去年の秋から登山を始めた私がご紹介したい7つの山。