先週のエントリで「デザインの勉強をしてみると決めた」ということを話しました。そのなかで、このサイトのデザインを作ってみようということを宣言しました。そこで、Wordpressのテーマについてドキュメントを読み、構想を考え作ってみました。

作成手順

まず初めに、簡単な構成のポンチ絵を書きました。ポンチ絵からデザイン設計図のようなサイズを書いたものを作成します。その時に、比率についてのルールもきめました。そして、公式のドキュメントを読みながら作成したデザイン設計図を基にしてコーディングを行なっていきます。使用したツールとして、タスクランナーのGulpとバージョン管理にGitを使いました。今回はSCSSというCSSのメタ言語を使ってスタイルを作成しました。比率の細かい計算をしなくて済むのでとても楽にコーディングできます。

コンセプト

今回はトップページの各エントリのアイキャッチ画像を大きく表示しつつも記事の内容がテキストでわかるようにデザインを決めました。PC版(1200Px以上)のサイズでは黄金比を意識してデザインしています。スマートフォンなどでは本文を読むことに集中できるように余計なものが入らないようにデザインしています。アイキャッチの画像サイズがまちまちでも綺麗に表示されるようにリサイズするように指定しました。アイキャッチ画像の理想は黄金比としているため、毎回のアイキャッチ画像を綺麗に作ればそれだけ記事をわかりやすくできると思います。また、JavaScript関連のコードを使用しないことで、ページの軽量化を図っています。一応SEOの対策をしているつもりではありますが、いろいろ欠点もありそうです。

作ってみた感想

デザイン案をもとに、1週間で作ることができました。私はHTML/CSS・JavaScriptを用いてElectronを使ったデスクトップアプリケーションを作りました。そのため、ある程度のWebの知識はありました。また、PHPを使ったWebアプリケーションの作成もしたことがあり、コードを読むのが楽でした。しかし、今回作ってみて思ったことは、ある程度のPHPの勉強をすればWordpressのテーマ作成は比較的簡単にできると感じました。プログラミングの基礎ができている人は、もっと早く作成することができると思います。

実際に、Wordpressのクエリなどの扱われ方をしっかりと押さえていれば、記事の表示や、関連カテゴリのリストの出力は、わかりやすいと思います。少し感じたのは、Wordpressの関数に扱いづらい部分があるので、コードが長くなってしまうような問題が出てきそうだと感じました。

課題

まだまだ、多くの課題がありそうですが、とりあえず一週間で完成させることができました。今後は、SNSのシェアボタンや内部リンクを増やすようなメニューを作るなどがあげられます。さらなる軽量化のためにCSSをHTMLファイルに埋め込む作業などもする必要があればやっていきたいと思いました。