初心者が迷った箇所！ZENO-TEALのカスタマイズ

この度、ブログテーマを「ZENO-TEAL」に変更しました。

難しいカスタマイズをしなくても2カード型のレスポンシブ対応。スマホ版でも最初から2カード表示ができるのは、はてなブログの中で珍しいです。

最初から設定されているので「ブログ初心者に優しい！」と思いきや、つまずきまくったので記事にしました。「ZENO-TEAL」のカスタマイズと注意点をご説明します。

現在はWordpressに移行しています。

「ZENO-TEAL」カスタマイズと注意点

旧テーマからZENOTEALに変更した際に、カスタマイズで悩んだ点をまとめます。

導入する前に知っておく大切なこと

僕は、はてなブログProに登録しているので、1番目のPro向けはクリアしています。

しかし、画像の位置と「続きを読む」が正しい位置に入っていません。それに沢山ある記事を一括で修正する方法なんて知りません。

ということで、全記事を手作業で修正することに。／（^o^）＼

テーマストアの説明文をよく見ていませんでした…。先に記事を修正して準備が整ってからZENO-TEALのインストールをおすすめします。

そうでないと下記画像のような感じでアイキャッチが表示されなかったり、枠に画像が収まりきらない状態でブログを公開することになります。

＼ Pro化の詳細はこちら ／

記事一覧に画像が挿入できない原因

「全部修正できた！」と思いブログトップページを確認してみると、まだ画像が表示できていないのがちらほら…。

画像サイズが大きすぎるのかな？と考えて、画像を小さくしたり縦横比変えたりしても挿入できませんでした。

原因は単純なことで、画像より前（上）に段落が入っていたり、消し忘れたコードの破片が残っていました。当たり前ですが、少しでもコードがおかしいと上手く表示しません。

見たままモードを利用している人は「HTML編集」で要確認です。

蛍光マーカーペン風の色が変わらない

蛍光マーカーをミドリ色に装飾したくてCSSでカスタムしても反映されません。

「ZENO-TEAL」は「B（太字）」を押すと、文字が黄色マーカーになる設定が初期状態で実装されています。これが干渉してCSSを入れても蛍光マーカーにならなかったのです。

散々検索しまくって、どうすれば蛍光マーカーになるのか悩みましたが解決できました。
※追記：参照していたページが削除されました。

/*蛍光マーカー打ち消し*/
.entry-content strong{background: initial;}

こちらの記事に蛍光マーカーを打ち消す（実装解除する）方法と、色だけを変える方法が記載されています。無事に蛍光ミドリで表示ができました。

スマホ版ｈ２の見出しが変更できない

テーマカラーを変更するコードを使ってブログ全体を青色に変更しました。すると、「ｈ２見出し」が青い下線だけになってしまいました。（キャプチャ忘れ）

自分でCSSを入れて見出しデザイン変更をしてみようと試みましたが変更できず。検索して解決策を探してみると蛍光マーカー同様、ZENO-TEALの実装を無効にするやり方が出てきました。

しかし、それもうまく反映されなかったので自分なりにCSS変更することにしました。

@media screen and （max-width: 480px）{ .entry-content h2 {border-bottom:3px solid #色コード;color:#色コード;background-color:transparent;} }

原因と対策

青い下線は「border-bottomに色を指定している」ので「border-bottom」を消しても、ZENO-TEAL標準で実装されているミドリ色に戻るだけでした。

h2 {padding: 0.5em;border-bottom:1px solid #4169e1;color:#ffffff;

background-color:#4169e1;}

完成がこちら

レスポンシブなのに、なぜかスマホ表示では「吹き出し風」が反映されません（PC表示は吹き出し風にできています）。初心者にはこれが限界です。

シンプルで良いと思うので、しばらくはこれでいきます。

ヘッダー画像がPC版とスマホ版で高さが違う

上記リンク先の説明通りにしているはずですが、ヘッダー画像の高さがおかしく表示されてしまいました。

多分、スマホ版に多段メニューを設置しているから見える範囲が違うんでしょうね。

ということで、ブログテーマPLAINの時にもお世話になりました「冒険者Lv.1さん」の記事からCSSをコピペしました。

>>ヘッダー画像をどんなテーマでもサイズピッタリに調整するカスタマイズ

<style type="text/css">
   .header-image-wrapper {display:none;}
   #blog-title{display:none;}
   .headernew img{
       max-width:100%;
       margin: auto;
       display: block;
   }
   .headernew a{
       display:block;
       background-color:#fde6ff;
   }
   .headernew{
       margin:0px!important;
   }
  
</style>

<h1 class="headernew"> 
     <a href="ブログのトップページURL"> 
        <img src="ヘッダー画像のURL" alt="ブログタイトル" width="100%">
     </a>
</h1>

はい 一発で解決！すばらしい！画像を100％表示で指定しているので、画面ピッタリにヘッダー画像が表示できます。

この度も冒険者Lv.1さん ありがとうございました。

ページ読み込みスピードが激遅くなった

ZENO-TEALに変更してからページ読み込み速度が激遅くなりました。

これはひどい！左がPC・右がモバイルで「画像のリサイズとスクリプトの改善が必要です」と診断結果で出ていました。

ページが表示されるまでの時間が長いとSEOに良くないですし、ページが開く前に離脱されてしまいます。要改善ですので外部CSSにも挑戦してみます。

ZENO-TEALに最終更新日を付ける

ZENO-TEALに最終更新日を付けようと思いCSSをコピペしたところ、2段になって日時の表示がおかしくなりました。アイコンが出てないのと時間表示は要りません。

またまた検索しまくって見つけた修正コードを入れたところ、時間表示は直りましたが2段のままで下側のアイコンが出なくなりました。

途方に暮れて最終更新日の表示を諦めようかと考えだした時にみつけた「ともさん」の記事をみつけました。

>>更新日付を自動表示したい！設定方法を解説

下記コードをカスタマイズ⇒「タイトル下」に挿入します。

<!-- 更新日時表示 -->
<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>（function（$） {
'use strict';
var urls = , opts = {cache: false, dataType: 'xml'}, p,
url = 'https://www.tomomore.com/sitemap.xml';
function parseSitemapXML（url） {
var d = new $.Deferred;
$.ajax（$.extend（opts, {
url: url
}））.done（function（xml） {
$（xml）.find（'sitemap'）.each（function（） {
urls.push（$（this）.find（'loc'）.text（））;
}）;
d.resolve（）;
}）.fail（function（） {
d.reject（）;
}）;
return d.promise（）;
}
function findURL（url） {
$.ajax（$.extend（opts, {
url: url
}））.done（function（xml） {
var isMatched = false;
$（xml）.find（'url'）.each（function（） {
var $this = $（this）;
if （$this.find（'loc'）.text（） === location.href） {
isMatched = true;
appendLastmod（$this.find（'lastmod'）.text（））;
return false;
}
}）;
if （!isMatched） nextURL（）;
}）.fail（function（） {}）;
}
function nextURL（） {
urls.shift（）;
if （urls.length） findURL（urls[0]）;
}
function appendLastmod（lastmod） {
var $container = $（'<div></div>', {'class': 'lastmod'}）;
$container.append（$（'<span></span>', {'class': 'date-year'}）.text（lastmod.split（'-'）[0]））;
$container.append（$（'<span></span>', {'class': 'hyphen'}）.text（'-'））;
$container.append（$（'<span></span>', {'class': 'date-month'}）.text（lastmod.split（'-'）[1]））;
$container.append（$（'<span></span>', {'class': 'hyphen'}）.text（'-'））;
$container.append（$（'<span></span>', {'class': 'date-day'}）.text（lastmod.split（'-'）[2]））;
if （$（'.entry-header > .date'）.get（0）.tagName.toLowerCase（） === 'span'） {
$（'.entry-title'）.before（$container）;
} else {
$（'.entry-date'）.append（$container）;
}
}
p = parseSitemapXML（url）;
p.done（function（） {findURL（urls[0]）}）;
p.fail（function（error） {}）;
}）（jQuery）;
</script>

以下を「CSS」に挿入します。

/*↓----更新日時表示----↓*/
.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
display: inline;
margin-left: 0px;
color: #888888;
}
.lastmod::before {
margin-right: 5px;
margin-left: 10px;
padding-left: 3px;
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: '\f01e';
}
.entry-date a {
background-color: transparent;
padding: 5px 0px 5px 6px;
text-decoration: none;
font-size: 15px;
display: inline;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
}
/*↑----更新日時表示----↑*/

ページ下部の追記されたコードを入れたところ一発で直りました。

仕様変更で時分秒表示がおかしくなってしまったとのこと。「ともさん」ありがとうございました。

さいごに

重たいブログで申し訳ございません。100記事以上あるのですごく大変ですが、順次画像を圧縮した物に変更中です。

アクセス数の推移など、ZENO-TEALにテーマ変更をしてみてどうなったのかまたご報告します。