ガジェニュー

~iPhone・格安スマホとか~

【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

       後で読む

s141211-top
今回も、STINGER5のカスタマイズ記事です。

普段スマホでネットサーフィンをしていて、記事の上の方に「Poket」の後で読むボタンを設置しているブログをチラホラと見かけました。

実際にスマホでネットサーフィンをする時は、隙間の時間をつかって情報収集してたりすると思います。時間が無かったりするとあまり真剣に記事を読まずに離れてしまったりがありると思います。そんな時に、タイトル付近に「Poket」のボタンがあると、その時に時間がなくても後で気が向いた時に読めたりするので便利だなと。

記事の一番下まで行かないとSNSボタンは出てこないサイトも多いのですが、「Poket」に関しては上部にもリンクがあると利便性が高いと思ます。

そこで、今回はSTINGER5で日付・更新日が表示される部分にPoketの後で読むボタンを追加する方法をメモっていきます。

SPONSORED LINKS

日付・更新日の横にPoketの後で読むボタンを追加する方法

今回のカスタマイズはタイトルの直下にある、日付や、更新日が入るバーのような部分にポケットのボタンを設置します

該当の部分に関しては「single.php」にありますので見て行きましょう。

<div class="blogbox">
              <p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
                <time class="entry-date" datetime="<?php the_time('c') ;?>">
                  <?php the_time('Y/m/d') ;?>
                </time>
                &nbsp;
                <?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>&nbsp; ' , $mtime; ?>
                </span> 
</p>

該当の部分はこちらになっています。「blogbox」というdivの中に、日付や、更新日が入っているのでその後ろにPoketのボタンを追加していきます。

 <div class="blogbox">
              <p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
                <time class="entry-date" datetime="<?php the_time('c') ;?>">
                  <?php the_time('Y/m/d') ;?>
                </time>
                &nbsp;
                <?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>&nbsp; ' , $mtime; ?>
                
&nbsp;
<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><span class=" icon-pocket"></span>?後で読む</a>
</span> 
</p>
            </div>

こんな感じで書き換えればOKです。

また、このままだとリンクの色がデフォルトの青になってしまったので、「Poket」ぽくないということで、追加でこちらを「style.css」に追加しました。

.blogbox a {
	color: #ff1493;
	text-decoration: none;
}

また、今回はアイコンフォントを他の部分で使用しているものから引っ張ってきて使っています。

上記のコードをコピーして使う場合は、下記のようにstyle.cssにアイコンフォントの記載をする必要があります。

使用しない場合は上記コード内の「icon-pocket」の部分のspanタグは消してしまってもOKです。

/*-----------------------------
アイコンフォント用
------------------------------*/
@font-face {
	font-family: 'icomoon';
	src:url('./fonts/icomoon.eot?jb9kfn');
	src:url('./fonts/icomoon.eot?#iefixjb9kfn') format('embedded-opentype'),
		url('./fonts/icomoon.woff?jb9kfn') format('woff'),
		url('./fonts/icomoon.ttf?jb9kfn') format('truetype'),
		url('./fonts/icomoon.svg?jb9kfn#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-pocket:before {
	content: "\e603";
}

以上です。

まとめ

今回のカスタマイズに関しては、前回SNSボタンのコードを使いまわさせて頂きました。

ボタンのコードを流用することで結構簡単に導入することが出来ました。

しっかりと、「Poket」ボタンを上部に設置することで、ちょっとだけユーザーさんの利便性をあげられるかなと思っています。

簡単に出来る部分ですので是非試してみてくださいね。

てな感じで。

参考させていただいたサイト

 - STINGER5, WordPress , , ,

  関連記事

icon_1r_192
【アクセス数報告】2015年4月のPVとアフィリエイトの収益とか

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

icon_1r_192
【アクセス数報告】2015年7月のPVとアフィリエイトの収益とか

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

201509
【アクセス数報告】2015年8月のPVとアフィリエイトの収益とか

最近ずいぶん涼しくなって来たのに、今日は蒸し暑いですね。今年は残暑が続くのだろう …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

images_112014_115155_AM
【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ

STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

sicon_1r_192_020215_080729_PM
【アクセス数報告】2015年1月のPVとアフィリエイトの収益とか

早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です