ホームページ作成「グーペ」 トップ » ホームページ作成お役立ち記事» ホームページ作成» 無料で使える！飾り罫線素材を活用してホームページの印象を簡単に変える方法

無料で使える！飾り罫線素材を活用してホームページの印象を簡単に変える方法

「デザインは気に入ってるけどホームページの印象を変えたい」「ちょっとしたワンポイントがほしい」そんな時に、気軽に装飾できる飾り罫線（ライン）素材が配布されているサイトをご存知ですか。

「イラスト素材はよく聞くけど、飾り罫線素材って？」「線でホームページの印象が変わる・・？」想像つかない方もいるのではないでしょうか。
「飾り罫線（ライン）素材」とは、デザインされた線や枠のこと。文字や画像を飾り罫線素材で囲むことで、内容をより可愛く見せたり、華やかにすることができます！

今回は、商用利用可能の飾り罫線素材を使って、ホームページ作成サービス「グーペ」で、実際に設定してみましょう。
※「商用利用とは？」については、以前ご紹介した記事⇒ 【商用利用可・おしゃれ】サイト運営者必見！イラスト素材サイト5選 をご参照ください。


使用する「飾り罫線 素材サイト」はこちら

▽罫線 FREE-LINE-DESIGN
http://free-line-design.com/

罫線 FREE-LINE-DESIGNさんのホームページ

飾り罫線（ライン）素材が無料で配布されているサイトです。利用規約をご確認の上、ご利用ください。

飾り罫線を設置してみよう

今回は「グーペ」で作成したホームページのトップページに表示する設定についてご説明します。

  1. 罫線素材サイトから使用したい画像を選び、画像ファイルをダウンロードしておきます。
    ダウンロードした画像をそのまま「グーペ」で使用する場合は、JPEGまたはPNGを選択します。

罫線画像のダウンロード画面

2．グーペの管理画面「コンテンツ ＞ ファイルアップロード ＞ 画像アップロード」から、先ほどダウンロードした素材をアップロードします。

グーペ管理画面の画像アップロード

3．グーペの管理画面「ホームページ設定 ＞ トップページ設定 ＞ ウェルカムメッセージ」で、罫線を表示する設定を行います。

グーペ管理画面のウェルカムメッセージ

（1）エディタ上部にある「画像」アイコンをクリックします。
（2）「画像を追加する」フォームが表示されるので、先ほどアップロードした罫線素材を選択します。
※エディタ内に表示される素材のサイズが異なる場合は「画像サイズ」を変更して調整します。

グーペ管理画面の画像アップロード

（3）選択された罫線が表示されることを確認し、表示したい内容を入力します。

グーペ管理画面のウェルカムメッセージ

「更新」ボタンをクリックすると、完成です。
ホームページの表示を確認してみましょう。

ホームページの表示

飾り罫線を変えてみよう

▽飾り罫線とテンプレート色のみ変更してみる
飾り罫線とテンプレート色のみの変更で、がらりと印象が変わります。先ほどのポップな印象から、こちらのシンプルで落ち着いた雰囲気まで、幅広く活用いただけます。
※画像をクリックすると大きい画像をご覧いただけます。

雪の結晶の飾り罫線

▽季節感を出してみる
飾り罫線によって季節感を表現できます。今回は、もみの木のような罫線と緑色のテンプレートでクリスマスの印象になりました。
※画像をクリックすると大きい画像をご覧いただけます。

クリスマスの飾り罫線

まとめ：衣替え感覚で試せる罫線素材

いかがでしたか。今回ご紹介した「罫線 FREE-LINE-DESIGN」以外にも、罫線素材サイトはたくさんあります。以前、イラスト素材の記事でご紹介した「ガーリー素材」のように、イラスト素材の他に罫線・ライン素材も配布されているケースが多くあります。

▶︎ガーリー素材 – ライン素材

ハロウィンや、クリスマス、お正月と、飾り罫線を変えるだけでホームページの印象が変わりますので、衣替え感覚でぜひお試しください。

今回ご紹介した「グーペ」を実際にさわってみたいという方は、こちらからどうぞ。


その他の関連記事