色んなパーツを簡単に追加♪ その2

2017.08.28

このエントリーをはてなブックマークに追加

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

唐突ですが、動きのあるホームページってかっこいいですよね(≧ω≦)

かっこいいサイトはどのサイトも動くコンテンツが入っている気がします… 

と、いうことで今回はスライダーパーツの追加の仕方を紹介します☆

 

 

***  パーツを選んで画像を入れるだけ!  ***

 

前回の「Groopで作ってみよう」でパーツの「追加」を紹介しましたが、

今回はメイン画像の部分をパーツの「変更」でスライダーに変えてみたいと思います。

 

 

いつも通り右クリックをしてメニューを開いて「パーツを変更」を選択します。

 

 

パーツ一覧の「その他」からスライダーを選択!

今回は一番オーソドックスなスライダーパーツを選びました。

 

 

初期状態はサンプルの画像が2枚入ってます。

画像を変更するためにスライダーの上で右クリック!

「スライダー」から編集を選択します。

するとスライダーの編集画面になるので、画像の変更等をしていきます。

 

 

 

サーバーブラウザの部分をクリックすると、いつもの画像選択画面が出てきます。

事前にスライダー用の画像を3枚用意していたので、1枚目を選択。

 

 

二段目にある「alt属性」というのはHtmlの中で画像の代わりになるテキスト文章のことなのですが、説明すると長くなるので割愛します。

ひとまず、画像のタイトルになるような文章を入れておきましょう(´・∀・)っ

 

続いて、三段目。

「リンク」はURLを入れると、スライダー画像をクリックした時にそのページへ移動します。

入れなくてもちゃんと動くので、リンクが必要ない場合は空欄で大丈夫です。

「探す」ボタンをクリックすると、作っているサイト内のページが表示されて移動させたい先を探すことができます。

 

 

「ターゲット」は「リンク」で移動する時に同じ画面(同じウィンドウ)で開くか、

違う画面(別ウィンドウ)で開くかの違いをつけることができます。

 

 

「ラベル」という項目もありますが、上級者向けの内容になるのでこちらも割愛!

何も入れず、空欄にしておきましょう。

 

ここで「保存する」を選択したら1枚目の設定が完了です。

 

 

2枚目以降を編集する時は編集画面の下にある数字をクリックすると編集ができます。

初期状態では2枚目までしか設定されていませんが、更に増やしたい場合は数字の横の「+」のアイコンをクリックすると枚数を増やせます。

 

 

あとは1枚目と同じように画像やリンクを設定して「保存する」をクリック! 

これでスライダーの完成です。

 

スライダーに入れた画像はサイズによってそのまま表示されたり縮小されたりするので、入れる画像のサイズは同じものを用意すると綺麗に入ります。

ちなみに私が今回用意した画像はこのサイズで統一してます♪↓

 

 

 

 

と、いうことで。

今回は右から左に流れるタイプの一番よく見るスライダーの設定の仕方を紹介しました(*´ω`*)

 

 

中村@新人の力量が足りず動画でお見せできないのが残念ですが、スライダーが入るだけで大分印象が変わりますよ♪

 

初心者さんでも動きのあるサイトが作れることもGroopの魅力の一つなのです(≧ω≦)

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

 

コメント

コメントフォーム

無料で今すぐ作ってみる

ブログ内検索

フィード

分からないこと、聞きたいことご相談頂ければわかりやすく・丁寧にお答えいたします。

PAGE TOP