2016年1月18日

はてブボタン用のマークを自分で作ってみる。Font Awesomeに無い場合。

スポンサードリンク

 SNS共有ボタンを自分で作っている場合には、
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"> はてブ&nbsp;</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</b>! はてブ&nbsp;<?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ヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク