Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

オリジナルテーマ化・デザイン検討

これからしばらくWordPressのテーマをオリジナル化するためにたどった道のりを細かく補足していこうと思います。

流れは基本的にここに書いているものに沿っていく予定です。

 

まず1回目はブログのデザインについて。

 

最近は無料で使える優秀なテーマも探せばたくさんあると思うので、それで十分間に合ってしまう可能性もあります。

とにもかくにもオリジナルのデザインにしたい!という気持ちがなければ始まりません。

 

逆にその気持ちさえあれば何とかなると思います。ただ最低限HTMLとCSSの知識は必要はあったほうがよいでしょう。またjavascriptでもphpでもC言語でもなんでもいいのでプログラミングについて知っているとベターかと思います。

私も今回テーマを作るのは初めてで「HTMLはOK、CSSもまぁなんとかなるかな、WordPressの関数などはひとつも知らない(phpでプログラムを組んだこともない)」こんな状態から始めましたが結果としてなんとかなりました。(CSSをまじめに覚えたときの記事

 

テーマのデザインについては、いくつかのサイトを参考にしながら考えていきました。

具体的に参考にしたサイトはこちらに書いているようなサイトです。もちろんこの他にもいろいろなサイトを見て回っています。

 

そしておおよそイメージが固まってきたら、デザインワーク開始です。

私の場合はいきなりIllustratorを使いながら作業を進めましたが、一番最初は手書きでもなんでもいいと思います。

 

ただし画像化して使いたい部品などがあるといずれ作らなければいけないので、何かしらツールは必要になります。

ツールはやはりAdobe製品(Photoshop,Illustrator)がお勧めですが、フリーでもGIMPInkscapeなど引けを取らないものがあります。

これらのツールを使いこなすのはそれなりに大変だと思いますがここは肩ひじ張らずに自由に落書きするとかそんな気持ちで臨むのがよいのではないでしょうか。

 

そしてIllustratorで考えたイメージがこちら。この段階ではただの画像です。

blog001

わりと最終アウトプットに近いところまで作りこんでいますが、HTML化するので手を抜いているところも結構あったります。

自分でデザインもしてコーディングもする場合このへんの力の抜きどころがわかるのがいいところかもしれません。(ただしこのデザインだとコーディングするのが大変そうだからやめとこうかな、などと妥協しやすかったりもします・・・)

 

CSSピクセル単位の操作が必要になったりするのでデザインの段階では以下のような感じで配置をしっかり決めておくと後でコーディングがしやすいかと思います。

あとは実現できるかできないかは別としてこんな感じにしたいなぁというところも入れ込んでいます。具体的にはLigトップページのようにSNSのカウント数を取得して表示するところとか。

blog002

デザインの段階で検討はしたものの、結局却下となったものもあったりします。

 

blog003

画像を反射させるとカッコいいのですが、ブログの場合無駄に縦に長くなる要素はちょっと避けたいと思ったのでやめました。

 

SNSのカウント数表示」と同様、カテゴリ表示部分も簡単には画像のように階層構造表示するのは難しいだろうなぁなどとわかっていたりもするのですが、デザインの段階ではまずは入れ込んでみました。

blog004

 

トップページのデザインの検討過程はこのような感じでした。

ここでのアウトプットがそのまま最終アウトプットに直結するのでここは妥協せずに頑張りたいところですね。

でも一番クリエイティブで楽しく作業できる部分でもあると思います。