(1) サイトマップホームページの中の各ページにリンクがはられています 4段組みになっていますね (2) コピーライト表記一番下には著作権者を示すコピーライト表記がありますデザイン (1) イラストフッターの一番上にイラストがあってちょっとかわいい感じになっています (2) 線それぞれ

(1)

はじめて相談室

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

執筆：#fc0（株式会社エフシーゼロ）「はじめて相談室」では、「はじめてＷＥＢ」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします！「こんなこと聞いていいのかな…」という方大歓迎の相談室です。今回は、フッターを「はじめてＷＥＢ」みたいなリッチな見た目にしたいというご相談です。おたより JimdoでHPを作って数年経ちました。フッターを改良したいと考えています。目標はこの「はじめてＷＥＢ」の最下段のグリーンのフッターです。これほどリッチな作り込みは個人には無理でしょうか？やはりプロにお任せするしかないでしょうか？もし個人にもできることならその方法を教えて頂けませんか？（前平謙二翻訳事務所さん）

ナビゲーターからの回答

前平謙二翻訳事務所さん、こんにちは。ナビゲーターの立花かずみです。おたよりありがとうございます！ページの一番下にある「フッター」に注目をされたこと、目のつけどころがすばらしいですね☆ フッターは、目立たないかと思いきや結構目立つ場所なんです。ページをスクロールして一番最後に止まる場所なので流されないですし、すべてのページに共通で入っているのでどのページに行っても見られる場所です。フッターに入れるもの次第で、ホームページの使い勝手が良くなったり、見る人の興味をひくことができたりします。さて、「はじめてＷＥＢ」のフッターみたいにしたい！という今回のご質問をJimdoで実現できるかどうかですが、「できること」と「（がんばらないと）できないこと」があります。今回はそれについてお話ししていきますね。

はじめてＷＥＢのフッターを見てみよう

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

＜内容＞

(2)

(1) サイトマップホームページの中の各ページにリンクがはられています。4段組みになっていますね。 (2) コピーライト表記一番下には、著作権者を示すコピーライト表記があります。

＜デザイン＞

(1) イラストフッターの一番上にイラストがあって、ちょっとかわいい感じになっています。 (2) 線それぞれのリストの左に細い線が引かれています。見た目がシャキっとしますね。 (3) アイコンそれぞれのリストの最初に矢印のアイコンがあります。クリックを促す感じです。

(3)

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

このようなフッターをJimdoの基本機能で実現できるかどうか、まず結論から言ってしまいます。＜内容＞ (1) サイトマップ：できる！ ● (2) コピーライト表示：できる！ ● ＜デザイン＞ (1) イラスト：まったく同じにはできない ● (2) 線：できない（がんばればできる） ● (3) アイコン：できない（がんばればできる） ● できるだけ近づけてみたのが、こんな感じです。デザイン調整がちょっと難しいという感じですが、少し知識がある方ならできますので、最後にお伝えします。まずは、できるところを確実にお話ししていきますね。

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

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

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

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

(4)

1. カラムをつくる

このリストは4段組になっています。このため、まずは段組みを作る必要があります。段組みをつくるには「カラム」コンテンツを使います。「コンテンツを追加」から「カラム」をクリックします。初期状態ではカラムは2つできます。これを4つに増やすため、「カラムを編集」をクリックしてから、図のところにある「＋」マークを2回クリックして4つに増やします。

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

4つの「コンテンツを追加」に、「文章」コンテンツでリンクリストを入れます。項目ごとに改行して入れていきます。次にそれぞれのリストを箇条書きにします。リストをドラッグして選択し、図を参考に「箇条書き」ボタンをクリックすると、一発で箇条書きリストができます。さらに「B」を押して太字にしておきましょう。そして箇条書きと太字を他の3つのリストにも適用します。

(5)

3. リンクを貼る

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

(6)

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

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

(7)

見た目を整えよう

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

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

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

2. 背景色を変える

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

(8)

3. 文字の色を変える

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

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

コピーライト表記をクリックして、背景色を先ほど設定したものと同じ色にし、フォントカラーを白にします。最後に保存をクリックして設定を確定します。だいぶそれっぽくなってきました。Jimdoの基本機能でできるのはここまでです。ここまでできれば十分！今どきのホームページによくあるようなフッターを作ることができました。

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

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

(9)

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

リストの左にあるアイコンは画像データなので、あらかじめ準備をする必要があります。文字の大きさに合ったサイズのアイコンが準備できたら、Jimdoに保存します。管理メニューの「デザイン」から「独自レイアウト」を選びます。そこで「ファイル」をクリックします。ファイルの一覧が表示されたら、そこにアイコンの画像データをアップロード（保存）します。一番下のほうにある「ファイルを選択」からアイコンデータを選択して「アップロード」をクリックします。すると、ファイルの一覧に、アップロードしたファイル名が追加されます。

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

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

(10)

3. CSSを設定する

CSSについての解説をすると長くなってしまうので、ここでは準備したCSSのコードをコピー＆ペーストします。このコードを貼り付けると、以下が調整されます。リンクの下線が消える ● 項目同士の余白が空く ● リストの横に線がつく ● アイコン画像が表示される ● 管理メニューから「基本設定」の「ヘッダー編集」をクリックし、出てきた画面の入力欄に以下をコピーして貼り付けます。コピーは、以下のコードをすべて選択し、右クリックして「コピー」を選ぶとできます。

.sidebar-options .j-text ul li { margin-bottom: 10px; } .sidebar-options .j-text ul li:before { content: url(ここにコピーしたアドレスを貼る); } </style>

(11)

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

.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. イラストを入れる

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

(12)

なお、このやり方の場合フッターの外側にイラストを入れているので、この見た目を実現する場合は、各ページに「コンテンツ追加」で同じイラストを入れる必要があります（ちょっと大変）。最後にもう一度完成形を見ておきましょう。どうでしょう、うまくできたでしょうか？基本機能でできることは限られているのですが、「CSS」をうまく使うとちょっとだけオリジナリティのあるものを作れたりします。ぜひぜひ、試してみてくださいね。

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

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

(13)

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

(14)

はじめてＷＥＢサービス紹介次回のコラムを見る » #fc0（株式会社エフシーゼロ） JimdoExpert http://fc0.vc/ 「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。主な著書に『デザインの学校これからはじめるFireworksの本』（技術評論社）、『デザインの学校これからはじめるDreamweaverの本』（同）、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』（共著、エムディエヌコーポレーション）など。