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を利用したホームページの作成にも力を入れています。
今のスキルのままで大丈夫?

あなたのスキル。今のままで大丈夫ですか?

時代のニーズに合った開発スキルを身につけてあなたの価値を高めましょう。

\オンラインでも教室でも学べるおすすめのスクール/

TECH::CAMP(エンジニアスクール)

まずは基礎から・・・という方はProgateUdemyどっとインストールなどがおすすめ!

スキルアップについて詳しくはこちら