月別アーカイブ: 2019年4月

222_GutenbergでInstagramを簡単に挿入するには

Youtubeの埋め込みについては旧エディターでも簡単にできましたが、今回ご紹介するInstagramの埋め込みについては一手間必要でした。GutenbergであればYoutubeと同じような感覚でInstagramの写真を記事内に載せることができます。


それでは手順を確認していきましょう。
まずは【投稿】の【新規追加】をクリックした後、ブロックの左側にある『+』をクリックします。

その後【埋め込み】をクリックします。

【埋め込み】の中から【Instagram】をクリックします。

Youtubeと同様にURLの入力欄と【埋め込み】ボタンがありますがInstagramの場合はURLの取得の仕方が少し変わってきます。

まずはInstagramへと行き、埋め込みたい画像をクリックします。
※Instagramのアカウントを埋め込むことはできません。

右上にある【…】をクリックします。

【リンクをコピー】をクリックすることでURLをコピーすることができます。

Gutenbergに戻りコピーしたURLを貼り付けて【埋め込み】をクリックします。

実際の画面を見てみるとInstagramの画像が埋め込まれているのがわかります。

いかがでしたか?
Instagramの画像を貼りつけたい時には便利な方法になりますが、Instagramのアカウントを自社サイトと紐づけたいという際には別途プラグインを導入する必要が出てきますので注意をしましょう。

221_GutenbergでYoutubeを簡単に挿入するには

旧エディターでは比較的簡単にYoutubeを載せることができましたがGutenbergでも引き続き簡単にYoutubeを載せることができます。


それでは手順を確認していきましょう。
まずは【投稿】の【新規追加】をクリックした後、ブロックの左側にある『+』をクリックします。

その後【埋め込み】をクリックします。

【埋め込み】の中から【Youtube】をクリックします。

Youtube上からURLをコピーしてきた後、貼り付けし【埋め込む】をクリックします。


【埋め込み】をクリックするとYoutubeが埋め込まれたのがわかります。

実際に動画がサイト上で再生できるのを確認できました。

いかがでしたか?
動画は自社サイトの滞在時間の向上にも繋がりますが、動画の内容や動画を挿入するタイミングは非常に重要ですのであまり頻繁に使わず、ここぞという時に使うようにしましょう。

220_Gutenbergでスクロールした時に背景画像だけ固定させるには(パララックス)

カバー機能では文字を画像の上に載せたり、背景の透明度を調整することができます。今回は更にスタイリッシュに見せる「パララックス」と呼ばれる機能について説明をしていきます。


それでは手順を確認していきましょう。
まずは【投稿】の【新規追加】をクリックした後、タイトルを入れたら本文部分の横にある『カバーの追加』をクリックします。

クリックした後、画像をアップロードします。

アップロードが完了すると下記のような画面になるので『タイトルを入力…』をクリックしてテキストを入れていきます。
ここまでの手順は前回・前々回と同じになります。

右側に設定するブロックがあるので『カバー固定』にチェックを入れます。

どのように変わったか実際に画面を見てみましょう。

画像の表示場所は固定されていますが、スクロールをするたびに画像も動いているのがわかります。

いかがでしたか?
パララックスは使い方は難しいですが、上手に使うことでとても効果的に物事を伝えることができます。色々なアイデアを形にしやすくなってきているので臆せず試していくと良いでしょう。