ひつじの雑記帳

身近な豆知識ネタからちょっとギークなプログラミングネタまで

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。

※当テーマの紹介する際は、テーマ配布ページではなくこの記事のURLを使用してください。

当ブログ「ひつじの雑記帳」を開設して間もなく、フラットデザイン風のおしゃれな自作テーマ「Codomisu Flat」を公開しました。

レイアウト的に少し扱いにくいテーマでしたが、思っていたよりたくさんの方に使ってもらえました。
力こそパワー +ログ ゼロから始めるビットコイン さんとか特におしゃれにカスタマイズされているので是非見てみてください。

あれから約2ヵ月経った今、こどみす作のはてなブログテーマ第二弾「Minimalism」を公開しました!

Minimalism(ミニマリズム)の特徴

f:id:codomisu:20170618130726p:plain

このテーマは、テーマ名「Minimalism」にある通り、デザインは最小限のみに抑えてあり、「美」をとことん追求しました。

こどみすフラットとは違い、スマホ・タブレットにも対応した、レスポンシブ対応のテーマです。

デモサイトをCheck!

デザイン・見た目

PC・タブレット・スマホから見たそれぞれの「Minimalism」の見た目はこんな感じです。

PC

f:id:codomisu:20170618134639p:plain

タブレット

f:id:codomisu:20170618134831p:plain

スマートフォン・ミニタブレット

f:id:codomisu:20170618133919p:plain

現存のレスポンシブテーマは、スマホからみると文字が少し大きすぎたり、若干バランスがおかしくいものが多いですが、当テーマは「モバイルファースト」に作られているので、スマホからみても本当にレスポンシブテーマなのかっ思われるくらいデザインが整っているかと思います。 

 十人十色  何色を選ぶかはあなた次第

f:id:codomisu:20170618142149p:plain

当テーマは、ヘッダーの色を変えるだけでブログの雰囲気を一転できるように設計してあります。ベースはホワイトで出来ているため、基本的にどんな色でも合います。

テーマを導入したらまずやること

導入したら、まず以下のことをやってください。

レスポンシブデザインに設定する

f:id:codomisu:20170618144049p:plain

デザイン→スマートフォン→詳細設定の「レスポンシブデザイン」にチェックをつけてください。PCとスマホを別々のデザインにしたいという方はやらなくてもOKです。

もしスマホ・タブレットで上手く表示されなかったら

レスポンシブデザインにチェックを入れても、スマホから見たときにPC表示のままだったり、上手く表示されない場合があります。

そんな時は、はてなブログの設定→詳細設定→headに要素を追加に以下のコードを追加してください。

トップページを一覧形式にする

f:id:codomisu:20170618200835p:plain

はてなのPROに契約している方は、設定→詳細設定→トップページの表示形式(PC番)で一覧形式にチェックを入れます。

ブログ名が全角(日本語)の場合

ブログ名が全角(日本語)の場合、文字が大きすぎると感じる方も多いと思います。そんなときはデザイン→PC→デザインCSSに下記のコードを追加することで解決します。

上手く表示されたらテーマをカスタマイズしてみよう

ナビゲーションメニューを設置する

f:id:codomisu:20170618150620p:plain

このテーマには、

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 で紹介したスライドメニューと同様のものが標準で用意されています。
デザイン→PC→ヘッダ→タイトル下に以下のコードを追加し、アイコンやURL等の任意の部分を書き換えてください。

アイコンにはFontAwesomeを使います。FontAwesomeの使い方が分からない方はこのサイトを参考にしてみてください。

シェアボタンを設置する

f:id:codomisu:20170618145211p:plain

このテーマには、シェアボタンのスタイルが標準で記述されています。よって以下のコードをデザイン→PC→記事上・下に挿入するだけで、シェアボタンが完成します。

ヘッダーを好きな色に設定する

f:id:codomisu:20170618145438p:plain

上で紹介したように、このテーマではヘッダーを好みの色に設定することができます。
設定するには、デザイン→PC→デザインCSS に以下のコードを追加します。

見出しデザインについて

当テーマはカスタマイズ性を考えて、敢えて見出しデザインをデフォルトのままにしてあります。自分好みの見出しデザインを選びましょう。

見出しデザインを選ぶ際はこちらのサイトが参考になります。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

テーマ配布ページ

Minimalism - テーマ ストア

有料カスタマイズ代行サービスを始めました

f:id:codomisu:20170618130717p:plain

ここでこっそり宣伝しておきます。

はてなブログ・WordPressの有料カスタマイズ代行サービスを始めました。ちょっとしたパーツの作成からオリジナルテーマの作成まで幅広く承っております。

自分のブログのデザインに悩んでいる方などはぜひ利用してみてください!