PC・スマホ Wordpress

コピペで完了!!AFFINGER4のヘッダーをInstagram Feed にして楽しいトップページに!!PCとスマホでレイアウトを変更する方法

投稿日:

10-8jpg

 

愛用させていただいているテーマ、AFFINGER4 をInstagram Feed を使用してヘッダーをカスタマイズしました。

トップページをギャラリー風に見せることができます。料理や子育て、ペットや風景などの写真を頻繁に利用するブロガーさん、Instagramも併用している方にオススメです。

 

ポイント・メリットとして

  • 連動させたInstagramに投稿した写真が随時トップページに表示されます。
  • 表示されるのはトップページのみ。個別ページや記事ページには表示されません。
  • スマホとPCで条件分岐させて表示レイアウトを変更できます。

 

[導入した狙い]
今回、Instagram Feed をトップページに導入した狙いは「寝相アートも含めた写真を直ぐに見せられるようにしたかった」為です。このブログに訪問してくれる方は主にお子様がいるご夫婦の方が多いです。特に、寝相アート関係の記事はおかげさまで好評を頂いています。

写真を見たい方に関しては「もっとみる」ボタンを押すとどんどん写真が読み込まれていきます。

10-9

今回のレイアウト

  • スマホでは横幅100%に対し、3枚の写真を並べることにしました。
  • PCでは横幅100%に対し、3枚の写真を中央寄せで並べることにしました。このとき、
    1.写真3枚の合計幅はコンテンツ幅を超えない。
    2.Instagram Feed の背景幅は100%を保つ
    3.トップページのファーストビューでは最新記事タイトルも見えるようにする。

以上の点を踏まえて表示できるように設定したいと思っていました。

Instagaram Feed のインストール

以下公式よりインストールできます。また、Wordpressのプラグイン検索画面からでも追加可能です。

 

初期設定

まず、スマホ側のレイアウトを整えます。

Instagram Feedの設定より、「2.Customize」で

  • Width of Feed :100%
  • Number of Photos :3
  • Number of Columns :3

と設定します。

10-7jpg
これでスマホ側の設定は完了しました。

 

Instagram Feed のショートコードを変更してレイアウトをカスタマイズ

Instagram FeedをPCとスマホで別のレイアウトで表示させたい

Instagram Feed では設定画面でレイアウトを変更することができます。変更した内容はショートコードから読み込まれます。
しかし、それとは別にショートコードに要素を追加することで、初期設定とは異なる変更を指示することができます。

今回はPCとスマホでカラムの数を変更したいと思います。従って、

1.スマホ版を初期設定で設定 (ショートコードに変更なし)
2.PC版はショートコードに要素を追加してレイアウトを変更

したいと思います。

ショートコードの確認方法

Instagram Feedのショートコードは設定の「3.Display your Feed」で確認が出来ます。

10-2

10-1

今回はPC版で、カラム数を6、写真表示枚数を3としています。
したがって後ほど挿入するショートコードは以下となります。

Instagram Feed のコードを挿入

実際にコードを挿入する箇所になります。

挿入箇所

挿入箇所は、「header.php」の一番下の記述の箇所です。
カスタムヘッダー画像の下に挿入します。

 

挿入コード

挿入コードはこちらになります。

  • 4行目~6行目がスマホ用のコード。
  • 10行目~14行目がPC用のコード。
  • <center>を入れているのはPC用は写真が左詰めになってしまうのを避けるためです。
    (本当はカスタムCSSで回り込みを解除するのがいいのでしょうが、コードに弱くて出来ませんでした。知ってる人いたら教えて頂けると嬉しいです。)

挿入後はこうなるよ

挿入後はこうなっていると思います。

ここまでくれば綺麗に表示されるようになっていると思います。

編集後記:はじめに詰まったこと。

ヘッダーに3枚そのまま表示では大きすぎた

はじめに驚いたのは単純に幅100% 3枚表示だとPCの時に横幅依存で写真だけでページが埋まります。
これだと写真しか見えなくて記事がちっとも見えません。考えが浅はかでした。

10-3

PC版ではピクセル数を指定、スマホでは100%という方法もあったけど。

Instagram Feed ではPCのピクセル数に関係なくスマホでは横幅を100%にするという便利な機能もあります。

10-4

しかしこれだとコンテンツ幅とは揃いますが、背景が100%になりません。
今回は「ヘッダーよろしく」にInstagram Feed 使用したかったため、PC版でも背景は100%で表示したいという思いがありました。
10-5

最終的に

  • 表示を6カラムにすることで、記事のタイトルが見えるようになりました。
  • スマホ側は6カラムでは1枚あたりがとても小さな写真になってしまうので3枚のまま100%表示で設定します。

 まとめ

こんなブログを考えている方にオススメです。

  • InstagramをSNSメディアとして運用している方
  • リピーターから写真が好評の方
  • 写真で訴求したい要素が大きいブログ
    (ペット、料理、子供、風景、ガーデニングなど)
  • なんとなく意味のないトップ画像にしている方

ありがとうございました。

 

この記事が気に入ったら
いいね!しよう

Twitter で

パパ・ママに読まれてる記事Top3

有給休暇 発生 タイミング 表 1

今回は有給休暇の話です。 ゆずぽんは普段は総務部で働いています。 仕事柄、社員さんたちから有給休暇制度について相談を受け ...

2

7月11日にオープンした ららぽーと新三郷のリトルプラネット! 休日はフリーパスは先着5組までです。 今日はオープンの1 ...

3

こんにちは。 今日は我が家で大活躍している除菌スプレーを紹介します。 本当に優秀なので凄くオススメです。是非試してみてく ...

-PC・スマホ, Wordpress

Copyright© 子育て夫婦が仲良しでいるための100の事 , 2018 All Rights Reserved Powered by AFFINGER5.