Hiromuブログ

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

オリジナルテーマ化・各記事ページのデザイン検討

今回は各記事のページのデザイン検討について。

 

トップページのデザインは済んでいるので、だいたいの場合はそれを流用したデザインになると思います。なので今回新たに考える部分は、文章を装飾する各タグを使ったときにどのように見せるかというところがポイントになります。

 

本ブログでは以下のようにh3, h4, p, a, ul, ol, li, strong, emの標準的なタグとオリジナルでcomplement,quotationというクラスを定義して使うことを想定してデザインしていました。(↓この段階ではまだIllustratorでデザインしただけのただの画像ですが、これらをHTML化し終えたサンプルがこちら

blog007

 

また、記事ページには「前の記事」「次の記事」という部分や関連記事、コメント欄などもあるので、その辺もざっくりと考えています。ただしこの辺りはWordPressプラグインなどとの兼ね合いもあるので、スペースだけ確保しておくという感じでまさにざっくりとだけ考えておきました。

blog008

 

イメージが出来上がればあとはひたすらHTML化(というか主にCSSで装飾)していくという流れです。