キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

      2014/12/12

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。

何も特別なことはしてないのに体重が減っていって本気でビビってます… ダイエットしてる人には反感を買いそうですが、人生で最軽量の域まで来てます。帰国してから健康診断を受けたから病気とかそういったことはないと思いますが、謎の体重減少は本当に怖いですね…

さて、本日はキャリコ初のリクエストにお応えする内容です。今までは記事の内容でここまでは出来たんだけどここはどうすればいいの?っていう質問を Twitter でちょいちょい受けてましたが、今回はストレートにブログで書いてほしいとリクエストいただいたのでラテにお願いします。それじゃあ、よろしくね♪

ラテ

こんにちは、ラテにゃ。

実は… こういったリクエストは嬉しいにゃ。あんまり難しいことを聞かれてもわからないけど、ブログの中でここはどうやってるんですか?って質問にはバンバン答えて行こうと思うにゃ。今回のリクエストはこんな内容にゃ。

…っということで、リクエスト記事いくにゃー

Ads by Google

「 あとで読む 」のテキストリンク挿入方法

STEP 1. アイコンを設置する

アイコンに関しては Font Awesome のものを使ってるにゃ。本当は Pocket のアイコンにしようと思ったんだけど、公開日と更新日のアイコンが Font Awesome だから統一する方向にしたにゃ。

ソース

Pocket のアイコンを使いたいって人はこちらのブログを参考にするといいにゃ。

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

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンをしていて、記事の上の方に「Po…

smart-phone.783783783.com

STEP 2. アイコンに色を付ける

Pocket のアイコンの色をカラーピッカして同じ色を付けてるにゃ。ここも公開日と更新日のアイコンの色と同じにしょうか迷ったけど、目立たせるためにピンク色にすることにしたにゃ。

ソース

STEP 3. Pocket のリンクを貼る

このテキストリンクはググって拾ってきたものだと思うけど、どの記事を参考にしたのかはちょっと忘れたにゃ…

ソース

STEP 4. single.php に貼り付ける

ソースを貼りつける場所は「 single.php 」で「 blogbox 」というクラス名の中の「 kdate 」というクラス名の p タグ内に設置するにゃ。キャリコの場合は更新日の後ろに来るように p タグの終了タグの直前に設置しているにゃ。

ソース

ちなみに Font Awesome の i タグには右側に 5px の margin を取るように CSS で指定してるにゃ。この辺は好みに合わせて適宜変更するといいにゃ。

CSS

キャリコの悩み事

キャリコの悩み事

このリクエストを受けてちょっと考えたことがあるにゃ。果たしてこのリンクはクリックされているのかにゃ?記事のヒートマップを見る方法は知らないからわからないけど、実はもっといい場所があるんじゃないかと思ってるにゃ。

このリンクがクリックされているのなら記事タイトルを見てあとで読もうと思った人、もしくはリード文だけ見てあとで読もうと思った人がいるはずにゃ。そう考えるとリード文の下にもあった方が便利な気もするにゃ。

prasm

デザイナー目線でアプリ、webサービス、ガジェットを、実に適当にそれなりに小洒落ながら口笛を吹きながら、風に吹かれながらお知らせするブログメディアです。

blog.quusookagaku.com

このブログのようにはてブと並べて設置するのはすごく効果的というか、訪問者にとって使いやすいんじゃないかと思ってるにゃ。この気持ちがどんどん大きくなって設置したなら、そのときはブログで報告するにゃ。

まとめ

記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入するのは簡単にゃ。ただし、このテキストリンクが有効かどうかは責任持てないにゃ(Φ_Φ;)

今日はここまで、じゃあにゃ~

関連するリンク

キャリコでも導入!今さら聞けない pocket の登録方法と使い方

久しぶりにハングオーバー、キャリコ( @calicocatxyz )です。 飲ん …

calico.xyz

pocket のブックマーク数の取得方法とオリジナル SNS ボタンの設置方法

週3でペペロンチーノを食べてるキャリコ( @calicocatxyz )です。 …

calico.xyz

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

1
ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …

STINGER5 でアドセンスを記事内に導入するときの注意点

アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …

1
STINGER5 のブログ説明文の重要性について

誰にも気づかれない自己満足カスタマイズ続行中のキャリコ( @calicocatx …

Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと

決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …

STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた

1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicoc …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

キャリコのこれはさすがに気づかれる自己満足カスタマイズ
キャリコのこれはさすがに気づかれる自己満足カスタマイズ

もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …

1
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …