スマホ用テンプレートの不備を修正!SNSボタン等をカスタマイズ - ブログ/カスタマイズ

mineoおすすめ契約方法

スマホ用テンプレートの不備を修正!SNSボタン等をカスタマイズ
--

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

どのぐらいの認知度があるかは知らないが、私が利用しているこのFC2ブログではスマートフォン(以下スマホ)用とパソコン用の表示が可能となっています。

見た目で分かる事ですが、URLの末尾に ?sp と付けばスマホ用のテンプレート表示になっています。

dfdef.png

時代といいますか、サイトへのアクセスはスマホからが圧倒的に多い。先月の数字で言えば約7割がスマホからのアクセスになっている。

rgwrg_201610091732207a2.png

この辺はサイトや扱っている内容で若干違うと思うが、恐らくスマホからのアクセスが主流になっているのは間違いない。

これについては以前も書いていたので把握はしていたのだが、重大な勘違いを犯していた。それはスマホからのアクセスでも閲覧者はパソコン用の表示で見ていると、思っていた事。

なぜ勘違いを犯していたかは、利用している人気記事ランキングでスマホ用(末尾が ?sp)のページがパソコン用に比べて大きく数字が低かったからである。

erfgwef.png

またスマホ用の記事名をパソコンと全く同じになるようにしていたため、これに気づかなかった。

下記画像はアナリティクススの記事別のランキングになるが、同じ記事でもスマホ用の記事が上に来ていることが確認出来ます。※スマホ用はタイトル末尾に スマホ版 ヒビコレ と表示。

regwer.png
▲このタイトル付けが、SEO的に良いのか悪いかは分からないので注意。

実はスマホ用のテンプレート関しては、先のアクセスが少ないだろうとの間違った判断から、不具合的な箇所も把握していたがほったらかしにしていた。

しかし上記に上げている数字から、これを放置することはダメだと判断し、その辺の修正を含めて微ニューアル的なカスタマイズを行いました。

記事下のSNSボタンを変更

以前はパソコン用と同じくCSSを利用してSNSボタン類を設置していました。見た目は整っているように見えるのだが、問題が2点あった。

①リンクが上手く機能していない(Twitterとはてブ)
②スマホの画面サイズでデザインが変わる

一番の問題は①でした。パソコンからアクセスすると機能するのだが、iPhoneからタップしても、Twitterアプリが起動するだけでツィートするにならなかった。

リンクだけ変更すれば良いのだが、②があってSNSリンクをTwitterとはてブのみにしぼり今回変更しました。

rgwrgw.png

変更コードは以下。

■はてブ


<a href="http://b.hatena.ne.jp/entry/<%url>blog-entry-<%pno>.html"><img src="○○○○◯" border="0" width="20" height="20" /> この記事をはてブ!</a>
■Twitter
<a rel="nofollow" href="http://twitter.com/share?url=<%enc_url>blog-entry-<%pno>.html&amp;text=<%topentry_enc_utftitle>%20%E3%80%90%20<%enc_blogname>%20%E3%80%91&amp;lang=ja"><img src="○○○○◯" alt="○○○○◯" border="0" width="20" height="20" /> この記事をツイート</a>

○○○○◯に用意したアイコン画像を挿入

先述したCSSを利用したSNSボタンの設置は以下を参照下さい。後日修正を入れますがリンクが上手く機能しないのでその点は注意。

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


記事タイトル下にもSNSボタンを変更

折角リンクが機能するようにしたので、SNSからの拡散を少しでも期待したい。という事で記事タイトル下にもSNSボタンを設置しました。

fwef.png

コードは先の物と同じですが、アイコンだけなので文章部分は削除。

■はてブ


<a href="http://b.hatena.ne.jp/entry/<%url>blog-entry-<%pno>.html"><img src="○○○○◯" alt="hatena_bookmark.png" border="0" width="20" height="20" /></a>
■Twitter
<a rel="nofollow" href="http://twitter.com/share?url=<%enc_url>blog-entry-<%pno>.html&amp;text=<%topentry_enc_utftitle>%20%E3%80%90%20<%enc_blogname>%20%E3%80%91&amp;lang=ja"><img src="○○○○◯" alt="○○○○◯" border="0" width="20" height="20" /></a>

○○○○◯に用意したアイコン画像を挿入

メニューを変更


左上のメニューボタンからプルダウン形式で出てくるメニューの一部仕様を変更しました。変更したのは以下の3点。

・最新記事
・カテゴリ
・月別アーカイブ

内容自体は同じなのですが、以前はパソコン用で使っている物を使っていたのを各デフォルトの物に戻しました。以前より見やすくなっているかと思います。

001_20161009185720e0b.png

トップページ下の次ページへを変更


こちらは不具合修正の変更。

以前の物はリンクをクリック(タップ)しても何ら作動しないようになっていた。利用率自体は低いだろうが、PV減に繋がりかねないので今回変更しました。

efww3fwe.png

タグは以下。

■HTML


<div class="pn-page">
<!--firstpage_disp--><a href="<%firstpage_url><%tail_url>" class="prevpage"><%firstpage_num></a>...<!--/firstpage_disp-->
<%template_pager1>
<!--lastpage_disp-->...<a href="<%lastpage_url><%tail_url>" class="nextpage"><%lastpage_num></a><!--/lastpage_disp-->
</div>
■スタイルシート
.pn-page{
text-align: center;
overflow: hidden;
position: relative;
margin: 20px 10px;
}
.pn-page a{
width: 36px;
line-height: 36px;
color: #fff;
background-color: #4D90FE;
text-shadow: 1px 1px 0 #334cb2;
border-radius: 5px;
display: inline-block;
margin: 0 5px;
}
.pn-page strong{
width: 36px;
color: #666;
line-height: 36px;
font-weight: normal;
border: 1px solid #ccc;
border-radius: 5px;
display: inline-block;
margin: 0 5px;
}


はてなブックマークの注意点

はてなブックマークのリンクに関して一つ注意点を。

今回記載しているコードをトップページにも流用してしまうと、そのはてブのリンクにはトップページのリンクになってしまいます。

そこでトップページにのはてブのリンクは以下のコードを使用。

<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="はてブ">


まとめ

以上が今回スマホ用のテンプレートの変更箇所になります。細かく言うと記事下の関連記事の再掲載やアクセス元と人気記事ランキング用の解析タグを外したりしてますがその辺は割愛。

本当はテンプレート自体を他の物に変えようと思いましたが、GoogleのPageSpeed Insightsで評価があまり変わらなかったので、一部変更に。

それにしてもテンプレートの変更の際はいつもなんですが、やりたい(表示させたい)事と自分の知識との剥離がありすぎて、変更に時間がかかる。

特にスマホ用のテンプレートって何処にタグを挿入したら良いのかが、パソコン用のテンプレートと比べ難しかったり。それもあってスマホ用のテンプレートは今まで放置していたのもあるんですけどね。

取りあえず大きな変更ではありませんが、閲覧時に快適になるようにと変更しましたので確認してみて下さい。

スポンサードリンク


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

ブログにトップページに戻るボタンとプルダウンのメニューを設置
FC2ブログカスタマイズ:関連記事の表示
ブログに最適な横幅を測定!サイズ計測の拡張機能の紹介と横幅を変更
FC2ブログカスタマイズ 個別記事で「続きを読む」に自動で改行させる
FC2ブログでスクロールしてもサイドバー(プラグイン)を固定化させる

関連タグ:

 ☑FC2ブログ  ☑ブログ  ☑カスタマイズ  ☑SNSボタン

Fire7hklk.png   Fire7HD8300x250.jpg  

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

今日の人気ページ

fire600.jpg

新着記事

セブンスター仕様1935レプリカZippoが当たるQRコードキャンペーンに挑戦[2017年8月1日-10月31日] [08月15日]
JTが電気加熱型たばこ『Ploom TECH』の抽選販売受付を開始【第5回目】 [08月11日]
mineo SIM発行手数料請求開始【2017年9月より】 [08月10日]
mineoの2017年キャンペーン・増強・改定等の年間スケジュールをまとめ [08月07日]
【残り僅か】mineoノベルティグッズを限定販売!ポイントもチェック [08月07日]
ストレート機種ブーム到来!2017年は「Simple2」「602SI」「Simply(603SI)」「Niche Phone-S」が発売予定 [08月05日]

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(18)
  • MVNO/0SIM(10)
  • FREETEL/Simple/Simple2(43)
  • タブレット(29)
  • ケータイ/スマホ雑記(29)
  • ケータイ/スマホNEWS(235)
  • 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

    管理人利用中アイテム
    カテゴリ別記事一覧