軽いSNSボタンをまとめてブログに設置 - ブログ/カスタマイズ

mineoおすすめ契約方法

軽いSNSボタンをまとめてブログに設置
--

2016.03.06 | カテゴリ:ブログ/カスタマイズ

テンプレートの変更を告知していたもののあまりカスタマイズに納得できずに頓挫している状況ですが、今使用しているテンプレートを弄りました。変更箇所は記事の一番下にSNSボタンの追加で以下の様に。

sns20160305.png

このSNSボタンは過去何度も設置⇒削除を繰り返してきました。まとめて標示できるブログパーツ Zenbackも導入した事もあります↓

過去記事参照 ⇒ ソーシャルブックマークボタン追加

過去記事参照 ⇒ FC2ブログにはてブボタンとTwitterボタン追加

過去記事参照 ⇒ ブログパーツ Zenback導入


その都度、削除した理由としては 重い という事。FC2ブログでも設定でTwitterとFacebookはボタンの表示の有無を設定出来るが、それも同様に重くて表示が遅くなるのがどうしても気になって駄目でした。後はデザインに統一感が無かったりしたのも理由です。

それでもアクセスアップに繋がるのを期待して、どうにか設置したかったがやっと納得できるものを発見。参考にしたサイトは以下。リンク先のコードを利用でタイトル通り軽いSNSボタンを設置出来ます。

参照 ⇒ 公式SNSボタンは重い!コピペでできるCSSのSNSボタンで軽くする | Iscle[イズクル]


上記サイトのコードで設置できるSNSボタンは以下

・Twitter
・Facebook
・Google+
・はてなブックマーク
・Pocket
・LINE


設置はリンク先からコードをコピーして貼り付けるだけと簡単。問題はリンク先のコードはWordPress用。WordPress利用の方はそのままコピペでいけますが、私の利用しているのはFC2ブログ。

FC2ブログでもCSSのコードはそのままスタイルシートにコピペで問題無いが、HTMLに記載するコードは以下の箇所をFC2ブログ用に変更する必要があります。

<?php the_permalink(); ?> ⇒ <%topentry_link>
<?php the_title(); ?> ⇒ <%topentry_title>


基本的には上の箇所を変更ですがTwitterは以下の様に変更↓

■元コード
<a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>%20by%20" target="_blank">Twitter</a>

■変更後
<a href="http://twitter.com/home?status=<%topentry_title><%topentry_link>"target="_blank">Twitter</a>


変更したFC2ブログ用のコードは以下。はてブを先頭にしたりと並び替え、変更箇所を赤字で記載。

<div id="share">
<ul>
<!-- はてなブックマーク -->
<li class="share-hatena">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<%topentry_link>&title=<%topentry_title>" target="_blank">はてブ</a>
<!-- Twitter -->
<li class="share-twitter">
<a href="http://twitter.com/home?status=<%topentry_title><%topentry_link>"target="_blank">Twitter</a>
</li>
<!-- Facebook -->
<li class="share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=<%topentry_link>" target="_blank">Facebook</a>
</li>
<!-- Google+ -->
<li class="share-google">
<a href="https://plus.google.com/share?url=<%topentry_link>" target="_blank">Google+</a>
</li>
</li>
<!-- Pocket -->
<li class="share-pocket">
<a href="http://getpocket.com/edit?url=<%topentry_link>" target="_blank">Pocket</a>
</li>
<!-- LINE -->
<li class="share-line">
<a href="http://line.me/R/msg/text/?<%topentry_title>%0D%0A<%topentry_link>">LINE</a>
</li>
</ul>
</div>


上のコードをHTLMの設置したい箇所に入れ、スタイルシートは先述の通りリンク先からそのままコピペすると一番最初の画像の様になります。並び替えや不執拗なボタンは変更、削除して下さい。

これで設置完了です。表示スピードは公式のボタンに比べ、全く気にならないのでかなり軽いんじゃないかと思います。デザインも統一感があって良いです。

数字も表示したい人には向かないかもしれないが、元からこのブログはこの手の事が付かないブログなので当分これで行きます。後は根本的な問題はこれを押してもらえるかどうか。

ボタンを設置していなかったとは言え、はてブ含め過去ほとんど付いてない。取りあえず押してもらいやすい環境は作ったので今後に期待。

それにしてもLINEボタンって効果あるのか・・・スマートフォン用の表示ではFC2ブログの設定を利用してLINEボタンを設置しているが全然アクセス無い。まぁこの辺は状況を見て変えていきます。設置位置に関しても同様に。もしかすると過去と同様に何かあれば削除するかもしれませんが。

【更新】

はてなブックマークのコードがトップページに設置した状態だと、はてブへのリンクがトップページにされてしまうので、これをトップページでも個別記事にブックマークされるようにします。

トップページ用


<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard" title="はてブ">
個別記事用
<a href="http://b.hatena.ne.jp/entry/<%url>blog-entry-<%pno>.html" target="_blank">

スポンサードリンク


ブログ/カスタマイズ』カテゴリの関連記事

ブログへのYouTune埋め込み動画をスマホ用にサイズを自動変換
FC2ブログでスクロールしてもサイドバー(プラグイン)を固定化させる
ブログ購読方法を続きを読むに変更
ブログパーツ Zenback導入
FC2ブログで画像付き関連記事を表示させる[Milliard関連ページプラグイン編]

関連タグ:

 ☑SNS  ☑テンプレート  ☑カスタマイズ  ☑FC2ブログ  ☑ブログ

Fire7hklk.png   Fire7HD8300x250.jpg  

この記事へコメントする・コメントを見る (0)

今日の人気ページ

fire600.jpg

新着記事

全裸待機禁止Tシャツ企画進行中!? NifMoのTwitterが面白い [08月20日]
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」 を紹介!AppStoreから削除される前に入手を [08月19日]
iPhoneのバッテリー診断アプリの決定版 「Battery Life」【悲報 再削除】 [08月18日]
Googleが警告を出すので早期のFC2ブログのSSL化を求む [08月18日]
セブンスター仕様1935レプリカZippoが当たるQRコードキャンペーンに挑戦[2017年8月1日-10月31日] [08月15日]
JTが電気加熱型たばこ『Ploom TECH』の抽選販売受付を開始【ラスト第6回目】 [08月11日]

mineo紹介キャンペーン
最新記事
2016年人気記事ランキング
Apple公式のiPhoneのバッテリー診断方法 [2017年最新版] dsgre.jpg
iPhoneのバッテリー診断アプリの決定版 「Battery Life」 rank20160605 (3)
iPhoneのホーム画面のアイコンの位置を自由に変更する裏ワザthdth.jpg
クリックポストの配達日数を実際に体験した日数と目安の調べ方を紹介rank20160605 (10)
iPhoneのバッテリーの劣化を調べるiOSアプリ 「coconutBattery」hjkh.jpg
PHILIPS(フィリップス) ソニックケアーを修理に出す60409121432820.jpg
FREETEL Simple2はまさかの3種類展開と1年間無料キャンペーン開始FREETE.jpg
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」を紹介dndeth.jpg
あのiPhoneのバッテリー診断アプリ「coconutbattery」がAppStoreに復活!→【再削除】→iOS10でアプリも起動せずhjkh.jpg
ドコモ「Xiパケ・ホーダイ for iPhone」を解約(廃止)rank20160605 (6)
Amazonのタブレット Kindle Fire HDで自炊漫画を読むblog-entry-1037.jpg
iPhone最強の広告ブロックアプリ 「AdBlock」 がiOS10で復活yfyfghjv.png
docomo契約SIMカードは差し替え注意201620.jpg
メルカリ 返金までの流れを実体験 その5 「返金(取引キャンセル)編」23131.jpg
ドコモ Xiパケ・ホーダイ for iPhoneを解約(廃止)の注意点201615.jpg
mineo紹介キャンペーンの甘い罠→【再延長】2017年1月31日まで→【仕様変更】一部条件で特典がEJOICAセレクトギフトに201616.jpg
ドコモのパケットサービスを解約しようとするが問題発生201617.jpg
iPhoneバッテリー診断アプリの信憑性gufddcrt.jpg
メルカリ 返金までの流れを実体験 その1 「商品破損編」rank20160605 (9)
docomo iPhone契約SIMをガラケーに挿す201613.jpg
記事を探す
サイト内検索
  • iPhone/全般(50)
  • iPhone/アプリ(53)
  • iPhone/アイテム(39)
  • MVNO(54)
  • MVNO/mineo(124)
  • MVNO/NifMo(19)
  • MVNO/0SIM(10)
  • FREETEL/Simple/Simple2(43)
  • タブレット(29)
  • ケータイ/スマホ雑記(29)
  • ケータイ/スマホNEWS(233)
  • NM705i/6120c(2)
  • 705NK/N73(94)
  • Nokia E51(42)
  • 雑記(95)
  • ブログ記事録(105)
  • ブログ/アクセス数公開(30)
  • ブログ/カスタマイズ(34)
  • プリペイド/プリモバイル(13)
  • デジカメ(4)
  • LINE(14)
  • IQOS/PloomTECH/Zippo(23)
  • アンケート(3)
  • MVNO2台持ち用 通話専用機種(30)
  • NOKIA その他(3)

  • 月別一覧を開く

    関連ワード一覧を開く

    全記事一覧表示
    Author
    ペンギンのアイコン素材管理人:705んk
    @musiatui | Twitter

    iNoWBh.png

    管理人利用中アイテム