Twitterマーク等をつけるといい感じ。
Font Awesomeには、Facebook等の沢山のアイコンがあります。
しかし、はてブは残念ながら無いです。なので自作します。
はてブの共有バナー（自作）にマークを付ける
公式バナーは、ちょっと表示速度が遅くなります。
なので、WordPressでは、SNSバナーは自作しています。
その方法はおいおい投稿します。
私のテーマはStinger5です。
それに合わせて記述しています。
では、自作マークの設置方法。
style.css→
はてブ用のCSSを追加します。
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px){
の後に追加します。
PC表示のCSSはこちら。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
/* はてぶ */
.fa-hatena:before {
content: "B !";
font-size: 15px;
font-weight: bold;
margin-right:4px;
}
これで大体、はてブっぽいマークに見えます。
見る人が分かればOKでしょう。
そして、
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" >
<i class="fa fa-hatena"> はてブ </i>
<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
をsns.phpに追加しました。
さて、スマホでもこのコードを追加して、
表示できるかを試したんですが、なぜか上手くいかず。
私のテーマ固有の問題かもしれません。
なので、スマホではphpに直接入力しています。
このようになっています。
sns.php→
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><b>Ｂ</b>! はてブ <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
参考にしたサイト
Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法
http://hayashikejinan.com/webwork/css/913/
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク