CMSで会社のホームページを作ってみよう
-第6弾-Instagramの画像をHPに埋め込む

2017年6月16日

CMSで会社のホームページを作ってみよう第6弾です。第1弾第2弾でホームページの基本的な作り方をお伝えし、SNS販促を行っている企業のために、第3弾(Facebook)第4弾(YouTube)第5弾(Twitter)でホームページに埋め込む方法をご紹介しました。今回は、Instagramをサイトに埋め込んでみたいと思います。

目次

  1. F1層をターゲットにしているならInstagramを活用
  2. アルファメールプレミアで会社のホームページを作ろう
  3.  1. ファーストビューの作成
  4.  2. インスタグラムを埋め込む表を作る
  5.  3. インスタグラムの埋め込みコードを挿入
    (1) インスタグラムのWebページからコードを取得
    (2) CMS編集画面にコードを挿入

F1層をターゲットにしているならInstagramを活用

今、F1層(20歳~34歳までの女性)に支持を受けているSNSがInstagramです。他のSNSとの大きな違いは「写真がなければ投稿できない」という点です。正方形の写真を投稿することによって、見ている人に「可愛い」、「オシャレ」、「美味しそう」というポジティブな印象を与えます。現にInstagramが流行したことで、長方形の写真が主流だった現代に、「スクエア(正方形)」の波が来ているとも言われています。そのくらい若年層を中心に普及し、企業にとっても大きな販促ツールとなっています。「インスタジェニック」、「フォトジェニック」という言葉も流行りだしていますので、写真映えする事業を行っている会社にとっては最も取り入れるべきSNSと言えます。
前回までリフォーム会社を題材にホームページを作成してきましたが、今回は心機一転、Instagramをぜひ活用してほしい「ネイルサロン」を題材にホームページを作成しました。ホームページに埋め込むことで、簡単にサイト自体の見映えも良くなりますので参考にしてみてください。

アルファメールプレミアで会社のホームページを作ろう

架空のネイルサロン「ウェブダイレクトネイル」のホームページを作っていきます。先月、CMSのテンプレートが増えたので、新作テンプレートを使って女性向けの可愛いホームページに仕上げていきます。テンプレートの選択やフォントのサイズ設定などは過去にご紹介した「-第1弾-メイン画像を自由に設定するには?」を読んでください。

1. ファーストビューの作成

アルファメールプレミアの会員サイトからログイン後、「Webサイト作成」をクリックし、管理画面に入ります。今回は「デザインの変更」でテンプレートを趣味カテゴリーの「ブーケ」に設定しました。

ファーストビューの作成

次にサロンの紹介文を書いていきます。「編集ページ一覧」からTOPページを選び、「ページの編集」をクリックすると編集画面に入れます。左上の「見出しの挿入」や「画像の挿入」、「表の挿入」のアイコンを使って紹介文を入力します。

ページの編集

この作業は過去に紹介したことがあるので、詳しくは「-第2弾-ファーストビューを充実させる」を読んでください。

2.インスタグラムを埋め込む表を作る

まずは、コンテンツの見出しを付けます。いつものように左側にある「見出し」をクリックし、希望の見出しを選びましょう。今回は「Headline2」を選びました。

コンテンツの見出しを付けます

そこに「新作ネイル」と入力し、中央揃えにします。

中央揃え

次にインスタグラムの写真を載せる表を挿入します。
今回は4列×2行の「枠線なし」にチェックを入れて表を挿入します。ここに8枚のインスタグラム投稿写真を埋め込んでいきます。下の写真では分かりやすくするために枠を濃くしていますが、実際は作業画面での枠線は薄いグレーで、公開したときは透明になりますのでご安心ください。

写真を載せる表を挿入します

3.インスタグラムの埋め込みコードを挿入

(1) インスタグラムWebページからコードを取得

それでは一旦CMSから離れて、インスタグラムを開きましょう。普段アプリを使用している方も、今回はWebページを開いてください。

自分のインスタグラムのWebページURLは下記の通りです。

https://www.instagram.com/ユーザーID/

ユーザーIDのところにお持ちのインスタグラムのIDを入力すればパソコンからでも見ることが出来ます。ログインしなくても過去に投稿した写真を確認できるので便利ですね。

Webページのインスタグラム

投稿写真の中から、ホームページに埋め込みたい写真をクリックし、拡大写真を表示させます。右下に「…」のオプションキーがあるのでそこをクリックします。
画像の真ん中に「不適切な写真を報告」、「埋め込み」、「キャンセル」の文字が出てくるので「埋め込み」をクリックします。

「埋め込み」をクリック

すると、埋め込みコードが現れます。第3弾第4弾第5弾で紹介したSNSの埋め込みも「埋め込みコード」を入手して、ホームページに貼り付けるやり方でしたので、ここまで出来ればもう簡単ですね!「埋め込みコードをコピー」のボタンを押してコピーしましょう。今回は「キャプションを追加」のチェックは外してコピーします。

埋め込みコード

(2) CMS編集画面にコードを挿入

インスタグラムのWebページからコピーした「埋め込みコード」をCMS編集画面に貼り付けます。挿入した表の左枠にカーソルを合わせて、上部ツールバーから「<>タグ」をクリックします。

「<>タグ」をクリック

「HTMLタグ挿入」の枠にインスタグラムでコピーした「埋め込みコード」を貼り付けます。右上の改行ボタンを押すと全体が見えるように改行されるので便利ですよ。

右上の改行ボタン

さぁ、前回までのSNS埋め込みの記事を読んでいる方はここから少しの手直しが入ることは予測できますよね。ずらっと並んだ文字列ですが、探していただくのは、たったコレだけ!

max-width:658px

細かすぎて探すのが大変なのでキーボードのCtrlFを同時に押して検索機能を使いましょう。「658」と検索すると見付かります。

「Ctrl」+「F」を同時に押して検索機能

「max-width:658px」は画像の大きさを表しており、658pxは今回の希望の大きさよりも大きいものなので、小さいサイズに書き替えます。

max-width:658px ⇒ max-width:225px

「225」と書き替えたら、下にある「+挿入」ボタンをクリックします。インスタグラムの画像が挿入されました!

インスタグラムの画像が挿入

ページ編集画面では希望よりも大きな幅を取っているように感じますが、プレビューを確認するとちゃんと小さなサイズで収まってくれているので、安心して進めてください。

プレビュー

この作業を残り7枠に繰り返し行うと、このように8枚のインスタグラムの画像が綺麗に並びます。

インスタグラムの画像

今回、作成したネイルサロンのホームページはこのようになりました。

ネイルサロンのホームページ

インスタグラムに投稿した写真が、ホームページを華やかにさせてくれましたね。
埋め込み写真には「フォロー」を促すリンクもついているので、ホームページでインスタグラムのフォロワーを増やすこともできます。
事業に合ったSNSと連携させることでより多くのお客様に会社の良さを伝えることが出来ますし、SNSというコミュニケーションツールを使うことで親近感を与えることができます。

14種類のテンプレートが増えて、さらに使いやすくなったアルファメールプレミア14日間無料体験を実施中です!この機会に是非お試しください。

提供するサービス

初心者でもホームページが作れる  アルファメールプレミアの紹介サイト