ほか、海外SNSもたくさんあり、管理画面で選ぶだけでカンタンに設置できます。そのほか「Emailで送信」「プリント」の機能も使えます。ボタンの横にシェアのカウント数を表示したり、シェアボタンセットにタイトルテキストもつけられます。シンプルにボタンだけの表示も可能。専用のショートコードを使って、特定の記事のみ自動表示させないなどの設定も可能。FAQs)ボタンアイコンのデザインは8種類。このほか自作のアイコンをアップロードして使うこともできます。8種類はこんなかんじ。以下は、シェアのカウントを表示したサンプル2つ。Adderの使い方WordPress管理画面>プラグイン>新規追加で検索してインストール。Adderからダウンロードして、手動でサーバにアップ。その後、管理画面で有効化します。Buttons」メニューが現れるのでそちらへGO!Coreで基本設定まず最初のタブ「Core」で基本的な設定をします。Locationsでシェアボタンをどの記事に置くかチョイス。トップページ、固定ページ、投稿、抜粋、アーカイブページから選べます。do_shortcode(‘[ssba]’);」を使えば、トップページにもシェアボタンを表示できるみたい。なければ、トップページの記事の抜粋文の上か下にシェアボタンを置くらしいです。どこにシェアボタンを置くかチョイス。Textで、シェアボタン群のタイトル(「シェアしてね」的なテキスト)を指定。Networksで、SNSを選択。メールやプリントの機能も選べます。Stylingでスタイル設定2番目のタブ「Styling」で、ボタンやボタン周りのスタイルを指定します。Imagesは、ボタンアイコンの設定。setで、用意された8アイコンセットからチョイス。Customを選べば自作アイコンをアップロードできます。Sizeでサイズをピクセル指定。Alignmentで左寄せか、センターか、右寄せを選びます。Paddingでアイコンの間隔を。アイコン画像の周り全部(上下左右)への指定しかできないので、左だけにつけたいなどという場合は、自分でCSSで編集するほうが手っ取り早い。Textで、ボタン群のタイトルのスタイルを。placement(位置)を指定できます。Containerで、ボタングンとテキストを囲むボックスのスタイルを指定。Corners(角丸)を指定できます。Countersの表示やスタイル設定3番目のタブ「Counters」で、カウンターの表示やスタイルを指定します。AdvancedやCSSは状況に合わせてこのほか、Advancedタグで、より高度な設定ができ、CSSタグではCSSを追加できるようです。(本ブログでは触りませんでした。CSSはオリジナルテーマのファイルで編集すればOKだし。シェアボタンをこのプラグインで設置しましたが、ここに「はてなブックマーク」のシェアボタンも手動で追加してみました。(ここからはプラグインとは別の話)(同じ方法で「LINEで送るボタン」も追加できます。)はてなブックマークでシェアボタンのコードをゲット「はてなブックマーク」のシェアボタンは、誰でも(はてなのアカウントを持っていなくても)カンタンに、はてなブックマークボタンで作れます。「ページのアドレス」「ページのタイトル」は、後ほどテンプレートタグで書き直すので、ここでは適当でOK。ほかのボタンを34x34pxにしたいので、Retinaディスプレイでは倍の68必要だから)、自作することにしました。ここでは適当にどちらかのアイコンを選んでおきます。アイコンの自作はてなのロゴは「素材集-株式会社はてな」にありますので、ここからダウンロードし、サイズのみ調整しました。「Somacro」を選んだので、丸型アイコンに統一すべきですが、「はてな」はそれだと「この子だれ?」的な違和感(笑)。角丸四角が見慣れているので、結局サイズ調整のみに留めました。the_content();?>の上か下か両方かに表示されます。「はてな」のコードも同じ場所に置く必要があります。the_content();?>を囲んでいるボックス内に置くということ。本ブログでは、シェアボタンは「投稿」のみに表示。内の以下の場所に「はてな」のコードを置きました。End------>以下、ソースの解説です。中に入れています(1、13行)。その中に「はてな」のコードも入れます。囲んでおきました(CSS用)(6、11行)。5〜10行が、コピペで置いた「はてな」のコード。コレをテンプレートタグで調整します。Buttonsの出力の状況(classなど)をゲットします。CSSで「はてな」の位置を調整するためです。こんなかんじです↓(ソースは、わかりやすいように実際よりかなり省略しています)<!--ここまでで記事本文が終了。Buttonsがあります。div(5、9行)に囲まれているのがわかります。その中で、<a><img></a>という構造でボタンが並んでいます。先ほど書き込んだ「はてな」のコードは、それらのブロックの直下にあります(12行)。そのCSSソースはこちら。{position:relative}(1行目)を忘れずに。最初のa要素だけ、左のマージンを大きくとって「はてな」のためのスペースを確保(5行目)。対して、position:absolute(絶対位置指定)にし(8行目)、その親ボックスからの位置指定(この場合、下からや左からを指定)を指定して位置を決めます。ボタン群との位置バランスを見ながら調整。Embedカードのリンクを別ウィンドウで開く(PCのみ。Embedカード(ブログカード)の「テンプレートの構成」や「HTML要素のクラス名」などを調べました。Embedカード(ブログカード)について調べたことをメモっています。jQuery、WordPressなど、Webデザイン関連をメモっていく覚え書きサイトです。Reserved.^。