ヒビコレ

iPhone使いの携帯・スマホ関連の雑記ブログ

2717930.jpg

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

カスタマイズ』カテゴリの関連記事

スポンサードリンク

どのぐらいの認知度があるかは知らないが、私が利用しているこの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ブログブログカスタマイズSNSボタン

スポンサードリンク

今日の人気ページ

Fireタブレットが4,000円OFF-

0 Comments

コメント *クリック