部品集の利用方法
部品集の使い方
部品はセクション単位に用意しました。
使いたい部品は１度だけ部品番号（セクション）単位で
①ライブラリー（図書館）に保存してください。
②使いたいページにライブラリーから１クリックで読み込めます。
＊DIVIは文字・文字間・行間・余白・パディングすべて１ピクセル単位で微調整できるシステムです。
※今後新しくGWPDで用意した部品も部品集ページをサイトに読み込むことで利用できる様になっています（先に参加しても損はありません）
部品１（ヘッダー・インパクトキャッチ）
【セクション内部品構成】
行１
（文字部品）
（ボタン部品）
＋
行２
（トグル部品）
（文字部品）
＊行２に表示している画像はトグル行の背景を設定しています。
＊行２画像内の文字は文字を上方向に表示位置（パディング）をずらしています。
＜具体数値＞
上部パディング数値
パソコンとタブレット ＝ 45ピクセル
スマホ ＝ 35ピクセル
＊開発内部を見ていただくとよく分かります。
ホームページ
制作チャレンジ
制作のすべてをリアルタイムで公開中
ワードプレス制作
多少の無料ブログ経験の知識でも大丈夫です。
小学６年生でもやる気があればできる難易度です。
制作の様子もリアルタイムで公開中です。
それをご覧になりながら、できそうかご判断できます。
🔻
コロナ以降挑戦者が
急増しています。
チェンレンジして
技術も身に付けて！
部品２（ヘッダー：全面画像スライダー）
部品３（商品横スクロール）
変更依頼等はこちらの確認番号とイメージまたは、参考になる画像、やURLをお伝えください。
部品４（仕切りタイトル）
ヴィンテージ古着販売・買取店
部品４-2（仕切りタイトル）
キャッチコピー（H２）
リードコピー（H４）
補足説明
部品５（Flip ボックス）
部品５-2（Cubeボックス）
部品６（タイトルバナー）
人気サービス（H４）
人気商品（H４）
定番商品等（H４）
この美味さ 癖になる。
部品７（タイトル＋サブタイトル＋文）
H2タイトル
H３サブタイトル
テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト
部品７-2（４列ブロック）レスポンシブ
４列−１（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
４列−２（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
４列−３（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
４列−４（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
部品７-3（３列ブロック）レスポンシブ
３列−１（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
３列−２（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
３列−３（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
部品７-4（２列ブロック）レスポンシブ
２列−１（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
２列−２（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
部品７-5（１列ブロック）レスポンシブ
１列−１（H4)
この部品はレスポンシブデザインのDIVIで作った部品です。
＊CSSは使っていません。
＊きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。
部品８（Hタグ＋１列ブロック）
表題（H３）
操作は画面でイメージを確認しながら直感的に情報入力する事が可能です。
その上、GWPDのテーマでは、Google検索で上位表示するための内部構造で作られていますので、画像・キャッチコピー・文章の修正と、文字間・行間・文字の大きさ・色合いなどを微調整するだけで、Google検索で上位表示するための条件を整えたホームページが出来上がります。
部品９（タブ）
部品10（アコーディオン）
あなたのタイトルはここに入ります
あなたのタイトルはここに入ります＞
あなたのタイトルはここに入ります＞
あなたのタイトルはここに入ります＞
部品11（空き番）
スマホでも改行しない
１行表示部品
（ここから）
確認12（4-1非レスポンシブ・メニュー・バナー）
４列１-１部品
４列１-２部品
４列１-３部品
４列１-４部品
確認12-2（4-1非レスポンシブ・フルワードバナー）
リンク先は自由に設定できます。
・POPUPで魅力的に表示できます。
・Youtube動画（ページから外にでません）
・商品販売ページ
など
バナー部品
（ｈ３）
バナー部品
（ｈ３）
バナー部品
（ｈ３）
バナー部品
（ｈ３）
確認12-3（3-1非レスポンシブ）
バナー部品
（ｈ３）
バナー部品
（ｈ３）
バナー部品
（ｈ３）
確認12-4（2-1非レスポンシブ）