Cat-l – 猫のように気ままに-
サイト作成が完了しました!
新しくブログを作成した経緯ですが
様々なネタを取り扱うため、また個人的に色んなゲーム、Webのネタを取り扱う為に作成しました。
今回このブログを作成したフローといいますか、流れを軽い感じで書いていこうと思います。
使用マシン:Mac OS X.Windows7
使用ソフト:Illustrator Cs6,Dreamweaver CS6,Coda2,MAMP
デザイン
まず、デザインの作成ですが今回デザインするにあたって、どういう風にしたいかと自問自答することに。
1.シンプルなのが好き
2.サイトというよりはブログがメインなので、一番重要なのは「文章」。
3.フラットな感じ
4.やったことないし、どうせならスマホとかタブレットでも見れるようにレスポンシブに
この4点を主軸に考えて作成しました。
デザインの作成に使用したソフトは「Illustrator CS6」
普段Photoshopに慣れてる自分としましては、日頃使用する機械の少ない、Illustratorに慣れる為、というこじつけにIllustratorを使用しました。
普段デザインするときに一番悩むポイント
ロゴとサイトタイトル、この2つの問題で少々時間を取られました。
コンセプトとしましては、自由気ままにやれたらいいなぁ。という背景の元、自由=猫。じゃあ、ロゴも猫を使った感じにしてみようと思い立ちました。
大体デザインは1日くらい、そのうちロゴに半日と言ったところでした。
コーディング
コーディングに関しては、メインにCoda2を使い、DWは最後にちょこちょこっと使用した感じになります。
今回Coda2を使用した理由としましては
・軽い
・デフォルトでsassに対応
この2点が大きいです。(DWも設定でsassに対応することが出来ます。DW CCだとデフォルトで対応しています)
当たり前なのでしょうが、今回改めて思ったことは、レスポンシブで対応するのであれば、タブレットでのデザイン、スマホでのデザインデータも作成しておくべきだと思いました。
実際、cssで調整しながらその場でデザインしていくと、中々に時間が取られて作業が滞る場面も。
WordPress化
オリジナルのテーマとして作成しました。
半年くらいまえは毎日テーマの作成で触ってましたけど、最近はご無沙汰ということもあり、こちらもリハビリも兼ねて導入。
基本的なテンプレートタグはエクセルシートであるのですが、如何せんそれを貼り付けていくだけ、という作業だったので色々と難儀しましたが、一応形になるまでは持って行けたと思います。
基本的に私はプラグインを出来る限り絞って、functionsで補える部分はそちらで対処しています。
今回導入したプラグインですが
・Akismet(ド定番)
・All In One Seo Pack(SEO対策)
・Contact Form7(お問い合わせフォーム)
・EWWW Image Optimizer(画像圧縮)
・Head Cleaner(速度アップ)
・Lightbox Plus Colorbox(画像表示)
・TinyMCE Advanced(投稿画面のカスタマイズ)
・WP-DBManager(データベースのバックアップ)
・WP-PageNavi(下部のナビゲーション)
・WP Multibyte Patch
以上になります。
All In One Seo Packでサイトマップが形成されないって、悩んでて調べたら<?php wp?head(); ?>をheader.phpに入れるのをすっかり忘れていて反映されませんでした。
合間合間で作成した結果、1周間ちょいでここまで、たどり着きました。
今回、Sass,Illustrator等普段使用していなかったツールでの作成となりましたが、色々収穫があり、また勉強になりました。
今後も改めてこう言った新しいことを試していこうと思います。
今後の課題、修正点としては
・searchを作る(現在記事が少ないので保留中)
・細かいところの調整
でしょうか。
Webの知識はまだまだなので、今後色々と蓄えていけたら、と思います。