撮影会写真によるホームページ作成手順集

年2回の撮影会を開催していますが、その写真を使ってホームページ作成やSNS投稿などを行っています。

前回、ギャラリーホームページを作成した手順を掲載したブログのまとめです。

作成開始①のページから④ページまであります。ご覧ください。

撮影会 ギャラリーページ作成手順

写真ギャラリー作例ページを先日お見せしましたが、皆さんに送った
gallery1.zipが圧縮ZIPファイルです。
フォルダを作ってそこにコピーして解凍します。

folder1

◆index.htmlを右クリックで、プログラムから開く→Edgeまたはgooglechromeで開いて確認します。
ファイルを作ってフォルダにコピーしたら、ブラウザに戻って更新を繰り返します。
それで写真が上手く入っているかを確認しながら作業を進めます。


◆サムネイル表示してリサイズやRAWファイルからJPG
に変換できるソフト Xnview

imagesフォルダにある、yoko_1.jpgから3までと
tate_1.jpgから3までを自分の写真で作ります。
たて、よこどちらも横のサイズで2500pixel前後にします。

◆使うソフト  リサイズ超簡単PRO

folder1-2

②sample_photoフォルダに1-20までの写真ファイルが入っています。
それを自分の写真で上書きします。
⓵と同じように横サイズ2500pixelで、縦サイズはカメラの縦横比通りで大丈夫です。
まず、自分の候補の写真を別フォルダに20枚入れて、一括リサイズします。
できたファイルを、1.jpg、2.jpgと20枚目まで名前を変えます。
Xnviewで連続的にファイル名を変更はこちら(pcフォーラム記事)

folder1-1

変更したファイルをsample_photoフォルダにコピーします。

◆index.htmlを右クリックで、プログラムから開く→Edgeまたはgooglechromeで開いて確認します。
思うように言っていない場合は、ファイルやフォルダを確認して、ブラウザに戻って更新を繰り返します。

◆aboutとaccess の部分を書き換えるときはnotepad++を使います。
ノートパッド++を窓の杜からダウンロード

エディターの使い方ができる方は、行ってください。不安な方は定例会で聞いてください。

◆正常に動いていることを確認出来たら、定例会の時サーバーにアップします。
※研究会のドメイン下のフォルダにアップするときは、著作権表示が必要ないですが
自分のサーバーにアップするときはソースの最下行著作権の記述に以下の表示が
必要です。

<div class=”copy”>
<small>Copyright&copy; <a href=”index.html”>SAMPLE COMPANY</a> All Rights Reserved.</small>
<span class=”pr”><a href=”https://template-party.com/” target=”_blank”>《Web Design:Template-Party》</a></span>
</div>

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

撮影会ギャラリーホームページの編集2 Paint.netを使う

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

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

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

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

2.
photo0003

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

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

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

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

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

皆さんこんにちは。

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

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

folder1

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

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

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

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

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

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

index1
※このテンプレートは、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から3までと、yoko_1.jpgから3までのスライとショー設定部分

</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>写真20枚用作ってみました。(順不同)</dd>
</span></dt>
<dd>個人ギャラリー1</dd>
</dl>
</section>
※Notepad++で保存します。

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

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

 

フランソワーズ・アルディ さよならを教えて

facebookで見かけた1966年頃のF1マシンと一緒の写真の女性は誰だろうと調べたらフランスのポップシンガーでした!
曲を探してみると、有名な曲ありました
きいたことありますね

最近80歳で亡くなられたようです
IMG_1569