wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

シンプルなExpression Web用のテンプレート作ってみた。

はてなブログに使われている、HTML5のCSSを流用し、とにかくシンプルに作ってみました。

f:id:wanichan:20180804214550p:plain

このテンプレートはレスポンシブWebデザイン対応で、デスクトップでは左側コンテンツ、右側サイドバーの段組みレイアウトです。

サイドバー #sidebar
要素幅:スマホ・タブレット縦向きはデバイス幅、1024px以上は300px
コンテンツ #page_content
要素幅:スマホ・タブレット縦向きはデバイス幅、1024px以上は660px、1124px 以上は 730px

このように、段組みレイアウトのCSSスタイル名ははてなブログとは違いますよ。全体を.container クラススタイルで括ってセンタリングしてます。ページの背景色を薄い灰色に設定し、.containerクラススタイルの背景色を白にしてみました。

f:id:wanichan:20180804220826p:plain

もちろん、レスポンシブWebデザインでっせ。

f:id:wanichan:20180804220346p:plain

あんまし複雑にするとカスタマイズが難しいから、Simple is the best ですよね?

ついでに、左サイドバーの右コンテンツパターンも作っちゃいました。

f:id:wanichan:20180804230709p:plain

なお、ヘッダーと横並びリンクはセンタリングにしました。

早く wanichan.net のサブドメインを作成してサイト開設しないと、やるやる詐欺になっちゃいますよね。

とりあえず、メインサイトで公開しちゃいます?? そっちの方が早いかも。