ワーキンググループ

ホームページ ワークショップ

趣旨	ウェブ制作の人材育成。（市民団体からのHP作成依頼に対応する）
概要	ウェブページを記述するための言語であるHTML（XHTML）と､表示レイアウトなどの修飾を指定するのためのCSS（スタイルシート）を学びます。 現在のウェブデザインは､文書の構造（HTML）と体裁（CSS）を分離させるという設計思想で制作されています。 そんなに難しいものではなく､仕様（決まり）を若干覚えるくらいでホームページが作れるようになります。

開催実績過去1年の掲載

2024/4/1 第1回HPws2024年度のすすめ方について
1.FC2WordPressでHP作成を実践するので､複数のサーバーを確保しておく。
2.パソ隊のホームページを更新するに当たってバックアップを取っておく。
例：パソ隊サロン_20210331下書きに残す。
3.パソ隊の更新は新メンバーが行うのでパソ隊の形式を整える必要がある。

2024/3/18 第12回ホームページワークショップ2023年度のまとめ
①パソ隊HPの構成･更新について
②FC2ホームページでWordPress
③その他の学習内容
④次年度(2024)HPWSの内容について
内容(案)
名称：ホームページワークショップ
略称：HPWS 又は HPワークショップ
日時：毎月第3月曜日 13:00～(2～3時間程度)
　　　参加者はカレンダーに記入してください。
場所：Zoomミーティング(研修代無し)
対象：HP制作支援及びパソ隊HP更新に携わる方
メンバー：郡司､安部､小西､仙石､西野､山添､宮元､川口
　　　　　大藤､小林､川嶋､笹子､佐藤　(13名)　
内容：HP制作支援の各ホームページの更新について学習
　　　パソ隊HP更新について学習
　　　個人ホームページの制作
　　　フルサイト編集対応のテーマ
　　　ブログ作成の学習(ICT講座用?)
　　　質問､相談等に､皆で対処する
　　　障害対応(バックアップと復帰)
　　　スパムメール対応(Formメール)
　　　生成AIの活用
　　　その他､ホームページに関する事項
*講師(進行役)は､適宜決める。

2024/2/26 第11回フルサイトの説明
①前回の続き。
②質問及び不明な点を検討する。
③各自のHPを見ながら修正する。
④パソ隊HPの担当の決定。勉強会の方と交代する。
⑤請け負っているＨＰ担当者の変更を検討。

2024/1/29 第10回個人HP作成
①新テンプレートの作成 ・外観→エディター→スタイル
今回は　複数のテンプレートを使う　まずは固定(ページ)後でトップ(ページ)
②スタイルの設定
外観→エディター→テンプレート
スタイルブックから　　タイポグラフィ　　色
③幅などの設定 レイアウト
　・幅　1200＝＝＞1000
　・コンテンツ　650＝＝＞1000
　・パッディング　縦　0
　・ブロック間隔　3
④固定ページの作成 固定ページを３個作成
　・ホーム(urlなし)
　・２ページ目(必ず url を指定する事)
　・３ページ目( 〃 )
ナビゲーションの確認
⑤コンテンツ・サイドバーの設定

2023/12/25 第9回疑問・質問及びFC2サーバー
①質問、HTML制作のテーブルの線がおかしくなった。消したくても消えないが、ソースを調べてみても解決策なし。後日検討する。
②FC2サーバーを確保する。FC2でwprdpress が出来るようになったため使用する。来月のワークショップまでにサイトを作っておくこと。またHPの材料も用意する。
③パソ隊HPの保守メンバー変更について。各自勉強会のメンバーに変更することに了解した。
全陶展のHP作成の話。PHPを使い画像を作成するので、西野さんがしばらく担当する。
④先日のパソ隊HPの障害と復旧について。
各自のHPも障害が起きたときに、バックアップを取っておくと安心（ハードディスク）

2023/11/20 第8回手賀沼流域フォーラムの更新について
固定ページ　ホーム２０２３に事業案内を追加（カラム３使用）
内容を入力（見出しH2、画像、段落を使用）
続きを読む・・・にリンクを貼る
イベント作成　各地域企画の内容を入力（カラム２）
新着情報を作成　複製を使う
設定から表示設定で検索エンジンをOFFにする。

2023/10/23 第7回手賀沼流域フォーラ２０２３－１実習
各自の「手賀沼流域フォーラム」のサイトにログイン
固定ページ追加「ホーム2023」・・・新着情報を作成
固定ページ追加「全体企画2023」・・・イベント記事を作成
外観→メニュー・・・作った固定ページをメニューに追加
カスタムHTMLをブログからコピーペーストすると、ダブルクォーテーションが全角の“”になり、プレビューで確認すると正しく表示されないのが分かる。半角の””に修正して確認。
その他、カラムの挿入、カラムのサイズ指定、画像の挿入、画像のサイズ指定、リンクの挿入、CSSの追加など。

2023/9/25 第6回HTMLテンプレートとエディター
１，-Visual Studio Code-
Microsoftの提供するVisual Studio Code(VSCode)は､2015年の最初のリリースから､今では開発用エディタの定番の座を占めるまでになりました。無償で使えることも大きいですが､何よりエディタとしての使いやすさ､そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり､利用の領域を拡げられたりすることも大きいでしょう。
２，-最新HTMLテンプレート-
HTMLテンプレートとは､HTML･CSS･画像などのランディングページに必要なファイルが一式セットになっているWebサイト制作テンプレートのことです。 HTMLとCSSの知識はある程度必要となりますが､カスタマイズの自由度が高いのが特徴です。オリジナリティのあるランディングページを制作できます。
*ランディングページ(Landing Page)とは､検索結果などを経由して訪問者が最初にアクセスするページのことです。訪問者がホームページに着地するイメージからこの名前がつきました。

2023/8/28 第5回WPでブロック化
１，パソ隊のHPスライダーの使い方についての説明
２，HPWG勉強会での「クマの山荘」についての皆さんのお知恵を拝借
テーマが複雑で困っている、ホームにサイドバーが現れないなど。
解決策：エディター　テンプレート一覧にフロントページのテンプレートがあり、それを削除した。　

GIMP ワーキンググループ

参加できるのはパソ隊会員になります。
あびこ市民活動ステーション大会議室 13:00～16:00 月1回､原則第3金曜日
開催日の最新情報は [会員の広場]-[会員用カレンダー] にて確認してください。

目的	フリーソフトGIMPのテクニックレベルアップ。 将来､HP､ポスター､チラシなどパソ隊への制作要望に応える。
内容	基本的には､月1回(第3金曜日）ステーションAで実施。研修会方式で進めます。

GIMP W.G.作品

GIMPのW.G.メンバーによる作品を紹介します。

:::「輝く文字を作る」::: R5/02

ネットからフォントをダウンロードして輝く文字を作ってみました。

開催実績過去1年の掲載

2024/3/22第12回 春の桜の花を描く
1.シェイプエディターを開き
5角形を囲むように5角形の外側に円を描く
パスツールを使って桜の花びら1片を作り色を付ける
1片の花びらを（コピー貼り付け）で5枚の花びらができる。
描画色を黄色にして雄しべ12本を描く
桜の花を作り、雄しべも作り、桜の花が完成。
2.桜の花をちりばめ、枝と背景に青空を塗る
ブラシの桜を選び桜が咲いている様に左右バランスよく散布する
枝をブラシで描画する
背景に青空をクラデーションで塗る
桜の花びらを散らし、フレアーを付けて、文字（春）を入れて完成

2024/2/16第11回 サマービーチの作成
1.パスツールでヤシの木を描く
2.ヤシの葉を楕円ツールで描く
3.砂浜に星型で「ひとで」を描き影を作る
4.レンズフレアーで太陽を描き「Summer　Beach」と文字を入力して完成
【水彩 油絵】写真を絵画のような見た目に加工する

2024/1/19第10回 よく使うツールの使い方
楕円ツールで空に雲を描く
ブラシツールで海に雲の映り込みを描く
ブラシツールで浜辺を描く
パスツールでカモメを描く

2023/12/08第9回 Clipchampで動画編集
・Clipchampを使った画面の録画
・PowerPointを使った画像の録画
・その他

2023/11/17第8回Clipdorop
ユーチュブ動画　いなわくTV　初心者のWindowsアプリ（Clip Champ)の使い方を見ながら研修をすすめました。
資料のあけぼの山農業公園の　静止画　動画の編集です。
アプリ　Clip Champを起動。
取り込んだ動画などを　➀切り取る　②つなぐ　③　テキストを入れ効果加工
④グラフィクスの操作　⑤切り替え効果　⑥BGM　⑦保存

2023/10/20第7回Clipdorop　便利AI詰め合わせサイト
Artbreeder写真を合成できるAI
Runway写真に命を吹き込むAI
Cleanup写真からオブジェクトなどを除去
Removebackground 背景を除去
Imageupscalerノイズを除去、補正
Uncrop写真を任意の形式に拡張
relight美しい光でリライトなどAIを使っての画像編集を教えていただいた。

2023/9/15第6回中止

2023/8/18第5回額縁作りの基本
額縁の枠をつくる。
・　イラストを入れる。
・　同じイラストを複数入れる。
・　イラストの周りを透明にする。
・　きらめきを入れる。
・　イベント名と開催日をいれる。（テキスト挿入例）・　保存

2023/7/21第4回Ⅶ 背景エフェクト完成
①文字にきらめきを付け、ぼかし具合を調整
②鏡像反転ツールを使いオリジナルの文字の下に文字の反転を作った。
③遠近法ツールで左右拡大しふくらみを作った。
④上下の文字の間に楕円のステージを作り、光とグラデーションで、
暗闇に浮かんだ文字が幻想的な作品に仕上がりました。

2023/6/16第3回GIMPテキストにメタリック効果を付ける
＊GIMPの文字にゴールド、メタリックグラデーション、パステルトーンの色を付け、　　　　　　　　画像に凸凹立体的に表現しました。
＊グラデーションの使い方の方法を習得しました。

2023/5/19第2回バンプマップの使用方法
バンプマップは、文字・画像に起伏をつけて、立体的に表現するツール.
＊２０２１年７月講習の復習です。
＊詳細に書かれた講師のテキストと今回参加の前年度講師のサポートのお陰で、全員見事に完成出来ました。
＊ポスター作成時に使ってみたいツールです。

2023/4/21第1回ハロウィンのカードを作ろう
１　パーツを自分で作って、配置しながら 出来上がっていく過程が面白い。
　パソコンに登録されていないホントの カードへの書き込み要領
２　音声入力
　ワンドライブからディクテーションの設定要領。
（パソコンの機種によっては、officeにディクテーションがセットされている）　　

2023/3/17第10回オブジェクトにマップ
１　オブジェクトにマップ（円柱）
　イ、すべてのタブ設定が終了してからOKをクリックする。
　ロ、円柱用の画像がひとつだと、円周に貼り付けられるので、横に伸びた画像に
　　　なってしまうため、複数の画像にしておく。
２　オブジェクトにマップ（直方体）
　　6面に貼り付ける画像のサイズを同サイズにしておく。
３　前２の直方体の応用作品例
４　前１の円柱の応用作品例

2023/2/17第9回輝く文字を作る
１.フォントを外部サイトから取り込む
　検索ボックスに「font meme」と入力すると色々なフォントが用意されているサイトが開きます。好みのフォントが探せたら保存します。
２．画像に文字をドロップ
　Gimpを起動してサイトから探したフォントと画像を挿入します。
３.ゴールドの色をつける
　フォントが白色なのでゴールドの色に変えます。
４.つなぎ目の修整
　パターンを並べての色付けなのでブラシツールでパターンのつなぎ目があったら、にじみツールで内側から外側に向かってなぞりつなぎ目を目立たないようにします。
５.立体的な文字
　フィルター⇒照明と投影→ドロップシャドウ（レガシー）から立体文字にします。　　　
6.きらめきを入れる
　ブラシダイヤログにして「新しいブラシを作成」からキラキラを作成し、文字の上をキラキラで飾ります。
7.ファイルの保存
　名前を付けてエクスポート.Pngファイルで保存します。

ホームページ勉強会2024

趣旨	ウェブ制作の人材育成。（市民団体からのHP作成依頼に対応する）
概要	ホームページWG講座を卒業した方が対象です。 個人ホームページの更新やパソコン楽しみ隊の HPの保守更新を目指します。
内容	市民活動ステーションで実施。研修会方式で進めます。

開催実績過去1年の掲載

2024/3/14個人のＨＰの鑑賞
各個人のＨＰ鑑賞および個別指導
研修者皆様は、きれいなＨＰを作成されていました。

2024/2/12個人のＨＰ完成に向けて
1.Wordpress6.3はサイトのトップページやヘッタ―、フッター、サイドバーを含めたすべてをブロックで組み立てられるようになった。
2.ブロックのテーマはTwaentyTwenty-Threeはテンプレート、テンプレートパーツを使い自分らしいHPを作る。
3.。テキスト、リンク、見出し、キャプション、ボタンの色や大きさ等を設定する。
4.個人のHPの不明な点を個人的に指導。

2024/1/24個人のHP充実
自分のＨＰを作成する。
2.1 新テンプレートの作成
2.2 スタイルの
2.3 幅などの設定
2.4 固定ページの作成
2.5 コンテンツ・サイドバーの設定
2.6 ヘッダー・フッターの変更
2.7 カバーブロック・コンテンツの追加＝＝＞トップページのHP
2.8 ２ページ以降のHP
　　①アイキャッチ画像の追加

2023/12/15個人のHP充実
①新テンプレートの作成 ・外観→エディター→スタイル
・今回は　複数のテンプレートを使ってスタイルの設定
・外観→エディター→テンプレート
・スタイルブックからタイポグラフィ　色　幅などの設定 ・コンテンツ　650＝＝＞1000
②固定ページの作成
コンテンツ・サイドバーの設定
　・ホーム(urlなし)　　・２ページ目(urlあり)　　・３ページ目(urlあり)
　　カラムを挿入し、　左カラムにコンテンツ　　右カラムにサイドバー
　・リスト表示が便利
③ヘッダー・フッターの変更
テンプレートパーツの標準ヘッダーの更新・ナビゲーションの追加
テンプレートパーツの標準フッターの更新・ナビゲーションの追加
※リストビューが便利。
④カバーブロック・コンテンツの追加＝＝＞トップページのHP
テンプレートパーツのヘッダー２を新規作成
　・トップページ用ヘッダー　　・ロゴの追加　　・サイトのタイトルの追加
カバーブロックを追加し、その中で画像を追加する。

2023/11/27個人のHP充実
①既に作成の「熊の山荘」をより美形に見やすく（前回の復習）
②個人のHPのテーマにTwenty Twenty-Threeを導入　FC2のサーバーの確保、WordPressの更新、テーマTwenty Twenty-Threeの導入に際しての注意点：Create Block Theme及びUpdraftPlusのインストール　などを参加者の足並みを揃えて進行
③次会はTwenty Twenty-Three編集の技をご教示下さる予定、又今回までの不明点は講師にメールで質問可能という有り難いご助言を頂いた。

2023/10/30「熊の山荘ＨＰ」詳細な外観変更
1、外観変更は外観⇒エディター⇒テンプレート⇒サイ　 ト１⇒ツールから変更する
２、「枠線の角丸」、「背景色・線の色」、「余白・高さ」、「文字の色・文字の大きさ」等々を変えていきました。益々自分カラーのHPの完成間近です。
３、次回は「FC2」を使って、「テーマ2023」で各自のHPを作成する。

2023/09/18 「熊の山荘ＨＰ」より美形に
1.ＨＰの内容はほぼ登録できたので、より美形にした。
2.WordPress 5.8 から、 フルサイト編集機能が新規リリースされた。
この中のスタイル設定機能の勉強をした。
3.このスタイルは各自好きなように設定すれば良いとの事で、各自で工夫した。
4.受講者6名全員が同一に達成できた。

2023/08/30 第5回 本文の作成ーお問い合わせ
Contact Form 7[今すぐインストール]をクリック
①お問い合わせフォームを作成。
②お問い合わせフォームの設置。
③お問い合わせフォームの詳細設定
[メール]タブの該当箇所も削除､項目修正をします。
[題名]→[_site_title] “お問い合わせ”
[メッセージ本文]→題名: [your-subject] は削除
　　　　　 追加→カテゴリー: [checkbox-428]
④フォーム部品の追加
控えの送信
問合せをした方へ､問合せ内容を控えとして送信してあげるのが親切です。
[メール]タブの下方

2023/07/17 第4回 外観の設定
固定ページのホーム画面作成
①見出しや段落やカラムを使い文章やYouTubeを挿入する。
②管理画面からSmart Sliderを使いスライドを作成する。
③Smart　Sliderの画像のサイズ、操作、サムネイル、自動再生等を設定する。
固定ページのお食事のページ作成
①段落や見出しを使い文章を入れていく。
②ブロックのメディアとテキストを使い、文章と画像を挿入する。
③ブロックのギャラリーを選択し、14個の画像を挿入する。

2023/06/29 第3回 「新熊の山荘」の外観設定作成
①ホームページの表示設定
固定ページにチェック（ホームページ：ホーム、投稿ページ：ブログ）
②４つの固定ページ作成：アイキャッチ画像を挿入
③ロゴ・メニューの作成、メニューの順序変更　外観のエディターからテンプレートパーツのヘッダー　ロゴ挿入サイズ変更、メニューの編集
④サイドバーの作成（テンプレートとして）
外観のエディター→デザイン→テンプレート→サイドバーつき
カラム（2：1）を選択→本文で投稿コンテンツを選択、サイドバーの作成→見出し・連絡先　・お友達　・日本熊協会　

2023/05/4 第2回 「新クマの山荘」作成
①前回の復習　前回アドレス取っていない人中心にアドレスの取得を目指す。Xフリーでサイトを作るーサーバーの確保。
②テーマ　twenty twenty-twoを使う。
③固定ページを作成、ホーム・お食事・お部屋・ブログ・お問い合わせ
④それぞれにアイキャッチ画像を挿入する。

2023/04/13 第1回 Yahoo メールアドレスの確保
①Yahoo メールアドレスの確保
既にとってある人はそれを利用しますので、この準備は必要ありません。
講座では、セーフティーアドレスの作成から勉強を開始します。
②Xフリーでサイトを作る。
③できた方はダッシュボードログイン