読者です 読者をやめる 読者になる 読者になる

kuro6!発信します!

発信します!と言ったものの、まったりと色んな事を書いていくブログです。

ブログのテーマをZENO-TEALに変更したメモ。

f:id:kuro6kuro6:20170415104021j:plain

どうも!kuro6です。

 

いきなりですが・・・

 

ブログテーマ変えたんですけど、どうでしょうか!?

  

昨日まで当ブログを読んで頂いた事のある方はお気づきかと思いますが、ブログのテーマを変更しました。

 

色合いなど以前の雰囲気を周到したつもりですが、それでもだいぶ雰囲気が変わったと思います。新しくなった当ブログを改めてよろしくお願いします!

 

自分への備忘メモを兼ねた、変更点のご紹介です。

 

 

テーマ「ZENO-TEAL」

なぜ、このテーマを選んだというと・・・カッコいいからです!※個人的な感想です。

記事もカード状に並んでいて、見やすいですし・・・なんか今どきかな?と。

 

私の購読しているブロガーさんでもこちらを採用されている方は、結構居るような気がします。

 

製作者のサンプルページ

私が、カスタマイズをほぼスルーしてたのは・・・やはりHTMLやCSSが苦手だという事。なので出来るだけ簡単にカスタマイズ出来るテーマを探していました。

 

「ZENO-TAEL」は製作者であるorefolderさんが作ったサンプルページが有り、そこの記事には色々なカスタマイズ方法が掲載されているのです。

zeno-teal.hatenablog.com

 

基本的にはそのカスタマイズ記事通り好みにカスタマイズしていけます。

 

ちなみにサンプルページの1記事目は各修飾がどういった風に見えるかのサンプルが有ります。

zeno-teal.hatenablog.com

これを見て、「あ、はてなブログ(HTML)はこういう修飾も出来るんだ」って知る事も出来ました。

 

まずはテスト環境。

テーマの変更前はまずはテスト環境で試す!

f:id:kuro6kuro6:20170415113347p:plain

最近、シェアされていた記事を参考にテスト環境を作成!

www.foxism.jp

あれ?この記事書いた人って・・・「ZENO-TEAL」の製作者の方ですね!知らなかったので驚きました!

 

今回の変更は何から何までorefolderさんにお世話になっております!

 

追加でカスタマイズした点。

表示記事数

このテーマは2列に記事が表示されるのですが、はてなブログの初期値のままだとTOPに表示する記事数が7個なので・・・

f:id:kuro6kuro6:20170415113930p:plain

こうなります。

 

サンプルページのコメントにやり取りが有りましたが、これははてなブログの設定にてトップページの記事数を変更する事でうまく行きます。

 

f:id:kuro6kuro6:20170415114134p:plain

ダッシュボードの設定→詳細設定→トップページの記事数で変更。

 

f:id:kuro6kuro6:20170415114728p:plain

 これで無駄なスペースは無くなりました!

見出しの固定表示

画面をスクロールしていっても見出しが残るようになりました!

すげぇぇっっ!カッコいいし、読む人にもわかりやすい!是非採用!

 

ん?どういう事?って思う人は、今すぐ画面をスクロールしてみて下さいね。

 

使いたくない人向けに残さない方法も記載されています。

あまり使ってる人を見ないけど、それはH2の為?画面が重くなるとか何か理由があるのでしょうか?やはりorefolderさんがおっしゃるようにウザい?

 

とりあえず私はお気に入りですので当面使っていきます。

 

 

H3見出し向けのカスタマイズ方法も掲載されています。

 

ただ、私がそのままコピペした場合、ちょっと問題が有りました。

 

f:id:kuro6kuro6:20170415120241p:plain

 

スクロールすると・・・

 

f:id:kuro6kuro6:20170415120526p:plain

ん?まぁ読めなくはないか・・・

更にスクロールすると・・・

 

f:id:kuro6kuro6:20170415120605p:plain

次の見出しが・・・

f:id:kuro6kuro6:20170415120644p:plain

こうなります。

 

見出しH3の背景に色をつけ、文字の色を変更。

.entry-content h3

{color:#5F4C0B;border-left-color:#FFBF00;background-color:#F7D358;}

そう行った対応を行いました。

 

f:id:kuro6kuro6:20170415121638p:plain

 

おそらく、見出しH3の背景に透過は使えないという事ですので、色の設定次第では特に問題を感じないと思います。

 

 

スマホだと見出しが2行に折り返された時に上手く表示されないので、見出しの文字数は少なめで対応していこうと思います。

 

どちらのケースも理想は次の見出しが来たら消えてくれたらいいのですが、私の知識では思いつかず・・・

この辺り、なんか上手い方法が有れば教えて頂けると嬉しいです。

 

※2017/04/18追記

 

 H2見出しはスマホだと上記H3のような現象が発生していました。

 

@media screen and (max-width: 480px){

.entry-content h2

{border-bottom:3px solid #色コード;color:#FFBF00;background-color:transparent;}

}

こちらのcolor:transparent;が背景透過なようですので削除

色を調節し・・・

高さをH3に被っても不自然ではないようにheight: 65px;を追加

コメントも追加して訂正完了

/* PCか表示サイズ480以下 */
@media screen and (max-width: 480px){
.entry-content h2
{border-bottom:2px ridge #色コード;color:#FFffff;height: 65px;}
}

 この追加訂正をするのにまた時間がかかってしまった・・・

 

背景のドット

これは私のPCだけかもしれませんが、ドットの見え方が安定しない?ので、はてなブログから提供されている背景に変更しました。

 

今回は断念した事。

グローバルメニュー、フッターは表示させたい内容が決めれなかったので一旦保留です。

ヘッダー画像も色々変えようと考えましたが、すぐには納得いくヘッダーは出来そうにないので保留です。

 

最後に・・・ 

今回のテーマ変更で私が変えたのはこんなところですね。

ほぼサンプルページの指示通りです。「ZENO-TEAL」を導入予定、もしくは検討されている方は是非サンプルページをご覧になって下さいね!

 

また、この記事を読んでくれている女性の方にお伝えしたい事があります。

 

美容院に行った後に男性に有った時は、「なんか気付かない?」と聞かずに「美容院行ったんだけどどうかな?」と聞いてあげて下さいね!

 

それでは!