HPWS2025

ホームページの学習

by koni

美手連の更新

2025年度から美手連の更新担当になりました。美手連はFTPソフトでサーバーへファイルをアップロードするタイプのホームページです。当初美手連のサーバーに接続できず、四苦八苦しました。最終的には、ルーターとモデムの再起動という単純な操作で接続できるようになりましたが、データのダウンロードが一部出来なかったため、前任者の仙石さんからUSBでデータを頂くなどして漸く連休明けから更新に携われるようになりました。５月から今までに「特定外来生物の定点観察」の更新が10件、デジタル教材の更新が3件、デジタル教材の表示に関する修正依頼が1件、事業報告・事業計画・総会の更新が1件ありました。
定点観察については2022年HPWSの仙石さんのブログをご覧ください。
2022年のHPWS　https://abi.sakura.ne.jp/hpws/biteren/　

今回は「デジタル教材」の更新と表示に関する修正依頼について説明いたします。　
デジタル教材のページ　https://www.biteren.com/digital2.html

1.図鑑・写真集の更新依頼

「図鑑・写真集｣は、青いタイルを並べたようなデザインで、それぞれ、資料番号・タイトル・制作団体名・動画あるいはPDFのアイコンが表示されるようになっています。
更新依頼に基づき、タイルの内容を修正します。下記のソースはNo.14-2のものです。

<li class="item _sort04 _sort04SP" style="_background:#7fffff;_clearmd" _style="border: solid 1px red;">
<div class="item-content">
<a href="doc/digital2/『谷津・生きものたちの小宇宙』2025年5月公開.pdf" target="_blank" __class="iframe-open"> 
  <ul>
    <li class="li01"><i class="fa fa-camera"></i>No.14-2</li>
    <li class="li02"><p style="font-size:85%; text-align:center;line-height:1.2;">谷津・生きものたちの小宇宙<br>（調べ学習用）</p></li>
    <li class="li03"><span style="font-size:70%; padding-bottom:20px; line-height:1.2;">岡発戸・都部の谷津を愛する会</span></li></li>
    <li class="li04" _style="color:#adff2f;"><i class="fa fa-lg fa-file-pdf-o" style="color:#ff6f61;" title="PDF" aria-hidden="true"></i><span class="small">PDF</span></li>
  </ul>
</a>
</div>
</li>


変更や追加の依頼の
時の変更箇所　↓

←リンク先に資料保存
　リンク先の指定

←カメラのアイコンと
　№とタイトル


←製作団体の名前


←pdfか動画のアイコン
PDFか動画の文字表示

fa fa-lg fa-file-pdf-o
fa fa-lg fa-youtube-play

2.一部分を目立たせる（copilotに聞いてみた）

「デジタル教材の”小学校等との教材普及の取り組み状況の報告”の部分を目立たせてほしい。」との要望があったので、copilotに聞いてみました。


1.　元のソース：
<p class=”large”>小学校等との教材普及の取り組み状況の報告<a href=”report.html”>
<button class=”btn btn-small btn-warning” type=”button”>詳細</button></a></p>

2.　元のソースを入力し質問：「小学校等との教材取り組み状況の報告」のところにカーソルを持っていくと文字の色が赤くなり “report.html”にリンクするようにしたい。

回答：以下のhtmlのソースとCSSを提示された。
<p class=”large”>
  <a href=”report.html” class=”report-link”>小学校等との教材取り組み状況の報告</a>
  <a href=”report.html”>
    <button class=”btn btn-small btn-warning” type=”button”>詳細</button>  </a> </p>

CSSでテキストのホバー時に色を赤に設定
.report-link {
text-decoration: none;
color: inherit;
}
.report-link:hover {color: red;
}

3.　質問：CSSをどこに記述すればよいか
回答：内部CSSがおすすめ、次のようにheadに入れる。

<head>
  <style>
    .report-link {
      text-decoration: none;
      color: inherit;    }
    .report-link:hover {
      color: red;    }
  </style>
</head>

CSSを<head>と</head>の間に記述しましたら、下図のように、ホバー時に文字が赤くなるようになりました。

4.　質問：「小学校等との教材取り組み状況の報告」を目立たせるには？
回答：以下のCSSを追加する。

.report-link {
font-size: 1.2em;
font-weight: bold;
color: #333;
background-color: #fff3cd;
padding: 8px 12px;
border: 2px solid #ffc107;
border-radius: 6px;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s, color 0.3s;
}
.report-link:hover {
background-color: #ffeeba;
color: red;
}


←文字を通常の1.2倍の大きさにし、太字、色は#333(濃いグレー)

←背景の色は#fff3cd(クリーム色)
←内側の余白を上下8px、左右12px
←幅2pxの実線、色は#ffc107(オレンジ色)
←角を6px分丸くする
←下線などの装飾をなくす

←背景色と文字色の変化を滑らかに(0.3秒)

5.　フォントを修正
font-size: 1.2em;　→font-size: 0.9em
font-weight: bold;　→font-weight: normal;

文字が大きすぎたので、太字をやめサイズも小さくしました。

我孫子登山俱楽部の保守サポート

WordPressのテーマ：Twentyfourteen
サイトの更新は我孫子登山倶楽部のご担当者がされておりますので、ご質問やご相談を頂いた時に必要な情報を提供しサポートするということが仕事となります。
また、バックアップはパソ隊がやることになっており、川口さんが毎月1日に自動で実施するようにされています。

｢小さな旅｣制作記

WordPressのテーマ　Twenty Twenty-Three
メニューは、ホーム、ブログ、旅の情報、まごたびの4つです。
ブログは「ブログホーム」のテンプレート、
ホームと旅の情報は「サイドバー1」のテンプレート
まごたびはスマートスライダーを別のものにするため「まごたびサイドバー1」を使用しています。
トップページにギャラリーを入れています。

質問

  1. 美手連の表示の修正について
    今回、copilotからの回答をソースとして貼り付け、目立たせるという目的は一応達成したのですが、このような修正で良かったのでしょうか？
  2. FFFTPをインストールしてから何年にもなりますが、ソフトの更新は特にしたことがありませんが、何か必要なことはあるのでしょうか？
  3. 「小さな旅のアルバム」のトップページにギャラリーを入れていますが、ギャラリーの枚数により表示される大きさが変わってしまうことが悩みです。Copilotに聞いてCSSで解決しようとしましたが、出来ませんでした。
    解決方法を教えて頂けませんでしょうか？