ガジェニュー

~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 , , ,

  関連記事

sicon_1r_192_120214_095619_AM
【アクセス数報告】2014年11月のPVとアフィリエイトの収益を公開します

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

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

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

sum2
Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

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

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

blogcard-custamize-tb
サイト内リンクをブログカード風にカスタマイズ!【WordPressカスタマイズ】

2回連続でWordPressのカスタマイズのお話です。 今回はサイト内リンクを画 …

sum
Gush2カスタマイズ~背景色がPCだけ反映されない~

いつもはstingerを使用しているのですが、運営しているサイトが全部「STIN …

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

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

Loading Facebook Comments ...

Message

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