編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
これは何？
これは、あなたの作品にSNSへのシェアボタンを追加するためのコンポーネントです。また、イベント参加作品にデフォルトで表示されるシェアボタンの非表示設定も行えます。シェアボタンは作品の末尾だけでなく、任意の場所に複数配置できます。
[[include :scp-jp:component:share-button]]
上記のコードで、以下のようなデフォルトデザインのシェアボタンを追加できます。
デフォルトデザイン以外にも、様々なデザインが用意されており、以下のような形式で行を追加していくことで、シェアボタンをあなた好みにカスタマイズすることができます。用意されているプロパティについては後述します。
[[include :scp-jp:component:share-button
|プロパティ=値
]]
使用例
以下は|mode=altと|type=richを使用した例です。なお、このページでは見易さを考慮して|mode=altの背景を黒くしていますが、実際に利用する際はお好みに合わせてお使いください。
|type=値の後ろに半角スペースを挟んでlogoを追加すると、テキストが非表示となり、ロゴのみが表示されます。
|type=値の後ろに半角スペースを挟んでroundを追加すると、ボタンが角丸になります。前述のlogoと併用すると、ボタンが円形となります。
また、|type=simpleとすると、Sigma-9のタグインターフェースに着想を得たデザインになります。|mode=altでは文字色が白となるため、背景色との組み合わせに注意してください。また、これはlogoおよびroundとの互換性はないため、同じinclude内の|type=では併用しないでください。
次に、|position=を用いて配置をカスタマイズした例です。このプロパティは全ての|type=に対応しています。
また、|text=を用いて、ボタンのラベルテキストをカスタマイズすることもできます。
|brand=twitterとすると、Twitterへのシェアボタンに変更することができます。このオプションは全てのプロパティに対応しています。
また、|hr=drawとすると、ボタンの上に罫線を表示することができます。
さらに、|text-size=や|style=を用いてカスタマイズした例です。これらはインラインスタイルに直接代入されるため、各ボタンに対して自由に個別のスタイルを適用できます。
|title=や|fullname=を用いることで、シェア文面 (SNS上で表示される文章) をカスタマイズすることができます。fullnameとは、http://scp-jp.wikidot.com/より後の部分のことです。
[[include :scp-jp:component:share-button
|title=シェアボタン
|fullname=component:share-button
]]
上記のコードの場合、シェア文面は以下のようになります。
シェアボタン
https://share.scpwiki.jp/share?page=component:share-button&variant=&
[ここにSNSで表示されるリンクカード (OGP画像)]
その他の機能
シェアボタンを1つのページ内に複数配置する場合は、2個目以降の全てのincludeに|nocss=aを追加することで、デザイン用コードの重複読み込みを防ぎ、ページを軽量化できます。
また、以下のincludeを単独で追加すると、一部のイベント作品で自動的に表示されるシェアボタンと罫線を非表示にできます。他のシェアボタンをincludeしている場合でも併用可能です。
[[include :scp-jp:component:share-button
|nocss=a
|template=hide
]]
単一ページ遷移構文などでシェアボタンを使用したい場合は、|lpstart=および|lpend=を用いてください (どんな値でも構いません)。これにより、シェアボタン内部のListPagesモジュールが無効化され、ページ遷移などのListPagesモジュール内にシェアボタンを含めることができます。ただし、ページ情報の自動取得ができなくなるため、必ず先述の|title=および|fullname=と併用してください。
[[include :scp-jp:component:share-button
|title=SCP-XXXX-JP
|fullname=scp-xxxx-jp
|lpstart=_|lpend=_
]]
プロパティ一覧
最後に、このコンポーネントで用意しているプロパティを以下に示します。
このリストでは、以下の形式で記述しています。下線が引かれている値はデフォルトとなっているものです。プロパティに下線が引かれた値がない場合は、デフォルト値が設定されていないことを意味します。
- |プロパティ= プロパティの説明
- 値 値の説明
- |type= ボタンの基本的なスタイルを決定します。
- common 最も主張が少なく、どのテーマにも馴染むことを目指したスタイルです。
- rich commonを基に、Rateモジュールのデザインを意識したスタイルです。
- logo ボタンのテキストを非表示にし、ロゴのみを表示するオプションです。common/richと併用する必要があり、|type=値の行の末尾に半角スペースを挟んで追加してください。
- round common/richのみと併用すると角丸になり、さらにlogoと併用した場合は円形になるオプションです。少なくともcommon/richと併用する必要があります。使用方法は上記と同様です。
- simple Sigma-9のタグインターフェースに着想を得たスタイルです。logoおよびroundとは併用できません。
- |mode= ボタンの基本的な配色を決定します。
- normal ボタンの背景が塗りつぶされていない、汎用的な配色です。
- alt normalの色を反転させたような、独立感のある配色です。
- |position= ボタンの左右配置を決定します。
- center 中央に配置します。commonとrichのデフォルト配置と同様です。
- left 左側に配置します。simpleのデフォルト配置と同様です。
- right 右側に配置します。logoのデフォルト配置と同様です。
- |text= ボタンのテキストを設定します。
- share デフォルトのテキストを使用します。内部的に使用される値です。
- 文字列 任意の文字列に設定します。
- |brand= ボタンに表示するブランドデザインを決定します。
- x X用のデザインです。内部的に使用される値です。
- twitter Twitter用のデザインです。
- |hr= ボタンの上に罫線を表示します。
- draw 罫線を表示します。type=simpleとは見た目の相性が悪いため、併用は推奨しません。
- |text-size= ボタンの文字サイズを調整します。
- unset デフォルトの文字サイズを使用します。内部的に使用される値です。
- CSSの値 CSSのfont-sizeプロパティで指定できる値です。
- |style= ボタンのCSSスタイルを調整します。
- インラインCSS 直接.share-buttonのstyle属性に代入されます。
- |title= シェア文面に含まれるページタイトルを設定します。
- %%title%% ListPagesで取得したページタイトルを使用します。内部的に使用される値です。
- 文字列 任意の文字列に設定します。
- |fullname= シェア文面に含まれるリンクのfullnameを設定します。
- %%fullname%% ListPagesで取得したfullnameを使用します。内部的に使用される値です。
- ページのfullname 任意のfullnameに設定します。
- |nocss= ボタンのデザイン用コードの読み込みを無効にします。
- a デザイン用コードを読み込みません。シェアボタンを複数配置する場合や、|template=hideを使用する場合は、このオプションを推奨します。同じコードを重複して読み込まずに済むため、ページを軽量化できます。
- |template= _templateページにおけるシェアボタンの設定を行います。
- show ボタンが_templateページで使用されていることを識別するための値です。通常のページで使用すると表示が崩れる可能性があります。
- hide ページ下部に自動表示されたシェアボタンと罫線を非表示にします。この値を使用する場合は、単独のincludeとして記述してください。他のシェアボタンのincludeとも併用可能です。
- |event= SNS上で表示されるカードのデザインを決定します。
- |nodesc ベースコンポーネントの説明の読み込みを無効にします。
- - バックエンドの説明を読み込みません。内部的に使用される値です。
- |lpstart= ListPagesモジュールの開始タグを設定します。
- _
[[module ListPages range="." separate="no" wrapper="no"]{$_} includeしたページの情報を取得します。内部的に使用される値です。 - 値 デフォルト値以外の任意の値 (_など)に設定します。これにより、シェアボタンをListPagesモジュール内でも利用することができます。ページ情報の自動取得ができなくなるため、必ず|title=および|fullname=と併用してください。
- _
- |lpend= ListPagesモジュールの終了タグを設定します。
- _
[[/module]{$_} ListPagesモジュールを閉じます。内部的に使用される値です。 - 値 デフォルト値以外の任意の値 (_など)に設定します。これにより、シェアボタンをListPagesモジュール内でも利用することができます。ページ情報の自動取得ができなくなるため、必ず|title=および|fullname=と併用してください。
- _
- |_= ListPagesモジュールを有効化します。
- ] ListPagesモジュールの閉じ括弧を完成させます。内部的に使用される値です。