tsurezure naru mama-ni...
思ったこと・考えたこと、美味しいもの、コスメ、ファッション、映画、などなどOLの雑記

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


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

カスタムとしては、

 

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

 

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

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%)
}

見出し1のあたまに★!

わたしは見出しは1以外はあまりつかわないので、とりあえず見出し1だけ設定してます(他の見出しは後回し)。

見出しもかわいく囲ってあるものや背景色をつけたりいろいろあるのですが、わたしは割とシンプル志向なので、とりあえず文字は黒のまま、でもこれだけじゃ目立たないのであたまに★をつけています。

 

参考にしたのは、サルワカさんの見出しデザインまとめページです。

見てるだけで楽しい~!のですが、わたしが参考にさせていただいたのは④の「アイコンフォントを使った見出し」です。

このアイコンフォントを好きなもの(ここでいう★)に変更しました。

 

saruwakakun.com

 

今回初めてfont awesomeを使ったんですが、他にもかわいいものがたくさんあるので今後いろんなとこで使っていきたいです。

文字の強調をマーカー風に

どういうものかというと、こういうことです。

マーカーを引いたように見えてわかりやすいし、半透明な感じがなんかかわいい!ということで、こちらもやりたかったカスタムの一つです。

こちらの参考はmu2inさんから。

強調タグ<b>で反映されるので、いちいちhtmlを触ることもなく、見たまま編集モードで記事を書く人にもらくちんです。

これも貼り付けるだけなので簡単でおすすめです。

 

mu2in.hatenablog.com

 

グローバルメニューの追加

f:id:everydaymoromoro:20190208233028j:plain

 

これやってみたかったんですよね!!

参考にしたサイトはYukihy Lifeさん。すごくわかりやすい!

スマホやiPadで見た時はトグルメニューになるように設定されています。

そしてちゃんと階層も2段にできます。

 

www.yukihy.com

 

自分のiPhoneとiPadではトグルメニュー もちゃんと見えてるんだけど、他の機器からのアクセスでもちゃんと見えてるといいな。

トグルメニュー が開けない問題発生

f:id:everydaymoromoro:20190208233018j:plain

 

…と、喜んでいたんですがiPhone&iPadのトグルメニュー が開けない問題が。

表示されてるのにクリックできない!ということで、諦めかけましたがこちらのブログに助けられました。

こちらの黒木ノ水岩さんで紹介しているコードをheadに入れるだけで即解決!

よかった!本当にありがたい。感謝。

 

kurokinomizuiwa.hatenablog.com

 

 

そんな感じで、ぼちぼちカスタムを加えていって自分らしく染めていっているところです。

まだまだ変えたい部分や改善点はあるので、細々とちょこちょこ変えていこうと思います!


 

 ブログランキング・にほんブログ村へ