ライフスタイル

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

zenoteal

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

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

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

にゃんすけ
にゃんすけ
ブログ初心者向けの記事です。

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

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

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

重要
  • はてなブログPro向けに作られたテーマである
  • 記事の一番最初に画像を入れると記事一覧表示になる
  • ↑アイキャッチの選択とは別
  • 『続きを読む』を挿入する所まで記事一覧に導入文が入る
  • トップページの表示形式を「全文形式」にする

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

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

全記事を手作業で修正しないといけないことに/(^o^)\

テーマストアの説明をよく見てなかった…。先に記事を修正して準備が整ってからZENO-TEALをインストールすること

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

ZENOTEAL 画像 表示されない
にゃんすけ
にゃんすけ
アイキャッチ画像を記事の一番上に配置と「続きを読む」を挿入するだけで、1時間以上かかったよ…

はてなブログ公式サイト
はてなブログPro

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

ZENOTEAL 画像 挿入できない

「全部修正できた!」と思って確認してみると、まだ画像が表示できていないのがちらほら…。画像サイズが大きすぎるのかな?

と考えて、画像を小さくしたり縦横比変えたりしても挿入できませんでした。

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

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

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

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

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

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

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

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

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

zeno-teal.hatenablog.com

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

自分で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標準で実装されているミドリ色に戻るだけでした。

  • 「transparent」が透明化なので消して青色に変更
  • 「border-bottom:3px」ここを1pxに変更。背景と同色の青色に変更
  • 「color」の文字は白色にしました
  • 「padding: 0.5em」を追加して文字の位置調整
h2 {padding: 0.5em;border-bottom:1px solid #4169e1;color:#ffffff;

background-color:#4169e1;}

完成がこちら

ZENOTEAL 見出し

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

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

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

zeno-teal.hatenablog.com

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

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

にゃんすけ
にゃんすけ
そのうち一段スライド式かハンバーガーメニューに変えようと思います。

ってことでブログテーマPLAINの時にもお世話になりました「冒険者Lv.1さん」の記事からCSSをコピペしました。www.life-is-rpg.com

<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 読み込み

ZENO-TEAL 読み込みスピード

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

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

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

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

ZENO-TEAL 最終更新日

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

最終更新日 表示がおかしい

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

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

www.se-nailist.com

↓カスタマイズ⇒「タイトル下」に挿入。

<!-- 更新日時表示 -->
<!--[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('-')));
$container.append($('<span></span>', {'class': 'hyphen'}).text('-'));
$container.append($('<span></span>', {'class': 'date-day'}).text(lastmod.split('-')));
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記事以上あるのですごく大変ですが、順次画像を圧縮した物に変更中です。アクセス数の推移などzenotealにテーマ変更をしてみてどうなったのかまたご報告します。