５月２９日の勉強会

共有ファイルの確認

ファビコンやボタンに表示する画像を OneDrive 共有フォルダーに追加したので、各自の OneDrive 共有フォルダーで共有されていることをそれぞれ確認した。

フォルダー名：CHP201809 > 画像 > 加工前

ファイル名：　favicon_k001.gif、favicon_k005.gif、favicon_k045.gif、favicon00.gif、img_b095a.gif

ファビコンとは

ブラウザ画面のタブの左側に表示される小さな画像や、お気に入りバーに登録されているサイト名の左側に表示される小さな画像であることを実際のブラウザ画面で紹介した。

また、Jimdo の編集ページで、管理メニューから「基本設定」＞「共通項目」と進み「ファビコン」タブを開くと表示されているファビコンの説明記述を見た。

そこにはサイズ 16ｘ16 ピクセルあるいは 32 x 32 ピクセルの画像で、ファイル形式は .png /.ico /.bmp のいずれかである必要があると記述されている。

ファビコン用画像を作る

無料のファビコン作成サイト（www.favicon.cc）を開いた。
PC上にあるファビコン用画像をサイトにアップロードをするために、Import Image をクリックした。
次の Import Image 画面で「ファイルを選択」ボタンには、（ファイルが）選択されていません、と表示されている。そこで「ファイルを選択」ボタンをクリックした。
「開く」ダイアログ画面に変り、ファビコンとして表示したい画像を選択する。ここでは favicon_k001.gif を選択する。「開く」をクリックする。
Import Image 画面に戻り「ファイルを選択」ボタンには、クリックしたファイル名 favicon_k001.gif が表示される。
オプションを選択する。画像の縦横比を保ってサイズを小さくするトラックのイラストが表示されているほうは「Keep Dimensions」。他の選択肢は、「Shrink to square icon」で縦横の片方だけを縮小して正四角形にするイラストが表示されている。ここは選択した画像で判断するのだろうが、「Keep Dimensions」をクリックして選択する。
「Upload」をクリックする
16 x 16 ピクセルのアイコンが作成される。
必要に応じて、１ピクセル単位でカラー調整あるいは透明化する。
サイトページを下方へスクロールすると「Preview」があり、作成されたファビコンが表示されている。また作業中のサイトがタブで表示されているが、そこにも作成されたばかりのファビコンが表示されていた。いずれも確認しやすい。
作成されたアイコンを保存するために「Download Favicon」をクリックする。Favicon.ico という名前のファイルがダウンロードされ PC の「ダウンロード」フォルダーに保存される。
「ダウンロード」フォルダーから各自の保存先フォルダーへ Favicon.ico ファイルを移動する。

ファビコンを Jimdo のページに登録する

Jimdo で編集中のサイトにログインして編集モードにする。
「管理メニュー」から「基本設定」＞「共通項目」と進み、「ファビコン」タブを開く。
「ファビコン」画面に替わるが、「画像を選ぶ」では「ファイルを選択」ボタンに「選択されていません」と表示されている。「ファイルを選択」ボタンをクリックする。
「開く」ダイアログでは、PC に保存してあるファビコンファイルを選択し、「開く」をクリックする。ここでは各自の保存先フォルダーに保存してある Favicon.ico ファイルを選択する。
再び「ファビコン」画面に戻る。そこでは「ファイルを選択」ボタンには選択したファビコンのファイル名が表示されているのを確認し、「アップロード」をクリックする。
これでファビコンが設定される。作業中の Jimdo のブラウザ表示を更新すると、ブラウザタブでファビコンが表示される。

フッター内にあるサイドバーを編集する

レイアウトにあるサイドバーを編集するにあたり、サンプルのコンテンツを削除する。コンテンツは３列のカラムでできているので、カラムそのものは残して使うことする。カラム内のコンテンツを全部削除した。

右側カラムを編集する

まず右側カラムの編集から着手する。

ここには、「活動時間」「拠点」「公式サイト」などの情報を入力した。内容はメモ文書にあるとおりにした。

それぞれの情報と情報の間には、水平線を挿入した。

左側カラムにはボタンを挿入する

スタイル１のボタンを５個挿入した。

ボタンの表示はナビメニューの第一階層と同じにした。すなわち、「素晴らしき仲間」「教養と教育」「チャレンジ」「人生を楽しむ」「お問い合わせ」とした。

それぞれのボタンにはリンクを設定できるので、リンク先としては「内部リンク」で、各ページへジャンプするようにリンクを設定した。

ボタンにユニークなスタイル指定（その１）をコピーする

勉強会スケジュール表から本日（05/29）の項にある、「03A ボタン」に貼ったリンク先の作成ガイドページ「03A ボタンの作成」へジャンプした。

その中の「03A-4 ボタンのユニークスタイルを作成する」に行き、「➌ 以下点線内のスタイル設定をコピーして、ヘッダー部分に貼り付ける」にある点線内のスタイル指定１０行をコピーする。

コピーしたスタイル指定内容は、ボタン幅をページ幅一杯にする、テキストに影を付け立体化する、後で指定する背景画像のスタイルをしておく、などである。

コピーしたスタイル指定をページのヘッダーに貼り付ける

編集中の Jimdo サイトに戻り、「管理メニュー」から「基本設定」＞「ヘッダー編集」と進む。

「ヘッダー編集」画面で「ホームページ全体」タブが選択・表示されているのを確認する。

スタイル指定入力ボックスでは、２行目３行目と５行目６行目にはすでに入力されているので、そのあいだの４行目に入力する。4行目をクリックする。

そこで「貼り付け」（「Ctrl」+「V」キー）を行うと、先ほどコピーしたスタイル指定（その１）が貼り付けられる。

右下にある「保存」ボタンをクリックする。ボタン表示が「保存完了」と変わる。

ユニークスタイル指定（その１）が適用されたボタンを確認する

「✕　管理メニュー」の「✕」文字部分をクリックすると、「ヘッダー編集」画面が閉じて編集ページが表示される。

ページを下方へスクロールしてサイドバー部分にあるボタンの表示を確認する。

ボタン幅が、カラムの列幅一杯になっている、文字に影がついて立体化しているなどを確認する。

ここで時間がきたので本日はここまでで終了とします。