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

退職代行で突然仕事を辞めた30代1児のパパ(元自動車整備士)収入なくなって本当にどうしよう/(^o^)\

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

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

ZENOTEAL

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

 

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

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

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

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

pro化してあるのでpro向けはクリア。

しかし画像と続きを読むが正しい位置に入っていない!

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

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

 

記事を修正し、準備が整ってから新しいテーマをインストールすること!

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

ZENOTEAL 画像 表示されない

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

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

ZENOTEAL 画像 挿入できない

全部修正ができた!と思って更新してみるとまだ画像がないのがちらほら...

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

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

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

『ZENO-TEAL』は『B』を押して文字を太字にすると、黄色マーカーになる設定が初期状態でされています。これが邪魔してcssを入れても蛍光ミドリにならなかったのです。

どうすれば蛍光ミドリになるのか悩みましたが解決できました。

www.namahamuteikoku.com

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

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

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

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

zeno-teal.hatenablog.com

テーマカラーを変更するコードで全体を青色に変更しました。

すると青い下棒が出るだけのh2見出しになってしまった。(キャプチャ忘れ)

自分で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版とスマホ版で高さが違う

zeno-teal.hatenablog.com

この通りにしているはずなんだけど画像の高さがおかしく表示されてしまいました。

多分スマホ版に多段メニューを設置しているから見える範囲が違うんでしょうね。そのうち一段スライド式かハンバーガーメニューに変えようと思います。

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

 

www.life-is-rpg.com

はい 一発で解決!すばらしい!

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

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

ZENO-TEAL 読み込み

ZENO-TEAL 読み込みスピード

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

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

重たいブログですいません。

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