WordPress

人気記事リストのタイトル前にFontAwesomeのアイコンを設定する方法(Cocoon)

現在社内のQAサイトをwordpressで構築中です。

社内ツールなので無料のテーマ『Cocoon』を選択しました。

『Cocoon』は無料なのにかなり使い勝手が良いテーマです。

尚、今回は新しく追加されたスキン、「四季をコンセプトにした優しいデザインのSeason」のSpringを適用しています。

今回、人気記事一覧を少しだけカスタマイズしましたのでコードを記録しておきます。

社内QAサイトの仕組み

1つの質問を1投稿としてカテゴリー毎に記事を投入する仕組みです。

これで困ったときにすぐに答えを見つけることができます。

社内Wikipediaとしても大活躍ですね!

人気記事リストのタイトル前にアイコンを設定する

サイトのトップページには人気記事(アクセスの多い記事)を表示するようにしていますが、少々見た目が寂しかったのでカスタマイズすることにしました。

人気記事リストの表示方法

よくある質問を表示するページを作成します。

タイトルとショートコードがあるだけのページです。

このページを呼び出すと以下のような画面が表示されます。

よくある質問

社内用のツールではありますが少し寂しいので人気記事リストを少しカスタイマイズします。

人気記事タイトルのカスタマイズ

追加CSSに以下を追記します。

FontAwesome、色はお好きなものを選んでください。

FontAwesomeは以下のコードをコピーしてコード前に「\」を追加してからダブルクォートで囲みます。

※ちなみにFontAwesome4を使っています。

FontAwesome

これを保存すると、以下のようになります。

人気記事リスト

少し見やすくなりました!

ABOUT ME
アズビーパートナーズ
アズビーパートナーズ
プログラマーと社内SEとしての経験を活かして、 情報システム部門のご相談を承ります。 得意な分野はAccessによる短納期開発、 BIツール(QlikSense/QlikView)の開発です。 現在はCMSを利用したホームページの作成にも力を入れています。
中小企業にこそ必要なセキュリティ対策

日々巧妙化する悪意ある攻撃。狙われるのは大企業だけではありません。

セキュリティ対策が追い付いていない中小企業は犯罪者の恰好の餌食です。

情報セキュリティ部門がない、詳しい人がいない…。

そんな時は全部まとめて外部委託して安心を手に入れる方法がベストです!

\セキュリティ対策をまとめて全部NTT西日本にお任せ!/


資料請求はこちらから