JA水郷つくばパソコン研究会ブログ

JA水郷つくばパソコン研究会ブログ JA水郷つくばパソコン研究会ホーム /ミュージックプロムナード /JA水郷つくばホーム

FACEBOOK /INSTAGRAM

８月初めこの時期になると古代米の栽培グループが「カカシ」を作ってきました。今年も小学生くらいの親子連れ１５組くらいで作業をしていました。

DSC_1262B

index.htmlのファイルを編集2回目です。
今回は、20枚あるの写真説明を書きこんでみましょう。

前回の編集部分より下の行になります。

 <section class="up">


<div id="gallery" class="bg2">

<section class="up">

<h2>GALLERY<span>作品集</span></h2>
<p class="c">６月の東京深川周辺</p>

※作品集や6月の東京深川周辺なども自分なりに書き直します。

<div class="list-container">

<div class="list">
<div>
<a href="sample_photo/1.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/1.jpg" alt="">
</a>
</div>
</div>

※写真は、1.jpg、2.jpgと20までありますが、"タイトルをここに入れます"の”　”の間に入れます。
　20枚目まで説明を書き込んだらファイルを保存して、ブラウザで確認します。

<div class="list">
<a href="sample_photo/2.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/2.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/3.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/3.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/4.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/4.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/5.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/5.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/6.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/6.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/7.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/7.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/8.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/8.jpg" alt="">
</a>
</div>

<div class="list">
<div>
<a href="sample_photo/9.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/9.jpg" alt="">
</a>
</div>
</div>

<div class="list">
<a href="sample_photo/10.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/10.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/11.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/11.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/12.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/12.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/13.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/13.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/14.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/14.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/15.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/15.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/16.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/16.jpg" alt="">
</a>
</div>


<div class="list">
<a href="sample_photo/17.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/17.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/18.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/18.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/19.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/19.jpg" alt="">
</a>
</div>

<div class="list">
<a href="sample_photo/20.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<img src="sample_photo/20.jpg" alt="">
</a>
</div>

</div>
<!--/.list-container-->

</section>

</div>
<!--/#gallery-->

<section class="up">

</section>
※以上、<section> から </section>までの編集でした。

皆さんこんにちは。

今回はindex.htmlを編集してみたいと思います。

研究会発足当時はホームページビルダーのソフトを使っていましたが
今はhtmlファイルをエディターで編集することを教えています。
お渡ししたソースを、ホームページビルダーで編集すると形が崩れる場合が
ありますので、Notepad++で編集することをお勧めします。

folder1


１．上の画像のindex等ファイルを開きます。
　　①ファイル名にカーソルを当て、右クリックで・・・プログラムから開く

　　　　　　グーグルクロームorMSエッジ

　　②もう一度、ファイル名にカーソルを当て、右クリックで・・・プログラムから開く

　　　　　　Notepad++　で開きます。（Notepad++のダウンロード）

　　③ブラウザで開いておくのは、編集して保存したら結果を確認するためです。編集しながら

　　　何度もこちらで確かめます。

index１
※このテンプレートは、htmlファイルをいくつも作らないで、index.html一つで
動いているものです。galleryなどのメニューに飛んでも、画面右下に上向き矢印が
出てくるので、それで最初のメニューに戻るようになっています。

2.ファイルの中身・・・header部分より上は省略しています。

<nav>
<ul>
<li><a href="#about">ABOUT</a></li>　　メニュー部分
<li><a href="#gallery">GALLERY</a></li>
<li><a href="#access">ACCESS</a></li>
</ul>
</nav>
<ul class="icons">
<li><a href="#"><i class="fab fa-facebook"></i></a></li>　←facebokk
<li><a href="#"><i class="fab fa-twitter"></i></a></li>　　←twitter
<li><a href="#"><i class="fab fa-youtube"></i></a></li>　　←youtube
<li><a href="#"><i class="fab fa-instagram-square"></i></a></li>　　　←Instagram
facebook,twitter,youtube,instagramをもっている人は
上記のそれぞれの行の＃の部分に、自分のアドレスを入力します。

</ul>
</div>
<!--/#text-->

</div>
<!--/#menubar-->

<!--スライドショー-->
<aside class="mainimg-tate"></aside>
<aside class="mainimg-yoko"></aside>
※imagesフォルダの中にあるtate_1.jpgから３までと、yoko_1.jpgから３までのスライとショー設定部分

</header>

<main>

<div id="about">

<section class="up">
※以下、お知らせ、東京深川周辺などの言葉を自分に合わせて書き換えます。
<h2>NEWS<span>お知らせ</span></h2>
※お知らせの文字だけを削除して、書き換えます。
※以下の部分も、撮影会やギャラリーサンプルなどの文字を書き換えます。
※その前後の<>などを間違って消さないように注意します。
<dl id="new">
<dt>2023/06/13<span>撮影会</span></dt>
<dd>東京都深川周辺</dd>
<dt>2023/06/17<span class="icon-bg1">ギャラリーサンプル</span></dt>
<dd>写真２０枚用作ってみました。(順不同）</dd>
</span></dt>
<dd>個人ギャラリー１</dd>
</dl>

</section>
※Notepad++で保存します。
※保存出来たら、1.の①と③で述べてあるように、ブラウザで保存された結果が
　ちゃんと表示されるか、更新をクリックして確認します。
　うまくいかない場合は、エディタに戻って書き直して繰り返し行います。

※自宅で出来上がったら,USBメモリー等に保存して定例会にお持ちください。
※研究会のサーバーにアップロードします。

祭り神輿(天王さまと呼びます)は神社から御浜おりの場所までの約1キロを８人で担いで行くのですが、これがなかなかキツくて軽トラの登場となりました。お祓いする所の下の霞ヶ浦は以前「てんのう河岸」と言って遠浅の砂浜でしたが、堤防が整備されてなくなりました。

IMG_4841B
神主さんがお祓いをします。

IMG_4845BB
　霞ヶ浦の水をかけます。

IMG_4850B
軽トラで。

7月29、30日と田伏の八坂神社の祭礼です。今年は7年ごと回ってくる当番年です。今回は大幅に簡略化しました。祭りの旗はまわりでよく見かける「のぼり旗」にしました。いつもならば１５ｍ近い木の旗竿を立てますが、それには屈強な人たち１０人以上が必要で、戸数が少ない集落では上げない時もありました。

IMG_4833B
上　今回。下　7年前
IMGx7_1775B
　　

７月２９、３０日に田伏の八坂神社の祭礼が行われます。今年は私の集落の当番です７年ごとにまわってきます。祭りの神輿が霞ヶ浦の水で清める「御浜おり」の場所を堤防脇に作りました。４本の竹で囲まれた中に神輿を置き、神主がお祓いをして汲んできた水をかけます。

DSC_1230B

今回は、ギャラリーページのタイトル部分ですが
パソコンで見ると背景の色に文字が青と白になっていますが
全部白だと、スマホで見たときに文字と背景が
見づらいので色を変更してみましょう。

デフォルトでは、文字色　白　でした。タイトル名も現在と違っていましたが
Photo　Gallery
の文字を現在の青色に変更した過程を描きますので
他の文字もやってみたい場合は、同じ手順でお願いします。

１．メニューの文字が入っているフォルダー名　images

image01
この中にある、logo.pngを編集します。これは文字が最初は白でしたので青にしてありますが
今回は赤にでもしてみましょう。
ホームページ作成においては、Windows標準のペイントやメモ帳は使いません。
今回は、paint.netを使います。
窓の杜からのダウンロードはこちらから
上記のフォルダ写真のlogo.pngにカーソルを合わせたら、右クリックして
プログラムから開く→paint.netのように進みます。
プログラムの中にpaint.netが出てこない場合は、別なプログラムを選択から
選ぶようにします。

２.
photo0003

このような画面になります。
左上の「ツール」から「四角形選択」を選んで
Photo　Galleryの文字を囲みます。
キーボードのＤＥＬを押して消去します。
次に、自分の名付けたいタイトルを記入します。
3.
やはり「ツール」からTの文字のテキストを選択します。
東京深川撮影会と入力して、テキストの文字サイズを68
フォントをゴシックなど好きなものを選びます。
色は、左下のカラーから選びます。
そして、名前を付けて保存、あるいは上書き保存します。
テキスト

書き換えたページはこちら

＜質問は研究会ライングループ等でお願います。＞　　　　　　　　　　　

＃paint.net　＃JA水郷つくばパソコン研究会　＃撮影会　＃ホームページ作成　＃Xnview
＃notpad++　＃ホームページテンプレート　＃リサイズ超簡単pro　　＃デジカメ講座　　　　　　　　　　

堤防の草刈りが業者によって行われ、草がきれいに刈り取られて見通しが良くなりました。【狩】
DSC_1229B
DSC_1231B

タグ ：
風景

大雨災害で被災された組合員さんに利子助成です。


先般の大雨及び台風第２号で被災された皆さまには心よりお見舞い申し上げます。
ＪＡ水郷つくばでは災害支援として、利子助成０.１０％を実施しますので、ご案内いたします。
≪資金概要≫
■資金名：農林漁業セーフティネット資金（日本政策金融公庫資金）
■ご利用いただける方： 認定農業者、認定新規就農者、地域における継続的な農地利用を図る者等
■資金使途：災害により被害を受けた農林漁業経営の再建に必要な資金
　　　　　（被害を受けた設備の修繕・再取得等のほか、災害の影響による減収分見合いの運転資金も対象）
■借入限度額：原則６００万円以内
■返済期間：１５年以内（うち据置期間は３年以内）
■返済方法：営農形態にあわせた年１回・年２回・毎月返済など（貯金口座からの自動引落し）
■借入申込必要書類：借入申込書・経営安定計画書
　　　　　　　　　　添付資料　◎被害を証明する書類（被災証明書など）※市町村長の証明書
　　　　　　　　　　　　　　　◎その他組合が必要とする書類（収入証明書など）
■貸付利率：年０.３０％～０.７０％（令和５年６月１９日現在）　※借入期間に応じて変動します。
■利子助成：年０.１０％相当額をＪＡ水郷つくばより利子助成いたします。
■その他：○詳しくは、お近くの支店にご相談ください。
　　　　　○審査の結果ご希望に添えない場合がございます。
被害を受けた設備の修繕・再取得に必要な資金については、「ＪＡの農業３資金（新認定農業者育成特別資金・アグ
リマイティー資金・農業近代化資金）」も取り扱いをしております。ＪＡ水郷つくばでは、同じ条件の範囲内で、同様の
利子助成を行います。併せてご検討ください。

このページのトップヘ