MoonNote

はてなブログテーマ / CSS / jQuery

はてなブログテーマ「Noir」を公開しました

f:id:waitingmoon:20210204013613j:plain

背景画像をヘッダーとして活用するダークな雰囲気のテーマ「Noir」をはてなブログテーマストアに公開しました。

デザイン

スマートフォン(横幅~576px)

f:id:waitingmoon:20210204013911j:plain

スマートフォンで閲覧した際に適用されるデザインです。

タブレット(横幅576px~)

f:id:waitingmoon:20210204014134j:plain

スマートフォンを横持ちした時やタブレットを縦持ちして閲覧した際に適用されるデザインです。

PC(横幅992px~)

f:id:waitingmoon:20210204014236j:plain

タブレットを横持ちした時や幅の狭いPCで閲覧した際に適用されるデザインです。記事部分の最大幅は640px、サイドバーの幅は250pxです。

PC(横幅1200px~)

f:id:waitingmoon:20210204014312j:plain

ハイエンドタブレットを横持ちした時や幅の広いPCで閲覧した際に適用されるデザインです。記事部分の最大幅は640px、サイドバーの幅は300pxです。

背景画像(ヘッダー)変更時のデザイン

背景画像を変更した場合のサンプルデザインです。

森林

f:id:waitingmoon:20210204175917j:plain

f:id:waitingmoon:20210204180028j:plain

コード

f:id:waitingmoon:20210204180012j:plain

背景画像を探す

unsplash.com

高品質な写真を探す際はUnsplashが便利です。商用・非商用関係なく、公開されている写真は自由に使うことができます。