Simple Journal – PC向けの HTML+CSS を作成

今回はPC向けのスタイルを作成してみました(画像をクリックでHTMLを表示します)。

Webブラウザの横幅を大きくすると、文字の大きさや余白の広さ、コメントのレイアウトなどが変わります。

 

トップページ

IndexPage for PC

投稿ページ

SinglePage for PC

 

もっと作り込んでもいいのですが、それはおいおいということで・・・(^ ^;

次回からWordPressテーマ用のテンプレートファイルの実装に入りたいと思います。

Simple Journal – スマートフォン向けの HTML+CSS を作成

今回はテーマのベースとなる HTML + CSS を作成してみました(画像をクリックでHTMLを表示します)。

今のところCSSはスマートフォン向けのみに対応。

 

トップページ

IndexPage

投稿ページ

HTML要素のスタイリングもひととおり完了しています(日本語ばかりになったときのスタイリングにはあまり自信がないかもしれません・・・)。

SinglePage

次回はPC向けのCSSも追記し、レスポンシブWEBデザインに対応しようと思います。

Simple Journal – テーマのデザインと仕様を決める

早速WordPressテーマの実装(テンプレートファイルにコードを埋め込む作業)に入ってもいいのですが、
その前に今回作るテーマ「Simple Journal」のデザインと仕様をもう少しだけ明確にしておきたいと思います。

 

まずデザイン(レイアウトやスタイリング)については、Adobe Experience Design というデザインソフトを使ってイメージするところを描いてみました(以下を参照)。

XD

作成したのは、トップページと投稿ページのデザインを(スマホサイズ版とPCサイズ版の)それぞれ2パターンずつ。

 

またデザインを作成しながら、今回のテーマの仕様も以下に洗い出してみました。

テーマ「Simple Journal」の仕様

  • 2段階のレスポンシブWEBデザインに対応する
  • 投稿フォーマットは「標準」のみとする
  • 投稿ごとにコメント欄(コメントの一覧とコメント入力欄を表示する箇所)を設ける
  • ナビゲーションメニューに対応する(サイト名の下にカスタムメニューを表示)
  • エディタースタイルに対応する(公開時の見た目とほぼ同じスタイルを管理画面のHTMLエディターに適用する)
  • 検索には(現時点では)対応しない
  • カスタムヘッダーには(現時点では)対応しない
  • カスタム背景には(現時点では)対応しない
  • 投稿サムネイルには(現時点では)対応しない
  • サイドバーには(現時点では)対応しない
    ※ 従ってウィジェットの表示にも(現時点では)対応しない
  • テーマの国際化は(現時点では)対応しない

見た目も機能も、まずはひたすらシンプルなものにしようと思います。

 

次回はこのデザインをもとに、テーマのベースとなる HTML + CSS を作っていきます。