★活ノートシリーズ月間100,000ページビュー達成! 今後も楽しい記事をお届けします!★
speed_woman_1535462533

【THE THOR ザ・トール】設定方法のすべて その10「SNS設定」他

THE THOR(ザ・トール)設定方法のすべて その10「SNS/AMP/PWA設定」

katsuです。

今回はWordPressのテーマTHE THOR(ザ・トール)の「SNS設定」「AMP設定」「PWA設定」の3つの設定方法をお伝えします。といっても、ここまでくると基本設定はほぼ終了しています。また、AMPとPWA設定については別記事でも説明していますので、ここでは設定内容だけまとめておきたいと思います。

もうすぐ外観設定も終わりです!もうひといき。

ご紹介する設定は当サイト「活ノート!」を基本としています。同じ設定を行って頂くことで、「活ノート!」と全く同じデザイン構築が可能です。
基本となるデザインベースは「デモサイト04」を使用しています。メーカーサイトからダウンロードの上、プラグイン「Customizer Export/Import」でインポートを行った上での設定内容になります。
各設定項目ごとに順次記事をアップします。本記事の項目以外の設定方法については、当ホームページの検索窓から検索を行ってみてください。




THE THOR(ザ・トール)「SNS設定」

僕の場合、SNSはTwitterを使っています。理由は少しでも多くの方にこのブログを知って頂きたい。ただそれだけです。このブログのために、Twitterの利用を開始しました。

こちらの設定は、一見難しそうに見えますが結構簡単です。ぜひ設定しましょう。(僕もこの記事を書きながら設定しました。)

OGP設定

画像の設定

まずOGPってなに??ってアタマにハテナがとびました。OGPとは、「Open Graph Protocol」の略だそうです。これでもよくわかりませんね。要はFacebookやTwitterなどのSNSで利用しているサイトとの共有情報をここで設定できる、ということです!!

まずは画像の設定です。下記の画像をご覧ください。こちらが僕のツイッターで一番上に表示されているブログトップサイトの紹介ページです。

Twitter_oldcard

固定ページといって常に一番上に表示されるツイートです。下の部分にカードのような部分がありますね。サイトのアドレスを書くと自動的にこのようなツイッターカードが表示されるのですが、なぜ画像が表示されず「No Image」となっているのかが気になっていました。

この設定項目で画像を登録することで、サイトのトップページを投稿したときに、その画像を表示することができます。(投稿した後は更新までしばらく時間がかかるようです。)

FacebookのAPPID

Facebookは使用していないので「空欄」設定としています。

FacebookのユーザーID

APPIDと同じく、「空欄」設定です。Facebookを利用している方は登録しましょう。

Twitter Cardの種類を選択

次にツイッターカードの種類の設定です。選択できるのは2種類だけ。サマリーカード(デフォルト)とラージイメージカードです。最初は自動的にデフォルトに設定されていますが、ツイッターで少しでも目立たせたいと思い、このたび「ラージイメージカード」に変更しました。

ラージイメージに変更すると、先ほど紹介した画像のツイッターカードが以下のような表示になります。

Twitter_newcard

画像が大きく表示されることで、とても目立つページになります。少し目立ちすぎな気もしますが、固定ページとして登録するには良いと思います。

※この記事を執筆した段階では固定ページの設定が変更されていませんでしたので、通常のツイート画像を参考に貼っています。

Follow設定

Follow設定では、「Facebook」「Instagram」「Twitter」「Google+」「YouTube」「LinkedIn」「Pinterest」「RSS」それぞれのフォローボタンの表示有無を選択することができます。僕の場合は、TwitterとRSSを「Headerでフォローアイコンを表示する」としています。Footerでのアイコン表示は全く行っていません。

いずれかの設定でフッターへのアイコン表示を行うと、サイト一番下のコピーライト表示のすぐ上にフォローボタンを表示することができます。僕の場合は画面にいろいろ表示するのを避けるため、フッターへの表示をやめました。チェックをひとつも入れなければ、このフォローアイコンバーは表示されません。

ヘッダーにアイコンを表示する設定とした場合、表示場所はヘッダーバー(グローバルメニューの右)とメニュー内の2通りの表示場所があります。「共通エリア設定」→「サブメニュー設定」をご覧ください。

THE THOR(ザ・トール)「AMP設定」

AMP設定については、以前に以下の記事で詳しくお伝えしています。今回の記事では設定内容を一通り記載しておくだけにとどめます。

過去の記事はこちら。

関連記事

【THE THOR ザ・トール】WordpressでAMPとPWA機能を使うか否かkatsuです。ようやく・・・新しく購入したWordpressのテーマTHE THOR(ザ・トール)の設定がほぼ終了しました。結局、最後まで設定で[…]

AMP機能設定

AMP機能設定

AMPページを表示するか選択:「非表示(デフォルト)」
AMPページで検索ボックスを表示するか:「表示」
AMPページで通常ページへのボタンを表示するか:「表示」

AMPページは無効にしていますので、実質下の2項目の設定は意味がありません。

AMPロゴの設定

ロゴ画像の設定

60✕600px以下でサイトのロゴを登録することができます。僕の場合はサイトのヘッダーに表示されている「KATSU NOTE」ロゴを登録しました。(今はAMP使っていないので意味ありませんが・・・)

AMPページ用広告設定

AMP広告の設定

Adsense等の広告タグを入力:「空欄

通常投稿ページの広告をここで記載するAMP広告に切り替える、と書かれています。AMPでサイトが表示されると、広告はここで登録したものに限定されるということでしょうか・・・。僕がAMPをやめたひとつの理由でもあります。


THE THOR(ザ・トール)「PWA設定」

PWA設定についても、先ほどのAMP設定と同じく「WordpressでAMPとPWA機能を使うか否か」記事を参照ください。(AMPとPWAをまとめて執筆しています)

それでは設定を記載しておきます。

PWA機能設定

PWA機能設定

PWA機能を有効化するか選択:「有効」
ホーム画面のアイコン下テキストを入力:「活ノート!」

PWA機能は現在使用中です。スマホ内でアプリアイコンを作成することができます。アプリの名称をここで設定することができます。

アイコンの設定

アイコンの設定

PWA機能を使ってスマホアプリ化したとき、ホーム画面に表示されるアイコンをここで設定します。理由はよくわかりませんが3種類のサイズの画像を登録する必要があります。僕の場合は、サイトロゴをサイズを変えて登録しました。

参考に・・・画像のサイズの変更には「Photo Scape」という無料のソフトを愛用しています。




このあたりの設定は、できれば早いうちに自分の方針を決めて設定しておきたいところですね。特にAMP設定については、使うか使わないかでサイトの見栄えやページの管理手間に大きな差がでてきます。

次回は「その他」設定6項目についてお伝えします。いよいよTHE THORの設定説明も次回で最後です。

この記事がお役に立ちましたら、コメント欄に一筆いただけると嬉しいです。ご質問・ご意見などもぜひお願いします。もちろん匿名でOKです。
よい記事でしたら、ぜひ下のSNSボタンからシェアお願いします。

記事はいかがでしたか?
今後もぜひ応援をお願い致します!


speed_woman_1535462533
最新情報をチェックしよう!
>活ノートでつながる。

活ノートでつながる。

記事にはお気軽にコメントをどうぞ!
ご意見、ご質問、記事の執筆依頼などなどお待ちしております。

ブログ『活ノート』シリーズ
・活ノート
・詐欺情報をまとめるブログ。by活ノート
・コミュボード。by活ノート

ブログランキングに参加中です。
順位の確認はこちらです。
人気ブログランキングブログランキング・にほんブログ村へFC2ブログランキング