【Luxeritas(ルクセリタス)カスタマイズ】SNSフォローボタンの色変更、記事タイトル前にマークをつける

こんばんは～。ワードプレス無料テーマLuxeritas(ルクセリタス)のカスタマイズについて書きます。

ルクセリタスって本当にすごいテーマです。機能が超豊富かつ速くて、無料を超えてると思います。

作者様、素晴らしいテーマをありがとうございます！

サイドバーのSNSフォローボタンの色変更

サイドバーにSNSフォローボタンをウィジットで追加した際に色を変えるカスタマイズです。

管理画面から Luxeritas→子テーマの編集からstyle.cssを選んで、以下を追記してください。

ここでは、茶色#c1ada5にしていますが、お好みで色を変えてみてくださいね。

/* Widget Follow button */

#thk-follow .twitter {
  background: #c1ada5;
}

#thk-follow .facebook {
  background: #c1ada5;
}

#thk-follow .instagram {
  background: #c1ada5;
}

#thk-follow .pinit {
  background: #c1ada5;
}

#thk-follow .hatena {
  background: #c1ada5;
}

#thk-follow .google {
  background: #c1ada5;
}

#thk-follow .youtube {
  background: #c1ada5;
}

#thk-follow .line {
  background: #c1ada5;
}

#thk-follow .rss {
  background: #c1ada5;
}

#thk-follow .feedly {
  background: #c1ada5;
}

記事タイトルのあたまにマークをつける方法

次のカスタマイズは、トップページと個別の記事のタイトルの先頭にハートマークをつける方法です。

ルクセリタスでは、FontAwesomeバージョンの選択機能が追加されています。ここでは、Font Awesome バージョン５に設定します。

ワードプレス管理画面のLuxeritas→カスタマイズ→CSSの画面で、Font Awesome バージョンをFont Awesome５に選択。

それから、ルクセリタスの子テーマのCSSに以下の文言を追記しました。

/* タイトル前のアイコン */

.entry-title:before {
  color: #555;
  content: "\f004";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

#555;を変更すれば色、\f004のところを変えれば、アイコンを変えられます。

Font Awesomeの使い方については、サルワカ君サイトに詳しい記事が載っていますので、参考になさってください。

サルワカ | サルでも分かる図解説...

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう 導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

記事のタイトルにマークがついてなんだかかわいらしくなりましたね。

それではまた～。