カテゴリー: パソコン

投稿日:

ギャラリーホームページをNotePad++で編集４　index.htmlの編集②

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>までの編集でした。

投稿日:

ギャラリーホームページNotePad++で編集３　index.htmlの編集①

皆さんこんにちは。

今回は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メモリー等に保存して定例会にお持ちください。
※研究会のサーバーにアップロードします。

投稿日:

ブログ、ミュージック・プロムナードの見方

みなさんこんにちは。

パソコン研究会では、HP以外にこのブログとミュージック・プロムナードを

運営していますが、旧ブログからこの新ブログに替わった時から

投稿者をカテゴリで表示できるようにしています。

研究会ブログ　カテゴリ１は、　パソコン、風景、農協、定例会など

カテゴリ２に投稿者のイニシャルです。

ミュージック・プロムナードは　日本の曲か洋楽の分類で

カテゴリ２は投稿者のイニシャルとなっております。

MIYAは宮崎さん、KARIは狩野さん、KOBAは私、小林です。

brog111
カテゴリの欄は青い矢印のところが、カテゴリ２となっています。

IMG_1549

IMG_2058

投稿日:

定例会予定

4月25日　定例会予定

PCフォーラム発行

ホームページ更新、学習目標の動画更新（You Tubeより）

今後の予定と総会資料作成

よろしくお願いいたします。

枝垂れ桜1

投稿日:

定例会予定　4月11日

4月4日　WEBにて定例会を行いました。

4月11日　定例会　午後7時30分より
　　　　　ホームページ更新　
　　　　　新規ホームページ作成　説明　・・レスポンシブホームページについて

　　　　　新規希望者・・Wordpress　開設手順

　　　　　パソコン・ハードおよびソフトについての質問受付

　　　　　

投稿日:

２月２８日　定例会　PCフォーラム発行

毎月末には、研究会の機関紙発行を行っています。もう300と数十号になりますが
コロナ禍で定例会ができないときは余計WEBでアクセスできる会員ばかりではないので
印刷して送っていました。

今回も印刷、封筒入れ、会計が発送と手順で行います。
同時に原稿ファイルをＰＤＦ化してＨＰにアップロード、
ＨＰの定例会等のページ更新などを行います。

質問等のある会員さんも来るので、手分けで対応します。
今回のミニ講座は「パワーポイント」です。
時間があれば「ミュージックプロムナード」の鑑賞会も行います。

unnamed

unnamed (1)

teirei5

投稿日:

ホームページ更新しました

JA水郷つくばパソコン研究会ホームページ更新しました。
１２月も残すところ２０日余りになりました。
定例会は６日の火曜日に実施して、年内最終としました。
新年は、１月１０日（火）と３１日（火）となります。ほかの火曜日は
ＷＥＢ定例会となります。

https://dappe.com

月刊機関紙　PCフォーラム　記事のページ更新しました。

https://dappe.com/foramu2.html

研究会facebook

インスタグラム

pc00123

投稿日:

HP　Pavilion　ノートパソコンSSD　換装

HP　のノートパソコンのSSDが128GB　HDDが1TB（データ領域）という構成の物の

システムが入っているSSD容量が少ないので、サイズアップを行うことにしました。

HP Pavilion　15-cc100型式です。

第8世代　core　i7　メモリ　16GB

HDDやメモリー専用の裏ブタがついているわけではない型なので、裏蓋全部を外します。

ゴム足をはがした後ろにもねじがあります。

SSD　M.2　とバッテリーを交換します。

SSD　128㎇　はM.2 sirial ata 接続なので、 その規格の物を入手します。

今回はwesternデジタルの物を購入しました。

クローンするにはM.2　SSDが入るUSB接続のケースも一緒に購入しました。

のちに、取り外したものを外付けとして使えるからです。

もうノートパソコンはばらしてあるので、別なパソコンを使ってクローンしています。

クローンには、EaseUS Todo Backupを使います。

窓の杜で現在ダウンロードできる新バージョンは、無料版ではディスククローンが

できません。上級を購入してにバージョンアップしろと出てきます。

それで私は、以前のバージョンをUSBで保存していたので、それを再インストールして

行いました。aomeiのほうもやはり同じで、Free版はできませんでした。

早くケースは開けていたので、手持ちのSSDにクローンしていたのでそれをM.2　512GBに

作りました。約24分くらいで終わりました。

バッテリーはまだ届いていないので、届き次第組み立てようと思います。　　Koba

IMG_3719-1.jpg

今回対象のノートパソコン　

IMG_3774.jpg

裏蓋を開けたところ　バッテリーの右がHDD　1TB　左側が　M.2　SSDですね

IMG_3776.jpg

システム用　SSD

IMG_3786.jpg

M.2　SSD　用の外付けケースです

IMG_3789.jpg

クローンを終わり取り付けた　western　digitalの512GB　SSD

IMG_3791.jpg

DELLのノートを使ってクローンしているところ