ガジェニュー

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

  関連記事

images
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

images_111114_064856_PM
カエレバをアイコンフォントを使ってカスタマイズ(SVGファイルもあるよ)

以前、カエレバのCSSカスタマイズで、カスタマイズしたカエレバの表示ですがスマホ …

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

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

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

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

ana-sum
【アクセス数報告】2014年9月のPVと収益を公開します

今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …

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

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

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

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

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

photo-express-for-google-tb
Picasa and Google Plus ExpressからPhoto Express for Googleに変更しました。【WordPressプラグイン】

前に書いたエントリーで利用していたプラグインがGoogleの認証方法の変更によっ …

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

Loading Facebook Comments ...

Message

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