頑張ってあと２記事書かなきゃこのブログは成り立たないぞ〜〜〜！
ということで頑張っていきましょう(現在早朝4時)
このブログの制作手順を少しだけ紹介します。
(独学なので多分実際仕事している人からしたらひどすぎるかもしれない・・・)
まずはこのブログ、
WordPressって何ぞや？？って人はここから
オープンソースのブログソフトウェアである。 PHPで開発されており、データベース管理システムとしてMySQLを利用している(後述のプラグインよりSQLiteでの使用も可能)。 単なるブログではなくCMSとしてもしばしば利用されている
引用:wikipedia
よくわからんですねぇ。
一言で言えば
無料といってもサーバーを用意しなければならないので結構お金はかかってます(苦笑)
(サーバーってなんぞや？というのは・・・話だしたらきっとキリがないのでまたいずれ。そして自分でもなんて説明していいのかがよくわからない。)
それでは制作手順１です
Photoshopでデザインを考える
まずはPhotoshop。その前に紙にザックリ枠組みを考えたりします。
まずはこんな感じに枠だけをおいて大体の配置を考えます。
フォトショで作るときはこれらを同じフォルダに入れておけば一括で見えなくすることができるから便利です。でもそもそもフォトショ向いてない気もします・・・
そしてここに実際と同じように書き込んでいきます
？？！
全然違うじゃないか！！
はいごめんなさい・・・これだからWebデザイナーにはなれないと思ってしまう・・・
本当はこの時点で、全部素材も作って、実際のデザインと全く同じにしてしまうのが理想。らしいです。
そしてフォトショのスライス機能を使ってペーっと切り取ってそのまま素材として使う・・・って何かの本に書いてありました。忘れました。
あとは本当は他のページも全部用意するのが正しいはずです。例えばこの記事のページだとか。
これを見て、本当にこのデザインで良いのか確認します。
（というか本当はこのデザイン案をいくつも出さなければならないんじゃ・・うっ頭が・・）
ローカルでhtmlとcssを使ってコーディング
ここからコーディングをしていきます〜
この時点ではjavascriptとかはまだ使ってないです。というかjs詳しくないから使えない・・・
jsは勉強不足なのでhtmlとcssだけで作っていきます。
htmlとcssって聞いたことあるけど何が違うのーという人は
まずhtmlだけだとこんな感じ
長〜いので読みづらい。配置も上から順に置いていっただけです。
それをcssを使って見やすくしていきます。
大分今の状態と近づきました！わーい！
htmlとcssだけでもブログは作ることができます。(多分)
しかし記事を書くたびにファイルを開いて、サーバーにあげて・・・とするのは大変です。
そこでWordPressの出番です！やっと出た！
WordPressに移行する
ここで作業は大体半分まできたって感じですかね。
デザインをしっかり作り込んでいる人だと多分ここからは早いんだと思います。。。
移行してから何をするか、ですが
おもに記事を表示させる仕組みを作る。ことですかね。
htmlとcssはプログラミングって感じがしないんですけど
って書くの見たことないですか？私はWordPressで初めて見て触れました。。。
PHPはhtmlを生成します。
例えばhtmlで
おりブロと書いていたのがWordPressを使うときは
<?php bloginfo('title'); ?>と書きます。出力は２つとも全く同じで「おりブロ」となります。
このようにしてPHPで書き換えていく作業、もう１つ大切なことがあります。
ブログなので、記事を表示する仕組みを作らなければなりません。。。
コードは割愛しますが、ループ文を用いて記事を表示しています。
サーバー上に記事があれば、それを表示する。記事がなくなるまで繰り返す。
ループ文を用いると、記事の分だけコードを書き足さなければならない、ということはありません。
自分で書くコードはそんなに難しくなく、短くてすみます。
サイドバーも実はコード数行だけだったりするんですよー
そしてWordPressで嬉しいのはプラグインが利用できることです。
まだまだjsに詳しくないので、プラグインは有効活用していきます〜〜
トップページのスライドショーはプラグインを用いています。
はいどんと画像を貼りたいのにトップページが完成している画像がない・・・
今は記事が足りてないのでだめだァ・・・
ちなみにこの部分
ランダム記事となっております！！
わーい！
画像がないので困りましたねぇ。記事に画像がないときは自動でこの画像にしてくれます。
そしてここから。。。
個々のページを作る
ここにきてデザインをいじりながら作っていってます・・・・
記事のページを作ります。ループで勝手にこのテンプレートを使ってくれるので、同じレイアウトがすべての記事に適用されます。
あとはお問い合わせフォームを作ったり。パンくずリストをつけたり・・・
最後に
スマホに対応する
今回はレスポンシブ！になっているはず。
（レスポンシブは画面幅に合わせてレイアウトを自動で調整するようにするやつだよ。）
cssを用いてスマホ幅のときはサイドバーを記事の後に〜とかそういう感じです。
FirefoxのFirebugを愛用しています。ソースを表示してくれます。
便利です！(詳細は割愛！！！)
以上〜
ざっくりとメイキングでした。
デザイン開始からブログオープンまでちょうど１週間でした。
Firebugについてだとかもいずれ書きたい。
意外と記事を書くのって時間かかるし大変だ〜〜がんばります。
今後の課題・・・・
もうちょっとちゃんとデザインできるようになりたいです。最初のデザイン案をちゃんと作れるようにならなければですね・・・。
あとマークアップが適当すぎる。
ちょっと人のサイトを覗いて見るとasideだとかarticleだとかいっぱい使っててハッとなる。divとsectionばっかりだよ！！！辛うじてarticleは使ってたけど！！spanは使うときは使うけど基本存在を忘れている。だめだ・・・。
後やっぱり普通にデザインがダサいと思うんですよ。センスないでする。
jsを使って動きをつけれたらさらに良しです。
色々改変したいところはあるんですが、全部メモして後々進化させていきます・・・！
(思い出したけど書くところがないのでとりあえずメモ：サイドバーを途中から固定)
知らない人に優しいのか優しくないのかよくわからない記事になって申し訳ないです。
それでは
コメントはありません。
現在コメントフォームは工事中です。