Instagramウィジェットを StudioWeb サイトに追加するのは簡単です。これらのステップスに従って、ウィジェットを作成します。
ウィジェットを作成したら、以下の適切な手順に従ってWebサイトに追加します。
スタジオとは?
Studioは、コーディングなしでWebサイトをゼロから作成できるWebデザインプラットフォームです。
このチュートリアルでは、SnapWidget グリッドとスライドショーの表示を追加する方法について説明します。進めていくうちに、違いを説明していきます。
ウィジェットスニペットをページに追加してみましょう。
1. Studio ダッシュボードで、ウィジェットを追加するプロジェクトにカーソルを合わせ、[デザイン エディター] を選択します。
2. これで、プロジェクトが編集モードで開き、デフォルトのページが表示されます。
3. 左側のサイドバーの[ページ]オプションから別のページを選択できます。
4. Studioでは、埋め込みボックスを介してSnapWidgetスニペットを追加します(これはグリッドディスプレイとスライドショーディスプレイに適用されます)。左側のサイドバーで[レイヤー]オプションを選択します。
5. これにより、メインの [Design] ダイアログが開きます。[追加]タブを選択し、次に左側のサイドバーの[ボックス]オプションを選択します。
6. [空白の</>を埋め込む]ボックスを 、ウィジェットを表示するWebページにドラッグします。これにより、独自のカスタムコードをWebページに追加できます。
グリッド表示を追加します。
予めご了承ください。スニペットを追加するプロセスは、グリッド表示とスライドショー表示の両方で同じです。唯一の違いは、ウィジェットが利用可能な制限領域に適切に表示されるように SlideShow が変更されたことです。
1. 新しく追加した埋め込みボックスを選択し、右側のパネルを開いて、[</>カスタム]の下にスニペットを挿入します。
2. スニペットが埋め込みボックスに表示されるようになります。表示されるサイズは、埋め込みボックスのサイズによって異なります。ボックスの角を必要なサイズにドラッグすることで、表示領域のサイズを変更できます。小さくしすぎると、画像にソーシャルメディアボタンのアイコンが適切に表示されないことに常に注意してください。私たちの場合、それは非常に小さく始まりました。サイズを変更すると、次のように表示できます。
3. グリッドディスプレイで任意の画像をクリックすると(これについては後でスライドショーディスプレイでも説明します)、SnapWidgetのデフォルト設定では、選択した画像がライトボックスに表示されます。Studioは、ウィジェットに設定した使用可能な領域(上に表示)内のライトボックスに選択した画像を表示することに注意してください。十分に大きくすると、多かれ少なかれ正しく表示されますが、これは実用的ではない可能性があります。
4. 画像を表示するには、むしろ写真 ポップアップ 写真リンクを選択することをお勧めします。これは、ウィジェットの設定時に SnapWidget ダッシュボードで選択します。
5. その後、画像はWebページの上部にポップアップとして表示されます。
スライドショーディスプレイを追加する
前述のように、スニペットを追加するプロセスは、どちらのウィジェットタイプでも同じです。
1. 標準のレスポンシブスライドショーウィジェットには、次のスニペットが含まれています。
2. 標準のレスポンシブスライドショースニペットをページに追加すると、次のように表示されます。
3. ウィジェットは左揃えで表示されます。レスポンシブスライドショーウィジェットの幅と位置合わせは変更できません。ウィジェットの周囲に見える灰色がかった領域は、Webページに追加した実際の埋め込みボックスです。埋め込みボックス領域をウィジェットで埋める必要があります。幅(および1:1の比率を維持するための高さ)を変更できるようにするには、ウィジェットにいくつかの変更を加える必要があります(これはウィジェットのこのインスタンスにのみ適用され、SnapWidgetダッシュボードで選択されているウィジェットの設定には影響しません)。
4. Snapwidgetダッシュボードで応答しないスライドショーウィジェットを作成します 。iframeの幅と高さは重要ではなく、最初はそれぞれ200pxに設定できます(同じままにしてください)。
5. 次に、スニペットにHTMLコードとCSSコードを追加して、スニペットが表示される領域を作成します。エリアは基本的に以下の通りとなります。
6. これにより、ウィジェットの幅、高さ、および位置合わせを制御できます。また、応答しないウィジェットが応答する原因にもなります。
7. 標準の非応答スライドショーウィジェットには、次のものが含まれています。
8. スニペットに次の変更を加えます。
o 次のスタイルで <div> ブロックを追加します (ID はこのチュートリアルの説明のみを目的としており、他の目的には使用されていないため、実際には省略します)。
<div id="コンテナ" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;"> (これにより、iframe の表示に使用される領域がラッパーの幅の 100% に設定され、高さ = 幅の 100% に設定されます)。
o iframe のスタイル部分の width 属性と height 属性を削除し、指定された属性 (left: 0; width: 100%; height: 100%; position: absolute;)。
9. これにより、ウィジェットが次のように表示されます。グリッドディスプレイと同様に、ボックスの角を必要なサイズにドラッグして、表示領域のサイズを変更できます。小さくしすぎると、画像にソーシャルメディアボタンのアイコンが適切に表示されないことに常に注意してください。
10. その後、ウィジェットも応答性になります。
11. ディスプレイで画像をクリックしたときの表示はグリッドディスプレイの場合と同じですので、 スライドショーディスプレイのフォトポップアップ写真リンクも使用することをお勧めします。