wordpressでのブログ制作日記(PCデザイン完成〜コーディング編)
2/1にロリポップ!の更新があったのでそれに間に合わせる予定だったんですが…思ったより時間がかかってます。
はてなはブログアプリがバグって使えなくなったままで、さらに1月下旬に画像の容量が上限に達してしまったので、2月はもう一つの趣味ブログも画像容量に気をつかってます。
ほんと早く引っ越したい><
リニューアルデザインはこうなります
イラレでデザインする派です。
左がトップページ。右が個別記事ページ。
とりあえずもう早く引っ越したいので取り急ぎPCデザインしか作ってません…
ちなみに、この前に考えてたデザインはこちら。
コーディングが苦手なので、やりやすいようなデザインで〜 でもある程度かわいく〜でも女の子って感じにはしすぎたくない〜って考えながらやってたら早々に煮詰まってしまい、時間だけがすぎたのでこの状態で放棄。
上記のデザインになりました。
とにかくもう時間をかけたくない!の一心でやりましたがサボってる期間が多かった…
まずはXHTMLコーディングしたよ
実はHTML5のコーディングはしたことがない私です…
多少調べはしたけども…レスポンシブが好きじゃなくなったので、XHTMLでいいじゃん?ってなりました。
あとはWordpressテンプレートにするために、必要タグを差し替えていくだけです。
プラグインを使うつもりのところは現段階ではとくにデザイン&コーディングしてません。
ちょっとだけテンプレートを使いました
コーディングが苦手な私なので(2回目)、はじめはテンプレートに頼ろうとしました。
前回のブログ制作日記(デザイン編〜参考にしているサイト)でご紹介していますが
HTMLホームページテンプレート無料配布 [Cool Web Window]様です。
しかし、デザインは1から自分でやったために、加筆修正が多すぎて…
レイアウトが崩れ、その原因がどこにあるのかだんだんわからなくなり、結局1から自分でコーディングしましたorz
でも、一部は上記のサイト様のテンプレを参考にさせていただきました。
素材を使わせていただきました
鍵をつかったデザインにしたのですが、その鍵シルエットは無料イラスト ・イラスト素材「シルエットAC」様のメルマガで手に入れたものを、
また、アイコンに、初めてWEBフォントを使用しました。
よく使うアイコンWebフォントのフォントセットとジェネレーターまとめ | OZPAの表4で紹介されていた、Fontello - icon fonts generatorにしました。
なお、フッターに入れているアイコンは自作です。
ほかにこの段階でしたこと
上記HTMLはサーバーにテストアップ済み。ただしnorobot,nofollowにしてます。
また、FacebookのLikeboxをコーディング時に入れこみたかったので、Facebookページを作りました。
また移転後に詳しく書こうと思いますが、Facebookページ制作のジャンルは「ブランドまたは製品」の「ウェブサイト」を選択、
Likebox(いいね!ボックス)は、Facebookのログインを個人のアカウントにしたうえで、Facebook Like Boxにアクセスして作ります。
独自ドメインはまだ迷ってるところがあるので取得してません…
サーバーがロリポップ!なのもあり、ドメイン取得時はムームードメインで考えてます。
さー次は移転しました報告ができる…はず!
あ、ちゃんとWPについてもいろいろ書くつもりです〜