ソーシャル・バーのアイコンのカスタマイズ

カスタム・ソーシャル・アイコンを作成して、テーマのデフォルト・サイト内のソーシャル・バーで使用できます。

サイト内のソーシャル・バーに表示されるソーシャル・アイコンは、サイトのテーマのデザインによって決まります。サイトのテーマを変更すると、テーマとともにソーシャル・アイコンが変更されます。共通のソーシャル・アイコンは、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"); }