WordPress

ピンタレストのフォローボタン設置方法3つ【JINオリジナルアイコン】

ピンタレストのフォローボタン設置方法3つ【JINオリジナルアイコン】

ブログのアクセスアップにつながるという情報を得て、早速ピンタレスト(Pinterest)を導入すべく調査してますが、なかなか新しい情報が見つからない状況です。

当サイト使用のテーマ「JIN」も、ピンタレストはSNS登録の項目に含まれていない為(2020/7/29現在)今後の対応待ちといった感じですよね。

今回は、JINオリジナルアイコンを利用した、ピンタレストのフォローボタンを設置する方法を3つ紹介します。

JINオリジナルアイコンJINオリジナルアイコン

設置方法3つ
  • プロフィールに設置
  • 新たに「\ Follow me /」設置
  • スマホフッターメニューに設置
ピンタレストのフォローボタン表示
真ん中の、ちょっと不自然な余白があるような。
ぜろな
ぜろな
りとぜ
りとぜ
そう、PCだと余白が消えなくてねー。
スマホだと、大丈夫だよ!

公式Developersのウイジェットビルダーを使って公式フォローボタンを設置する方法もあります。『PinterestユーザーのURL』に自分のピンタレストURLを入力して、コードを貼り付ける方法。

しかし、スマホアプリで開くと「サブボードが見つかりませんでした」表示が出てしまう為、今回のようなアイコンにリンクを貼る方法をとりました。

ピンタレスト(Pinterest)フォローボタンをプロフィールに設置

ピンタレスト(Pintarest)フォローボタンをプロフィールに設置テーマ「JIN」のプロフィール欄には「\ Follow me /」の表示と共に、登録したSNSへのリンクアイコンが表示されますよね。

本来はここにピンタレストも追加したいところですが、JINは未対応。そこで、アイコンにピンタレストのホームページへ飛ぶリンクを貼る方法で対応します。

ワードプレス管理画面

ワードプレス管理画面『外観→ウィジェット』から『プロフィール』編集画面を開きます。ワードプレスのウイジェット

コードの貼り付け

「説明」欄に、以下のコードを貼り付けます。(<br>タグで改行できます)

<a href=”http://www.pinterest.jp/ユーザー名“>アイコンコードPinterest</a>

ユーザー名

ユーザー名は、ピンタレスト『設定→プロフィールの編集』で確認できます。ピンタレストのユーザー名確認

アイコンコード

アイコンコードは、ワードプレス管理画面『JINアイコン一覧』からピンタレストのアイコンコード(1列目)をコピーして貼り付けます。ピンタレストのアイコンタグ

プロフ表示の確認

プロフィール欄に、アイコンが表示されているか確認します。プロフィール欄

「Pinterest」の文字部分は無くても、ユーザー名を入れたりしても良いかと思います。

ピンタレスト(Pinterest)フォローボタンを自筆「\ Follow me /」下に設置

ピンタレスト(Pintarest)フォローボタンを「\ Follow me /」下に設置プロフィールに自分で「\ Follow me /」と記述して、下にアイコンボタンを並べてみました。

前項の方法同様に、JINオリジナルアイコンにリンクを貼って並べるだけです。『外観→カスタマイズ→ウィジェット』からライブプレビューで調整すると良いかもしれません。

コードの貼り付け

下記タグの「URL」と「アイコンコード」を置き換えて貼り付ければ完成です。

<center>\ Follow me /<br><a href=”ツイッターURL“>ツイッターアイコンコード </a><a href=”ピンタレストURL“>ピンタレストアイコンコード </a><a href=”問い合わせURL“>メールアイコンコード</a></center>

アイコンは、半角スペースで間隔を空けてます。(<br>タグで改行できます)

デフォルト「\ Follow me /」の非表示

このままではダブル\ Follow me /表示でしつこい人になってしまうので、デフォルトの表示を消します。

プロフィール編集画面の最下部『SNSボタン』の非表示にチェックを入れて保存します。デフォルト「\ Follow me /」の非表示

プロフ表示の確認

プロフィール欄に、アイコンが表示されているか確認します。\ Follow me /表示しかし残念なことに、PC上で大きな空欄が出来てしまいます。スマホでは、空欄無く表示されているのですが。Follow meスマホ表示

仕様なのか不具合なのかは不明でしたが、デフォルト設定の「\ Follow me /」に関しては、JINのピンタレスト対応を待つ方が良さそうです。(せっかく変えたのでそのまま)

ピンタレスト(Pinterest)フォローボタンをスマホに設置

ピンタレスト(Pintarest)フォローボタンをスマホに設置JINマニュアルでも解説されていますが、まずはスマホ固定フッターメニューを設置して、ピンタレストのフォローボタンを追加していきます。

すでに、スマホ固定フッターメニューを設置済みであれば、メニューを入れ替えるか追加するだけの簡単な作業になります。

メニューの作成

ワードプレス管理画面『外観→メニュー』から『新しいメニューを作成しましょう』をクリックします。

メニュー名に「スマホメニュー」などを入力して『メニュー作成』をクリックします。メニューの作成

表示するメニューを選択

表示したいメニュー項目を選んで、メニュー構造の中に追加します。

固定ページ等の内部ページは、チェックを入れて『メニューに追加』をクリックします。固定ページをメニューに追加

ピンタレストなどの外部ページは、カスタムリンクにURLと名前を入力して『メニューに追加』をクリックします。カスタムリンクのメニュー追加

アイコンの設定

それぞれのメニューに表示するアイコンを設定します。

右上『表示オプション』から『説明』にチェックをいれて、各メニューの説明欄にアイコンのコードを入力します。メニューアイコンの設定

アイコンコードは、ワードプレス管理画面『JINアイコン一覧』からアイコンコード(2列目)をコピーして貼り付けます。スマホメニューのJINアイコン

スマホメニューに設定

メニュー構造が完成したら、スマホメニューの設定する位置を決めます。

メニュー設定から『スマホ固定フッターメニュー』にチェックを入れて『メニューを保存』をクリックします。スマホメニューの設定

スマホ表示の確認

スマホ固定フッターメニューが表示されているか確認します。

スマホフッターメニューに設置

スマホフッターメニューは、4か5個程度が、表示サイズ的に良さそうですね。

フォローボタンの確認

設定したフォローボタンをクリックして、自分のピンタレストホーム画面が表示されるか確認しましましよう。自分のピンタレストホーム画面

ちなみに、ホーム画面の画像は自分のボードを選択してます。スマホアプリで、画像右下の『鉛筆マーク』から設定できました。(PCでは画像アップロードのみ)

逆に、PCで表示される右下の『?マーク』からウィジェット作成ツールへのリンクがありますが、スマホアプリには見当たりませんでした。

他にも、デバイスやブラウザが違うと複数アカウントの切り替えができない時があるなど、使いづらい部分が目立ちます。今後のアップデートに期待ですね。

ピンタレストのフォローボタン設置方法3つ まとめ

ピンタレストフォローボタンの設置まとめテーマ「JIN」でJINオリジナルアイコンを使った、ピンタレストのフォローボタンを設置する方法を3つ紹介しました。

プロフィールに設置
  • ワードプレス管理画面『外観→ウィジェット』プロフィールの説明欄に、コードを貼り付け
  • ユーザー名は、ピンタレスト『設定→プロフィールの編集』で確認
  • アイコンコードは、JINオリジナルアイコンのピンタレスト1列目をコピペ
「\ Follow me /」下に設置
  • 「\ Follow me /」と記述した下へ、JINオリジナルアイコンにリンクを貼って並べる
  • プロフィール編集画面の最下部『SNSボタン』の非表示にチェック
スマホフッターメニューに設置
  • ワードプレス管理画面『外観→メニュー』から新しいメニューを作成
  • カスタムリンクにURLと名前を入力してメニューに追加
  • 『表示オプション→説明』にチェックを入れて説明欄にアイコンのコードを入力
  • メニュー設定から『スマホ固定フッターメニュー』にチェックを入れて保存

今後JINも、ピンタレストに対応していくと思われますので、それまでのつなぎ対応となってます。

スマホ固定フッターメニューは、この機会に設定してみるのも良いですね。

Audible(オーディブル)のアフィリエイトを始める方法【リンクの作成】
Audible(オーディブル)のアフィリエイトを始める方法【リンクの作成】Amazonメンバー紹介イベントのひとつ「Audible(オーディブル)」のアフィリエイトを始める方法について解説します。読者はAudibleを無料で体験でき、登録後に解約しても成果対象となるので、おすすめのアフィリエイト案件です。...