簡単に使えて本格的なHPが作れる「ホームページ制作ツール」のおすすめを紹介しています。

グーペで作ったホームページをきれいに整える



前回の記事(グーペを使って実際にホームページを作ってみる その流れをご紹介)では、 グーペを使用して最小限の内容のホームページを作成しました。

まだ内容はほとんど入っていないとはいえ、 非常に簡単な操作でホームページを作成できることがわかっていただけたかと思います。

今回は、そのホームページに表示されているメニューやデザインをきれいに整えていきたいと思います。



スライドショーを編集する

選択するデザインにもよりますが、グーペで提供されているデザインテンプレートの中には 「スライドショー」と呼ばれる機能を持ったものがあります。

スライドショーとはその名の通り、写真や画像を順にスライドさせて見せる機能のことで、 沢山の写真をユーザーに閲覧させられること、また動きを付けることでユーザーを飽きさせない効果があります。

なにより、スライドショーがあると凝っていてお洒落なホームページに見えるところが魅力です。



通常、スライドショーをページに追加するにはプログラムを組み合わせる必要がありますが、 グーペには簡単にスライドショーを実現する機能が搭載されています。

ここでは実際にその機能を利用して、ホームページ上のスライドショーの内容を編集していきたいと思います。




グーペの管理画面の左メニューにある「コンテンツ}>「トップページ」をクリック。






すると、トップページに表示されている各項目の編集を行う画面が表示されます。



この画面にある「+スライドショー画像を登録する」をクリック。

デフォルトで写真が登録されている場合は、写真の横に表示されている「削除」ボタンを押すと消すことができます。




「スライドショー画像を登録する」をクリックすると、写真のアップロード画面が表示されますので、トップページに表示させたい写真をアップロードしてください。



写真のコメントやリンク先は、未入力でも大丈夫です。
もし写真に別ページへのリンクを貼りたい場合は、そのURLを入力してください。

必要事項を入力したら、下部の「登録」ボタンをクリックします。






スライドショー用の写真が1枚追加されました。



写真の編集や削除は、右側に表示されているボタンから行います。




さらにいくつかの写真を追加してみました。



これらの写真が、順にスライドショーとしてトップページに表示されます。

スライドされる順番を変えたい場合は、写真左側に表示されている並べ替えのボタンを利用して、 写真を並べ替えてください。




同ページでは、写真の切り替え速度を設定する箇所もあります。



写真がスライドされるスピードを変えるための機能です。
スライド速度を速めたり、逆に遅くすることもできます。

個人的には、写真のスライドは速すぎても遅すぎても見ているユーザーにストレスを与えてしまうため、 デフォルトの設定がちょうど良いと思いますが、好みで変えてください。




ホームページのトップページを見てみます。





登録した写真が順に、スライドショーとして切り替わっていきます。 なかなか雰囲気があってよい感じです。



ウェルカムメッセージを編集する

次に、トップページに表示されているウェルカムメッセージを編集します。



ウェルカムメッセージとは、スライドショーの下に表示されているメッセージのことです。


表示箇所はテンプレートによって異なります

現在、テンプレートにデフォルトで設定されているメッセージが表示されていますが、 これをホームページのジャンルや用途に合った言葉に置き換えます。




ウェルカムメッセージの編集は、 グーペの管理画面の左メニューにある「コンテンツ}>「トップページ」より行えます。

さきほどスライドショーの編集を行いましたが、そのページの中ほどの位置に「ウェルカムメッセージの編集」があるはずです。



初期状態では、テンプレートにデフォルトで設定されているメッセージが書かれています。




これを自分の言葉に書き換えたあと、「ウェルカムメッセージ更新」ボタンをクリックします。






すると、トップページに表示されていたメッセージの内容が変わるはずです。






ウェルカムメッセージには文字だけではなく、画像を追加することもできます。


ウェルカムメッセージの画像追加画面




画像のサムネイルを追加してみました。



画像の追加だけではなく、文字を装飾したりリンクを貼ったり、 一般的なブログを書くような感覚でメッセージを追加することができます。

特に迷うことはないはずです。



ナビゲーションメニューを編集する

続いて、全てのページに表示されている「ナビゲーションメニュー」の編集を行います。



ナビゲーションメニューとは、以下のようなメニューのことです。



今回使用しているテンプレートでは上部に表示されていますが、 使用しているテンプレートのレイアウトによっては、ページの左側や右側に表示されているかもしれません。

このナビゲーションメニューには、デフォルトでは一般的に利用されることの多いメニューが表示されています。

しかしホームページのジャンルや構成によっては使用しない項目もあるため、 表示されるメニューの種類や文言を自分のページに合うように編集します。




グーペの管理画面の左メニューにある「設定」>「ナビゲーション」をクリックします。






ナビゲーションの編集ページです。



ホームページのナビゲーションメニューに表示されている項目が、並んでいます。




表示したくないメニューがある場合は、右側の表示設定を「非表示」に変えてください。






また、メニューの文言を変えたい場合は、メニュー名の右側にある鉛筆マークをクリックします。






コンテンツ名変更の画面が表示されるので、適度変更して下さい。






変更後は、以下のようになりました。




ホームページタイトルのロゴ画像を変更する

ホームページのタイトルに「ロゴ画像」を設定します。



ホームページのタイトルとは、以下の部分です。



この部分の文字を画像に変更することで、洗練された雰囲気を演出することができます。

シンプルで質素なデザインのホームページであったとしても、 きれいなロゴ画像が使われているとそれだけでお洒落に見えるため、おすすめです。

特に、お店などビジネス系のホームページを作る場合は設定しておきたいですね。

自分で作れない場合はロゴ画像だけでもプロに頼むと良いかもしれません。 お金はかかりますが、それだけの価値があります。




というわけでロゴ画像を設定します。
グーペの管理画面にある左メニューより、「設定」>「基本設定」をクリック。






基本設定を行う画面が表示されるため、さらに上部にある「ロゴ画像」タブをクリックします。






ロゴ画像の設定画面です。
デフォルトでは「画像を使用しない」ように設定されているはずです。

画面左側の「画像を使用する」をクリックしてください。






すると画像の選択画面が表示されますので、ロゴ画像をアップロードします。






アップロードすると、ロゴのサイズを設定する画面が表示されます。



ホームページには、ここで選択したサイズでロゴ画像が表示されます。

こちらは好みで選んでください。
私はオリジナルを選びました。




設定し終えたら、画面下部に表示されている「更新」ボタンをクリックします。



これで設定完了です。




ホームページの表示を確認します。



ロゴ画像を設定することで、以前よりもきちんとしたホームページらしく見えるようになりました。

繰り返しとなりますが、お店などビジネス用のホームページを作る場合は、 ロゴ画像を設定しておくことをおすすめします。





今回は以上となります。
説明自体は長くなりましたが、実際に管理画面で行う設定はあっけないくらい簡単です。

上記で説明した機能の追加や設定を自作ホームページで行うとなると、 当然知識が要りますし、時間もかなりかかります。

たとえホームページ制作ソフトをつかったとしても、 ややこしい設定などで頭を悩ますことになるでしょう。 制作ソフトって、使いこなせるようになるまでがけっこう面倒だったりするのですよね。

そういったことを考えると、グーペって非常に使いやすくできていると思います。



特に初心者で、本格的なホームページを作りたいという方にはイチオシのツールだといえるでしょう。

残念ながら無料ではありませんが、 ホームページ制作を専門の制作会社に頼むことを考えると非常にリーズナブルです。

興味をお持ちの方は、是非チェックしてみてください。








次記事では、「お知らせ機能」の使い方を説明します。
お知らせ機能とは、日々の情報を載せる「ブログ」のようにも使える便利な機能です。

続けてご覧いただければと思います。
次記事:グーペの「お知らせ更新」機能の使い方について詳しく解説!ホームページの情報更新に超便利

Top