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

今回作成する完成イメージはコチラ

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

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

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

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

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

アイコンフォントを選ぶ

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

にアクセス。

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

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

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

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

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

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

テーマの編集

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

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

貼り付けた後がこちら

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

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

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

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

まとめ

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

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