Hatena Blogカスタム：グローバルメニュー/マーカー風文字など

f:id:everydaymoromoro:20190208111119j:image

先日、HatenaBlogをProに変更しました！

ここ数日ではあるけれど、ようやくまた少しブログを書く楽しさを再び見いだせたこと、同時にいろんなブログを目にする回数も増えて、よりいいデザインにしたいなー！とか、あとはせっかくならGoogle Adsenceを使いたいなーとか。

カスタムについても手を付け始めてみました。

まだまだ見苦しい部分や変更した箇所もちょこちょこあるので、のんびり進化させていきます！

今回は自分の覚書も兼ねて、参考にしたブログやテーマを紹介します。

ちなみにわたしのCSSやweb知識のレベルは、

CSS：文字の色サイズフォントを変えたり簡単なhtmlレベルがわかる程度
英語が少しできるので、それで何を表しているか察しが付く

という程度ですので、小さな修正などは自分でできるけれども、大枠のガワの組み立てや何か不都合が起きた時の対処は自力できない、という感じです。

なので、自力でやるのはそうそうに諦めて、インターネットの皆様の力に頼ることにしました。

ブログテーマは「undershirts」

いろんなカスタムブログを拝見しつつも、そもそもどのテーマにすればいいのか！？というところから。

詳しい方は自分で全部組み立てられるのかもしれないのですが、私の場合は自分ではまずできないので、ここももちろんプロの方にお任せします。

あくまでも「カスタム」なので、ベースはおまかせ！

今回はシンプルカード系のテーマでは人気の「undershirts」というテーマをお借りしました。

blog.hatena.ne.jp

注目した部分はレスポンシブ対応であること。

アクセスしてくれる方の6割くらいはスマホだし、自分もPCで書いたりしつつiPadで確認することも多いので、どの媒体から見ても美しく見やすいものがいいですね～。

カスタムして変えた部分

トップページのカード部分の色・枠
タイトル/見出しの装飾
文字の強調部分をマーカー風に（以前から継続）
グローバルメニュー＆トグルメニューの追加
からの、トグルメニュー開けない問題の解決

他にもリンクの色を変えるとか細々とした部分はあるんですが、大まかにいうとこんなところが大きなカスタムかなと思います。

かつ自分のためにも保存しておきたい情報達がこちらです。

トップページのカード部分の色・枠

f:id:everydaymoromoro:20190208202940j:plain

シンプルでフラットデザインなものにしたかったので基本は赤白の単色でまとめてるんですが、あまりにフラットすぎたので、カード部分だけ影をつける仕様にしました。

カスタムとしては、

余分な枠線を消す
影を入れる

とシンプルなタグを入れるだけなのですが、「記事一覧表示の場合の各記事を表すコード」が一体なんなのかわからず…。

belle choseさんの記事にたどり着き、コードを特定！

bellechose.hatenablog.com

belle choseさんでは角丸にするコードを紹介されていますが、これを加工して、わたしは下記のように書いています。

/*****記事一覧の枠のスタイル*****/
.page-archive .archive-entry {
border: 1px solid none; /*枠線が太さ1px、直線、装飾なし*/
box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.33); /*ボックス陰が上から3px、右4px、下4px、透過33%）
}