- これがMinimal Green だ!
- まずは、ダウンロード
- レスポンシブデザインにチェック
- サンプル記事投稿
- 一覧表示に
- ナビゲーションメニュー
- ソーシャルボタンとフォローボタンを設置
- 色の変更
- カスタマイズ手引き
- まとめ
これがMinimal Green だ!
【完成図】
こんにちは。ぬんころ派ブログアドバイザー、ぬんです。
ぬんころ派:「ものくろ」のブログ運営者、ぬんが独自に生み出したブログ派閥。専門的な知識、プログラミング能力がなくても、より手軽でシンプルにブログ運営を進めることができるようにブログ初心者へ向けて、アドバイザーとしての立場でブログ論を展開している。
近頃初心者でも簡単にカスタマイズできて、レスポンシブ対応テーマはこれしかない!と啖呵を切ってこの記事
✔️サルでもわかる!おしゃれなブログをつくる一番簡単な方法【初心者必見、はてなProでなくてもOK!】 - ものくろ
を発表したのですが、またまた初心者に優しいテーマを見つけてしまったので、実際にカスタマイズしてみました!
(というか、最近簡単にオシャレにできるテーマをいくつか見つけたので、どんどん試して記事にしていく予定です。)
はてなブログを始めたばかりでカスタマイズをし始めようかなって人にぜひ見ていただきたい テーマカスタマイズ記事シリーズの第二弾です!
この通りに進んでいけば、PCデザインもスマホデザインもばっちりです!
まずは、ダウンロード
まずは、ここからダウンロード。
レスポンシブデザインにチェック
デザイン>詳細設定>スマートフォン>レスポンシブデザインに✔
これだけでOK!
サンプル記事投稿
では、サンプル記事を投稿しますねー。
4記事投稿しました。
おすすめポイントの1つに、このように見出しがはじめからカスタマイズされているという点があります。
かなりオシャレな見出しで大満足ですね。
一覧表示に
次は、以下の記事に従って、カード型の一覧表示にしていきます。
(これは、はてなProになっていないとできないです。)
✔はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに - Minimal Green
こんなかんじになります。
カード型にできるテーマは、ワードプレスっぽくて個人的には大好きです。
ナビゲーションメニュー
お次はナビゲーションメニューです。
(ブログ上部のメニューのことです。)
✔見せたいメニューのみ表示して残りをドロップダウンにするレスポンシブナビゲーション(追記あり) - Minimal Green
この記事に従って、コピペすると、こんなふうになります。
一番右の"≡ More"を押すと、このように下にさらにメニューがでてきます。
ソーシャルボタンとフォローボタンを設置
さて、ソーシャルボタンとフォローボタンを設置していきましょう。
以下の記事通りにコピペです。
✔はてなブログの記事上下にレスポンシブなカウント付きシェアボタンをつけるカスタマイズ(修正あり) - Minimal Green
✔コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
すると、こんなふうになります。
色の変更
このままでも全然構わないのですが、色を変更したい人はコピペで簡単に変更できます。
僕は、試しに水色にしてみました。
✔まとめて色を変更するCSSコード、ピンク、水色 - Minimal Green
こんなかんじ。
カスタマイズ手引き
僕がこのMinimal Greenをレスポンシブで使用するならば、最初はこれくらいのカスタマイズで満足ですね!
更なる細かい部分のカスタマイズは、以下にいくつも載っているので、気になる方はぜひ。
✔デザインテーマ「Minimal Green」のカスタマイズの手引 - Minimal Green
まとめ
今回も、はてなブログProになっていない人でも簡単にオシャレにカスタマイズできるテーマをご紹介しました。
僕がデモとして作ったサイトを参考までに載せておきますね。
気になる方は、チェックしてみてください。