私が今までに気ままに描いた絵をGooglesitesでホームページ“まほろばギャラリー”を立ち上げました。
その時、制作にあたって直面した問題点やその解決法をまとめてみた。
使用中のパソコンは8年程前に購入。
Windows XP、メインメモリ 256MB、HDD 40GB。
あれこれとUpdateやUpgradeするのはいいのですが、その度に本体への負荷が重くなる一方で、最近ではすこぶる調子が悪くなってしまい、だましだましで使っていました。
そこで思い切って最近流行のタブレットPCを購入。
購入後最初に行ったのは、カメラ機能を使って今まで描いた絵を撮影し、内臓ソフトのギャラリーで見られるようにしましたが飽き足らず、これを思い切ってホームページにしてみようと即実行に移したのがきっかけです。
表示されたコードを入力・・・て何？
タブレットの購入時、販売店でGoogleのメールアカウントとパスワードの設定をしていますが、このアカウントを使ってGoogleにホームページを作成することにしました。
このホームページ作成は“Google sites”で検索すればサイトのログイン画面が表示され、上記のメールアカウントとパスワードを入力し作成画面に入ります。
作成ボタンをクリックし表示に沿って入力しますが、“表示されたコードを入力”のところでまずつまずき、何を入力すればさっぱり判らず、そこら辺りに表示された文字を入力しましたがエラーばかり。
これがコード？
そうこうしていると入力部の上に意味不明な変形した文字らしきものがあり、これを文字と推測して入力しやっとのことで作成画面に到達。
暫くパソコンに殆ど触れることが無かったため、最近では当たり前になっているようですが、ちょっとした事でもつまづいてしまいます。
ホームページ上の画素サイズ
編集ボタンをクリックすると文章入力はワープロソフトとほぼ同じように使えますが、写真の貼り付けが判らずあちこちさわりました。
挿入ボタンをクリックすると“画像”を含めた項目があり、これをクリックしPC内の写真をアップロードし“OK”ボタンをクリックすると画像が編集中のページに表示されました。
しかし、画像がでかすぎます。
画像をクリックするとサイズを原寸から大、中、小と縮小できますが、それでも大きすぎる。
また数多くアップロードするには容量が大きくなりすぎ、表示速度が遅くなるため、撮った写真をもう少し小さく加工して、再アップロードすることにした。
タブレットで撮った写真は、手振れやピントがどうしても甘くなり、再度デジカメに三脚を取り付けて写真を取り直し、最終的にはペイントソフトで画素サイズを500×375ピクセル程度まで縮小し使用した。
～画像加工の方法～
画面のレイアウト
最近では、PCよりスマホやタブレットで閲覧する人が増えてきており、小さな画面の中で縦スクロールに加えて横スクロールが入ってくると、非常に見づらいものとなってしまいます。
しかし、表のサイズを変更しようとすると、通常PCではマウスでドラッグしながらできますが、タブレットではこの編集が非常に困難であり、結局ここからPCで編集することにした。
これがタブレットでの編集画面、大半をキーが占め編集作業にはむきません。
メモリーの増設
現在使用中のPCのメインメモリーは256MBと少なく、以前からインターネットの閲覧で時間がかかってしょうがない状況でしたが、ホームページの作成を始めてからは、アップロードする画像が多くなるにつれ、編集モードの読み込みが非常に遅くなり、ついには『仮想メモリーが不足』とのメッセージが現れ、PCがフリーズ状態になってしまいました。
よって、インターネットの一時ファイルの削除や仮想メモリーの設定を増やしましたが一向に改善しません。
次の対策としてはメモリーを＋512MBに増設してみました。
これにより、HDDが頻繁に回っていたのが改善され、ネットの閲覧はサクサクいくようになりました。
～メモリ増設注意点～
ブラウザの変更
しかし、編集作業を続けると今度は新たに『このスクリプトの実行を中止しますか？このページのスクリプトが、Internet Exploreの実行速度を遅くしています。
スクリプトを実行し続けると、コンピュータが反応しなくなる可能性があります』とのメッセージが出て、またもやフリーズ状態。
あ～あ、せっかくメモリーまで購入したのに、PCを買い替えしないともう無理かなと落胆したけど、だめもとでInternet Exploreからシンプルで速度が速いといわれているGoogle Chromeにブラウザを変更してみました。
うむ！ やった～！ て感じで、みごとこれが成功し、非常に速度が速くなり、やっとのことでエラーもなく改善しました。
フォントについて
サイトの印象はフォントによってかなり異なります。
しかしながら、閲覧者の端末にインストールされていないフォントを使用すると意図しないフォントで表示されてしまいます。
又、私の場合はGoogleドライブを使って素案を思いついた時に書き込んで、最後にサイトページ内で再編集しますので、共通で使用できるフォントを整理し、これらに限定使用しています。
意図しない表示を避けるためにWEBフォントを使用する方法もあるようですが、英文字と比べて圧倒的に文字数の多い日本語では課題も多く余り利用されていないようです。
しかしながら、タイトルなどの文字にはやはりこだわったみたいと思われる方は、気に入った書体で書いた文字をイラストなどと同じようにＧｉｆファイル化し、ページ上に貼り付ける方法が良いと思います。
蛇足ですが、企業の社名や商標は殆どがＧｉｆで貼り付けてあり、私の場合もこのページの最後に“まほろばギャラリー”へのリンクアイコンをちょっとこだわったフォントをＧｉｆ化して貼り付けています。
HTMLで編集
GooglesitesにはHTML不要と書いてあり、思いつくままページ作成を行いましたが、ページ内ジャンプや他ページとのリンクを設定するには、やはりHTMLタグを編集する必要があります。（思い込みでした）
昔にちょっとかじったことがありましたが、やはり初めての体験であり、間違えてぐちゃぐちゃになってしまわないかと心配でした。
しかし、サイトには過去に保存した内容に戻す機能があり、安心して試すことができました。
このホームページの仕上げ段階に、リンクする方法が隠れているのではとエディタボタンを色々さわってみたところ・・・ありました。
“挿入”ボタンをクリックすると、メニューの中に“リンク”のボタンがありました。
リンクを設定したい文字列または図形にカーソルをドラッグ指定し、”リンク”ボタンをクリックすると設定ができるようになっていました。
これで、ややこしいことは駄目という方にも、HTMLの記述など必要なく簡単にできると思います。
～参考までに当方が実施した一例として、ページ内でリンクを設定する場合を紹介します～
画像を削除する
色々とトライした画像がアップロードしたままであり、編集のみならず負荷が重くなるのを軽減するために、削除方法を模索した。
当エディタでは削除することがなかなか見つからず難航しましたが、一旦編集を終了すると“編集ボタン”の傍に“その他”のボタンがあり、これをクリックして“サイトの管理”をクリックする。
そして画面左側にメニューが現れるので“添付ファイル”をクリックします。
すると今までアップロードした画像の一覧が表示されるので、不要な画像を選択し、“削除ボタン”をクリックすると削除されます。
やっとのことで、これですっきりとしました。
私も試してみたいと思われた方は、ためらわずチャレンジしてみてください。
成功を祈っています。
編集ボタンをクリックすると文章入力はワープロソフトとほぼ同じように使えますが、写真の貼り付けが判らずあちこちさわりました。
挿入ボタンをクリックすると“画像”を含めた項目があり、これをクリックしPC内の写真をアップロードし“OK”ボタンをクリックすると画像が編集中のページに表示されました。
しかし、画像がでかすぎます。
画像をクリックするとサイズを原寸から大、中、小と縮小できますが、それでも大きすぎる。
また数多くアップロードするには容量が大きくなりすぎ、表示速度が遅くなるため、撮った写真をもう少し小さく加工して、再アップロードすることにした。
タブレットで撮った写真は、手振れやピントがどうしても甘くなり、再度デジカメに三脚を取り付けて写真を取り直し、最終的にはペイントソフトで画素サイズを500×375ピクセル程度まで縮小し使用した。
～画像加工の方法～
- Windowsについているペイントを使用
- 加工する画像を開いて「変形」－「伸縮と傾き」を選択
- 「伸縮」の100％を縦横共XX％まで下げOKをクリック
- 加工が終われば、元のファイル名と区別するため名前に変えファイル形式はJPGとして保存する
画面のレイアウト
最近では、PCよりスマホやタブレットで閲覧する人が増えてきており、小さな画面の中で縦スクロールに加えて横スクロールが入ってくると、非常に見づらいものとなってしまいます。
しかし、表のサイズを変更しようとすると、通常PCではマウスでドラッグしながらできますが、タブレットではこの編集が非常に困難であり、結局ここからPCで編集することにした。
これがタブレットでの編集画面、大半をキーが占め編集作業にはむきません。
メモリーの増設
現在使用中のPCのメインメモリーは256MBと少なく、以前からインターネットの閲覧で時間がかかってしょうがない状況でしたが、ホームページの作成を始めてからは、アップロードする画像が多くなるにつれ、編集モードの読み込みが非常に遅くなり、ついには『仮想メモリーが不足』とのメッセージが現れ、PCがフリーズ状態になってしまいました。
よって、インターネットの一時ファイルの削除や仮想メモリーの設定を増やしましたが一向に改善しません。
次の対策としてはメモリーを＋512MBに増設してみました。
これにより、HDDが頻繁に回っていたのが改善され、ネットの閲覧はサクサクいくようになりました。
～メモリ増設注意点～
- 増設可能容量のみならず形状や対応スピードなど各種仕様が異なるので、IOデータやBaffaloなどのホームページで互換性を確認してから購入しましょう。
ブラウザの変更
しかし、編集作業を続けると今度は新たに『このスクリプトの実行を中止しますか？このページのスクリプトが、Internet Exploreの実行速度を遅くしています。
スクリプトを実行し続けると、コンピュータが反応しなくなる可能性があります』とのメッセージが出て、またもやフリーズ状態。
あ～あ、せっかくメモリーまで購入したのに、PCを買い替えしないともう無理かなと落胆したけど、だめもとでInternet Exploreからシンプルで速度が速いといわれているGoogle Chromeにブラウザを変更してみました。
うむ！ やった～！ て感じで、みごとこれが成功し、非常に速度が速くなり、やっとのことでエラーもなく改善しました。
- Google Chromeは無料でダウンロードできます！
フォントについて
サイトの印象はフォントによってかなり異なります。
しかしながら、閲覧者の端末にインストールされていないフォントを使用すると意図しないフォントで表示されてしまいます。
又、私の場合はGoogleドライブを使って素案を思いついた時に書き込んで、最後にサイトページ内で再編集しますので、共通で使用できるフォントを整理し、これらに限定使用しています。
しかしながら、タイトルなどの文字にはやはりこだわったみたいと思われる方は、気に入った書体で書いた文字をイラストなどと同じようにＧｉｆファイル化し、ページ上に貼り付ける方法が良いと思います。
蛇足ですが、企業の社名や商標は殆どがＧｉｆで貼り付けてあり、私の場合もこのページの最後に“まほろばギャラリー”へのリンクアイコンをちょっとこだわったフォントをＧｉｆ化して貼り付けています。
HTMLで編集
GooglesitesにはHTML不要と書いてあり、思いつくままページ作成を行いましたが、ページ内ジャンプや他ページとのリンクを設定するには、やはりHTMLタグを編集する必要があります。（思い込みでした）
昔にちょっとかじったことがありましたが、やはり初めての体験であり、間違えてぐちゃぐちゃになってしまわないかと心配でした。
しかし、サイトには過去に保存した内容に戻す機能があり、安心して試すことができました。
このホームページの仕上げ段階に、リンクする方法が隠れているのではとエディタボタンを色々さわってみたところ・・・ありました。
“挿入”ボタンをクリックすると、メニューの中に“リンク”のボタンがありました。
リンクを設定したい文字列または図形にカーソルをドラッグ指定し、”リンク”ボタンをクリックすると設定ができるようになっていました。
これで、ややこしいことは駄目という方にも、HTMLの記述など必要なく簡単にできると思います。
～参考までに当方が実施した一例として、ページ内でリンクを設定する場合を紹介します～
- リンク（飛び先）先に下記のように記述し、ブックマークを設定する。
<a name="mark1">マーカーはここ</a> - マーカー１はここ（例えば、見出し文字を飛び先にしたい場合は見出し文字の前後に
<a name="mark1">と</a>を記述する） - クリックしてもらう文字または画像にリンク設定の記述をする。
<a href="#mark1">マーカー１へ</a> マーカー1へ
（クリックされる文字または画像の前後に <a href="#mark1">と</a>を記述する）
画像を削除する
色々とトライした画像がアップロードしたままであり、編集のみならず負荷が重くなるのを軽減するために、削除方法を模索した。
当エディタでは削除することがなかなか見つからず難航しましたが、一旦編集を終了すると“編集ボタン”の傍に“その他”のボタンがあり、これをクリックして“サイトの管理”をクリックする。
そして画面左側にメニューが現れるので“添付ファイル”をクリックします。
すると今までアップロードした画像の一覧が表示されるので、不要な画像を選択し、“削除ボタン”をクリックすると削除されます。
やっとのことで、これですっきりとしました。
私も試してみたいと思われた方は、ためらわずチャレンジしてみてください。
成功を祈っています。
水彩画など気ままに描いた絵画集のホームページ
0 件のコメント:
コメントを投稿