LOG IN

ジンドゥークリエイター カスタマイズ講座に参加【ウェブデザイン初心者がメインビジュアルの調整やってみた】

by KDDI ウェブコミュニケーションズ 広報ブログ

2020年5月14日(木)、15日(金)に、オンラインで『ジンドゥークリエイター 標準レイアウト&独自レイアウト カスタマイズ講座』を実施しました!(※この講座は、2月に大阪で開催予定でしたが新型コロナウィルス感染症(COVID-19)感染の拡大防止のため、オンラインに切り替えて行ったものです)

このセミナーは、ジンドゥークリエイターのカスタマイズについて詳しく解説した『ジンドゥークリエイター 仕事の現場で使える!カスタマイズとデザイン教科書の中からピックアップした、ジンドゥークリエイターの標準レイアウトと独自レイアウトに関するカスタマイズのティップスや情報、具体的なカスタマイズ方法をレクチャーするもので、講師には著者でもあるJimdoExpert服部 雄樹さん(服部制作室代表取締役)と、浅木 輝美さん(WEBデザイン研究所BEE代表)をお招きし、無料で開催しました。

講座の内容は?

ジンドゥークリエイターには、予めデザインがされていて文字と画像を変更するだけで簡単にウェブサイトが完成する「標準レイアウト」と、HTMLの知識がある方向けにカスタマイズしたオリジナルのデザインを実装できる「独自レイアウト」の大きく分けて2種類のレイアウトがあります。標準レイアウトは決まったデザインのままでカスタマイズできないと思われがちですが、実はカスタマイズすることができるんです!

今回はどちらのレイアウトのカスタマイズについても解説していただくため、1日目は標準レイアウトを使ったカスタマイズ、2日目には独自レイアウトを使ったカスタマイズについて講座を行いました。

1日目「標準レイアウトカスタマイズ編」

1日目の講座は、服部さんから「標準レイアウトカスタマイズ編」ということで、ジンドゥークリエイターを使ってカスタマイズするための基本的な手法や、標準レイアウトを使ってヘッダーの文字色を個別に変える方法やメインビジュアルの調整の方法、jQueryを使って画面の右上に電話番号を表示させる方法など簡単なカスタマイズ方法を説明していただきました。

■当日のプログラム

  1. ジンドゥーカスタマイズの基本手法

  2. CSSを使った簡単なカスタマイズ

  3. [DEMO]すぐに使えるカスタマイズサンプル

  4. ジンドゥーでjQueryを使う準備

  5. jQueryを使った簡単なカスタマイズ

  6. [DEMO]jQuery応用ワザ紹介

2日目「独自レイアウト導入編」

2日目は浅木さんから「独自レイアウト導入編」ということで、標準レイアウトとは別にオリジナルのテンプレートを自分で作れる独自レイアウトについて、標準レイアウトとの違いやメリット、独自レイアウトでウェブサイトを作る方法まで実際にデモをしながら説明していただきました。

■当日のプログラム

  1. 独自レイアウトをはじめる前に


    a. 独自レイアウトってなに?


    b. 標準レイアウトとどこが違う?


    c. 独自レイアウトを選ぶときの注意


  2. 独自レイアウト制作で編集につかう画面


  3. 独自レイアウトでウェブサイトを作ってみよう!

ウェブデザイン初心者がメインビジュアルの調整をやってみました

講座を受けていたら、 カスタマイズをしたことのない私でもできる気がフツフツと湧いてきたので、1日目に講師をしていただいた服部さんの講座を参考に標準レイアウトの「メインビジュアルエリアの調整」に挑戦してみました!

以前、ジンドゥーでウェブサイトを作った時に、メインビジュアルエリアの高さがもう少し広がれば、画像をイメージ通り使えるのにな〜と思ったことがあったので、今回はこちらに挑戦してみました!

▲こんな感じに通常(カスタマイズ前)だと横長に表示されところを、今回は猫だけでなく青空も入れて表示されるようにしていきます!

私のようなジンドゥーでウェブサイトは作ったことがあるけど、カスタマイズは未経験という方でも挑戦していただけるように、手順を書いたので興味がある方はぜひやってみてくださいね!

メインビジュアルエリアの調整 手順(Mac使用)

1、「GoogleChrome」でジンドゥーを開きます。

2、「編集画面」の右上のプレビューボタンをクリックします。(レイアウトは、標準レイアウトの「TOKYO」を使用しています)

▲今回はメインビジュアルに使いたい画像を予め背景に入れています。背景画像を変更する方法はこちら

3、プレビュー画面になるので、さらに閲覧ボタンをクリック。

4、こんな感じで別タブに「本番公開画面」が表示されました。ここからは、「編集画面」と「本番公開画面」の2つを同時にタブで表示しながら作業を進めていきます。

次は「本番公開画面」でControlキーを押しながらクリックして(マウスの方は右クリック)メニューを開き、検証をクリックします。

5、すると、コードがたくさん書いてあるデベロッパーツールが出てくるので、四角に矢印が刺さってるアイコンをクリックします。

▲この四角に矢印が刺さってるアイコンをクリックすると、要素の検証ができるようになります

6、まずは試しに「Jimdoで簡単ホームページ作成!」の文字をクリックしてみます。すると、デベロッパーツール側にも青色で「Jimdoで簡単ホームページ作成!」の要素がハイライトがされます。そこをよくみると「id」という文字があるので、ここの「id="cc-m-header-・・・・・・・・"」をダブルクリックしてコピーします。

▲このIDの数字はウェブサイトごとに違うので、必ず自分のウェブサイトのものをコピーしてください。

7、「編集画面」にもどり、左側にある「管理メニュー」の「基本設定」をクリックします。

8、「基本設定」の中の「ヘッダー編集」をクリックします。ここの赤枠内にコードを書き込んでいきます。

▲「<style type="text/css"> 〜 <style>」までをスタイル要素といい、この中にコードを書くと、現在のコードの上書きができるので既存のレイアウトをカスタマイズすることができます

9、先ほどコピーした「id="cc-m-header-・・・・・・・・"」を「/*<![CDATA[*/」の下にペーストします。

10、ペーストしただけだと、IDとして認識してくれないので先頭に「#」を入れます。すると、文字がピンク色になります。

11、右側に「{(波かっこ)」をいれます。同時に「 }(閉じ波かっこ)」も一緒にいれます。これが、カスタマイズをする一連の流れになります。

▲IDだけを書いて「{ }(波かっこ)」がないとCSSのエラー構文になります。構文エラーが出ると、ブラウザが自動的に判断し、CSSを適用しないという仕様になっているため、記述が反映されなくなります

12、本番公開画面にもどり、IDをコピーした時と同様に、四角に矢印が刺さってるアイコンをクリックした後、メインビジュアル部分をクリックします。すると、メインビジュアルの要素がまた青色でハイライトされるのですが、ここで注目するのは右側の部分です。この部分にカーソルを合わせ下に少しスクロールします。

▲右側の部分にはCSSが表示されています。青色でハイライトされた部分にどんなスタイルが適応されているか確認することができます

13、すると「@media(min-width:768px)」という文字が出てくるので、ここをコピーします。

▲「@media(min-width:768px)」はメディアクエリという指示で、ここではデバイスの幅が768pxより広い場合にのみ適応させるという意味の記述です。例えば、PC表示の時(768pxより幅が広いデバイス)はこの指定を適応してください。スマホの縦表示(768pxより幅が狭いデバイス)の時はこの指定を無視してくださいと言う意味の記述です。※768pxよりも幅が広いスマホなど(iPhoneXRの横向きなど)はこの指示が適応されます

14、編集画面にもどり、先ほどいれたIDの下にペーストします。

15、ペーストしただけだと、認識されないので右側に「{(波かっこ)」をいれます。同時に「 }(閉じ波かっこ)」も一緒にいれます。そうすると文字が赤くなります。

16、もう一度本番公開画面にもどり、赤枠の中を全てコピーします。

▲「min-height: 350px;」は、メインビジュアルの高さの表示の最小値を350pxにするという指定で、350pxより小さく表示されなくなっています。

17、編集画面に戻り、先ほど入れた波かっこのなかにペーストします。

18、「padding:0 25px;」を削除。

19、「min-height: 350px;」を「min-height: 100vh;」に変え、右下の「保存」ボタンをクリックします

▲「min-height: 100vh;」にすると、ブラウザの画角に合わせて常に画面いっぱいにメインビジュアルが表示(上にあるナビゲーション部分を含まず)されるようになります。画面いっぱい表示じゃなく、少しだけ高さを広げたい場合は「min-height: 350px;」の「350」の値を大きくすると高さを変えることができます

20、すると!で、できた〜!!全面に画像が広がり、入れたかった青空も表示されるようになりました!

いかがでしたでしょうか?思ってたよりも簡単ではないですか!?カスタマイズやったことのない方も、興味があまりなかった方もちょっと挑戦してみようかなと思っていただけたら嬉しいです!

高度なカスタマイズやデザインはプロにお任せした方がもちろんクオリティが高く素晴らしいのですが、「ちょっとだけ変えたい」時に自分でできたらすごく便利ですよね。

次の講座の予定は?

次回の講座は実施予定ではあるのですが、まだ日程が決まっていません。

また決まりましたらジンドゥーのTwitterなどでお知らせしますので、チェックいただけたら嬉しいです!

また、今回ご紹介したカスタマイズはもちろん、他の高度なカスタマイズについても詳しく解説した、ウェブ制作者のためのジンドゥークリエイター本ジンドゥークリエイター 仕事の現場で使える!カスタマイズとデザイン教科書』が現在発売中です!

あまり知られていませんが、ジンドゥークリエイターは、カスタマイズ次第でかなり自由度高くデザインすることができます!

こちらからご購入いただけますので、ご興味がある方はぜひチェックしてみてください!

OTHER SNAPS