📝1月13日(木)

1班「ロゴ」と「ホーム」の担当

ロゴは姉妹塾のシンボルであり、最初のページは印象がとても大事な要素ではと緊張しながら取り組みました。

ロゴの、画像は、ライン無料画像で検索し、候補を数点ダウンロードして使用、シニア姉妹のSSと組み合わせワードアートで作成。他にも数点作成したロゴも皆さんにご紹介させて頂きました。

その折、ロゴは確定せず時々差し替えてみてはとの提案を頂きました。

 

ホーム画像はしばらく固定して表示していきたいと思います。

画像の選択には、シニア姉妹グループの明るさ優しさを感じてもらえるような一枚をと、

WEBよりフリー使用可のイラスト・画像等から選択ダウンロードしました。

その画像をペイント3Dで加工、まず「パソボラ姉妹塾へようこそ」の文字を入力・可愛いお日さまを挿入して一枚が完成です。

 

またその月の風景・散歩道?などスライド形式で載せていきたいと思っています。

(掲載の画像は、スライダー形式に使用する画像をペイント3D で縦横比を揃えているところをプリントスクリーンで撮ったものです。)

皆様から投稿いただければ、ブログのページへ順次掲載してまいります。

 

どうぞよろしくお願いいたします。

2班「背景画像」と「メンバー紹介」の担当

1.「メンバー紹介」ページにパスワードを設定。

  •   「管理メニュー」→「基本設定」→「パスワード保護領域」をクリックすると設定名「メンバー紹介」の 下にパスワード:●●●●●とはいっています(●●●●● はログインできる方には表示されます。)
  •  「編集」をクリックすると、パスワード、設定内容を 確認、変更ができます。
  •   ページ名「メンバー紹介」の前に「レ」が入っています。                                                         

2. 最初に、自己紹介のテンプレートを表で作成する。

3.表の上にコンテンツの追加をして、名前をあいうえお順に箇条書きにしていく。

  • (削減、追加を考慮して、メンテナンスをしやすい方法にする。)
  • 2つのカラムを作り、縦に並んでいた箇条書きをコピペで左右に分け、2列に配置した。

4. テンプレートの表もコピーして、2つのカラムの中に上に名前に合わせ、2列に配置した。

5.名前とテンプレートをリンクしていく作業をする。

 

 ページ内リンクの手順

1. 編集モードにして、表に各自の名前をあいうえおの順番にすべて入力して保存。

2. そのまま、上にスクロールして、名前の文字列を選択して「リンク」をクリックする。

3. 内部リンクになっていることを確認して、「メンバー紹介」にして→「リンク設定」→「設        定」をすると名前が青色になり下線がはいる。

4. 閲覧モードにして、直ぐに再読み込みをクリックする。

5. 名前と同じ表を真ん中あたりに出し、表の名前の所で右クリック→「検証」を選択すと、

    画面上部はページが、画面下部にはソースコードが表示される。ソースコードでメンバー名        を 内部に含むdivコードの上にカーソルを載せると該当の表全体が青く表示されていること        を確認して右クリック→「コピー」→「コピーセレクター」をクリックして、該当の表のセ        レクター(ID)がクリップボードに保存される。ソースコードは右上の×で閉じる。

6. 編集タブに切り替え、上の名前のコンテンツのところで、クリックして編集メニューを表示       して、「…(html 編集)」をクリック。メンバー名のソースの中のaタグのhref=”………            /”となっている最後の部分で「/」と「”」の間にカーソルをいれて、「Ctrl+V(貼付け)」        を して、先に コピーしたセレクター(ID)を貼り付ける。

7. 閲覧モードにして再読み込みをする。名前をクリックして、表に飛ぶことを確認。

 ※上記「2.~7.」の作業を繰り返し、完成させる。

 

追記

※表の<table>タグに「border-callapse:collapse;」を追加して、全てのセルの罫線の太さ 1px で 揃えた。

※皆さんの意見を聞き表の名前のセルのみ全員同じをつけた。(セルのプロパティ)

 

※「各名前をクリックするとテンプレートに飛びます。」の文章を追加しました。

 

3班「フッター」と「活動の記録」の担当

 「活動の記録」ページの作成に当たり、姉妹塾発足時からのメンバーNさんに「発足から現在までの活動」について纏めていただきました。その折、長くお世話くださいましたFさんにもご協力いただきました。原稿をコピペ(プレーンテキストで貼り付け)しましたが、白紙に文字だけでは寂しく感じられ、画像を挿入し、文書に背景色を付けてみました。

 当日、最後にフッターに関し、「ログイン」ボタンにマウスを置くと文字が消える現象を解決する段階でタイムアップ。翌日には講師の熊谷様が修正してくださっていました。

 「管理メニュー」→「基本設定」→「ヘッター編集」で確認できます。

 

4班「サイドバー」と「メンバーのホームページ」の担当

 サイドバーについて前回Gカレンダー載せましたが、加えて会の予定表と各班のHPとJimdo作成ガイドをリンクしました。 

 

 ナビのメンバーのホームページについては、まだ一件も載っていませんが仮のタイトルで全体のイメージをつくりました。どのようにみなさんから募集するか決まっていません。まず、自分から何か作って載せなければと思っています。 

 

 今回指導頂いたことは、サイドバーの背景が透明なのでわかりやすくするため色を入れる方法です。管理→デザイン→スタイル→編集したい所をクリック→背景色のパレットから指定して完了→×で閉じる。 

                            

📝1月27日(木)

各班より報告があり、質問のある班は熊谷講師からご指導いただきました。

 

※プレーンテキストが出ない時のテクニック。

 カーソルの移動キーを右に左に押す(数回)

 

熊谷講師からテクガイドに皆さんからの質問のあったこと等をいれてあります。(お問合せのページに入れてください。)

 

皆様の熱心な取り組みで、だんだんHPの体をなしてきました。今後が楽しみです。