『LION MEDIA』カスタマイズ【SNS・OGP設定】の使い方:初心者向け

『LION MEDIA』カスタマイズ【SNS・OGP設定】の使い方:初心者向け

最終更新日:2018.05.31


WordPressの無料テーマ『LION MEDIA(ライオンメディア)』について解説しているページです。

今回のテーマは、カスタマイズ【SNS・OGP設定】の使い方についてです。

 

SNSのフォローアイコンの設定シェアされたときに表示される内容の設定を行う項目です。

 

 

OGPってなぁに?

わかりやすくいうと、書店のPOPカード。

書店pop
ポプラ社さん:POP・販促物ダウンロードより

 

あるかしら書店

  • 作者:ヨシタケ シンスケ
  • 出版社:ポプラ社
  • 発売日: 2017-06-06

OGPとは

OGPとは、Open Graph Protocol の略でWebページがSNS(TwitterやFacebook)でシェアされたときに、タイムライン「タイトル」「ページのURL」「概要」「アイキャッチ画像」表示させる仕組みのことをいいます。

書店pop

先ほどの本屋さんのPOPでいうと、

本のタイトル = ページのタイトル

POP内の文章 = ページの概要

POPのイラスト = ページのアイキャッチ画像

っていう感じでしょうか。

本を探している人(ユーザー)の目にとまり、読んでみたい(見てみたい)と思う内容が書いてあれば、手に取って(クリック)もらえるということです。

 

OGP画像の設定

OGP画像の設定

OGP画像とは、シェアされた時に表示されるアイキャッチ画像のことを指します。(「og:image」とも呼ばれています。)

投稿ページにアイキャッチ画像が設定されていない場合、「無作為」に選ばれた画像が、「適宜トリミング」されてしまい、投稿内容とは全く異なる画像が表示されてしまうという、困ったことになってしまうのです。

そんなこと勝手にしないで~!!って思いますよね。

そんなことが起こらないためにも、きちんとアイキャッチが画像を設定している方がよいのです。

 

OGP画像の設定

ここで行う設定は、アイキャッチ画像を設定していないページがシェアされたときに、無作為に選ばれた画像が表示されないように、代わりの画像を設定する項目になります。

OGP画像の設定

用意する画像のサイズは、縦600×横1200px以上です。

画像を選択」をクリックすると、メディアライブラリが開くので、設定したい画像を選びましょう。(メディアライブラリにない場合は、アップロードして追加しておきましょう。)

 

選択した画像が表示されます。

OGP画像設定後

 

OGP画像シュミレーター(参考)

OGPを調べているときに偶然見つけた FacebookのOGP画像の見え方をシミュレートできるサイトです。画像をドラッグ&ドロップするだけで、タイムライン上での見え方を検証することができます。

http://ogimage.tsmallfield.com/

シミュレーター

 

FacebookのID設定

Facebook IDの設定

FacebookのAPPIDの設定

FacebookのAPPID設定

APP IDとは、OGP設定やFacebook用のアプリを作成するときに必要となる開発者アカウントです。APP IDをまだ取得していない場合は、個人アカウントから開発者アカウントにアップグレードする作業が必要です。

詳しい取得方法は、下記のサイト(外部)で紹介されています。

FacebookのOGP設定に必要なfb:app IDの取得方法(TCD WordPress Thema)

 

通常は、次のユーザーIDの登録だけでOKです。

 

FacebookのユーザーIDの設定

FacebookのユーザーID設定

ユーザーIDとは、Facebookに登録した登録者ごとに与えられる個別の番号です。

 

ユーザーIDの簡単な調べ方

1.Facebookにログイン。

 

2.左上にある「自分の名前」または「アイコン」をクリック。

アドレスバーにFacebookのURLが表示されます。

https://www.facebook.com/〇〇〇〇〇〇

〇〇〇〇〇」の部分が、ログイン名になるので控えておきます。

 

3.http://graph.facebook.com/〇〇〇〇〇 とアドレスバーに入力します。

 

4.すると次のように表示されます。「 ” id”:」横の数字の部分がユーザーIDになります。

ユーザーID

 

Twitter Cardの設定

Twitter Cardの設定

Twitterで記事がシェアされたときの表示デザインを設定します。

通常、何も設定していない場合は、「タイトル」や「URL」が文字だけで表示されます。

Twitterシェアイメージ

 

これをカード型のデザインに変更すると見栄えが劇的に変化します。

なぜなら、アイキャッチ画像タイトルページの情報などが表示されるからです。

『LION MEDIA』では、「Summaryカード」「Summary with Large Images」の2種類から選ぶことができます。

Summaryカード(デフォルト)のイメージ

summaryカード
画像元:Twitter

 

Summary with Large Imagesカードのイメージ

Summaryラージイメージカード
画像元:Twitter

 

Summary with Large Images の方は画像のインパクトがすごいですね。Summaryカードは、 のところにアイキャッチ画像が入ります。お好みで選びましょう。

広告

FOLLOWの設定

Follow の設定

Facebook、Instagram、Twitter、Google+、RSS それぞれについて表示の設定をします。

フォローアイコンの表示設定

フォローアイコンは、Header(ヘッダー)とFooter(フッター)に表示することができます。SNS別にヘッダーだけ、フッターだけ、両方というように設定ができます。

マウスオーバーすると背景色がイメージカラーに変わります。

 

ヘッダーのFollowアイコンイメージ

ヘッダーフォローアイコン

 

フッターのFollowアイコンイメージ

フッターフォローアイコン

 

Instagramページのユーザー名の設定

Instagramページのユーザー名

InstagramページのURLが「http://instagram.com/〇〇〇〇」の場合、〇〇〇〇の部分がユーザー名になります。この〇〇〇の部分だけを入力します。

 

Twitter ID(@以降)の設定

TwitterのID設定

TwitterのマイページのURLが「https://twitter.com/〇〇〇〇」の場合、〇〇〇〇の部分がIDになります。この〇〇〇の部分だけを入力します。

 

Google+ページURL(+以降)の設定

Google+ページの設定

Google+ページのURLが「https://plus.google.com/+〇〇〇〇」の場合、〇〇〇〇の部分だけを入力します。

 

RSSページのURLの設定

rssページのURL設定

RSSページのURLを入力します。未入力の場合は[bloginfo(rss2_url)」が表示されます。

 

 

以上で、カスタマイズ【SNS・OGP設定】の解説は終わりです。お疲れさまでした。

 

次のテーマは、『LION MEDIA』【ウィジェット】の使い方についてです。

広告