2017/01/080 Shares

Pocketのあとで読むリンクをアイコンフォントを使って記事投稿日の横に設置する方法

pocket

今日は、記事タイトル下にある記事の投稿日と記事の更新日の横にアイコンフォントを使用したPocketボタンを設置したのでtaa.自身の備忘録としてこの記事を書いていきます。

今回作成する完成イメージはコチラ
後で読むリンクサンプル

タイトルで記事に興味を持ってくださった方が後でゆっくり記事を読めるようにと記事の先頭のこの部分にアイコンフォントを利用して『あとで読む』ボタンを設置してみます。

スポンサーリンク

Pocketの『あとで読む』リンクの設置

今回の作業はキャリコさん(@calicocatxyz )の以下の記事を参考にさせていただきました。
いつもお世話になているブログです。

実は先日もツイッターから無茶な質問をさせていただいて、丁寧に教えて頂いちゃいました。
キャリコさん!いつもありがとうございます!

本当はPocketボタンを設置したかったのですがStinger5で使用している『Font Awesome』にPocketのアイコンフォントが無いので今回は『bookmark』のアイコンフォントを使用して『あとで読む』リンクを作っていきます。
bookmarkアイコンフォント

アイコンフォントを選ぶ

stinger5でデフォルトで使用できるアイコンフォント『Font Awesome』から使用していアイコンフォントを探します。

にアクセス。

画面上部の『icons』をクリック

iconsをクリック

使用したいアイコンフォントを選んでクリックする

使用したいアイコンをクリック

アイコンフォントが表示されたら、表示サンプルを確認して良ければコードをテキストエディタ等にコピーしておく
htmlをコピー

コードをsingle.phpへ記述する

以下のコードをsingle.phpへ記述します。


ダッシュボードから外観テーマの編集single.phpと進みます
外観⇒テーマへ進む

テーマの編集
単一記事の投稿をクリック

Ctrl + Fを押して検索窓に『blogbox』と入力
※このショートカットを使用すると簡単に目的の単語が素早く見つけられます。上手に使ってみてください。
文字を検索

1つ目の『blogbox』の<P></P>内に先程のコードを貼り付けます。
コードを貼り付け

貼り付けた後がこちら
貼り付けご画像

他のアイコンフォントに変更したい場合はコードの『fa fa-bookmark』をお好きなアイコンフォントのコードに書き換ればアイコンフォントを変更できます。

色を変えたいときは『#ee4056』をお好きなカーラーコードに変更してください。

言葉を変えたい場合は『あとで読む』をお好きな言葉に変えて頂ければオッケーです。

コードの記述が完了したら『ファイルを更新』をクリック
ファイル更新をクリック

まとめ

作業的には簡単な作業です。

stinger5のデフォルトで使えるアイコンフォントの『Font Awesome』から好きなコードを選んで使用してみてください。

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

Twitter で