ワーキンググループ
ホームページ ワーキンググループ

ホームページは初めての方が対象になります、
WordPress を使用して、個人HPを作成出来る事を目指します。
あびこ市民活動ステーション大会議室 13:00~16:00 月1回、
原則 第4木曜日 13~16時 市民活動ステーション大会議室 で行います。
開催日の最新情報は [会員の広場]-[会員用カレンダー] にて確認してください。
| 趣旨 | ウェブ制作の人材育成。(市民団体からのHP作成依頼に対応する) |
| 概要 | ウェブページを記述するための言語であるHTML(XHTML)と、表示レイアウトなどの修飾を指定するのためのCSS(スタイルシート)を学びます。 現在のウェブデザインは、文書の構造(HTML)と体裁(CSS)を分離させるという設計思想で制作されています。 そんなに難しいものではなく、仕様(決まり)を若干覚えるくらいでホームページが作れるようになります。 |
開催実績過去1年の掲載
2026/2/26第11回テーマ :ホームページについて
(1)ホームページWG研修会メンバーの作品でコマーシャルの入っているものがある
時々FC2でログインする必要があります。
(2)ホーム(トップページ)=ホームに載せるべき基本構成
1.キャッチコピー(短い一言)例:地域に寄り添う〇〇サービス、
初心者でも安心 の〇〇教室など
2.簡単な紹介文(2〜3行) 例:我孫子市中心に、地域密着で〇〇を行っています
3.主なサービス・特徴(箇条書き)例:専門スタッフ、サポート充実、
オンライン予約可能など
4.行動ボタン(CTA) 例:『お問い合わせ』『サービスを見る』『予約する』など
5.次に何をしてほしいかを示すボタン
(3)Blogで下記の言葉が入っているものがある
Mindblown: a blog about philosophy.
外観⇒ エディタ テンプレート ⇒ブログホーム で削除
(4)文章の中に画像を入れる、カラムを使わずに行うと、
画像のように文字が画像 に回り込みます
(5)次年度 森の熊さん HTML言語で作成する。
HTML言語の学習を行う。
2026/1/22第10回テーマ :Word pressのスタイル
1.アイコンの挿入 名前・大きさ・色の変更
2.アニメ-ションの設定 カスタムHTML
3.ブログの入れ方 投稿→新規追加→アイキャッチ画像の挿入
4.動画の挿入 メディアライブラリから動画をアップロード
5.YouTubeの埋め込み youtu.be:uの後ろに.が入ると広告が入らない
(著作権があるから気を付けること)
2025/12/25第9回テーマ :アイコン、ドロップキャップ、見出し装飾をやってみる
1.練習用固定ページに文章と画像を入れる カラム3:1(2分割)
2.左のカラムに文章を入れてみましょう
3.右のカラムに画像をいれる・・・添付した画像を2枚使う
4.ドロップキャップを入れる・・・style を入れる
5.カスタムHTMLを使って貼り付ける
2025/11/27 第8回テーマ :アニメーション
1.各自のHPのアニメーションを使用したい固定ヘージに、ブロックを追加し
カスタムhtmlを選ぶ
2.アニメーションを使用したい画面を選び、高度な設定、追加cssに
anileft,aniright,anidown,aniback,aniupなどアニメーションの種類を選び
記載
3.段落がメディアとテキストを選択したブロックでは、画像をアニメーション
にはできない。
後半:FC2のサイトを作り、設定
1.キャチフレーズを変更
2.表示の設定 ホームページの表示を固定ページ管理者とする
2025/10/23 第7回テーマ :前半:テンプレートを使ってHPを作成する
1.先月の復習
2.マップをHTMLで埋め込む
3.スライダーの画像変更の宿題を確認
4.その他画像を変更等
5.後半:各自のHPを3ヶ月間以上更新をしないとHPに宣伝の画像が入った場合
の削除方法を学ぶ。FC2からログインする。
6.ログイン出来ない場合はパスワード変更の手続きをする。
2025/9/25 第6回テーマ :前回の練習問題1 htmlを練習してみよう!<ベースファイルを修正し て、以下の装飾を実施する>
1.修正内容「ダルメシアン」部分を<hl>タグで囲む
2.「 模様が特徴の犬、他の写真もぜひご覧ください。」部分を<p>タグで囲む
3.文書中の「他の写真」にhttps://…….宛てにリンクを貼る
4.「images」 フォルダーにある「dog.jpg」という画像を表示する
5.画像のalt属性は「ダルメシアンの写真」とする
6.「テンプレートホームページを使ってパソコン楽しみ隊のホームページを作る」
2025/8/28 第5回テーマ :テンプレートを使ってHPを作成する。
1.先月に続き、テンプレートを使ってHPを作成する。
2.Visual Studio Codeを開いて、「テンプレート内容変更メモ」を使って文章を変えていく。
3.「コンテナstyle」によりコンテナ表示にする。
2025/7/24 第4回テーマ HTMLで作成する練習とテンプレート
1.先月の復習
2.VSコード作成
3.ブログ作成の手順
4.初心者向けテンプレートのコードの作成
5.index.html について学習
6.パソコン楽しみ隊のホームぺージを練習として作ってみる
2025/6/26 第3回テーマ HTML基礎練習
1.ホームページをHTML言語で作成する
2.VSコードのインストール
3.VSコードの日本語化
4.VSコードにHTML言語を入力する
5.実行
2025/5/22 第2回テーマ 新固定ページの作り方及びHTMLの基礎
既存のHPを使い新規テンプレートを新固定ページとして作る
今までは削除していたパターンを使用して固定ページを作る
ツールバーでカラムを挿入し、2カラムに分けてコンテンツとサイドバーを作る
ダッシュボードに戻り固定ページを表示させて、設定でテンプレ―トを入れ替える
HTMLの勉強の為のテキストエディタ―を使い基本の文字の装飾等を学ぶ
2025/4/24 第1回テーマ wordpress復習及び各自のHP修正
1,FC2を開く ログイン wordpress更新 テーマTT3
2,[スタイル作成][固定ページ作成][テンプレート作成]
固定ページをつくる 3つ
サイドメニュ-作成 アイキャッチ画像 タイトルを入れる
コンテンツを作成(カラム→スタイル→ブロッグの間隔を調整)
サイドバーを作成(カレンダー等挿入)
メニュ-作成・固定ページを増やす
Smart slider3の挿入・設定・操作方法
作成したら保存を忘れず行う
ホームページ ワークショップ

HP Workshop(ホームページワークショップ)
メンバーは16名ほど 川口他 皆が受託HPの更新が出来るようになることを目指す。意見交換等でスキルを磨く。
参加できるのはパソ隊会員になります。
各自ZOOMにて13:00~16:00 月1回、原則 第3月曜日
開催日の最新情報は [会員の広場]-[会員用カレンダー] にて確認してください。
| 趣旨 | ウェブ制作の人材育成。(市民団体からのHP作成依頼に対応する) |
| 概要 | ウェブページを記述するための言語であるHTML(XHTML)と、表示レイアウトなどの修飾を指定するのためのCSS(スタイルシート)を学びます。 現在のウェブデザインは、文書の構造(HTML)と体裁(CSS)を分離させるという設計思想で制作されています。 そんなに難しいものではなく、仕様(決まり)を若干覚えるくらいでホームページが作れるようになります。 |
開催実績過去1年の掲載
2026/03/16第12回 年度のまとめ、新年度の進め方
1.2026年度ホームページ制作支援担当者の確認
2.2026年度パソ隊HP更新担当者の確認
3.2026年度WSの進め方
2025年度と同様の進め方とする。
各月の担当者を決めて制作支援しているホームペー ジ及び各自制作のWordPress
サイトを題材に報告する。
4.HPWS2025問題点質問など
・更新したファイル(html、pdf等)が反映されず以前のファイルが表示される問題へ の対応
・WordPress制作でのCopilotの利用法
・「我孫子の景観を育てる会」へホームページのリニューアルデザイン募集
2026/02/16第11回 あびこプラス・ワンの学習 「小田城の歴史」制作記(大藤)
1.あびこプラスワンHPでカレンダーを結合するやり方
2.localというHP作成サイトを紹介
wordpresはすぐにアップされてしまうので、練習ができない。これはサーバーに直結していないため、自由に修正したりできる。とても便利とのこと。ただし自分のPCがサーバーになる可能性があり、保存してあるファイルが流失する可能性もあり、注意する
3.WS2025問題点質問など
◎Chromeでついにタブの分割がサポート
◎おすすめのテーマ Arkhe(アルケー)
2026/01/26第10回 パソ隊HP更新の学習、絞りの世界」制作記(川嶋)
1.タイトルが左寄りになっていたのを、修正
段落を使用していたが、見出しに変更し、中央寄せに変更して解決
写真と文のバランスを修正
写真が小さいので、カラムを50パーセントずつに変更
2.ブログの作成
投稿→タイトルはブログ→アイキャッチ画像、段落で分を挿入 また
は、メディアとテキストを使用
3.WS2025問題点質問など
◎カレンダーをクリックしたときに、2か月分まとめて表示するためのPDF作成法
I LOVE PDFの結合機能を使用し作成
◎写真のファイル名を長すぎると、バックアップや復元で失敗することがある
2025/12/15第9回 パソ隊HP更新の学習、「家庭菜園」他制作記(小林)
1,小林さんからの質問
キャッシュが出る。対策は? Yahooメールのセーフティーアドレスがなくなった。
テーマについて メガニューを使っているテーマは消す他
2,WS2025問題点質問など
◎ファーストビューのポイント 第一印象を決める部分 目的を伝える CTA(行動喚起)を配置 シンプルでわかりやすいデザイン
◎ファーストビューが優れているサイト事例 トヨタ、ユニクロ、apple、スターバックス Airbnb などを参考にするとよい
2025/11/17第8回 パソ隊HP更新の学習、担当は佐藤さん「異物分析」制作
1,異物分析とは
製品や製造工程で意図せず混入した異物を特定し、その原因を究明する分析手法
異物分析の目的 原因究明 リスト 品質保証 クレーム対応 製造工程の改善
異物分析の手順 観察 元素分析 有機物分析
2,異物分析は(Word Press) (twentytwenty-five)を使用タイトルがなぜか出ない。
皆が智恵を出しタイトルが出る様になった。
2025/10/20第7回 テーマ:ホームページの学習(担当はKさん)
1.美手連の更新で図鑑や写真集の更新等
2.我孫子登山クラブ保守サポート
3.KさんのHPの小さい旅製作記
4.FFFTPソフトの更新時期についての質問
5.ギャラリーの写真の編集方法
2025/9/15第6回 テーマ:我孫子市民文化講座のWordPress移行(郡司様)
1.我孫子市民文化講座の 現行HTML版から
WordPress移行への移行の方法の説明
2.HTML版の「令和7年度市民文化講座生募集」要項(10項目)を10行×2列の
テーブルで再現。
3.Googleフォームの活用
申込みフォームをGoogleフォームに変更。
回答はExcel形式で保存可能。
Googleフォームを固定ページに表示する方法を学習できました。
2025/8/18第5回 テーマ:最近の学習
質疑応答
Q.既存のHPをFC2へ移行したが、ページが消滅している
→作業ミスによるものであり、メニュー、ページ共に復元されて解決
・ファイル名は原則として半角英数字にて。移行などの際にエラーになることがある
HP福島いいとこめぐり
・フルサイト編集を理解出来ていないため、手こずっている
・全画面で表示されているページと画面表示が小さいページとがある
→異なるテンプレートを使用しているためが原因と思われる
・全画面表示のテンプレートを変更などで解決
AIで作るHP
・配置などAIで作成されたまま
メニューからページが正しく表示されない
→HTMLを変更する
AIRA のHP更新
AIRAのスタッフが更新してくださるので、現在はあまり更新がありません
その他
✕フリーが8月末で使用出来なくなるのでサイトを継続される方は順次移行をお勧めします
2025/7/21第4回 テーマ:ホームページ更新作業の体験談
1.スパムメール対策について
2.つくばね会HP
3.あびこ市民ネットワークHP
4.ffftp接続の問題点
更新作業中に思わぬ画面が現れて困惑することは誰もが体験することではありますが、山添さんがご自分で何とかなさろうと、時間をかけて努力なさったお話には心うたれました。
2025/6/16 第3回 テーマ:「フルサイト編集」の学習+「新ミニ奥多摩の四季」制作、
質問疑問
1.フルサイト編集のサイトとフルサイト編集でないサイト例の解説
2.フルサイト編集とは
クラシックエディター>ブロックエディター>サイトエディタ(フルサイト編集)
ブロックエディターで編集できる範囲が広がった。
3.WordPress6.8 と Twenty Twenty-Fiveの説明とYouTubeの紹介
4.パターンの利用(非同期パターン、同期パターン)
5.「ミニ奥多摩の四季」制作記(テーマ:Twenty Twenty-Three)
6.参考資料等の紹介
・HPの書き方について(段落等の文章)
インデント(1文字目の空白)はいれない。
Webサイトの文章において、英数字は半角で統一するのが一般的なルール。
文章は簡潔に纏める。
パソ隊のブログについて
ブログの一覧で研修会名の下に表示される数行の文章は段落から引用される。
中身の濃い内容の研修会でした。
2025/5/19 第2回テーマ:生成AIでホームページ作成
1.Copilot やGeminiを使って質問して答えを得る。
2.出てきたコードをテキストエディタにコピペする。
index.html と style.css として保存する。
3.パソ隊HP更新 ワーキンググループの作成を検討
古い情報のブロックの削除のやり方を学ぶ
4.特別なホームページ作成支援のHPについてのお願い。
①バックアップを取る。
②お問合せについてはGoogle フォームを使うと良い
5.質問等 回復ドライブが使えないなどの質問があった。
2025/4/14 第1回4月度のテーマ:新年度のHPWS研修会のすすめ方
HPワークショップは2022年4月開始から5年目にはいったそうです。新年度にあたってHPWS運営についてのお話が講師からありました。5月からは各受託サイトの担当者が月ごとHPWSの担当(進行)を行い、担当者が代わっても更新業務ができることが目的です。
1.2024年度はFC2WordPressの学習(フルサイトテーマ)でしたので、今年度は一段とhtmlで作っているホームページのWordPress移行が進むと思われます。
2.新しい情報
WordPressで作られたサイトかを調べる
WordPressサイトがどのテーマで作られているかをしらべるサイトを紹介されました。
3.WordPressサイトの画像軽量
画像形式は主にjpeg,pngなどがあるが、WebP(ウェッピー),AVIF(エイビフ)といった軽量フォーマットの使い方を実践された。画像を軽くするとホームページが軽くなりサクサクと開くことができる利点がある。
4.HPWSに参加して4年も経ったのですね…いつも自分のサイトことで精一杯で、他のサイトについてみんな目的や用途に相応しい出来上がりなので感心しているところです。翻訳ソフトや画像圧縮など、新しい情報がどのように使ったら映えるサイトになるのか楽しみです。
GIMP ワーキンググループ

GIMP(GNU Image Manipulation Program)とは、オープンソースで開発されているフリーの画像編集・加工ソフトウェアです。 読みはギンプ、あるいはジンプ。
フリーの画像処理ソフトとしては高機能を誇り、数々の有料ソフトと比較しても遜色ないと言われています。
参加できるのはパソ隊会員になります。
あびこ市民活動ステーション大会議室 13:00~16:00 月1回、原則第3金曜日
開催日の最新情報は [会員の広場]-[会員用カレンダー] にて確認してください。
| 目的 | フリーソフトGIMPのテクニックレベルアップ。 将来、HP、ポスター、チラシなどパソ隊への制作要望に応える。 |
| 内容 | 基本的には、月1回(第3金曜日)ステーションAで実施。研修会方式で進めます。 |
GIMP W.G.作品
GIMPのW.G.メンバーによる作品を紹介します。
:::「輝く文字を作る」::: R5/02
ネットからフォントをダウンロードして輝く文字を作ってみました。
:::「水晶玉と水玉」::: R4/11
水晶玉や水玉に映りこむ景色を作ってみました。
開催実績過去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回バンプマップの使用方法
バンプマップは、文字・画像に起伏をつけて、立体的に表現するツール.
*2021年7月講習の復習です。
*詳細に書かれた講師のテキストと今回参加の前年度講師のサポートのお陰で、全員見事に完成出来ました。
*ポスター作成時に使ってみたいツールです。
2023/4/21 第1回ハロウィンのカードを作ろう
1. パーツを自分で作って、配置しながら 出来上がっていく過程が面白い。
パソコンに登録されていないホントの カードへの書き込み要領
2 .音声入力
ワンドライブからディクテーションの設定要領。
(パソコンの機種によっては、officeにディクテーションがセットされている)
2023/3/17 第10回オブジェクトにマップ
1.オブジェクトにマップ(円柱)
イ、すべてのタブ設定が終了してからOKをクリックする。
ロ、円柱用の画像がひとつだと、円周に貼り付けられるので、横に伸びた画像になってしまうため、複数の画像にしておく。
2.オブジェクトにマップ(直方体)
6面に貼り付ける画像のサイズを同サイズにしておく。
3.前2.の直方体の応用作品例
4.前1.の円柱の応用作品例
2023/2/17 第9回輝く文字を作る
1.フォントを外部サイトから取り込む
検索ボックスに「font meme」と入力すると色々なフォントが用意されているサイトが開きます。好みのフォントが探せたら保存します。
2.画像に文字をドロップ
Gimpを起動してサイトから探したフォントと画像を挿入します。
3.ゴールドの色をつける
フォントが白色なのでゴールドの色に変えます。
4.つなぎ目の修整
パターンを並べての色付けなのでブラシツールでパターンのつなぎ目があったら、にじみツールで内側から外側に向かってなぞりつなぎ目を目立たないようにします。
5.立体的な文字
フィルター⇒照明と投影→ドロップシャドウ(レガシー)から立体文字にします。
6.きらめきを入れる
ブラシダイヤログにして「新しいブラシを作成」からキラキラを作成し、文字の上をキラキラで飾ります。
7.ファイルの保存
名前を付けてエクスポート.Pngファイルで保存します。




