ブログ運営

【カスタマイズまとめ】はてなブログテーマを「CONTENTS」→「ZENO-TEAL」に変更

f:id:life-buffet:20180303213230p:plain

急に思い立ち、平日の真夜中にブログテーマを変更しました。←無計画

これまで「CONTENTS」というブログテーマを利用していたのですが、この度「ZENO-TEAL」に衣替えしました。

なんとか体裁が整ってきたので、自分の忘備録のためにも、「ZENO-TEAL」変更後に行ったカスタマイズをまとめておきます。このブログのデザインが気に入ったなんて人がいたら、ぜひ参考にしてください♪ (いるかな・・・)

 

ブログテーマを「ZENO-TEAL」に変更した理由

アイキャッチ画像をもっと活かしたい

以前利用していたテーマ「CONTENTS」は、シンプルで洗練されたデザインでとても気に入っていました。書き手・読み手が記事のコンテンツに集中できるように、というコンセプトで作られたテーマで、とにかく記事が読みやすいデザインなのです。

しかし1点だけ惜しいところがありました。

私は記事を書く際、アイキャッチ画像にもそこそこ力を入れています。たまーにですが、オシャレって言ってもらえたりもします(たまにね)。

記事の中でナチュラルに見えるよう、横長長方形(サイズはまちまち)で作っているのですが、「CONTENTS」のTOPページのアイキャッチ表示は1:1のスクエアなのです!

f:id:life-buffet:20180303230111p:plain

せっかく頑張って作ったアイキャッチ画像なのだから、キレイに並べたいな。というか、「この記事読みたい!」って思わせるためのアイキャッチ画像なんだから、ちゃんと表示させなきゃ意味ないよね!?

ということで思い切って、TOPページがカード型にレイアウトされている「ZENO-TEAL」に変更をしたのでした。

f:id:life-buffet:20180304002135p:plain

 

劇的じゃない!?Before→After

それでは先に、テーマ変更前と変更後の全体デザインをお見せしたいと思います。じゃじゃんっ!!

▼ブログテーマ「CONTENTS」(Before)

f:id:life-buffet:20180303225100p:plain

▼ブログテーマ「ZENO-TEAL」(After)

f:id:life-buffet:20180303232253p:plain

・・・あれ?一瞬、ほとんど変わってないように見える?(笑)

実は、もともとのブログ全体の雰囲気は気に入っていたので、あまり大きく変更したくはなかったんです。メインカラーの青緑をそのまま残したので、パッと見はあまり変わりませんね(笑)。色の力って凄い。

よーく見てみると、トップページはアイキャッチ画像が、ちゃんと主役として並んでいます。こっちの方が、記事を選ぶの楽しいですもんね。

 

「ZENO-TEAL」カスタマイズ

「ZENO-TEAL」をインストールしてから、「元のデザイン風」に戻すために行った作業です(なんじゃそれ)。

 

テーマカラーの変更

まずは「ZENO-TEAL」の公式サイトの記事に沿って、テーマカラーを変更しました。

上から2番目の#色コードを除き、全て私は青緑「#6bb6bb」で指定しました。コードが読めるわけじゃないので、細かくどれが何に反映されるのかは分かりません(笑)。

ちなみに2番目の#色コードは、中見出し(h4)のチェックマーク(✔︎)の色指定が含まれるので、濃いピンクにしています。

 

フォントを変更

私がテーマ変更を躊躇していた最大の理由は、「CONTENTS」で使われている記事のフォントが気に入っていたから。なんかこう・・・文字がギュっと詰まってる感じがしなくて、個人的に一番読みやすいんですよね。

まず、「CONTENTS」で利用しているフォントを調べるため、Chrome拡張機能の「WhatFont」をダウンロードしました。ウェブページ上で気に入ったフォントを見かけたら、簡単にフォント名を確認できて便利ですよ♪

 

しかし、ここで問題発生です。

フォントを指定するコードをcssに入れても、フォントが全く変わらないのです。しかしそこで、すぐに救世主が現れました

ブログうぇぶいき – 今日もWEBで生きているを運営されている、豆ゴロさんid:mamegoroです。なんと豆ゴロさんは、CSSをわざわざ確認して下さり、素人の私にも分かりやすいように丁寧にアドバイスしてくれました。

 

豆ゴロさんに教えてもらった「!important;」を入れると、一発でフォントが反映されました!豆ゴロさん、本当に感謝感謝感謝です。。ありがとうございます!!

豆ゴロさんのブログ「うぇぶいきも、とってもオシャレで素敵です。ガジェットのレビューから食レポ、話題豊富でどの記事も面白いのでぜひ読んでみてくださいね。

 

文字サイズ&文字間隔を変更

「ZENO-TEAL」のデフォルトのフォントサイズは14pxです。目の悪い私は、14pxだと文字が小さくて目がシバシバしちゃうので、16pxに変更しました。

さらに文字と文字の間隔を1.5pxにし、デフォルトより間隔を広げました。どうやらこの文字間隔がポイントだったようで、ぐーんと「CONTENTS」のフォントっぽくなりました。

コードは、こちらのサイトを参考にさせて頂きました。

 

記事内のリンク色を変更

ここまでカスタマイズをして、なぜか記事内のテキストリンクが赤色になっていることを発見。理由は分からないまま、とりあえず色変更のコードをコピペ。コードはこちらの記事を参照させて頂きました。

 

すると、なぜかTOPページのカードの左上に「続きを読む」の文字が現れる・・・。

f:id:life-buffet:20180304132307p:plain

うぇーん・・・コードとかcssとか意味不明だよ〜!!と泣いていると、またまた救世主豆ゴロid:mamegoroさん

 

豆ゴロさんの言う通り、記事ページのみに反映させればOKだったため、.page-entryを頭に付ける・・・。するとやはり一発で修正できました!何度もありがとうです、豆ゴロさん。

ちなみに、リンク色はこちらのサイトを参考にさせて頂きました。Googleが調査した結果、同じ青でも#0044CCのカラーコードが一番クリック率が高いそうです。モノは試し、やってみようじゃないか。

 

引用枠のデザイン

ずーっとカスタマイズしたかった、引用枠のデザインを変更しました。前のテーマだと、コードをコピペして入れても上手く反映されなかったのです。(今なら「!important;」習ったから、できるかもしれないけどね)

ちなみに、引用ボックスのデザインはこんな感じです。かわいいでしょ? 

左側にアクセントカラーが入っているのと、斜体にすることで「引用文」であることが分かりやすくなりました。

 

参考にしたのは、WordPressテーマ「SANGO」をデザインされた、サルワカさんのサイトです。どれも素敵で、選ぶの迷っちゃいます。

 

ヘッダー画像のレスポンシブ対応

前のテーマ「CONTENTS 」では、ヘッダーの高さもレスポンシブ対応していて、画像も自動的に調整されていたのですが、「ZENO-TEAL」だとスマホ表示でヘッダー画像の左右が見切れてしまう・・・という現象がありました。

そこで参考にさせて頂いたのが、いっしーさん(id:hometaka5657のこちらの記事。私もいっしーさん同様、色々なサイトの色々なコードを試し、最終的にこちらに辿り着きました。

 

その他、参考にさせて頂いたサイト

「ZENO-TEAL」は、はてなブログでも人気テーマなので、色々なブロガーさんが利用されており、カスタマイズ記事を書かれています。ここでは、特にお世話になった2サイトを紹介させて頂きますね。

 

まず、長崎のDIYブロガー、みっぷうid:imuhのカスタマイズ記事です。

私のような素人でも理解できるよう、噛み砕いて優しく説明してくれています。まさに、痒いところに手が届く感じ。冒頭のページ全体のスクショは、みっぷうの記事を参考にさせて頂きました。

 

もう一つは、Webデザイナー・グラフィックデザイナーのあいまいみーちゃんid:imyme_999のカスタマイズ記事。

カスタマイズ内容が豊富に紹介されていて、読んでいるうちに、当初想定していた以外の部分も、どんどんカスタマイズしたくなっちゃいます。

 

「ZENO-TEAL」以外のカスタマイズ

その他にも、前から気になっていた部分を、この際だから一気に修正をかけました。(こちらはブログテーマとは関係ない部分です)

 

サイドバーのプロフィール欄

これまでずっと、はてなブログのデフォルトのプロフィールを使っていましたが、えむしてっくさん(id:mshitechの記事を参考に、プロフィール画像を大きくしました。

プロフィール画像やaboutの丸の上に、カーソールを当ててみてください。素敵なアニメーションも付いております。

f:id:life-buffet:20180304150047p:plain

 

aboutページ

書かなくては・・・と思いつつ、ずーっと放置していた aboutページ(運営者のプロフィールページ)。

そんな折、オークニさん(id:a24o92めちゃくちゃ素敵なaboutページを、どかんとコピペで作っちゃっていいよと、太っ腹に紹介されていたので、迷わず使わせて頂きました。

出来上がったaboutページはこちら。良かったら見ていってね。

 

カエレバ・ヨメレバ

先ほどのあいまいみーちゃん(id:imyme_999)が紹介していた、ぷちゅんさんid:ktrw3200カード型のデザインがとても可愛いかったので、利用させて頂きました。

 

もともとカエレバ・ヨメレバは、 えむしてっくさん(id:mshitech)のエフェクト付きのボタンを使わせて頂いておりました。これも凄く気に入っていたので、このエフェクトは残しておきたいなと思ったのです。(←欲張り)

 

そこで欲張りな私は 、外枠部分はぷちゅんさんのカード型デザイン内側の紹介ボタンはえむしてっくさんのエフェクトを、それぞれ利用させて頂きました。

ご参考までにコードを載せておきます。素人が組み合わせているので、途中おかしなところがあるかもしれません・・・。

 

完成したカエレバ・ヨメレバのボックスはこちらです。なかなか可愛いでしょ?

 

カスタマイズの感想

CSSコードと格闘するのって、外国語に触れる体験と似ている

私はこれまでHTMLやCSSを勉強したことがない、全くのど素人です。しかし今回カスタマイズを行うにあたり、細かい色やサイズの変更をかけたかったため、コピペしてきたコードと1行1行にらめっこしていく作業を行いました。

するとだんだん、それぞれが何を表しているのか、分からないなりに分かるようになってきたのです。そう、それはまるで英語長文を、知っている単語を頼りに1文1文ずつ読み解いていく・・・そんな作業に似ていました。

今の私は、CSSコードの「文法」は習ったことがないけど、とりあえずアメリカに行って「日常会話」や「簡単な単語」がふわっと体験の中で分かるようになった・・・そんな状態です。

0(ゼロ)から本を開いて文法を独学するのは、なかなか根気が必要なので、これからWebデザインを勉強したい人は、まずCSSコードとにらめっこするのが一番の近道かもしれません。私も、なんとなく雰囲気が掴めたので、これから本を開いてみようと思います。

 

同じテーマでもカスタマイズ次第で、個性を出せる!

同じブログテーマでも、メインカラーを変えたり、独自のカスタマイズを加えることで、個性的なサイトに仕上げることができます。

今回のカスタマイズにあたり、「ZENO-TEAL」を利用しているたくさんのブログを見に行きましたが、本当に皆さん個性的!中には、「ZENO-TEAL」使っていると気づかないこともしばしば。

少しずつカスタマイズ加えて、自分が思い描く理想のブログを作っていけると良いですよね♪