ソーシャル・バーのアイコンのカスタマイズ
カスタム・ソーシャル・アイコンを作成して、テーマのデフォルト・サイト内のソーシャル・バーで使用できます。
サイト内のソーシャル・バーに表示されるソーシャル・アイコンは、サイトのテーマのデザインによって決まります。 サイトのテーマを変更すると、テーマとともにソーシャル・アイコンが変更されます。 一般的なソーシャル・アイコンは、Facebook、Twitter、LinkedIn、Google+およびYouTubeのOracle Content Managementテーマに含まれています。
ソーシャル・アイコン・コンポーネントにカスタム・ソーシャル・アイコンを追加するには、design.json
およびdesign.css
ファイルを編集します。
design.jsonファイル
design.json
ファイルでは、次のサンプル・コードに示すように、名前とクラス構造を使用して新しいアイコンを指定できます:
"componenticons": {
"scs-socialbar" {
"icons": [
{
"name": "COMP_ICON_FACEBOOK",
"class": "scs-facebook-icon"
},
{
"name": "COMP_ICON_LINKEDIN",
"class": "scs-linkedin-icon"
},
{ "name": "COMP_ICON_TWITTER",
"class": "scs-twitter-icon"
},
{
"name": "COMP_ICON_GOOGLEPLUS",
"class": "scs-googleplus-icon"
},
{
"name": "COMP_ICON_YOUTUBE",
"class" "scs-youtube-icon"
}
]
}
design.cssファイル
design.css
ファイルでは、次のサンプル・コードに示すように、名前とurl
指定を使用して新しいアイコンを追加できます:
.scs-facebook-icon {
background-image: url("facebook.png"); }
.scs-twitter-icon {
background-image: url("twitter.png"); }
.scs-linkedin-icon {
background-image: url("linkedin.png"); }