研修 - ワーキンググループ

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

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

開催実績過去1年の掲載

2023/11/24第8回カスタマイズ
「熊の山荘」ブログの作成　(お問い合わせの作成)
・BusinessPress カスタマイズ
・個人ＨＰ作成の準備
成功を確認。出来ました。
次回からは自分自身のブログの作成に入るので題材を選び構想をしておく。

2023/10/27第7回お問い合わせの完成
①お問い合わせフォームの詳細設定　フォーム部品の削除⇒題名
フォーム部品の追加⇒チェックボックス
控えの送信⇒メール２　題名、メッセージ本文を追加。
②完成後　自分の作成したクマの山荘にオーダーをするメールをした。
成功を確認。出来ました。
次回からは自分自身のブログの作成に入るので題材を選び構想をしておく。

2023/09/29第6回部屋の作成・お問い合わせ
①本文は食事まで終わっていますので、部屋から。見出し、段落、カラム、ギャラリーを挿入
②フッターにメニューを入れる。
③お問い合わせのプラグインを入れる。ただし、PHPを変更すること。
見出し、カラム、画像を挿入

2023/08/25第5回外観の設定・本文の作成
①「熊の山荘」/外観の設定
②テーマ一覧の説明
③サーバーの確保の説明
④wordpressの無料更新の説明
⑤固定ページの作成 　お食事（背景２)

2023/07/28第4回外観の設定　　
①固定ページのホーム作成　　見出し、YouTube、カラム、スライダー挿入
②サイドメニュー作成　　ギャラリーを追加する。
③スライダーの作成　　細かい設定を学ぶ

2023/06/23第3回外観の設定　　
HP構築のためのサーバが前回確保でき、いよいよHP外観の設定にあたった。
サーバは確保できたがログオン情報を忘れてしまう人がいるので、絶対に忘れないユーザ名・パスワードを新たに設定した。
今日はトップページの右半分のサイドバー領域の設定を途中までした。

2023/05/24第2回外観の設定　　
１，テーマの設定
メールアドレス、パスワードを入力してホームページワーキングプレスを立ち上げた。テーマをダウンロード　　
２，外観の設定　ホームページ熊の山荘　食事　固定ページを作成した。

2023/04/28第1回HP概要と準備
URを開きHPとは概要の説明から進めた。https://abi.sakura.ne.jp/hpwg2/
HP作成準備でyahooメールアドレスの取得、確保。
フォルダーの作成、写真のダウンロード、セーフティーアドレスの確保、サーバーの確保の順で進めた。

2023/03/30第12回2022年度まとめ
１．クマの山荘 xfree版サイト作成
２．テーマは「businesspress」
３．重要なプラグイン３つ
４，テーマのカスタマイズ
５，個人のホームページ作成

2023/02/23第11回サーバーとテーマ
１．サーバーとテーマの説明を受けた。いろいろ試してみて自分に合ったテーマを探す方法やダウンロードについての解説。
２．個人のHPの独自サイトを検討･考察をし、不備の修正方法の指導を受けた。
３．次年度2023.4～ 内容について検討。リーダー西野さんに変更する。
　　次年度のHPの進め方について検討をした。

2023/01/26第10回ホームページ作成における質問
①クマの山荘における質問・・・なし
②各自HP作成の進捗状況・・・皆で共有しながら意見を聴く
③無料サーバー、有料サーバーの利用についての説明

2022/12/22第9回(BusinessPress)のカスタマイズ
1.カスタマイズ例 画像のように、フッターにメニューと同じものを設置する。
BusinessPress カスタマイズ…復習
2.12月度　クマの山荘 XFree版 進捗状　
①個人のホームページ作成
②サーバー,ドメイン､テーマなどは自由
③内容は各自､独自のもの。

2022/11/24第8回(BusinessPress)のカスタマイズ
1.カスタマイズ例 画像のように、フッターにメニューと同じものを設置する。
2.カスタマイズ例
① 本文の行間を変更する。
② 見出し段落間を狭く
③ 最近の投稿-アイキャッチ画像-表示の不都合解消
④ ヘッダー部分の高さをスリム
⑤ フッタークレジットを消す

2022/10/27第7回投稿ページ作成
1.お問合せ　復習
2.投稿ページ作成、メニューに追加
3.ブログのサンプル投稿
4.ブログサイドバー設定（投稿日、アイキャッチ画像、カテゴリー）

2022/09/22 第6回お問い合わせフォームの作成
先月にインストールしたComtact Form7お問い合わせフォームを設置する。
フォームの部品の削除（題名）フォームの部品の追加（チェックボックス）
問い合せした方へ問い合せ内容を控えとして送信する（メール2）
テストの為に自分あてにお問い合わせを送信してみる。

2022/08/25 第5回クマの山荘　本文の作成ーお部屋
X-Freeは３ヵ月に一度管理パネルを開けて更新すること。
前回のテーマ「お食事」のページが完成しているかどうか講師に依る確認。
クマの山荘　「お部屋」のページの作成及び講師に依る確認。
お問合せのページの「CONTACT FORM7」を新たにインストール。
次回の講座に備えて、講師に依るお問合せページを作る方法のプレゼテーションがあった。
次回は問い合わせフォームを作成する。掲載する自分の好みの写真を用意する。（大きさは縦1000ｘ横600ピクセル位）

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

HP Workshop(ホームページワークショップ)
メンバーは8名ほど 川口、西野、安部、仙石、小西、山添、郡司、宮元
月替わりで各HP更新者が講師をする。皆が受託HPの更新が出来るよう。
参加できるのはパソ隊会員になります。
各自ZOOMにて13:00～16:00 月1回､原則 第4月曜日
開催日の最新情報は [会員の広場]-[会員用カレンダー] にて確認してください。

開催実績過去1年の掲載

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勉強会での「クマの山荘」についての皆さんのお知恵を拝借
テーマが複雑で困っている、ホームにサイドバーが現れないなど。
解決策：エディター　テンプレート一覧にフロントページのテンプレートがあり、それを削除した。　

2023/7/17 第4回つくばね会HPの構成と更新
１，HPの画面についての説明（ファイルの名前を確認、js html）
２，サイトマップの説明（メニューが変わるときは必ずサイトマップも変更する）
３，更新依頼例として、カレンダーの削除、役員名簿の差し替え、本部事業計画の一部変更を学習する。
４，更新依頼例として、こばんのページを変更する。
　①こばん紹介メッセージを変更
　②住所ぼ欄に定休日追加
　メニュー表の差し替え、文章の変更
　③変更に伴い、nav0.js sitemap.html を変更する

2023/6/26 第3回パソ隊HPの構成･更新について学習
◆投稿(ブログ)に｢ブログ見本｣を使う方法を教えて頂いた。
◆[投稿]-[新規追加]-[プロックを追加]-[すべて表示]-[再利用可能]タブ-[ブログ見本]
◆(※すべて表示の後、「ブロック・パターン・メディア・◇」のタブが表示される。
◇が再利用可能のタブ。)
◆パソ隊ホームページは以前のHTML版からそのまま移行しているので、ブロックは基本[カスタム HTML]になっている。各ページの更新担当者が[カスタム HTML]からブロック形式へ変換をしたページについて講師からアドバイス。
◆アイコンフォントの使い方。コードについての説明。。

2023/5/22 第2回パソ隊HPの構成･更新について学習
◆サーバー　さくらインターネットのスタンダード版を使っている。
◆カスタマイズ 　追加CSSに font-awesome.min hpwg.tab　header.php　
◆サイドバー　「検索」、「トピックス」、「お知らせ」、「最近のブログ」
◆投稿(ブログ)　[プロックを追加]-[すべて表示]-[再利用可能]タブ-[ブログ見本]
◆固定ページ　wordpressのブロックを使って更新の作業ができるようにする。

2023/4/24 第1回23年度はじめに
◆ワークショップの進め方
◆パソ隊HP担当に付いて希望と意見
◆チャットGPTについて
◆西野さんより、①HPWGとHP勉強会の話。
②テーマtwenty twenty-twoでのページの作り方の説明

2023/3/27 第12回一年間のまとめ
◆この1年間にやってきたことを4月から順番に確認した。
①複数サーバーの取得
②WORDPRESSのサイト移行
③ホームページ更新演習（外注担当者による説明と実地）
◆パソ隊のHPの更新及び担当者決定。
◆次年度からワークショップの進め方についての意見交換。

2023/2/27 第11回日常生活困ったときガイド演習
各自のXFREEサイトにインポートした「日常生活困ったときガイド演習」のアドレスを確認
各自ログインし固定ページ「TEST1」を追加
家事支援(市民団体)のリストをコピー貼り付け
リストをグループ化し、グループの追加CSSクラスに　lstfont2 を追加(リストに手のマークをつける)
資料から各団体の表をコピー貼り付け
CSSを修正(79行目にテーブルのCSSを追加)
テーブルの追加CSSクラスに　tbl1h を追加
電話番号、住所、アイコンを追加（フォントアッサム）
リストから各団体の表にジャンプするようリンクを設定

2023/1/23 第10回市民文化講座HP演習
1-1 pre.html　プレ体験のページを更新　
1-2 forme.html　のソースをpre.html　に貼り付ける。。
1-3 プレ体験講座一覧を修正。夜間講座を作成する。
1-4 ikebana.html いけばな草月流のページを修正する。
1-5gallery.html に画像の入れ替える。資料に掲載されている写真から
画像を撮る。保存する。
２．index.html ホーム画面の修正
2-1スライドショーの年号修正、
2-2プレ体験講座を掲載する。
３・その他　tableについての説明

022/12/26 第9回全陶展HP演習
1-1 第12回全陶展多摩支部展2022　①写真を貼り付け。
1-2 第12回全陶展多摩支部展2022　来場御礼　①動画を作成。
1-3 第12回全陶展多摩支部展2022
①写真集(pdf)を編集し、貼り付け。
1.4 サイドバーの変更
２．PHP の概要の説明
３・その他
①我孫子登山倶楽部のＨＰ
②バックアップ方法
③リリース台帳

2022/11/28 第8回つくばね会HP演習
ふれんずのページの「活動状況」を更新、
画像、挨拶文掲載
つくばねギャラリーのふれんずのページ更新
画像、挨拶文掲載
つくばね通信のページを更新
つくばね通信ワード文書編集、PDF作成
上記PDF、画像、コメント掲載
トップページの「新着情報」更新
サイドバーの「更新日時」を変更

2022/10/24 第7回我孫子プラス・ワンHP演習
１）「我孫子プラス・ワン」22年10月佐藤さんカレンダー.pdf
「ニュースレター」への登録。
２）登録プラス・ワン通信第2号.dogx　の「ニュースレター」への登録。
pdfを作成する。docフォルダーの配下に追加する。
news.html の　プラス通信にソースを書く。
３）トップメッセージの変更
４）サイドバーの変更　カレンダー関連の変更、更新日の変更、案内詳細の全面変更。
５）我孫子登山俱楽部の復習及び、写真の入れ方の説明。クラシック設定で写真ギャラリーを入れるやり方の説明。

2022/09/26 第6回あびこ市民活動ネットワークHP演習
１）「NPO法人ふれあい塾あびこ」の令和4年9月の講座を挿入
「EzOCR」を開く、画像のテキスト化する。内容の変更。
トピックス欄変更、新着情報の更新する。terapadを出して、前のを参考に貼り付け、内容を変更する。データーが更新されているかを確認する。
２）「我孫子の文化を守る会」を更新する。
同様に、会報を更新、新着情報更新、トッピクス更新。
それぞれリンク先に飛んでいくかを確認した。

2022/08/22 第5回我孫子登山俱楽部HP演習
各自のXFREEサイトにインポートした 「我孫子登山俱楽部」 のアドレスを確認。
以下更新担当の西野さん・松浦さんに操作の解説をして頂きました。
実習1)投稿ページ　宝篋山の山行記録の作成 投稿一覧/山行見本/新規下書きより投稿ページを追加。山行報告書を元に内容を編集していく。年月日を指定して投稿公開する。
実習2)各人に割りつけられた山行記録の作成（実習1）と同様に割りつけ山行記録の内容を編集していく。

2022/07/25 第4回外注先美手連HP演習
1.　新着情報　index.html を編集
　-　画像と概略を載せる　　-　リンク先も指定する
2.　定点観測　point.html を編集
　-　観測地点の写真を切り取りリサイズ　　-　4枚の写真とコメントを載せる
3.　 啓発事業　lectures.html を編集
　-　タブを一つ追加する　　-　新着情報の詳細を載せる

2022/06/27 第3回外注先手賀沼流域フォーラムHP演習
◆各自のXFREEサイトにインポートした「手賀沼流域フォーラム」のアドレスを確認
◆1.チラシ(表裏2枚のpdfファイル)を「iLovePDF」のサイトで1枚のpdfファイルに結合する。1枚に結合したpdfファイルや必要なjpgファイルをメディアライブラリーに入れる。
2.固定ページ－ホーム　新着情報にブロック(カラム30/70)を追加
30の方に画像とキャプションを入れ、pdfファイルにリンクするように設定する。
70の方にテキストを入れ、当該サイトにリンクするように設定する。
3.固定ページ－全体企画　ブロック(カラム4等分)を追加、
それぞれにメディアライブラリーからチラシのjpgファイルを入れ、pdfファイルにリンクするように設定する。

2022/05/23 第2回ワークショップ　サーバー移行
◆WordPressサイトを別のサーバーに移行(引っ越し)してみる。
以前に作成した共有サーバーhttps://abi.sakura.ne.jp から､自身のXFREEサーバー https://xxxxx.wp.xdomain.jp/ への移行となります。
①サーバー移行のプラグインには、
｢All-in-One WP Migration｣ https://upd.world/wordpress-migration/
｢UpdraftPlus｣　　　https://upd.world/updraftplus-wp-migration/　等があります。
ここでは｢All-in-One WP Migration｣ を用います。
◆ホームページ制作支援サイトのエクスポートファイルの移行のやり方。
ホームページ制作支援でWordPressを用いているサイトの､｢All-in-One WP Migration｣エクスポートファイルを提供いたします。各自のXFREEサイトにインポートする

2022/04/25 第1回ワークショップの始まり
1.ホームページ制作支援担当者を決める
2.パソ隊HP更新担当者の確認と新たな担当者を決める
3.月別に講師役で自分の担当・ｈｐを解説及びブログを書く
4.フリーメールを必要数（３個以上）確保する。セーフティーアドレスをヤフーで簡単に作れる。
5.XFREEのドメインを３個作る。
次までの宿題にWordPress(サーバー)の移行(引っ越し)を各自行う事。

ホームページ勉強会

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

開催実績過去1年の掲載

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