P.M. no Nikki > 新規Webサイト製作中。
2015年06月13日

新規Webサイト製作中。

順調に個人サイトの制作が進んでおります。やっぱり「Brackets」が使いやすくて、ほとんどストレスフリーです。先日、「Brackets」の拡張機能を紹介しているサイトを参考にしていろいろな拡張機能を追加してみましたが、やっぱり「タブ表示機能」がありました!

blog[seesaa]0013.JPG


ただタブ表示されるだけでなく、ドラッグアンドドロップで順番を入れ替えることが出来たり、他の拡張機能でファイル名の前にアイコンをつけることができたりとものすごく便利になっています。もう、Dreamweaverなしでも十分コーディングできます!


さて、今回は個人サイトのリニューアルということなので「完全に一新!」というわけではなく、かなりスムーズに作業が進んでいます。とりあえず、以前のサイトはレスポンシブに対応しておらず、980pxをそのままスマホで表示させるようにしていましたが…見にくい。

また、PC上でも980px以下にすると、レイアウトが崩れてしまうという致命的な不具合があったので、今回はBootstrapを利用して完全なレスポンシブ対応を実現させる予定です。

PC上ではこんな感じ。記事が読みやすい、一般的なサイドバー右タイプです。

blog[seesaa]0011.JPG


スマホ表示(幅を縮めるだけですが…)にするとこんな感じになります(今は少し変更を加えたので下の画像と少し異なっています)。

blog[seesaa]0012.JPG


お気づきかもしれませんが、main_visualのトップ画像にjqueryのスライドショーを利用することで、視覚的に動きをつけて少しおもしろくなるようにしてみました。画像はフリーの画像をテキトウに使っています。センスがなくてどの画像がいいのかわからなかったので、テキトウに「道」の画像をチョイスしてみました。


また、今回のレスポンシブ対応サイトを作るにあたって難しいと思ったのはレイアウト。特に、スマホ表示にしたときのレイアウトをどうするかを悩みました。特にギャラリーとホビーのページかな。ただ、いろいろ試行錯誤した結果、なんとか形にはなった気がします。

ギャラリーのページにはmain_visualのスライドショーのプラグインに加えて「light box」のを使っているので、「画像をより見やすく」することにこだわりました。と言っても載せる画像がほとんどないのですが。←


今はホビーに載せる記事のコーディングと、サイト全体のHTML5化を実行中です。XHTMLをメインに勉強したので、HTML5をそのまま書くのが苦手なんですよね。いつも終盤に「XHTML→HTML5」という作業をしているような気がします。これがめんどうなのでそろそろこの癖を直したいのですが…。

おそらく明日中にはアップロードできるはず。がんばるぞー。


…あ、riset.css忘れてた。でも、なくてもBootstrapのcssで大丈夫なのかな?


posted by P.M. at 06:55 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。