Merry X'mas!

【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 バージョン5に設定します。

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

それから、ルクセリタスの子テーマの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の使い方:Webアイコンフォントを使おう導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

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

それではまた~。

ブログ村よろしくお願いしますm(__)m
にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村

この記事が気に入ったら
フォローしてね!

目次
目次