参考程度に徒然。

生活に役立つ情報や日々感じた事、仕事に関連する事の備忘録などをまとめてます。

wordpressでのブログ制作日記(PCデザイン完成〜コーディング編)

2/1にロリポップ!の更新があったのでそれに間に合わせる予定だったんですが…思ったより時間がかかってます。

はてなブログアプリがバグって使えなくなったままで、さらに1月下旬に画像の容量が上限に達してしまったので、2月はもう一つの趣味ブログも画像容量に気をつかってます。

ほんと早く引っ越したい><

 リニューアルデザインはこうなります

イラレでデザインする派です。
左がトップページ。右が個別記事ページ。
とりあえずもう早く引っ越したいので取り急ぎPCデザインしか作ってません…

f:id:yua0209:20150206234737j:plain

 

ちなみに、この前に考えてたデザインはこちら。

f:id:yua0209:20150206234925j:plain

コーディングが苦手なので、やりやすいようなデザインで〜 でもある程度かわいく〜でも女の子って感じにはしすぎたくない〜って考えながらやってたら早々に煮詰まってしまい、時間だけがすぎたのでこの状態で放棄。

上記のデザインになりました。

とにかくもう時間をかけたくない!の一心でやりましたがサボってる期間が多かった…

まずは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についてもいろいろ書くつもりです〜