2014年01月21日
レスポンシブWebデザインでサイト構築
新しいサイトを構築始めました。
以前から作ってたサイトは、デザインに懲りすぎて設計が適当すぎたので、
もう、どこから手を付けていいかわからなくなってしまい、一旦放置することにしました。
テーマから作り直しかな・・・。(そんな暇ないでしょ)
新しいサイトは、スマホ、タブレット、PCのどれから見ても対応できるレスポンシブWebデザインを採用。
デザインに懲りすぎて進まなくなるので、まずは職人さんが作ったワードプレスのテーマを採用。
そこから少しずつカスタマイズしていこうと思います。
サーバに関しては一から立てません。
ドメインを取得後、ドメイン取得サイト運営のフリーのサーバに
WordpressとPHPをインストールしてもらっちゃって運用。
スタードメインを利用しました。
結構、ドメインとるのはいいけどレンタルサーバの契約までさせられて、なんだよ数百円じゃないじゃんとなるんですが
スタードメインだと最少容量のサーバ+wordpressインストール無料です。何気におすすめ。
ワードプレス自体はあとでも移行できるので、
色々やりたくなったら、ワードプレスのバックアップとDBのdumpを抜いて
好きなレンサバとかAWSに移行すればよい。
もちろん、サーバから立てれば便利なことはたくさんある。
FTPは使わず、アップロードディレクトリ自体をSVNにしてしまえば、
自宅のディレクトリの中身をコミットするだけでアップロードできちゃう。など。
でも最初から頭でっかちで課金していくと、運用が乗るまでに費用ががかかりすぎるので、
初めはなるべくお金をかけないのがポイント。
今回のサイトは、私のSEO知識とアフィリエイト知識を持って、作成する商用サイト。
費用はかけずに、ある程度の利益を出すまではお金はかけない。
そして、SEOの胆の一つであるコンテンツ作り。
明らかに手が足りないので、嫁さんにコンテンツの文章だけは手伝ってもらうことにしました。
(お願いしましたが、今のところひとつも・・げほげほ)
レスポンシブwebデザインで、最初につまづいたのは、画像がらみ。
アフィリエイトやアイキャッチ画像を固定値のまま使用するとがっつりデザインが崩れる。
今考えれば当たり前だな。CSSで調整する必要がある。
この辺は、しっかり勉強し直し!
コンテンツページを100作るのと平行して、デザインも整えていかねば。
まずは、こんな感じ。挫折しないよう完成させるぞ!
以前から作ってたサイトは、デザインに懲りすぎて設計が適当すぎたので、
もう、どこから手を付けていいかわからなくなってしまい、一旦放置することにしました。
テーマから作り直しかな・・・。(そんな暇ないでしょ)
新しいサイトは、スマホ、タブレット、PCのどれから見ても対応できるレスポンシブWebデザインを採用。
デザインに懲りすぎて進まなくなるので、まずは職人さんが作ったワードプレスのテーマを採用。
そこから少しずつカスタマイズしていこうと思います。
サーバに関しては一から立てません。
ドメインを取得後、ドメイン取得サイト運営のフリーのサーバに
WordpressとPHPをインストールしてもらっちゃって運用。
スタードメインを利用しました。
結構、ドメインとるのはいいけどレンタルサーバの契約までさせられて、なんだよ数百円じゃないじゃんとなるんですが
スタードメインだと最少容量のサーバ+wordpressインストール無料です。何気におすすめ。
ワードプレス自体はあとでも移行できるので、
色々やりたくなったら、ワードプレスのバックアップとDBのdumpを抜いて
好きなレンサバとかAWSに移行すればよい。
もちろん、サーバから立てれば便利なことはたくさんある。
FTPは使わず、アップロードディレクトリ自体をSVNにしてしまえば、
自宅のディレクトリの中身をコミットするだけでアップロードできちゃう。など。
でも最初から頭でっかちで課金していくと、運用が乗るまでに費用ががかかりすぎるので、
初めはなるべくお金をかけないのがポイント。
今回のサイトは、私のSEO知識とアフィリエイト知識を持って、作成する商用サイト。
費用はかけずに、ある程度の利益を出すまではお金はかけない。
そして、SEOの胆の一つであるコンテンツ作り。
明らかに手が足りないので、嫁さんにコンテンツの文章だけは手伝ってもらうことにしました。
(お願いしましたが、今のところひとつも・・げほげほ)
レスポンシブwebデザインで、最初につまづいたのは、画像がらみ。
アフィリエイトやアイキャッチ画像を固定値のまま使用するとがっつりデザインが崩れる。
今考えれば当たり前だな。CSSで調整する必要がある。
この辺は、しっかり勉強し直し!
コンテンツページを100作るのと平行して、デザインも整えていかねば。
まずは、こんな感じ。挫折しないよう完成させるぞ!
【HTML/CSSの最新記事】
この記事へのコメント