HP を作り直した。

　丸 山 染 織

インターネットに PC よりモバイルで繋がるようになってきて、わたしの HP の古さを感じるようになってきた。
ハンドメイドマーケットに出そう、と今更ながら思うこともあって、これを期に HP を作り直すことにした。

自身の HP を作り直すのは２度目だ。
他のも入れて HP を作るのが5度目ともなれば慣れて ちゃちゃっ と作れるか、といえば、全く逆。
スマホの 320px から PC の 1000px以上 まで対応するようなタグを書け、なんて無謀としか思えない。そんなこと素人が出来るか！？
昔は良かったよ、html だけで HP が作れた ...。　インターネットエクスポローラーかファイアフォックスか、なんてブラウザが違う場合を考えたりはしたけれど、画面サイズがこんなに変わるなんて思ってもいなかった。
なんていってる場合じゃない。

しかし、ネットの大海を探すと HP を作るためのノウハウが山のようにあるんである。トライ&エラーを繰り返す根性があればなんとかすることが出来るかも、とか思ってしまった。
ええ、時間がかかりましたよ。

とにかく見まくったのは、ほんっとにはじめての HTML5 と CSS3。助かりました、ありがとうございました。flexbox がなかったらモバイル対応できない。
JavaScript なしで css だけで画像をポップアップするのは、CSS note から。css ってこんなに奥深いものなんですね。ありがとうございました。
css で折り畳んだものを拡げたり畳んだりするボタンは metrograph.jp から。ありがとうございました。
php を使うメールフォームは 次世代Webマーケティング&SEOブログ をコピペしました。ありがとうございました。
あとどこを見たか覚えてない、っていうかあちこちに書いてあるから間違いないだろう、ってモバイル対応に不可欠なのが meta name="viewport" content="width=device-width,initial-scale=1" 。魔法の呪文だね。
いや他にもあちこち見たが、覚えてないし、書ききれないし。これらがなかったら絶対 HP は作れなかった。皆様ありがとうございました。


スクリーンショットを撮ったのはタブレット。
↓ これなんて何で見るかでけっこう違う。

ホームページを作り直した。

ホームページを作り直した。　のではあるけれど、わたしのではない。

夫の参加している団体のホームページを管理している方が辞めることになったので、
わたしが引き継ぐことになったのだ。
前任者はちゃんとできる人だったけれど、わたしは見よう見まねだからレベルが違う。
それでもわたししかやれそうな人が近くにいなかった、ということで。
一応３回くらい作ったことはあるからね…。

今回ひさびさに html と css に取り組もうと思ってちょっと調べてびっくりしたこと。
いつの間にか html5 と css3 になっていたんだねぇ。
まえはレイアウトをテーブルで配したりしたし、
そのまえはフレーム分割なんてやったこともあったし、
css なんてぜんぜん使わなかったこともあった。
スマホが主流になったり、ウェブデザインを仕事にしている人は大変だろう。

PC だけじゃなくてスマホやタブレットでもそこそこ見やすい、というのを目標にした。
カッコ良さより文字の大きさ、とか。

具体的には、サムネイルを廃止したかったのと、
それに伴いその小さい写真をを拡大するのに使っていた JavaScript をやめるとか
レイアウトの変更とかそんな感じで、
今回作ったといってもコンテンツは元ネタからほとんど変えていないから
ずいぶん楽なんだとは思うけれど、
それでもきりきり頭を絞って、ネットで調べて、
タグを書いてはブラウザで見てみる、という試行錯誤を繰り返した。

今まではメモ帳でタグを書いていたけれど
それだと文字コードにちゃんと対応していないということを知って、
作業に入るまえにまず サクラエディタ をインストールした。
いぜん宣言文で見た目が変わってびっくりしたこともあったけれど、
今の宣言文はずいぶんシンプルなんだな！

実際にタグを書くにあたって一番役に立ったのが、『ほんっとにはじめてのHTML5とCSS3』。
こういう知識をタダで分けてくれるってホントにありがたい。
サクラエディタもフリーだし。

というわけで、作り直したホームページ　　⇢　群馬県ウッドクラフト作家協会

いろいろ気になるところはまだあるけれど、とりあえず発車オーライ、ということで。


ホームページをアップしたとなると、
かつて作ったほかのホームページの古いところがあちこち気に入らなくなってくる。
手直しせねば、とは思うけれど、
始めればそれなりにまた根を詰めたりうんうん唸ったりするのは確実で、
達成感はあるけれど大変なのも分かっている。
どうせやるならコンテンツにも手を入れたい、とか、ちょっと JavaScript もかじってみたいし、とか
欲が出てきて、そうなると余計に大変になっちゃうし。



まあなんにせよ、ホームページがアップできてよかった。

HPをふたつ作った。

１０月２８日 にアップした通り、わたしのＨＰ 『丸山染織』 を全面リニューアルした。
縮小で字がつぶれてお見苦しい画像ではあるけれど、ま、こんなかんじです。　↑

　　丸 山 染 織


苦労した話は１０月２８日に書いたので、もういいや。



しかし、それで懲りたわけではなかった。
わたしの作品を置いているお店、上野村クラフトマンショップこかげ のＨＰもいきおいで全面的に直してしまった。　↓

変なこだわりが自分の首を絞める。
どこかから素材を借りてくるのだけは絶対にイヤ！　とかそんなんで。 （リストマークとか背景とかファビコンとか。）
色やらデザインやら、ああでもないこうでもないときりがないし。　けっきょくいつものわたしの色合いになってしまうけど。
まぁ、凝ったとかいっても、我流の見よう見まねだから大したことはできないけどね。

もう、しばらく html と css をいじる気にはならないな。　　はぁ～






　　上 野 村 クラフトマンショップ こ か げ


見易くなったと思う。　気が向いたら見てやってください。
（どこかヘンなところがあったら、遠慮なしにどうぞ教えてください。）

ドツボのＨＰ

ホームページをアップしたら、次にするのはあちこちにリンクを貼ること。
せっせとハンドメイドやら手作りやらのショップのサイト検索に登録して、バナーを貼り付けた。
ハンドメイドや手作り、というキーワードならまだしも、
雑貨、と括ると恐ろしいほど沢山ある！

いやあ、世間がこんなに雑貨にあふれていたとは、知りませんでした。

色々と登録していただいてこんなことを書くのもなんだが、
なんていうか、よく似ているのよ。
使っているソフトも同じなのかもしれない。
登録画面がそっくりで、　あら ID だけ違うのね、
みたいなかんじで、自分がどこに登録して、どこにログインしようとしているか、
こんがらがってしまいそうだ。

いや、よく読みこんでいけば、それぞれのサイト検索ごとに特色がある、
というのも少しずつ分かってきましたが…。　（フォローになってない！？）


それよりも、けっこうブラウザで泥沼にはまってしまったかも。
ブラウザはいつも IE7 を使っているのだけれど、何の気なしに、
グーグルクロームなんぞをインストールしてしまったのが発端。
ブラウザによって表示が変わってしまう、という話はよく聞くけれど、
それは本当でした。

alt で書いたものが、画像の説明になるのか、と思っていたら、
グーグルクロームでは説明が出なくて、なんで？なんで？と調べたら、
本来 title で書くべきだ、というのが分かったり。

いちいち文字サイズを入れるのが面倒で、CSS を書いてみたけれど、
なんだか思ったとおりに表示されなかったり、いろいろと問題が出た。
実は自分のパソコンのブラウザの履歴が更新されなくて、反映されない、とか。
文字サイズは px や、それを large にするのがいいとあるところもあるけれど、
うまく大きくなってくれなかったりして、結局全部 % で設定しなおしたりして。

一つ分かったような気がすると、十くらい分からないところが出てきて、
ネットで調べると、ちんぷんかんぷんなことがズラーッ！
もう、うっちゃっております…。

グーグルクローム？　アンインストールしてしまいましたよ。
でも、ファイヤーフォックスとか、気になってたりして。

ブログはホームページより楽だなぁ。



ってなかんじで、あいかわらずパソコンばかりいじっています。
しかも明日から、恒例の奥能登行き！の予定なのだ。

こんなんで、機織りは進むわけないよ。（言い訳かい！？）


↑一番上の写真は、ニガウリのグリーンカーテン。　でも遮る日差しがない。　実は少しだけ。
↓フウラン。　いい香り。