白兎のまじメモ:本業と副業で成功を目指す!

WEBマーケッターでありフリーランスのECコンサルタントの白兎が書くまじなブログ

はてなブログの人気テーマ「ZENO-TEAL」の気になる部分を全部カスタマイズしてみた【自分への備忘録】

f:id:shiro-usagi:20190811120337p:plain

白兎(@shirousagi_memo)です!^^。昨日ジムで筋トレしてたので筋肉痛やらブログのリニューアルで寝不足やらで...。折角なのでブログのリニューアルの記事をちょっとまとめます。今日は「ZENO-TEAL」をカスタマイズした時のまとめ的な記事になります。

 

 

しろうさぎ的には、かなり気になってる部分が多かったのでお盆休みだしやっちゃったw。

 

zeno-teal.hatenablog.com

 

今回 カスタマイズはちょっと前からやりたいなーと思ってたんだよね。テーマも「ZENO-TEAL」とは決めてなかったけどやっぱりこれが一番良かった^^。

 

 

ブログのリニューアルの目的

  1.  サイトの読み込み速度改善
  2.  デザインのシンプル化
  3.  余白とのバランス
  4.  重要部分のカスタム化
  5.  スマホメインのカスタム
  6.  アドセンスの貼り直しと収益拡大

 

サイトの読み込み速度改善

以前から個人的に気になってた部分。「ZENO-TEAL」は前から使っていたんですが、グローバルナビをつけたりオススメ記事をヘッターに張り付けていたのもあり、読み込みが遅かった気がしてました。なので、今回は速度も含めてデザインのシンプル化をしてます。

 

ただ、何故かサイトの読み込み速度を試そうするとエラーになります。気になって他のはてなブログの人のURLで試したても同じでした...(誰か理由しりませか??) 

 

デザインのシンプル化

これ、一見速度の為?と思われるかもですが、単に趣味ですね。仕事がWEBデザイン系である事から、なんとなく今流行ってこんな感じだよねーと思うスタイルでシンプル化しました。

 

最近好きな色が..▼

  •  グレー:#ddd
  •  グレー:#eee
  •  文字色:#555.

 こんな感じのカラーが好きだし、ハマってるので今回のブログカスタマイズでも多用してます。結構気に入ってます^^。「ZENO-TEAL」の青緑は好きなんですが、今回は外しました!変更方法は後でー。

 

余白とのバランス

これも難しいですよねー(笑)部屋のインテリアも同じなんですが、物を壁にドンづけしたりしないんです...。意味は無いんですが、なんか嫌なんですよね...。なのでそれぞれ最低でも10px以上の余白を持っていますし、ちょっとPCサイトなんかは白が多くなってると思います。

 

重要部分のカスタム化

今回のカスタム化の1つの目的がコレ。とは言っても大した事ではないです。SNSボタンや読者登録などの目立たせたい部分もちゃんと目立たせましょう!と思った訳です。デザインをシンプルにしてるのもこの為。足し算+引き算な感じです。

 

重要部分のカスタム化

遅いですよ(汗)かなり遅いです...w。

今回は完全にスマホだけを見てカスタムしてます。なんかダメな癖として仕事がらPCを見ながらデザインをする事が多かったのでどうしても無視出来なかったんですが、今回はスマホがメインです。

 

アドセンスの貼り直しと収益拡大

はい!今回の一番のミッションはコレ。今月アドセンスが悪くて...。とは言っても普通なんですが、ワードプレス時代と比べてって事です。でもそれ以外でもGoogle側がHTMLをちゃんと読めてない気がしました。特に自動広告が上手く出てない感じがしたんです。なのでまずアドセンスをちゃんと見て貰うためにどうする?から今回始めました。

 ここまでが今回カスタマイズしようと思った動機ですね。ではここからカスタマイズした場所まとめまーす^^。

 

「ZENO-TEAL」のカラーを変更

 「青緑」から「黒+グレー」にテーマからを変更しました。

#blog-title,
.entry-content h2, 
.entry-content ol li:before, 
.page-index 
.pager a:hover, 
.page-entry .pager 
.pager-prev::before, 
.page-entry 
.pager 
.pager-next::after, 
.hatena-module-title, 
.archive-heading
{background-color:#fff;color:#000; font-size:26px;}


.entry-content p a, 
.entry-content h3, 
.entry-content h4::before, 
.entry-content ul ul li::before, 
ul.table-of-contents:before, 
.page-index 
.pager a, 
.page-entry 
.pager span a, 
.urllist-item::before, 
.hatena-module-category 
.hatena-urllist li::before, 
.entry-content ul li::before
{color:#000; line-height:200%}


.archive-heading::before, 
.entry-content h2::before
{border-top-color:#000}


.entry-content h3
{border-left-color:#000; color:#555}



ul
.table-of-contents, 
.page-index 
.pager a, 
.page-entry 
.pager span
{border-color:#000; color:#555}


#globalheader-container, 
.zeno-menu li a:hover
{background:#000; color:#555}


.entry-content p a:visited 
{color:#eb4c5e}


.page-entry 
.pager span a:hover, 
#zeno-menu, 
.entry-content ol ol li:before
{background:#000}

 

僕の今のCSSの設定の一部がコレです。なのでこれを...

  1. デザイン...▼
  2. スパナマーク...▼
  3. デザインCSS

 

に貼ると同じ色になります。

 

読者登録をカスタム

これは他の方のデザインを頂きました...▼

www.noname-note.com

 

今回はこのNoNameさんのデザインを使わせて頂きました^^。ありがとうございます。このボタン、アフィリリンクとかでも使い回し利くのでありがたいですね!

 

SNSボタンカスタマイズ

 今回使わせてもらったのがこの方...▼

jiyumemo.hatenablog.com

 

自由メモさん!ありがとうございます。

「あ..これ使おう!」と思ったのが読み込み速度が速いSNSボタンと書いてあったので...(笑)でも実装してみて良い感じです!

 

画像全てにグレーの枠線

これ、誰かがやっていて「いいなー」と思ったのがどこか記憶に残ってました。枠線って使い方によっては凄くウザい感じになるんですが、この程度ならなんとなく統一感もあっていいなーと。これはCSSで簡単にできます...▼

 

img{ border:6px solid #ddd; margin-bottom:10px;}

 

枠線の太さが6ピクセルで色が#666なんです。solidは普通の線と言う意味。後は点線とかもできますよ!画像の下に10ピクセルの余白も持たせました。コレしないとTOPの画像がタイトル文字と被ってしまうので...。

 

PCのレフトナビの各パーツタイトル

スマホで見ると記事の下の方に出てくるライトナビの部分。このタイトルの部分の背景を白にして文字を黒に。デフォルトだと背景色が青緑で文字色が白で下よね?これもCSSでさっき記載したんですが抜粋すると...▼ 

#blog-title, 
.entry-content h2, 
.entry-content ol li:before, 
.page-index 
.pager 
a:hover, 
.page-entry 
.pager 
.pager-prev::before, 
.page-entry .pager 
.pager-next::after, 
.hatena-module-title, 
.archive-heading
{background-color:#fff;color:#000; font-size:26px;}

 

ちょっと変わりにくいし他のパーツと同じ設定になってるのですが「.hatena-module-title,」がその部分になります。これの設定を{background-color:#fff;color:#000; font-size:26px;}としたんです

 

リストの文字の大きさ

f:id:shiro-usagi:20190811115030p:plain

こんな感じで大きくしてます。これも前から気になってました。意外とリストを使う事があるので意外と便利かも..?と。

 

実はこの設定も「.entry-content ol li:before, 」なので1個上のCSSの中に含まれてます。これだけ違う設定にしたい場合は..▼

.entry-content ol li:before,
{background-color:#fff;color:#000; font-size:26px;}

 この部分だけを切り分けるとこうなる。あとは自分で色とサイズを変えてね!

 

ずっとカスタムしたかった合わせ読み!

 

 

 これー...。これもネットで拾った(笑)

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #c62824;
background-color: #fffafa;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
top: -12px;
left: 10px;
padding: 0 10px 0 26px;
content: "関連記事";
background-color: #c62824;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.entry-content .emphasize-link::after {
position: absolute;
top: -16px;
left: 4px;
width: 28px;
height: 28px;
background-color: #c62824;
border-radius: 14px;
line-height: 27px;
text-align: center;
content: "\f009";
font-size: 16px;
font-family: "blogicon";
color: #fff;
}

 これをCSSに張り付ける!でHTMLが...

---------------

<div class="emphasize-link">
<a href="https://blog.hatena.ne.jp/shiro-usagi/majimemo.hateblo.jp/subscribe">
合わせ読み</a></div>

---------------

 

コレだよ。

これも後は自分でカスタムしてみてね!

 

まとめ

実際、アドセンスの推移やサイトの速度なんかはブログの運営報告で報告するね。ブログのカスタムは確かに大変だけど比較的気分も変わるし面白いから好き。是非やってみてねー!

 

終わりっ!