スマートフォンサイトを表示する

  1. TOP
  2. はじめて相談室 : 第24回 フッターをそれっぽくしたい!

エキスパートコラム

はじめて相談室

第24回:フッターをそれっぽくしたい!

執筆:#fc0(株式会社エフシーゼロ)

2017年4月10日更新

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

閲覧数1,267views

このコラムをPDF形式でダウンロードする

「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、フッターを「はじめてWEB」みたいなリッチな見た目にしたいというご相談です。

おたより

JimdoでHPを作って数年経ちました。フッターを改良したいと考えています。
目標はこの「はじめてWEB」の最下段のグリーンのフッターです。
これほどリッチな作り込みは個人には無理でしょうか?
やはりプロにお任せするしかないでしょうか?もし個人にもできることならその方法を教えて頂けませんか?(前平謙二翻訳事務所さん)

ナビゲーターからの回答

ナビゲーター

前平謙二翻訳事務所さん、こんにちは。
ナビゲーターの立花かずみです。おたよりありがとうございます!
ページの一番下にある「フッター」に注目をされたこと、目のつけどころがすばらしいですね☆

フッターは、目立たないかと思いきや結構目立つ場所なんです。ページをスクロールして一番最後に止まる場所なので流されないですし、すべてのページに共通で入っているのでどのページに行っても見られる場所です。フッターに入れるもの次第で、ホームページの使い勝手が良くなったり、見る人の興味をひくことができたりします。

さて、「はじめてWEB」のフッターみたいにしたい!という今回のご質問をJimdoで実現できるかどうかですが、「できること」と「(がんばらないと)できないこと」があります。今回はそれについてお話ししていきますね。

はじめてWEBのフッターを見てみよう

まずは、ご質問にある「はじめてWEBのフッター」を詳しく見てみましょう。
「内容」と「デザイン」にわけて見ていきます。

<内容>

(1) サイトマップ

ホームページの中の各ページにリンクがはられています。4段組みになっていますね。

(2) コピーライト表記

一番下には、著作権者を示すコピーライト表記があります。

<デザイン>

(1) イラスト

フッターの一番上にイラストがあって、ちょっとかわいい感じになっています。

(2) 線

それぞれのリストの左に細い線が引かれています。見た目がシャキっとしますね。

(3) アイコン

それぞれのリストの最初に矢印のアイコンがあります。クリックを促す感じです。

Jimdoでできることとできないこと

このようなフッターをJimdoの基本機能で実現できるかどうか、まず結論から言ってしまいます。

<内容>
  • (1) サイトマップ:できる!
  • (2) コピーライト表示:できる!
<デザイン>
  • (1) イラスト:まったく同じにはできない
  • (2) 線:できない(がんばればできる)
  • (3) アイコン:できない(がんばればできる)

できるだけ近づけてみたのが、こんな感じです。

デザイン調整がちょっと難しいという感じですが、少し知識がある方ならできますので、最後にお伝えします。まずは、できるところを確実にお話ししていきますね。

注意!このフッターを作るときのレイアウト

Jimdoのレイアウトが「1カラム」のものである必要があります。左や右にメニューがないレイアウトです。そしてできれば、Tokyo、Miami、Malagaなど、フッターの横幅がウインドウ幅いっぱいに広がるタイプのほうがよいでしょう。(ちなみに今回の例ではTokyoで作成しています)

サイトマップを作ってみよう

まず、フッターのメインの内容となる各ページへのリンクのリストを作ってみましょう。

1. カラムをつくる

このリストは4段組になっています。このため、まずは段組みを作る必要があります。段組みをつくるには「カラム」コンテンツを使います。「コンテンツを追加」から「カラム」をクリックします。

初期状態ではカラムは2つできます。これを4つに増やすため、「カラムを編集」をクリックしてから、図のところにある「+」マークを2回クリックして4つに増やします。

2. リストの中身を入れる

4つの「コンテンツを追加」に、「文章」コンテンツでリンクリストを入れます。項目ごとに改行して入れていきます。

次にそれぞれのリストを箇条書きにします。
リストをドラッグして選択し、図を参考に「箇条書き」ボタンをクリックすると、一発で箇条書きリストができます。さらに「B」を押して太字にしておきましょう。そして箇条書きと太字を他の3つのリストにも適用します。

3. リンクを貼る

さらに、それぞれにリンクを貼ります。各項目をドラッグして選択し、図のようにリンクを貼っていきます。

ここまで完成した状態が以下の図です。見た目はあとで整えていきます。

コピーライト表記を入れてみよう

次に、著作権を示すコピーライト表記を入れてみましょう。管理メニューの「基本設定」から「共通項目」をクリックし、コピーライト表記の入力欄に入力して「保存」をクリックします。

ページに戻ると、以下のように表示されています。(残念ながら、はじめてWEBのような中央寄せはできません)

見た目を整えよう

次に、「スタイル」機能を使って見た目を整えます。

1. フッターの背景を選択する

管理メニューの「デザイン」から「スタイル」を選択し、リストを入れたカラムの外側のエリアをクリックします。

2. 背景色を変える

図のような設定画面が画面上に出たら、背景色を設定して保存します。図の例では、「はじめてWEB」と同じ濃いめの緑にしています。

3. 文字の色を変える

次に、リストの文字の部分をクリックして、「リンクカラー(active)」「リンクカラー」を変更します。この例の場合は両方とも白にしています。

4. コピーライト表記の色を変える

コピーライト表記をクリックして、背景色を先ほど設定したものと同じ色にし、フォントカラーを白にします。最後に保存をクリックして設定を確定します。

だいぶそれっぽくなってきました。Jimdoの基本機能でできるのはここまでです。
ここまでできれば十分!今どきのホームページによくあるようなフッターを作ることができました。

応用編:デザインに手を加える

ここからは、画像の作成や「CSS」という言語の知識が必要な「応用編」になります。

1. アイコンをつくってJimdoに保存する

リストの左にあるアイコンは画像データなので、あらかじめ準備をする必要があります。文字の大きさに合ったサイズのアイコンが準備できたら、Jimdoに保存します。管理メニューの「デザイン」から「独自レイアウト」を選びます。そこで「ファイル」をクリックします。

ファイルの一覧が表示されたら、そこにアイコンの画像データをアップロード(保存)します。一番下のほうにある「ファイルを選択」からアイコンデータを選択して「アップロード」をクリックします。すると、ファイルの一覧に、アップロードしたファイル名が追加されます。

2. ファイルのアドレスをコピーする

追加したファイル名の上で右クリックし、「リンクのアドレスをコピー」をクリックします。
(ブラウザによってメニューの名前がちょっと違うかもしれませんが、同じ趣旨のものを選択します) コピーしたアドレスを、メモ帳などに貼り付けておいてください。

3. CSSを設定する

CSSについての解説をすると長くなってしまうので、ここでは準備したCSSのコードをコピー&ペーストします。このコードを貼り付けると、以下が調整されます。

  • リンクの下線が消える
  • 項目同士の余白が空く
  • リストの横に線がつく
  • アイコン画像が表示される

管理メニューから「基本設定」の「ヘッダー編集」をクリックし、出てきた画面の入力欄に以下をコピーして貼り付けます。コピーは、以下のコードをすべて選択し、右クリックして「コピー」を選ぶとできます。

<style type="text/css">
.sidebar-options .j-text a:link {
     text-decoration:none;
}
.sidebar-options .j-text ul {
    border-left: 1px solid #adcf6a;   
    list-style-type:none;
    padding-left:10px;
}
.sidebar-options .j-text ul li {
    margin-bottom: 10px;
}
.sidebar-options .j-text ul li:before {
    content: url(ここにコピーしたアドレスを貼る);
}
</style>

さらに、「ここにコピーしたアドレスをはる」の部分を消して、さきほどコピーしたアイコンデータのアドレスを貼り付けます。最終的に以下のような感じになります。(*******となっているところが、人によってかわります)

.sidebar-options .j-text ul li:before {
    content: url(ここにコピーしたアドレスを貼る);
}

.sidebar-options .j-text ul li:before {
    content: url(https://u.jimcdn.com/e/o/*******************/userlayout/img/mark.png?t=*************);
}

この状態にできたら保存して、ページに戻ってみましょう。
以下のようになっていれば成功です!

4. イラストを入れる

はじめてWEBのフッターのように上にイラストを入れる場合は、フッターの直前に「コンテンツを追加」から「画像」を選択して、あらかじめ用意したイラスト画像を入れます。
ただ、残念ながらはじめてWEBのようにフッターとイラストをぴったりくっつけることはできません。

なお、このやり方の場合フッターの外側にイラストを入れているので、この見た目を実現する場合は、各ページに「コンテンツ追加」で同じイラストを入れる必要があります(ちょっと大変)。

最後にもう一度完成形を見ておきましょう。

どうでしょう、うまくできたでしょうか?
基本機能でできることは限られているのですが、「CSS」をうまく使うとちょっとだけオリジナリティのあるものを作れたりします。ぜひぜひ、試してみてくださいね。

おたよりお待ちしています!

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!

ナビゲーターへの質問はこちらから!

このコラムでは、パソコン初心者の方からの
「こんなこと聞いてもいいのかしら?」という質問にお答えしています。

  • ※毎月1回程度のコラムですので、急を要する質問にはお答えできません。
  • ※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。
  • ※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

「はじめてWEB」でホームページを作成しよう!

「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。

さあ、はじめよう!

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

#fc0(株式会社エフシーゼロ)

#fc0(株式会社エフシーゼロ)

JimdoExpert
http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

主な著書に『デザインの学校 これからはじめるFireworksの本』(技術評論社)、『デザインの学校 これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。

小さなお店&会社のホームページ Jimdo入門

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/7/30~2017/8/5]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!