はてなブログでもカード型レイアウトに！「ZENO-TEAL」はじめました

少し前から？ブログで、ちょくちょく見るようになったカード型レイアウト。あれ、見ていて楽しいし良いですよね。

そんなカード型のレイアウトが誰でも簡単に出来てしまうのが、はてなブログ専用のテーマ「ZENO-TEAL」。WordPressで人気の「ストーク」に似ている事もあって、話題になった事もあるテーマです。

そんな訳で、今回このブログも「ZENO-TEAL」にする事に。本当はWordPressで「SANGO」を使いたかったのですが、諸事情により「はてな」に残留を決めたので（笑

カスタマイズしてみました
でもカスタマイズはほどほどにしよう（笑

カスタマイズしてみました

実はこの「Noma-Noma」も簡単にカスタマイズしています。「ZENO-TEAL」公式とあまり変わらないような見た目ですが（笑

この記事では備忘録もかねてカスタマイズの内容をまとめました・・・が、多分間違っている箇所もあるかもです（笑

なので、他のところを見ても分からん！ってなった人のヒントになれば・・・位の気持で記事にしました・・・

ちなみにカスタマイズする際は、先に公式を見ると幸せになれそうです。個人的に「そうそう、これがやりたかった！」って内容が結構あったので。

zeno-teal.hatenablog.com

文字サイズの変更

「ZENO-TEAL」って文字のサイズがちょっと、小さい気がしたんです。なので「Noma-Noma」では、文字サイズを大きくするようカスタマイズしました。

/*記事の文字サイズ*/
.entry-content {
    font-size: 19px;/*文字サイズ*/
    line-height: 1.8;/*行の高さ*/
}

見出しの変更

大見出し（h3）、中見出し（h2）についても、こんな感じでカスタマイズしました。

/*見出し h3*/
.entry-content h3 {
  position: relative;
  color: #fff;
  padding: 8px 12px;
  background-color: #009789;
  border-radius: 6px;
}
.entry-content h3::before{
  position: absolute;
  top: 100%;
  left: 32px;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #009789;
  content: '';
}

/*見出し h4*/
.entry-content h4 {
  position: relative;
  color: #3a3a3a;
  border-bottom: 4px solid #ccc;
  padding: 8px 10px;
}
.entry-content h4::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20%;
  height: 4px;
  background-color: #009789;
  z-index: 2;
  content: '';
}

ちなみに見出しのデザインについては、こちらのサイトを参考にさせてもらいました。「サルワカ」はデザインが秀逸で、見ていて楽しいブログです。

「Noma-Noma」も本当はこんなブログを目指したいけど、敷居がとっても高そう・・・（汗

saruwakakun.com

ソーシャルボタンの追加

ソーシャルボタンについては、公式サイトにやり方の記載があったので、それを参考にカスタマイズしました。

比較的簡単なので、見栄えの良い「SNSボタンをつけたいよ～」って人はぜひ公式を見てみてください。

zeno-teal.hatenablog.com

フッターを擬似的に消す方法

「ZENO-TEAL」ってフッターにプロフなどを書くスペースがあるのですが「noma-noma」ではこのスペースを消しています。

色々CSSを試してみたのですが、どうにも上手いやり方がわからなくて、「noma-noma」のフッターは背景色と同じ色にして、擬似的に消えて見える様にしました（汗

そんな訳で「noma-noma」ではCSSにこんな感じで記載しています。

/* フッター背景色 */
#bottom-editarea{
    background-color: #9fd6d2; /*色コードを編集 */
}

フッターにプロフ必須！って人は公式にやり方あります

安心してください、そのやり方、公式にありますよ！てな訳でプロフの記載をしたい人はやっぱり公式を参考にしてみてください。

zeno-teal.hatenablog.com

記事タイトルのサイズと色の変更

このカスタマイズは苦戦しました。何でかと言うとTOPページのタイトルサイズを変更すると、記事本体のタイトルにまで影響がでてしまったので・・・

まぁ、僕のCSSの知識が浅いために、苦戦したんですけどね（笑

で、どう解決したかと言うと「特定のページにだけCSSが影響するようにすれば良いじゃん！」と思い至ったので、その方法をGoogle先生を駆使して探しました。

すると、こんなサイトが・・・

www.clrmemory.com

これがしたかったんです！んで、こんな感じにCSSに記述しました。どうやら「h1.entry-title a」の前にページ名の「.page-index 」が付いていると、そのページにだけCSSが適用されるみたい。

/*トップページの記事タイトル*/
.page-index h1.entry-title a {
font-size: 120%; 
color: #00addd;
font-weight: bold;
} 


/*記事タイトル*/
h1.entry-title a {
color: #00addd;
font-weight: bold;
}

ちなみに各ページのclass名はこんな感じみたいです

この表は参考にさせてもらった「クリアメモリ」からの流用です。「はてなブログテーマ制作の手引き」にも記載があった気がしたんですが、見失いました・・・（汗

実行されるページ	追加するclass名
記事ページ	.page-entry
トップページ	.page-index
カテゴリページ	.page-archive-category
アーカイブページ	.page-archive
検索結果ページ	.page-archive
Aboutページ	.page-about

でもカスタマイズはほどほどにしよう（笑

良いデザインのブログで、ブログ運営したい！って思いは誰にでもあると思うんですけど、やっぱりカスタマイズはほどほどが良いですね。

だって凄い疲れるもん、カスタマイズするの（笑

そんな訳でしばらくは「ZENO-TEAL」で運営する事にします！