COS-General

カスタムのFollow Meモジュールを作成する方法

更新日時 December 1, 2016

カスタムのFollow Meモジュールを作成するには、まず次のものを用意します。

  • 接続するソーシャルメディアアカウントのリスト
  • 各アカウントに関連付けられているURL
  • 各アカウントに使用するアイコン
  • アイコンに使用する任意のレイアウト

ソーシャルメディアのアイコンの選択肢は無限にあります。PNG形式のファイルで作成されたアイコンセットを探し、接続する各ソーシャルネットワークにアイコンがあることを再確認することをお勧めします。Follow Meモジュールには、横型と縦型の2種類があります。

横型Follow Meモジュール

ステップ1:

カスタムアイコンファイルをファイルマネージャーにアップロードします。

ステップ2:

[Content(コンテンツ)] > [Design Manager(デザインマネージャー)] > [Edit the template(テンプレートを編集)]の順に移動し、カスタムソーシャルアイコンを追加するテンプレートを編集し新しいカスタムHTMLモジュールを追加します。このモジュールは完成後グローバルにできます。そうすることで、サイトのあらゆる場所で再利用できます。グローバルモジュールをグローバルグループに追加することはできません。

ステップ3:

カスタムHTMLモジュールのギアアイコン > [Edit Options(オプションを編集)]をクリックし、接続する各ネットワークのカスタムHTMLモジュールに下のコードをコピー&ペーストし、記載されている文章の代わりに適切な情報を入力します。ファイルマネージャーにアップロードされたカスタムソーシャル画像のファイルのURLを入手するには、こちらの記事をご覧ください。引用符(" ")は残してください。

 
画像が読み込まれない場合に表示されるテキスト

ステップ4:

モジュールをグローバルにするには、モジュールの右上のギアアイコンをクリックし[Make Global(グローバルにする)]オプションを選択します。

縦型Follow Meモジュール

ステップ1:

カスタムアイコンファイルをファイルマネージャーにアップロードします。

ステップ2:

[Content(コンテンツ)] > [Design Manager(デザインマネージャー)] > [Edit the template(テンプレートを編集)]の順に移動し、カスタムソーシャルアイコンを追加するテンプレートを編集し新しいカスタムHTMLモジュールを追加します。このモジュールは完成後グローバルにできます。そうすることで、サイトのあらゆる場所で再利用できます。 グローバルモジュールをグローバルグループに追加することはできません。

ステップ3:

カスタムHTMLモジュールのギア > [Edit Options(オプションを編集)]の順にクリックし、カスタムHTMLモジュールに下のコードをコピーして貼り付け、順序付けされていないリストを作成します。接続する各ネットワークに必要に応じてラインアイテムを追加し、記載されているテキストを適切な情報に置き換えて入力します。ファイルマネージャーにアップロードされたカスタムソーシャル画像のファイルのURLを入手するには、こちらの記事をご覧ください。

     
  • 画像が読み込まれない場合に表示されるテキスト
  •  
  • 画像が読み込まれない場合に表示されるテキスト
  •  
  • 画像が読み込まれない場合に表示されるテキスト
  •  

ステップ4:

アイコンは箇条書きで表示されます。箇条書きを解除するには、モジュールのCSSの宣言にFOLLOW-MEクラスを追加します。次に、テンプレートビルダーのCSSファイルに以下の命令文を追加します。

.follow-me ul{ list-style: none; }

ステップ5:

モジュールをグローバルにするには、モジュールの右上のギアアイコンをクリックし[Make Global(グローバルにする)]オプションを選択します。