アタックフォーメーション!

元ディーラー整備士が車業界から飲み物まで様々なテーマを本音で綴るブログ

アタックフォーメーション!

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

zenoteal

 

 この度『ZENO-TEAL』にテーマを変更しました!難しいカスタマイズをしなくても簡単に2カード型になる。レスポンシブ対応で、スマホ版でも最初から2カード表示!はてなブログでは珍しいぜ! ブログ初心者に優しい!と思いきや、つまずきまくったので記事にしました。

ブログ初心者向けの記事です(´;ω;`)

『ZENOTEAL』カスタマイズと注意点

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

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

重要

 はてなブログPro向けに作られたテーマである

記事の一番最初に画像を入れると記事一覧に表示される

(アイキャッチの選択とは別)

『続きを読む』を挿入する所まで記事一覧に導入文が入る

トップページの表示形式を全文形式にする

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

しかし画像の位置と『続きを読む』が正しい位置に入っていない!一括修正する方法なんて知らん。

全記事を修正しなければいけないことに/(^o^)\

テーマストアの説明をよく見てなかった...

先に記事を修正し準備が整ってからZENO-TEALをインストールすること!

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

ZENOTEAL 画像 表示されない

画像を記事の一番上に配置と『続きを読む』を挿入するだけで1時間以上かかったよ...

はてなブログ公式サイト>>はてなブログProに登録する

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

ZENOTEAL 画像 挿入できない

全部修正ができた!と思って確認してみるとまだ画像が表示できていないのがちらほら...画像サイズが大きすぎるのかな?と考え、画像を小さくしたり縦横比変えたりしても挿入できませんでした。

画像の前に段落が入っていた他に消し忘れたコードの破片が残っていたりして原因は単純なことでした。見たままモードを利用している人はHTML編集で要確認です。

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

蛍光マーカーをミドリ色に装飾したくてCSSを入れても反映されませんでした。『ZENO-TEAL』は『B(太字)』を押すと文字が黄色マーカーになる設定が初期状態で実装されています。これが干渉してCSSを入れても蛍光マーカーにならなかったのです。

散々検索しまくってどうすれば蛍光マーカーになるのか悩みましたが解決できました。

www.namahamuteikoku.com

こちらの記事に蛍光マーカーを打ち消す方法と色だけ変える方法が記載されています。

無事 蛍光ミドリで表示できました。

生ハム帝国さん ありがとうございました!

スマホ版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』を消しても標準テーマのミドリ色に戻るだけでした。

  • 『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

はい 一発で解決!すばらしい!画像を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

ページ下部の追記されたコードを入れたところ一発で直りました。仕様変更で時分秒表示がおかしくなってしまったとのこと。『ともさん』ありがとうございました!

さいごに

重たいブログですいません。100記事以上あるので大変ですが順次画像を圧縮した物に変更中です。アクセス数の推移など、zenotealにテーマ変更をしてみてどうなったのかまたご報告します。