Coda2 で初めてのページ作り

WordPressでblog

2000年の正月から続けて来たホームページも早20年が過ぎました。その当時沢山あった個人のホームページも寂しい事に今では姿を消して、今は事業関連のホームページが殆どです。
当時ホームページを持っていた皆さん、どうやらもっと楽に済むブログへ移ってしまったようです。
2年程前、ブログを構築するWordPress の存在を知りました。
同じ時期に、十数年間レンタルして来た某Webサーバーから現在の Xserver に引っ越ししました。
新しくレンタルしたサーバーは最安契約でも個人ホームページでは使いきれない容量があったので、そこでWordPressを使ったブログを始めてみました。
契約のタイミング良く、丁度この時期、無料のドメインが貰えるキャンペーン中だったらしく、こちらにWordPressを入れて、その結果ブログはホームページのアドレスとは切り離して立ち上げる事が出来ました。

ブログを始めてみたら全ての事が、ホームページに比べると楽で簡単でした。
見た目を少しでも良くしたいと、Dreamweaver で覚えたCSSであちらこちらカスタマイズして、2年以上経った今では見た目もかなり変わり見易くなりました。
ここまで来ると、金の掛かるDreamweaver とは縁を切りたいところです。
でもそれまで18年間何とか維持して来た自分のホームページももう少し長生きさせておきたいところです。それにWordPressを使ったblogがある以上サーバーは必要です。
ここでまたまたDreamweaver に代わるWebデザインソフト探しになりました。

Dreamweaver から Coda2へ

あちこち調べてみたらCoda2というMac用のソフトを知りました。
ただ、これは完全なテキスト打ち込み式のソフトなので、果たしてこれが自分に使えるのか?
でも、これまでに作ったページを少し変更する程度ならば何とかなるだろう、と数年使って来た金食いDreameweaverとはようやく縁を切る事ができました。

完全にCoda2に切り換えて約1年。ついこの間までは、新しいページを作るにも、以前のページをコピーしてこれの文章を書き換え、写真を付け替え、と殆どCodaの機能は使わずにきました。

大体Bootstrapを使ってテキスト打ち込みでホームページを白紙から作るなんて、既に68歳を半年も超えてしまったおじぃーさんにはハードルどころではなく棒高跳び並の高さです。

ところが最近になって「flex」というものを使ってレスポンシブなWebデザインが出来ることを知りました。
Bootstrapに比べると、分かりやすく、これなら自分にも出来そうな気がしてきました。

Coda2で白紙から作ってみた

コード、プレビュー、CSS を3画面分割で表示しておくとかなり作業効率がいい。

試しにYouTubeの講座の通りにやってみたところ、意外に簡単?。そりゃそうです。全く同じ物を作ったのですから。

そこで、数年前にDreamweaver で作ったものの、ずっと作り直したいと思っていた過去の古いページをflexを使って作り直しを始めました。
勿論この古いページはレスポンシブどころではなく、パソコンの画面で見てもイマイチのデザインだったのです。
モバイルにも対応したレスポンシブなホームページデザインというものは、どうしても皆同じような見た目になってしまいますが、これは仕方ない事と思うしか無いのでしょう。

ページ構成が単純という事もあり、パソコン画面の為の大凡の形が出来るまではそれ程の時間も掛かりませんでした。
ここからモバイルに対応させる為に少し手を加えます。
でも、この作業もBootstrapに比べてflexでは簡単でした
試しに画面サイズを変えてみると、旨くレイアウトが変わっています。

新旧画面

変更前の画面。小さすぎるし、それに縦の長さが足りず、下が空いてしまいます。

作り直したページ。スッキリさせて、縦方向のページ長を伸ばして少しだけスクロールが必要になった。

 

古いページをiPhoneで開くとこんな感じ。

新しいページのiPhoneでの表示。モバイル対応に出来ました。

ここからは細かな所の微調節です。最終的にはこの細かな微調節が一番厄介な作業になり、ある程度のところで良しとしないとキリがありません。
Coda2の画面を コード CSS プレビューの3つに分割表示させて見る事で、思っていた程の苦労は無しに何とか完成できました。
勿論Dreamweaver ではもっと簡単に出来たのかもしれませんが、一番の違いは値段と、その動きの軽快さでした。
この、動きが軽いと言うのは使っていて気持ちの良いものです。

Coda2だけで何とか完成!

まだ、イマイチ分からない動きをする部分もありますが、これはこの先の慣れで解決出来る事なのかもしれません。
これまで、テキスト打ち込みてホームページを作る事はとてもじゃ無いけど自分のレベルでは無理と思っていましたが、Coda2 というソフトの助けもあったお陰で思っていた程の苦労もなく作る事が出来てしまいました。
これに続けて、過去の古いページ2つ3つ作り変えれば、Coda2 flex の理解もかなり進みそうです。

ページトップへ

カテゴリーWeb

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です