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

Transcription

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のコードをコピー ペーストします このコード を貼り付けると 以下が調整されます リンクの下線が消える 項目同士の余白が空く リストの横に線がつく アイコン画像が表示される 管理メニューから 基本設定 の ヘッダー編集 をクリックし 出てきた画面の入力欄に以下をコピーして貼り付けます コピーは 以下のコードをすべて選択し 右クリックして コピー を選ぶとできます <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>

11 さらに ここにコピーしたアドレスをはる の部分を消して さきほどコピーしたアイコンデータのアドレスを貼り付けます 最終的に以下のような感じになります *******となっているところが 人によってかわります.sidebar-options.j-text ul li:before { content: url(ここにコピーしたアドレスを貼る); }.sidebar-options.j-text ul li:before { content: url( } この状態にできたら保存して ページに戻ってみましょう 以下のようになっていれば成功です 4. イラストを入れる はじめてＷＥＢのフッターのように上にイラストを入れる場合は フッターの直前に コンテンツを追加 から 画像 を選 択して あらかじめ用意したイラスト画像を入れます ただ 残念ながらはじめてＷＥＢのようにフッターとイラストをぴったりくっつけることはできません

12 なお このやり方の場合フッターの外側にイラストを入れているので この見た目を実現する場合は 各ページに コンテ ンツ追加 で同じイラストを入れる必要があります ちょっと大変 最後にもう一度完成形を見ておきましょう どうでしょう うまくできたでしょうか 基本機能でできることは限られているのですが CSS をうまく使うとちょっとだけオリジナリティのあるものを作れたり します ぜひぜひ 試してみてくださいね おたよりお待ちしています はじめて相談室 では みなさまからの はじめてＷＥＢ の素朴な疑問をお待ちしています こんなこと聞いたら恥ずかしいかも というご質問大歓迎です はじめてＷＥＢ ナビゲーターがなんでもお答えしちゃいます おまちしてまーす

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

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