iPhone LIFE

iPhone LIFEは、iPhoneを中心としたガジェット関連の情報をお届けする個人ブログです。iPhoneの魅力やオススメの使い方などを紹介しています。

iPhone LIFE

【テーマ】ZENO-TEALつかってみた

f:id:chocoIate:20190130000910j:plain

はてなブログで、デザイン性に優れるZENO-TEALをテーマとして入れてみました。

 

 ZENO-TEALは、カード型にレイアウトされたデザインテーマです。

このテーマはレスポンシブ対応のため、PC・スマホの両方のデザインを整える事ができます。

はじめて使ったときに、いくつか戸惑ったところがあったので、メモしておきます。

 

1.カードに画像を表示させる方法

デフォルトの状態だと、記事を書いてもカードには何も表示されません。

画像を記事の先頭に挿入することで、トップページのカードに画像が表示されるようになります。

ZENO-TEALの公式サイトで、画像の推奨サイズは16:9とされています。

 

2.各記事に「続きを読む(moreタグ)」を入れ、記事にジャンプさせる

ZENO-TEALで最初につまづくポイントかもしれません。

デフォルトの状態だと、トップページのカードをクリックしても、記事にジャンプする事ができません。

記事の編集画面で 「続きを読む(moreタグ)」を挿入することで、カードに表示されている記事にジャンプできるようになります。

上記で挿入した画像と冒頭の文書あたりに「続きを読む」を入れると良いでしょう。

 

3.記事一覧を全文形式にする

「ダッシュボード」>「設定」>「詳細設定」>「トップページの表示形式(PC版)」>「全文形式」

トップページをカード型レイアウトで表示させるために必要です。

 

4.記事数を偶数にする

「ダッシュボード」>「設定」>「詳細設定」>「トップページの記事数(PC版)」

 トップページの記事を偶数設定にすることで、ZENO-TEALに最適な表示になります。

PC版の場合、カードは横2列に並びます。

 

5.デザインのカスタマイズ

細かい部分は、スタイルシート(CSS)を設定することで、デザインのカスタマイズができます。お好みで設定します。

「ダッシュボード」>「デザイン」>「カスタマイズ」>「デザインCSS」

 

文字サイズと行間の調整

はてなブログのデフォルトの文字サイズは大きめの印象でしたので、調整しました。

また、行間をある程度確保すると読みやすくなるので併せて調整しました。

/*--------------------------------------
フォントサイズと行間
--------------------------------------*/
/*文字サイズ変更*/
.entry-content { font-size:16px; line-height:1.8em;} /*改行での行間*/ .entry-content p { margin: 0.1em 0;}

 

PC版のヘッダー画像の調整

ウインドウ幅に合わせて、ヘッダー画像を横幅いっぱいに表示させます。

はてなブログのデフォルトの設定だと中央にしか画像が表示されないため調整します。 

>/*-------------------------------------
ヘッダー画像のカスタマイズ
--------------------------------------*/
/* ヘッダー画像を画面サイズに合わせる */ #blog-title-inner{background-size:cover;} /* ヘッダー画像の高さ */ #blog-title{ height:200px; }

 【参考】ヘッダー部分の背景画像を横幅いっぱいに広げる方法 - ZENO-TEAL 

 

スマホ版のヘッダー画像の調整

レスポンシブ対応とはなっていますが、ヘッダー画像がしっくりきませんでした。

/*--------------------------------------
スマホ版のヘッダー設定
--------------------------------------*/
@media (max-width:480px) { .header-image-only #blog-title { height: 100px; } .header-image-only #blog-title #blog-title-inner { background-size: cover; height: 100px; } }

  

グローバルナビゲーションバーの多段表示

ヘッダータイトル下のナビゲーションバーを多段表示できるように調整します。

※グローバールナビゲーションバーの設定は、別途。

/*-----------------------------------------
グローバルナビ設定
--------------------------------------*/
.zeno-menu{ -webkit-flex-wrap: wrap; flex-wrap:wrap; /* 多段になるようにします */ } .zeno-menu li{ width:16.5%; /* 普段の1つあたりの幅 */ } @media screen and (max-width: 780px){ .zeno-menu li{ width: 33%; /* 横幅780ピクセル以下のときの1つあたりの幅 */ } } @media screen and (max-width: 480px){ .zeno-menu li{ width: 50%; /* 横幅480ピクセル以下のときの1つあたりの幅 */ } }

  【参考】タイトル下のグローバルナビゲーションバーを多段形式にする - ZENO-TEAL

 

グローバルナビゲーションバー

ヘッダーにHTMLの記述が必要になります。

「ダッシュボード」>「デザイン」>「ヘッダ」>「タイトル下」

に次のHTMLを記述するとナビゲーションメニューが使えるようになります。

<div id="zeno-menu">
<ul class="zeno-menu">
<li><a href="ジャンプ先のURL">項目1</a></li>
<li><a href="ジャンプ先のURL">項目2</a></li>
<li><a href="ジャンプ先のURL">項目3</a></li>
<li><a href="ジャンプ先のURL">項目4</a></li>
</ul>
</div>
  

はてなキーワードの下線を消す

はてなキーワードになる箇所の下線を非表示させます。

このスタイルシートを設定することで、通常時は下線が非表示になりますが、マウスオーバーで下線が現れ、キワード検索もできます。

/*-----------------------------------------
キーワード下線を消す
--------------------------------------*/
a.keyword { border: 0 !important; text-decoration: none !important; pointer-events: none !important; cursor: default; color: #5A5A5A; }

  【参考】はてなブログの自動で勝手につくキーワード下線とリンクを消す - AIUEO Lab2

 

テーマカラーの変更

カスタマイズ方法はZENO-TEAL公式で公開されています。

メインカラーを変更すると印象が変わります。

/*-----------------------------------------
テーマカラーの変更 --------------------------------------*/ /* メインカラー 500 */ #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 {color:#色コード;background-color:#色コード;} .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:#色コード;} .archive-heading::before, .entry-content h2::before {border-top-color:#色コード;} .entry-content h3 {border-left-color:#色コード;} ul.table-of-contents, .page-index .pager a, .page-entry .pager span {border-color:#色コード;} @media screen and (max-width: 480px){ .entry-content h2 {border-bottom:3px solid #色コード;color:#色コード;background-color:transparent;} } /* 濃い色 600 */ #globalheader-container, .zeno-menu li a:hover {background:#色コード;} .entry-content p a:visited {color:#色コード;} /* 薄い色 400 */ .page-entry .pager span a:hover, #zeno-menu, .entry-content ol ol li:before {background:#色コード;}

 【参考】カスタマイズ5:全体のテーマカラーを変更する - ZENO-TEAL

 

サイドバーのカスタマイズ

サイドバーのプロフィールなどの項目をカスタマイズします。

/*-----------------------------------------
サイドバーのタイトルフォント --------------------------------------*/ .hatena-module-title{ font-size: 14px; color: #333333; background-color:#ffffff; border-top: 2px solid #222831; border-bottom: 2px solid #222831; padding:8px 0px 12px 10px; } /*-------------------------------------- サイドバーのタイトルの横にアイコン設置 --------------------------------------*/ .hatena-module-title:before { font-family: FontAwesome; font-size: 16px; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding:3px 3px 0px 0px; } .hatena-module-profile .hatena-module-title:before {content: "\f007";} .hatena-module-search-box .hatena-module-title:before {content:'\f002'} .hatena-module-links .hatena-module-title:before {content:'\f0c1'} .hatena-module-recent-entries .hatena-module-title:before {content:'\f005'} .hatena-module-archive .hatena-module-title:before {content:'\f187'} .hatena-module-entries-access-ranking .hatena-module-title:before {content:'\f091'} .hatena-module-category .hatena-module-title:before {content:'\f02c'} .hatena-module-recent-comments .hatena-module-title:before {content:'\f086'} .hatena-module-circles .hatena-module-title:before {content:'\f0c0'} .hatena-module-related-entries .hatena-module-title:before {content:'\f00b'}

 【参考】はてなブログのサイドバーのカスタマイズ方法 [コピペで使える]

 

サイドバーのアーカイブリンクをカスタマイズ

月別のアーカイブの文字列はリンク形式のため、上記の設定とは別に記述が必要です。

/*-----------------------------------------
サイドバーのアーカイブリンクの設定 --------------------------------------*/ /*クリック前の色*/ .hatena-module-archive a:link {color:#333333;} /*クリック後*/ .hatena-module-archive a:visited {color:#333333;} /*マウスを重ねた時*/ .hatena-module-archive a:hover {color:#999999;}

 【参考】はてなブログのサイドバーのリンク色を変更する - 幸せ落ちてた拾った咲いた

 

はてなブログにJQuery3.0を導入する

「ダッシュボード」>「設定」>「詳細設定」>「headに要素を追加」

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>