ワーキンググループ

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

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

開催実績過去1年の掲載

2024/9/16 第6回テーマ　wordpressフルサイトテーマを探る
1.　国産のブロックテーマ　５件
　　５件すべてのテーマの違いなど説明、各自好きなテーマを見つける。
2.　日本語対応の国外産の無料ブロックテーマ　５件
　　３件開いてみて使い勝手の良いものを選ぶようにアドバイスを受ける。
3.　問題点
　　①スパムメールが多くて困ります。　ちょいネットカフェやICT講座など
　　　フォームメールに大量のスパムメールが送られてくる。
　　★対策として、フォームを設置しているページの名前を変更する。
　　②フォームメールでgmail　を用いると送信されない。
　　★対策として、メールアドレスにgmail　を使わず、
　　　他のメールアドレスを使用する。例えばYmail など。

2024/8/1 9第5回HP制作支援(あびこプラス･ワン)の学習及びHPWS2024問題点質問」
◎HPワークショップloginについて
　①ユーザーアカウントを間違いないように
　　HPWSサイト投稿ページ「HPWS2024問題点質問など」に一覧を掲載
　②loginをする際には、「ホーム」へ移動し　　https://pasotai.org/login
◎HP制作支援(あびこプラス･ワン)の学習
　①あびこプラス・ワンから更新依頼メール（6月分)
　新規にページ「我孫子市こどもの学習支援ネットワーク」を追加。既存の「プラス・ワン賛助会」利用する
　②あびこプラス・ワンから更新依頼メール（7.8月分)
　依頼内容に基づき順次更新。
◎質問･その他
　PCのフォルダー表示が消えた
　対象フォルダーを右クリック<クイックアクセスにピン止めする

2024/7/15 第4回パソ隊HP「研修会について」
1.画面の上から順にブロック毎の作成の仕方について、html、css、画像の配置などの説明があり、cssの細かいところは川口さんから、追加説明をしていただきました。
2.フリー写真素材のサイトを多種類教えていただき日常生活、ほぼ全分野を網羅する写真が揃っていて、今後何かと役に立ってくれるものと思います。

2024/6/17 第3回パソ隊HPワーキンググルプ作成手順
新しい記事を入れる時、前のデータを複製する。
複製することで追加CSSなどを改めて入れ直す必要がない。
写真を入れているところは2カラムになっている。
左75％、右25％で、左には、段落と表(tbl1 w100)、右には画像を入れている。
チラシを載せる場合、
pdfファイルとjpgファイルを準備する。変換にはilovepdfが便利。　
2カラム(左75％、右25％)にし、左に記事、右にjpgファイルを入れ、リンク先にpdfファイルのurlを入力し、さらにリンクを新しいタブで開くように設定する
アイコンがリンクの色にならない。htmlで指定されている。
→リンクタグの＜a href=””＞と＜/a＞の間にFontAwesomeの＜i＞タグを入れる
追加CSSの意味
→date：日付を揃える機能。日付の後ろには半角スペースを入れること。
→font13：フォントの大きさを指定。(旧HP用なので今はなくてもよい)
CSSと追加CSSの確認方法
→追加CSS：外観→カスタマイズ→詳細設定
→CSS：パソ隊HPでソースを表示しCSSが保存されているurlを開く。
フォトアプリでアイキャッチ画像を作る方法
①｢画像の編集｣アイコンをクリック
②下の方にある｢自由｣をクリック
③2：1(横長)をクリックする
④選択範囲の場所や大きさを調整する。
⑤保存オプションをクリックし、コピーとして保存

2024/5/20 第2回パソ隊HP作成及び障害と復旧
パソ隊ホームページのサーバー内ファイルが全て削除され、怪しいacmailer関連のファイルが幾つか設置されていた。
不正のメルマガが8通ほど発信された。
HPはバックアップから復旧
バックアップの必要性についての話
バックアップのやり方⇒　ブラグイン　backWup で試してみる。
バックアップアーカイブで、ファイルをダウンロード　ZIPのまま保存
パソ隊HP　 PCサロンについて　
昨年度までのパソ隊サロンの上に新たにブロックを使ってPCサロンを作成する。
ブログ見本の説明
ダッシュボード　投稿　ブログ見本が一番上にある。クリックして編集ページ
オプションをクリック　全てのコンテンツをコピー。
新規投稿を追加をクリック　貼り付ける。内容を修正。

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

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フリーでサイトを作る。
③できた方はダッシュボードログイン