読者です 読者をやめる 読者になる 読者になる

おきがるみがる

お気軽&身軽に生活・仕事・趣味を楽しむ雑記ブログです。一応スナップ写真がメインです。

はてなブログのテーマをMinimal Greenに変更しました

今日のアイキャッチボツ写真は裏路地にあったホテルです。

はっきりとはわかりませんが、おそらく大人専用のホテルかと。しかも廃ホテルっぽいですね。

目の前はクルマが通れるような道ではないので、空室か満室かの表示はおそらく普通に利用客の表示でしょう。

それにしても「ホテル アーバン」という名前だと100%検索に引っかかりませんね。相当SEO対策しないと。それともわざと?

*****

www.okigaru-migaru.net

1ヶ月程前にはてなブログのテーマをInnocentに変更したという話はしてましたが、この度また変更しました。

そのテーマはMinimal Greenです。はてなでも人気のテーマですね。

今回テーマを変更した理由と、最初にやったカスタマイズ、そして今後のデザイン方針について説明しましょう。

InnocentからMinimal Greenに変えた理由

design.syofuso.com

Innocentはかなりシンプルで見やすいデザインですが、シンプルがゆえにそのまま使うと少し物足りない感じも否めません。

おそらく自分好みにカスタマイズできる人ならば使いやすいテーマなのでしょうが、僕みたいなトーシロにはちょっと難しかったりします。

そこでカスタマイズしなくてもある程度デザインのお膳立てをしてくれているテーマが良いだろうと思い、Minimal Greenを選びました。

それに作者さんがグローバルメニューはシェアボタンのデザインカスタマイズについても言及しているのは安心感がありますね。

特に見出しのデザインが気に入った

www.okigaru-migaru.net

特に見出しのデザインが良いですね。上の記事はH2〜H4の見出しを使ってますが、見やすくてレベルがわかりやすいデザインです。

はてなブログの公式ではH3が大見出しの扱いになっているので、H2とH3にデザインの差が小さいテーマも多いのですが、Minimal Greenはしっかり差別化できていると思います。

Innocentはデフォルトの見出しが結構不満だったんですよ。スクロールしてると見出しか本文か見分けつきにくい感じで。

カスタマイズもしましたが、元のシンプルなデザインに溶け込ませることができませんでした。これは僕の技量不足なだけですがね。

設定後行ったカスタマイズ

文字装飾の追加CSSを引き継ぎ

/* 文字装飾 */
/* 太字 */
.b {
    font-weight: bold;
}

/* 赤太字 */
.rb {
    font-weight: bold;
    color: red;
}

/* 大太字 */
.lb {
    font-weight: bold;
    font-size: 200%;
}

/* 大赤太字 */
.lrb {
    font-weight: bold;
    color: red;
    font-size: 200%;
}

/* 小文字 */
.s {
    font-size: 70%;
}

まずは記事中で使う文字装飾のCSSを引き継ぎます。

文字の太さや大きさ、色などは直接打ち込むのではなくクラス属性でマークアップしています。

強調タグは記事中で多用してはいけないとかいうSEOのセオリーを知ってから慣習でやってます。こっちのが記述もしやすいですし、メンテナンスも楽ですからね。

広告サイズを変更

Minimal Greenのメインカラムの横幅は624px、サイドバーは336pxです。

これはメインカラムにレクタングル広告を2つ横に並べて、サイドバーにレクタングル(大)広告を設置できるように考えたものでしょう。

この広告配置が良いかどうかはさておいて、せっかくそういうデザインで作られているのですから従いましょう。

ラージスカイスクレイパーについて

www.okigaru-migaru.net

ちなみにサイドバーにラージスカイスクレイパーを設置していましたがイマイチ成果は出ませんでした。

それに縦幅600pxマックス使った広告って意外と少ないようで、しょっちゅう小さい広告が使わてましたね。余白ができて見た目がダサかったです。

まだまだレクタングルの時代ということでしょうか。もう少し大きいサイズの広告が普及してきたら使ってみたいと思います。

グローバルメニューの設置

design.syofuso.com

グローバルメニューを上部に設置することで、このブログでは何をテーマに取り上げているのかを検索エンジンに伝えることができます。

とは言ってもこういう雑記ブログでは効果あるのかは定かじゃありません。

でも見栄え的にもユーザビリティ的にもあった方がいいので設置です。

レスポンシブタイプのシェアボタン設置

design.syofuso.com

はてなブログ標準装備のシェアボタンはデザインが微妙な上に読み込みが異常に遅い!

ってことで紹介されていたレスポンシブタイプのシェアボタンを設置しました。

だいぶ見た目的にもスッキリしましたね。トップページに表示されませんのでロードも短くなったと思います。

スマホ用の設置を忘れていた

スマホ用のシェアボタンをすっかり忘れていました。

レスポンシブでスマホもPCと同じ表示にすれば一発ですが、広告の配置的にそれはできませんので別途設置せねばなりません。

www.daipanman.com

こちらを参考にしてシェアボタンを設置しました。デザインがスマホに特化していてよろしいです。

LINEのシェアは不要かな〜と思いましたが、スマホからならシェアする人もいるかもしれませんしね。

サイドバー最下部固定

moonnote.hateblo.jp

以前までこの記事の方法を使ってサイドバー最下部を固定していましたが、どうも挙動がおかしくなりました。

レスポンシブデザインでブラウザの横幅を変えてもデザインが崩れないコードということで良かったのですが、これでまた別のコードを探すことになりました。

shiromatakumi.hatenablog.com

と言っても一瞬で見つかりましたけどね。しかもはてな向き!

コードの3行目はブラウザの横幅を縮めて、サイドバーがメインカラムの下に潜り込むタイミングを記述するのでしょう。

ちょちょいと調べて900pxに設定したらうまくいきました。こういう時にGoogle Chromeのデベロッパーツールは便利ですね!

今後はカラーリングについて設定していきます

Minimal Greenというテーマですから緑を基調としたデザインとなっております。

嫌いではないのですが、ちょっとゆるふわ系のイメージですね。

design.syofuso.com

コピペ一発で黒・ピンク・水色のいずれかに変えるコードが用意されていますが、いずれも趣味じゃありませんね。

個人的にはネイビーが良いなぁ。そういうわけで色を調べつつ変えていけたらと思います。

でも結構気長な作業になりそうなので、もうちょいしたら取りかかります。