Lite」ですが、プラグインとしての提供が終了してしまいました。Lite」でWordPressにインスタグラムの写真を表示させる方法を解説!https://wp-topics.com/plugin/1011/流行りのインスタグラム。利用されている方も多いのではないかと思います。インスタ映えという言葉もすっかり市民権を得た印象がありますよね。今回はインスタグラムに投稿した写真をWordPressで作成したサイトに表示させるプラグインをご紹介します。サイトが華やか...プラグイン公開時にインストールしている場合は引き続き使えるようですが、新規でInstagramとWordPressを連携しようとした場合には上記の方法を取れなくなってしまいました。すればいいの!?ご安心ください。今後は「InstaShow」として公式ページで連携用コードを生成⇒サイトにコードを埋め込むことで今まで通りにInstagramを表示できるようになっています。少々手間が増えてしまいましたが、手順通りに進めていただければ簡単にインスタ連携ができますので是非チャレンジしてみてください。実際にはこのように表示されます。まとめInstaShowのアカウント登録InstaShowを利用するにあたって、まずはアカウントの準備が必要となります。登録も利用も無料で行えますので安心してください。FREE」を選択します。赤枠の方が無料版になりますので選ぶ際はご注意ください。Feedのページに遷移します。INSTALL」に変わりますのでもう一度クリックします。するとInstaShowの登録画面が表示されますので、こちらからアカウントを作成しましょう。メールアドレスで登録するか、facebook、もしくはGoogleアカウントを使って作成できますので、どれかを使って作成しましょう。1ライセンスでInstagramを表示できるのは1サイトまでとなっていますので、サイトが複数ある場合は別途アカウントを準備する必要がありますので併せてご注意ください。サイト内レイアウトの設定アカウントの作成が完了したら、次にサイトでのレイアウト(見え方)の設定を行っていきます。作成後、上図のようにダッシュボードが表示されますのでこちらから各種の設定を行っていきます。設定に先駆けてこちらのエリアに適当なウィジェット名を記入して今後の管理をしやすくしておくことをオススメします。アカウントの紐づけまずはCONTENTのタブから、どのInstagramアカウントをサイトに表示させるかを設定します。自身のアカウント(@username)だけでなく、ハッシュタグ(#~)やURLでの指定も可能ですので活用してみてください。次にLAYOUTのタブからサイトに表示させる方法を選択します。デフォルトの状態でも「いい感じ」になっていますが、以下の内容で表示内容や動作を変更できますので必要な箇所を調整していきましょう。LAYOUTこちらの項目では画像の表示方法を選択できます。・Slide(スライドショー形式)・Grid(グリッド形式)から選択する事が可能です。Controlsから設定可能です。TEMPLATEこちらの項目では画像の表示形式を選択できます。Tileを選択すると画像だけが表示され、マウスを乗せると投稿文が表示される形に、Classicを選択すると投稿者やいいねやコメント、シェアボタン、投稿文などが全て表示される形になります。Settingsで表示・非表示の選択が可能です。Columns&Rows表示する画像数を変更できます。COLUMNSに入れた数字が横並びに表示される画像数、ROWSに入れた数字が表示される行数になりますので、こちらから見せたい形に調整を行いましょう。IMAGESに適当な数字を入れることで隙間を作ることも可能です。数字はピクセルとなっているので、SPACE~の欄に15と入れると画像の間に15pxの空きを作ることができる、という形です。OPTIMIZATIONの欄からブラウザサイズで表示を切り替えることも可能で、デフォルトでは・1024px(小型PC)・768px(タブレット)・375px(スマホ)で表示を切り替えられるようになっています。スマホでは表示数を減らす、といった設定も行えますので実際に確認しながら最適な形を試してみてください。COLORSマウスオーバー時の色やテキストカラーの変更が可能です。グラデーションをかけたい、といった少し凝った内容にする場合はこちらではなくcssで対応する事になります。インスタっぽい見た目に変更する方法は後述しておりますので参考にしてみてください。TITLEの項目からタイトル部分を変更可能です。「〇〇のInstagram」「Memories」など独自の形に変えたい場合はこちらに記入しましょう。タイトルが必要ない場合は空白にしておくと何も表示されなくなります。設定を保存する全ての設定が完了したら、右上の「Save」を押して設定を保存しましょう。これで表示に関する設定は完了です。設定が完了したら実際にInstagramをWordPressに埋め込む用のコードを取得しましょう。websiteをクリックするとサイトに埋め込む用のコードが表示されます。場合によっては上図のようにプランの選択をせまる画面が表示されますが、一番右のLiteプランを再度選んでおけば問題ありません。コードはこのようにポップアップで表示されます。コード部分をクリックすると先ほど作成したinstagram表示用のコードがコピーされます。サイトへの組み込み方では、コピーしたコードをサイトに組み込んでみましょう。方法はとても簡単で、記事(ページ)内のInstagramを表示させたい場所に先ほどコピーしたコードを貼り付けるだけです。するとこのようにレイアウトした形でInstagramが表示されます。インスタっぽく見た目を整えてみる以前の記事でもインスタっぽい見た目にしてみようのコーナーを設けましたが、今回もインスタ感を出せるようにしてみましょう。タイトル部分に関しては前記事を参照していただければと思いますが、マウスオーバーに関してはclass名が変更になっているので新たにcssを追加してあげる必要があります。!important;}こんな感じ。するとこんな感じでマウスオーバー時にインスタっぽい色合いに変更できますので、上記CSSを参考にサイトに合わせて色味を調整してみてください。Lite」でWordPressにインスタグラムの写真を表示させる方法を解説!https://wp-topics.com/plugin/1011/流行りのインスタグラム。利用されている方も多いのではないかと思います。インスタ映えという言葉もすっかり市民権を得た印象がありますよね。今回はインスタグラムに投稿した写真をWordPressで作成したサイトに表示させるプラグインをご紹介します。サイトが華やか...まとめという事でInstaShowを使ってInstagramをWordPressに表示する方法でした。Liteの方が使いやすく導入もしやすかったように思えますが、無くなってしまったものは仕方がないという事で今後はこちらを使ってサイト内にInstagramを表示していく事になりそうです。2019.09.24サイトのアクセス解析といえば「Googleアナリティクス」を使う事が主流です。2019.03.05固定ページ用のカスタムテンプレートを作成し適用させる方法です。2019.01.11フォームの入力項目は少なければ少ないほど良いのは事実ですが、内容によってはそんなに削れない...というジレンマを抱えることになるのもまた事実。プロフィールWEB屋さんの端くれ。