最終更新日：2018.05.31
WordPressの無料テーマ『LION MEDIA（ライオンメディア）』について解説しているページです。
今回のテーマは、カスタマイズ【SNS・OGP設定】の使い方についてです。
SNSのフォローアイコンの設定やシェアされたときに表示される内容の設定を行う項目です。
OGPってなぁに？
わかりやすくいうと、書店のPOPカード。
OGPとは
OGPとは、Open Graph Protocol の略でWebページがSNS（TwitterやFacebook）でシェアされたときに、タイムラインに「タイトル」「ページのURL」「概要」「アイキャッチ画像」を表示させる仕組みのことをいいます。
先ほどの本屋さんのPOPでいうと、
本のタイトル ＝ ページのタイトル
POP内の文章 ＝ ページの概要
POPのイラスト ＝ ページのアイキャッチ画像
っていう感じでしょうか。
本を探している人（ユーザー）の目にとまり、読んでみたい（見てみたい）と思う内容が書いてあれば、手に取って（クリック）もらえるということです。
OGP画像の設定
OGP画像とは、シェアされた時に表示されるアイキャッチ画像のことを指します。（「og:image」とも呼ばれています。）
投稿ページにアイキャッチ画像が設定されていない場合、「無作為」に選ばれた画像が、「適宜トリミング」されてしまい、投稿内容とは全く異なる画像が表示されてしまうという、困ったことになってしまうのです。
そんなこと勝手にしないで～！！って思いますよね。
そんなことが起こらないためにも、きちんとアイキャッチが画像を設定している方がよいのです。
OGP画像の設定
ここで行う設定は、アイキャッチ画像を設定していないページがシェアされたときに、無作為に選ばれた画像が表示されないように、代わりの画像を設定する項目になります。
用意する画像のサイズは、縦600×横1200px以上です。
「画像を選択」をクリックすると、メディアライブラリが開くので、設定したい画像を選びましょう。（メディアライブラリにない場合は、アップロードして追加しておきましょう。）
選択した画像が表示されます。
OGP画像シュミレーター（参考）
OGPを調べているときに偶然見つけた FacebookのOGP画像の見え方をシミュレートできるサイトです。画像をドラッグ＆ドロップするだけで、タイムライン上での見え方を検証することができます。
https://ogimage.tsmallfield.com/
FacebookのID設定
FacebookのAPPIDの設定
APP IDとは、OGP設定やFacebook用のアプリを作成するときに必要となる開発者アカウントです。APP IDをまだ取得していない場合は、個人アカウントから開発者アカウントにアップグレードする作業が必要です。
詳しい取得方法は、下記のサイト（外部）で紹介されています。
・FacebookのOGP設定に必要なfb:app IDの取得方法（TCD WordPress Thema）
通常は、次のユーザーIDの登録だけでOKです。
FacebookのユーザーIDの設定
ユーザーIDとは、Facebookに登録した登録者ごとに与えられる個別の番号です。
ユーザーIDの簡単な調べ方
１．Facebookにログイン。
２．左上にある「自分の名前」または「アイコン」をクリック。
アドレスバーにFacebookのURLが表示されます。
https://www.facebook.com/〇〇〇〇〇〇
「〇〇〇〇〇」の部分が、ログイン名になるので控えておきます。
３．https://graph.facebook.com/〇〇〇〇〇 とアドレスバーに入力します。
４．すると次のように表示されます。「 ” id”：」横の数字の部分がユーザーIDになります。
Twitter Cardの設定
Twitterで記事がシェアされたときの表示デザインを設定します。
通常、何も設定していない場合は、「タイトル」や「URL」が文字だけで表示されます。
これをカード型のデザインに変更すると見栄えが劇的に変化します。
なぜなら、アイキャッチ画像やタイトル、ページの情報などが表示されるからです。
『LION MEDIA』では、「Summaryカード」「Summary with Large Images」の２種類から選ぶことができます。
Summaryカード（デフォルト）のイメージ
Summary with Large Imagesカードのイメージ
Summary with Large Images の方は画像のインパクトがすごいですね。Summaryカードは、 のところにアイキャッチ画像が入ります。お好みで選びましょう。
FOLLOWの設定
Facebook、Instagram、Twitter、Google+、RSS それぞれについて表示の設定をします。
フォローアイコンの表示設定
フォローアイコンは、Header（ヘッダー）とFooter（フッター）に表示することができます。SNS別にヘッダーだけ、フッターだけ、両方というように設定ができます。
マウスオーバーすると背景色がイメージカラーに変わります。
ヘッダーのFollowアイコンイメージ
フッターのFollowアイコンイメージ
Instagramページのユーザー名の設定
InstagramページのURLが「https://instagram.com/〇〇〇〇」の場合、〇〇〇〇の部分がユーザー名になります。この〇〇〇の部分だけを入力します。
Twitter ID（＠以降）の設定
TwitterのマイページのURLが「https://twitter.com/〇〇〇〇」の場合、〇〇〇〇の部分がIDになります。この〇〇〇の部分だけを入力します。
Google+ページURL（+以降）の設定
Google+ページのURLが「https://plus.google.com/+〇〇〇〇」の場合、〇〇〇〇の部分だけを入力します。
RSSページのURLの設定
RSSページのURLを入力します。未入力の場合は［bloginfo（rss2_url)」が表示されます。
以上で、カスタマイズ【SNS・OGP設定】の解説は終わりです。お疲れさまでした。
次のテーマは、『LION MEDIA』【ウィジェット】の使い方についてです。