AMEXとANAマイル

マイルで旅をアップグレードするがモットーの「旅好きによる旅好きのためのブログ:

はてなブログのカード型テーマ「ZENO-TEAL」のカスタマイズまとめ

f:id:journeysurf:20190506193516p:plain

 

はてなブログを初めて約1年経過しました。

旅・マイルブロガーのkokoです。

 

 

マイル情報や旅情報をブログで発信するため、はてなブログを有料化して配信を続けております。現在では月間PV数2万を超えて、徐々に読者様に認知されて来たと思っております。

 

まだまだ先輩ブロガーさんに手も足も及びませんが、これからも精進します。 

 

WordPressへの移行を検討しておりますが、はてなブログへの愛着があって移行を躊躇っております。そこではてなブログでもカード型のテーマ「ZENOーTEAL」を使えばブログレイアウトは格段とカッコ良くなりますし、見た目もスッキリします。 

 

「ZENOーTEAL」のデザイン概要

 はてなブログでカード型デザインに変更したい場合は「ZENOーTEAL」を利用する事をおすすめします。(初心者の方に特におすすめしたいデザインです) 

 

ZENOーTEALをおすすめする理由

  • カード型デザインでユーザビリティのUP
  • デザインしやすい(スマホ最適化)
  • 見た目がスッキリする
  • 変更が簡単
  • ZENOーTEALさんが作成をしたはてなブログ用テーマでカード型テーマが特徴です。
  • zeno-teal.hatenablog.com

 

 

「ZENOーTEAL」のデザイン後の画面の見え方(スマホ・PC)

スマホ画面の見え方

f:id:journeysurf:20190506183213j:plain

 

トップ画面に表示できるカードの数はいくらでも指定できますが、10記事程度がスマホ表示であれば見やすいと思います。

カード型で写真とタイトルが非常に見やすく並んでいるのがわかると思います。

 

PC・タブレット画面の見え方 

f:id:journeysurf:20190506184205p:plainf:id:journeysurf:20190506184208p:plain

 

PC画面ですとカード型の記事一覧の横にサイドバーが並んでいて非常に見やすい画面となっております。

 

 

デザインカスタマイズ(カードサムネ編)

基本的に「ZENOーTEAL」のデザインをサイトにDLすればカード型のデザイン環境は完了になります。そこから細かな修正やデザインを行いますので下記をご参照ください。 

 

f:id:journeysurf:20190506185348j:plain

 

カードの記事サムネを写真とタイトルのみに表示をしたい場合、デザインを変更したのに、カードのタイトル画像がNO TITLEとなっている場合は下記の変更が必要です。

 

ZENOーTEALでは、カード型デザインに特化をしているため、記事の一番最初に写真を持ってきます。


<p><img class="hatena-fotolife" title="f:id:journeysurf:20190506163445j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/j/journeysurf/20190506/20190506163445.jpg" alt="f:id:journeysurf:20190506163445j:plain" /></p>
🔺🔺🔺写真のHTML🔺🔺🔺
この写真のHTMLの直後に下記のコードを挿入します。

<p style="display: none;"> </p>
<p><!-- more --></p>

そうする事で、記事一覧にタイトル画像とタイトルのみが表示されるようになりエラー表示もなくスッキリとした見た目になります。

 

 

デザインカスタマイズ(ヘッダー編)

 このようにヘッダーに「カテゴリー」や「おすすめ記事」を持ってくるカスタマイズ方法をお教えします。

f:id:journeysurf:20190506185915j:plain

 

設定デザインカスタマイズヘッダタイトル下に以下のコードを挿入します。

 

おすすめカテゴリ設定


<div id="zeno-menu">
<ul class="zeno-menu">
<li><a href="**記事URL**">●●表示コメント●●</a></li>
<li><a href="**記事URL**">●●表示コメント●●</a></li>
<li><a href="**記事URL**">●●表示コメント●●</a></li>
<li><a href="**記事URL**">●●表示コメント●●</a></li>
<li><a href="**記事URL**">●●表示コメント●●</a></li>
</ul>
</div>

●●→表示コメントは上記の図の「マイル獲得」「ポイ活」「AMEX紹介」に当たります。

 

おすすめ記事設定



<div class="header-info"><a href="**記事URL**"><b>●●表示コメント●●</b></a></div>

●●→表示コメントは上記の図の「ANA AMEXカード発行でハワイ往復航空券を・・・」に当たります。

おすすめカテゴリの直下におすすめ記事設定を行う事で見た目もスッキリして見る事ができます。

 

文字サイズ変更

 <style type="text/css">
.entry-content {
font-size:16px;
}
</style> 

サイト自体の文字サイズを変更したい場合は、ヘッダーのタイトル下に上記のコードを挿入します。サイズはお好みで変更をしてください。一番ユーザーが見やすいサイズは16PXとされていますが、サイトの内容やデザインによっては、大きくした方が良い、小さくした方が良いなどありますので、状況に応じて変更をして見てください。

デザインカスタマイズ(記事編)

 

記事タイトルの大きさ変更

  /* 人気記事 タイトル 文字の大きさ */
.urllist-title-link {
font-size: 13px;
}

この変更をしないと記事一覧のタイトルが大きすぎてスッキリとした見た目になりませんので必ず変更をお願いします。

 

記事に日付を入れる変更

 /* 人気記事 日付 */
.urllist-date-link{
font-weight:700;
margin:5px 5px;
}

上記のコードを入れる事で、記事一覧に更新日付が入ります。

 

記事日付の文字色・スペースの修正

 /* 人気記事 文字色など変更 */
.urllist-date-link a{
color: #ffffff !important; /*日付の文字色*/
background: #cc4f5e;/*日付の背景色*/
padding: 0px 10px;/*日付の文字まわりのスペース*/

上記のコードを入力する事でスッキリとした見た目になります。

 

 

デザインカスタマイズ(フッター編)

 

フッターにサイトの概要などを記載する変更

f:id:journeysurf:20190506192525j:plain

上記の画面のようにサイトの概要などを3つの項目としてデザインカスタマイズする方法は下記のコードをフッタに入力してください。


<div class="three-footer">
<div class="footer-1">
<div class="footer-h"><i class="blogicon-help-alt lg"></i> ABOUT</div>
<p>当ブログでは、マイルを貯めるためのお得情報から裏技などをご紹介しております。貯まったマイルで世界中を旅しております。旅行関係の仕事をパートナーと日々旅の事、マイル事を研究しております。</p>
</div>

<div class="footer-2">
<div class="footer-h"><i class="blogicon-account lg"></i> CREATOR</div>
<p>自己紹介:FREE JOURNEYパートナーー</p>
<p>マイルを貯める事に目覚めて約1年。今までに貯めたマイルは40万マイル。<a href="https://twitter.com/koko_journey">@koko journey</a>ツイッターでもマイルの事。旅の事を呟いてます。</p>
</div>

<div class="footer-3">
<div class="footer-h">LIFE <i class="blogicon-heart lg"></i><i class="blogicon-heart lg"></i><i class="blogicon-heart-alt lg"></i><i class="blogicon-heart-alt lg"></i><i class="blogicon-heart-alt lg"></i></div>
<p>2019年の旅の予定</p>
<p>18ー19年末年始 タイ(リペ島)</p>
<p>19Mar ハワイ </p>
<p>19Apr モルディブ </p>
<p>19Sep イタリア </p>
<p>19Des ニュージーランドorニューヨーク </p>
</div>
</div>


*上記赤字は必要に応じて変更してください。

上記のコードを入力する事でスッキリとした見た目になります。