「MonoTsuduri」は、シンプルにモノを綴るためのシングルカラムテーマです。
レスポンシブなので、スマートフォンにも対応しています。
タイトル画像を設定すると鮮やかなグラデーションが画像の上に重なるので、少しの設定でブログの雰囲気を大きく変えることができます。
デモサイト、マニュアル
シンプルな作りにした上で、デモサイトや基本的なマニュアル、カスタマイズの手引を用意しました。
レスポンシブ設定の仕方
ダッシュボード→デザイン→スマホマーク→詳細設定→「レスポンシブデザイン」にチェックを入れると適用されます。
MonoTsuduriのヘッダー部分の基本的な仕様
ヘッダーの設定は、ダッシュボード→デザイン→レンチマーク→ヘッダ→タイトル画像から行うことができます。
ヘッダー画像の設定やタイトルの表示の有無によって、3つの状態に切り替わります。
ヘッダー画像設定なし
グラデーションとタイトルのみ表示される
ヘッダー画像設定ありかつ「画像とテキストを表示」を設定
設定したヘッダー画像の上に、半透明のグラデーションカラーが被り、タイトルが表示される
ヘッダー画像設定ありかつ「画像だけ表示」を設定
グラデーションとタイトル文字が消え、設定した画像のみが画面の幅いっぱいに表示される
グラデーションの変更の方法はこちらです。
トップページとその他下層ページの違い
初期状態はトップページのみヘッダー部分が高く、その他のページは高さを抑えて表示する設定となっています。
トップページのヘッダー
その他下層ページヘッダー
カテゴリーについて
カテゴリーの先頭に「#」マークが自動付与され、ハッシュタグ風になります。
エントリーの見出し
エントリーの中の見出しは種類(h1-h6の違いや大見出し、小見出し)に関わらず、テーマ初期状態ではすべて同じデザインに設定しています。
そのため初期状態は、あまり見出しを種類で使い分けない人向けです。
明確に大見出し、中見出し、小見出しなどを使い分ける人はカスタマイズした方が便利です。
デザインを変更する場合は、カスタマイズ記事を参考にテンプレートCSSを変更してください。
カスタマイズの方法
MonoTsuduriテーマのCSSを変更したり、グローバルメニューなどのHTMLコードを追加する方法です。
変更が簡単にできるように極力コードを整理し、グローバルメニューやプロフィールといった基本的な部品も用意しました。
注意事項
基本的に最新のモダンブラウザで動作を確認しており、特にIE対応はしておりません。
理由としては対応するとコストが上がる上に、ソースコードも冗長になりがちで管理上望ましくないためです。
ご了承いただけますと幸いです。
もう少し詳細な理由はこちらにも記載しました。
はてなブログテーマ「MonoTsuduri」を公開しました
履歴
- 2019/03/06 「MonoTsuduri」公開
- 2019/03/09 「code」タグをインライン要素に変更
- 2019/03/23 「検索ボックス」、「続きを読む」ボタン、「次/前のページ」リンクのデザインを変更(半透明黒を用いていたり、背景色がない部分を見やすさのため色をつけました)
- 2019/03/26 目次のデザインを変更しました(より記事に馴染むデザインにしました)
- 2019/04/02 エントリーのタイトル横にグレーの線を追加しました(エントリータイトルをわかりやすくするため)
- 2019/04/02 ブログタイトル、エントリー、タイトルおよび記事中の見出しに文字詰めを設定しました