this.props.funcCheckDownloadThemes(themeNameId)} />

{themeNameId}

{buttonSetTopTheme} {buttonSetBottomTheme}

{codeOpen &&

Code 1: 1ページにつきひとつだけ貼ってください。 Code 2: シェアボタンを表示したい場所に貼ってください。

}

); }); // -------------------------------------------------- // Pagination // -------------------------------------------------- const total = Math.ceil(themesList.count() / this.props.contentsNumberOfLines); const itemsArr = []; for (let number = 1; number <= total; number += 1) { itemsArr.push( this.props.funcChangeShareButtonsList(this.props.stateModel, 'editThemes', number)} > {number} ); } codeArr.push( this.props.funcChangeShareButtonsList(this.props.stateModel, 'editThemes', 1)} /> {itemsArr} this.props.funcChangeShareButtonsList(this.props.stateModel, 'editThemes', total)} /> ); return codeArr; } render() { return (

シェアボタンの作成・編集が行えます。

{this.props.pageType === 'official' ? '作成・編集したシェアボタンはこちらのタブでダウンロードして利用してください。' : 'WordPressのプラグインからこのページにアクセスしている場合は、シェアボタンをダウンロードしなくても利用することができます。Top（記事の上部に表示するシェアボタン）・Bottom（記事の下部に表示するシェアボタン）と書かれたフォームで表示するシェアボタンを選択してください。' }

※ シェアボタン作成フォームの「サンプルを画面上部に固定する」は、お使いのブラウザによっては機能しないことがあります。

モバイル環境で綺麗に表示するには？スマートフォンやタブレットでは、通常の2倍の大きさの画像をアップロードすると綺麗に表示されます。例えば 50 x 50 の画像を表示したい場合は、 100 x 100 の画像を利用してください。 Social Media 公式ロゴシェアボタンの画像を作成する方のために、公式サイトのロゴをチェックできるページを紹介します。ぜひ参考にしてください。

Twitter
Facebook
Google+
Pocket
Pinterest
LinkedIn
Tumblr
はてなブックマーク
LINE
Feedly: ロゴをダウンロードしたい方は Step 1: Select your design 部分の button kit をクリックしてください。

画像の軽量化についてシェアボタンに利用する画像は圧縮を行って軽量化を行いましょう。軽いほど表示も早くなります。画質を維持したまま、軽量化を行ってくれるサービスを紹介しますので、ぜひ活用してください。

Optimizilla: JPEG, PNGに対応。20個までの画像を同時にアップロードできます。
mozjpeg: JPEG, BMP, TARGAに対応。圧縮の性能が高いです。JPEGの場合はこちらをおすすめ。

{this.props.pageType === 'wordPressPlugin' &&

Top（上部に表示するシェアボタン） this.props.funcAjaxSetTopBottomTheme(this.props.stateModel, null, 'top', e.target.value)} > Top 設定

シェアボタンを表示するページを選択してください。

this.props.funcTopThemeShowFront(e.target.checked)}> トップページ this.props.funcTopThemeShowSingle(e.target.checked)}> 個別投稿ページ this.props.funcTopThemeShowPage(e.target.checked)}> 固定ページ this.props.funcTopThemeShowArchive(e.target.checked)}> アーカイブページ（カテゴリー、タグページなど） this.props.funcTopThemeShowAttachment(e.target.checked)}> 添付ファイルページ（アップロードしたファイルごとに用意されるページ）

余白 - 個別投稿ページ

上 this.props.funcTopThemeSingleMarginTop(e.target.value)} /> 右 this.props.funcTopThemeSingleMarginRight(e.target.value)} /> 下 this.props.funcTopThemeSingleMarginBottom(e.target.value)} /> 左 this.props.funcTopThemeSingleMarginLeft(e.target.value)} />

個別投稿ページに表示するシェアボタン周囲の余白を設定します。余白 - 固定ページ

上 this.props.funcTopThemePageMarginTop(e.target.value)} /> 右 this.props.funcTopThemePageMarginRight(e.target.value)} /> 下 this.props.funcTopThemePageMarginBottom(e.target.value)} /> 左 this.props.funcTopThemePageMarginLeft(e.target.value)} />

固定ページに表示するシェアボタン周囲の余白を設定します。

Bottom（下部に表示するシェアボタン） this.props.funcAjaxSetTopBottomTheme(this.props.stateModel, null, 'bottom', e.target.value)} > Bottom 設定

シェアボタンを表示するページを選択してください。

this.props.funcBottomThemeShowFront(e.target.checked)}> トップページ this.props.funcBottomThemeShowSingle(e.target.checked)}> 個別投稿ページ this.props.funcBottomThemeShowPage(e.target.checked)}> 固定ページ this.props.funcBottomThemeShowArchive(e.target.checked)}> アーカイブページ（カテゴリー、タグページなど） this.props.funcBottomThemeShowAttachment(e.target.checked)}> 添付ファイルページ（アップロードしたファイルごとに用意されるページ）

余白 - 個別投稿ページ

上 this.props.funcBottomThemeSingleMarginTop(e.target.value)} /> 右 this.props.funcBottomThemeSingleMarginRight(e.target.value)} /> 下 this.props.funcBottomThemeSingleMarginBottom(e.target.value)} /> 左 this.props.funcBottomThemeSingleMarginLeft(e.target.value)} />

個別投稿ページに表示するシェアボタン周囲の余白を設定します。余白 - 固定ページ

上 this.props.funcBottomThemePageMarginTop(e.target.value)} /> 右 this.props.funcBottomThemePageMarginRight(e.target.value)} /> 下 this.props.funcBottomThemePageMarginBottom(e.target.value)} /> 左 this.props.funcBottomThemePageMarginLeft(e.target.value)} />

固定ページに表示するシェアボタン周囲の余白を設定します。

} {(() => { if (this.props.toggleEditForm) { return ; } })()} {this.props.dataEditThemesMap.count() > 0 &&

{this.renderShareButtonsEditThemes()}

}

); } } ContentEdit.propTypes = { // -------------------------------------------------- // Common // -------------------------------------------------- stateModel: PropTypes.instanceOf(Model).isRequired, pageType: PropTypes.string.isRequired, topTheme: PropTypes.string.isRequired, topThemeSingleMarginTop: PropTypes.number.isRequired, topThemeSingleMarginRight: PropTypes.number.isRequired, topThemeSingleMarginBottom: PropTypes.number.isRequired, topThemeSingleMarginLeft: PropTypes.number.isRequired, topThemePageMarginTop: PropTypes.number.isRequired, topThemePageMarginRight: PropTypes.number.isRequired, topThemePageMarginBottom: PropTypes.number.isRequired, topThemePageMarginLeft: PropTypes.number.isRequired, topThemeShowFront: PropTypes.bool.isRequired, topThemeShowSingle: PropTypes.bool.isRequired, topThemeShowPage: PropTypes.bool.isRequired, topThemeShowArchive: PropTypes.bool.isRequired, topThemeShowAttachment: PropTypes.bool.isRequired, bottomTheme: PropTypes.string.isRequired, bottomThemeSingleMarginTop: PropTypes.number.isRequired, bottomThemeSingleMarginRight: PropTypes.number.isRequired, bottomThemeSingleMarginBottom: PropTypes.number.isRequired, bottomThemeSingleMarginLeft: PropTypes.number.isRequired, bottomThemePageMarginTop: PropTypes.number.isRequired, bottomThemePageMarginRight: PropTypes.number.isRequired, bottomThemePageMarginBottom: PropTypes.number.isRequired, bottomThemePageMarginLeft: PropTypes.number.isRequired, bottomThemeShowFront: PropTypes.bool.isRequired, bottomThemeShowSingle: PropTypes.bool.isRequired, bottomThemeShowPage: PropTypes.bool.isRequired, bottomThemeShowArchive: PropTypes.bool.isRequired, bottomThemeShowAttachment: PropTypes.bool.isRequired, codeOpenList: PropTypes.instanceOf(List).isRequired, editThemesList: PropTypes.instanceOf(List).isRequired, contentsNumberOfLines: PropTypes.number.isRequired, editThemesPage: PropTypes.number.isRequired, googleFontsList: PropTypes.instanceOf(List).isRequired, toggleEditForm: PropTypes.bool.isRequired, checkDownloadThemesList: PropTypes.instanceOf(List).isRequired, dataEditThemesMap: PropTypes.instanceOf(Map).isRequired, uploadImageOfficialMap: PropTypes.instanceOf(Map).isRequired, // -------------------------------------------------- // Function // -------------------------------------------------- funcChangeShareButtonsList: PropTypes.func.isRequired, funcToggleEditForm: PropTypes.func.isRequired, funcAjaxDeleteTheme: PropTypes.func.isRequired, funcAjaxSetTopBottomTheme: PropTypes.func.isRequired, funcAjaxTopBottomThemeSaveOption: PropTypes.func.isRequired, funcTopThemeSingleMarginTop: PropTypes.func.isRequired, funcTopThemeSingleMarginRight: PropTypes.func.isRequired, funcTopThemeSingleMarginBottom: PropTypes.func.isRequired, funcTopThemeSingleMarginLeft: PropTypes.func.isRequired, funcTopThemePageMarginTop: PropTypes.func.isRequired, funcTopThemePageMarginRight: PropTypes.func.isRequired, funcTopThemePageMarginBottom: PropTypes.func.isRequired, funcTopThemePageMarginLeft: PropTypes.func.isRequired, funcTopThemeShowFront: PropTypes.func.isRequired, funcTopThemeShowSingle: PropTypes.func.isRequired, funcTopThemeShowPage: PropTypes.func.isRequired, funcTopThemeShowArchive: PropTypes.func.isRequired, funcTopThemeShowAttachment: PropTypes.func.isRequired, funcBottomThemeSingleMarginTop: PropTypes.func.isRequired, funcBottomThemeSingleMarginRight: PropTypes.func.isRequired, funcBottomThemeSingleMarginBottom: PropTypes.func.isRequired, funcBottomThemeSingleMarginLeft: PropTypes.func.isRequired, funcBottomThemePageMarginTop: PropTypes.func.isRequired, funcBottomThemePageMarginRight: PropTypes.func.isRequired, funcBottomThemePageMarginBottom: PropTypes.func.isRequired, funcBottomThemePageMarginLeft: PropTypes.func.isRequired, funcBottomThemeShowFront: PropTypes.func.isRequired, funcBottomThemeShowSingle: PropTypes.func.isRequired, funcBottomThemeShowPage: PropTypes.func.isRequired, funcBottomThemeShowArchive: PropTypes.func.isRequired, funcBottomThemeShowAttachment: PropTypes.func.isRequired, funcCodeOpenList: PropTypes.func.isRequired, funcCheckDownloadThemes: PropTypes.func.isRequired, funcDownloadThemes: PropTypes.func.isRequired, }; export default ContentEdit;