Zeno-Tealをカスタマイズ！ブログを１カラムにした理由
はてなのテーマを変更し、色々カスタマイズしました。
HTMLやCSSに関しては素人なので、多くの方々のサイトを参考にカスタマイズしました。その感謝を他の方に還元できればと思い、カスタマイズ記事を書いてみたいと思います。
はじめに
今回、ブログのデザインを変更しようと思ったのはアドセンスの収益が恐ろしく低いことがきっかけです。
ツイッターでフォローしているはた@ブロガー (@hata_blog) on Twitterさんのサイト収益を手っ取り早く伸ばすならアドセンスの最適化が一番効果的 | はたの雑記ブログを拝見し、久々にアドセンスの収益を確認したら、びっくり。ほぼゼロに近い数字でした。
ピークはいいお小遣いになっていたのですが、今ではタバコを買ったら終わってしまうくらい。これはまずいと新しくリンクユニットを設置したりしているうちにムクムクとカスタマイズ欲が。
好きなブログに１カラムが多いので、なんとかできないかなぁと思っていながらいろんなページを見ていたら、こんなページと出会いました。
だって2カラムでサイドバーを充実させれば、「このブログはこんな記事があるよ」とか「こんな人が運営しています」って読者の方に伝えたい様々な情報を詰め込むことができますよね。バナー貼ったり、プロフィール充実させたりまあゴチャゴチャと。
しかし「これって書き手のエゴで、読み手を意識したブログ構成ではないんじゃないか・・・?」とふと疑問に思ったんです。
引用元：ブログは1カラムが良いと感じた理由とメリット、デメリットについて - かんすけの頭の中
確かにー＞＜。激しく同意です。さらに言えば、回遊させることで、何を望んでいるかといえば、アドセンスやアフィリエイトなどの広告を踏んでくれること、購入してくれることです。考えてみるとちょっと不純な気がしてきました。
もちろんブログでお小遣いもらえるのは嬉しいですが、このウェブサイトの目的は海外移住や旅行のあと押し、お手伝いです。
質の高い情報を届けて、それに集中してもらうということが私がやるべきことです。ですので、１カラムで限りなくシンプルにするというのが今回のカスタマイズの目的になりました。
収益を求めた結果、収益を度外視することになりましたが、それはそれでOK！
今回選んだテーマ
今回選んだのはZeno-Tealというテーマです。
もとから１カラムのテーマを選んでもよかったのですが、あまりにシンプルすぎて、イメージと合いませんでした。そんな時に見つけたのがこちらのサイト。
宇宙魚@はてなブログ (@25_sKy_fiSh_) on Twitterさんの『宇宙時代』はZeno-Tealから作られている１カラムのサイト。
オークニ@はてなブログ (@okuni_jiwaru) on Twitterさんの『オークニズム』は現在Zeno-Tealではありませんが、２カラムのサイトを１カラムにカスタマイズしていることから頑張れば可能なんだなということを学びました。
Zeno-Tealの素敵なところは、トップページで記事を一覧にした時、ブログカードのように並んでくれるところです。
通常２カラムで記事は２つまでしか横に並ばず、残りはサイドバーです。でも上記のサイトを参考に、サイドバーを移動させ記事を１つ並ばせることができました。
そんなカスタマイズについて、紹介しますね。
ゴールを設定しよう
実際に手を動かしてカスタマイズをする前に、完成形を想定しておきましょう。そうしないとカスタマイズの沼に落ちます。
もし、あなたが私のようにプロフェッショナルではないとしたら、なおさらです。どこで妥協していいのかわからず、ひたすら底なし沼にハマっていきます。
今回、私の妥協できない点は１カラムのブログにすること。
ここを起点に考えると、カスタマイズすべきこと。必要なことがわかります。
私の場合は、
①ヘッダーをシンプルなものにして、ちょっとオシャレなサイトを目指す
②トップページでも、カテゴリーページでも、記事ページでも１カラムにする。
これをより詳しく考えると
①＝ヘッダーだけじゃなくて、リンクやボタンなどの色も変えないといけない。
②＝１カラムにするにはサイドバーをどうにかしなくてはいけない。
ということがわかってきました。
前置きが長くなりましたが、まずは①から。
１. サイトをオシャレにする
ヘッダー
これはセンスの問題ですが、すでにテーマ自体がオシャレなのでそれに乗っかりましょう。
最近流行っているようなのでヘッダーをグラデーションカラーで作りました。
これはCanvaを使うと非常に簡単です。
詳しくはこちらをご覧ください。
様々なグラデーションが揃っているサイトから気に入ったグラデーションをダウンロード。それをCanvaにアップロードして、その上に字を書くだけです。
気に入ったグラデをクリックすればダウンロードできます。
フォトショを使って反転バージョンも作りましたが、あんまりパッとしなかったので却下しました。それがこちらです。
ヘッダー周りで言いますと、ヘッダーの両サイドに白の部分が残っていますが、ここは諦めました。
各サイトでこの部分の埋め方やヘッダー画像の拡大方法が記載されていますが、問題はグラデーションカラーということ。通常この部分を埋める場合はヘッダーと同じ色をヘッダーの背景に設定してしまえばいいのですが、グラデなので単色では逆に美しく無くなります。また拡大すると字が汚くなってしまいます。
相当な力技を使えば出来そうですが、私は力負けしそうなので諦めました。
詳しく知りたい方はこちらまで。
グローバルメニューやヘッダー下の記事の作り方にはこちらをご覧ください。必要な情報は網羅されています。
順番が前後しますが、グローバルメニューの字の色の変更はこれから紹介する全体のテーマカラーでは変更できません。こちらのコードをデザインCSSヘ。カラーの部分を変更すれば簡単に変更できます。
全体のテーマカラー
ここに記載されているコードをデザインCSSに入れればそれで終了です。
メインカラー７つ、濃い色２つ、薄い色１つ、カラーコードを入力する場所があります。
コードを見ただけでは私はわからなかったので、ひとつひとつ色を変えてチェックしました。大事なところだけ解説を。
薄い色は、ヘッダーメニューの背景色に使われます。そして、濃い色のひとつめはマウスオーバーした時に変わる色、ふたつめは外部リンクの色です。メインカラーは、サイドバーのタイトル部分に使われます。必ずしも、薄い色と濃い色というルールを守る必要もないかもしれません。
ここまででヘッダーの設定は終了です。
フッター
基本的にはこの通りです。この部分の色変更は先ほどのカラー設定では出来ません。
こちらのコードをデザインCSSにコピペしてください。
bottom-editariaはフッター部分全体です。ここのbackgroundやcolorを変更すると好きな色に出来ます。
その下のfooterの部分はフッター内の情報でフォントカラーなどを変更することができます。一部メインカラーからか色が引用されていますが、特に触っていません。目的が達成できればいいんじゃないかな。
ついでにはてな特有のヘッダーとフッターを消していなかったらここで消しちゃいましょう。
これで終わり…と油断していると大変。
私だけなのか、ここまで設定した後にモバイルで確認するとフッター部分が横に大きくはみ出てしまいました。
上のコードは修正済みなのですが、bottom-editariaのwidthが1174pxになっていました。なので、そこを100%に修正すればおしまいです。
もとはこのeditariaはChromeデベロッパーツールで引っ張ってきたコードなので、もしかしたら他の修正方法もあるかもしれません。
ようやくヘッダーとフッターが終了です。
２.２カラムを１カラムへ
トップページのメイン部分
ここを手がける前にあらかじめZeno-Tealの基本設定を確認し、ブログカードが２つ並んでいる状態であることを確認してください。そこからスタートします。
理屈で考えると記事が並んでいる部分を拡張すればいいので、その部分をChromeデベロッパーツールで探して、色々いじってみましょう。
私が見つけたのはこちら。
.page-index #wrapper
page-indexがトップページ。その中にwrapperというのがいて、こいつを変更したら、記事部分が横に広がりました。もっと正しいやり方があるかもしれませんが、とりあえず紹介します。
私が実際に使ったコードがこちら。
このコードをまたデザインCSSに入れると記事が並んでいる部分が横に広がりました。しかし、２つが横並びで非常に間が空いています。ここに３つ並んで欲しいわけです。
それをまた探してこんなコードを入れてみました。
これで３つ並びましたね。
なお、wrapperを変更するコードはpage-archiveとpage-entry、static-page-XXX版も作成しましょう。そうしないとカテゴリーページ、記事ページ、固定ページが１カラムになりません。ご注意を。
２つから３つへ並び替えるのコードは必要ありません。カテゴリー記事も記事ページもブログカード形式ではないので、入れてもおかしくなるだけです。
サイドバー
ここまで無事に進んでいれば、サイドバーが記事一覧や記事の下に来ているはずです。理想論で言えば、人気記事を横並びに５記事並ばせたいところですが、残念ながらそこまではたどり着きませんでした。
せめて出来たのが横に並べて中央揃えにすることでした。
参考にしたのはこちらのサイト。
変なところをいじったせいなのか、モバイルでは一列になってくれませんでした。
なので、モバイルでも２列です。文字ズレしてしまうので、今後の課題です。
この４行目で横幅を調整しています。あんまり広いと美しくない気がしますので65%に。色々試してみてください。
なお、このコードもpage-archiveとpage-entry版も作成しました。
さらなるカスタマイズ
記事ページを見ると、やたら字が広がっています。他の１カラムサイトはこんなに横長ではありません。ということで記事部分の縮小をします。それに合わせてフォントサイズや文字間も調整します。
記事部分調整
２カラムですとmarginが必要ないので、入っていないことが多いですが、１カラムの場合は必須です。これを忘れると頑張って１カラムにしたのに全体的に左寄りになってしまいます。固定ページ（static-page-XXX）も忘れずに！
フォントサイズと文字間
フォントサイズは17にしてあります。一般的にはやや大きいかもしれません。でも１カラムなんでいいかなぁと。
大きくした理由はこちらのページをご覧いただくと一発で伝わると思いますのでどうぞ。またまたオークニズムさんからの引用です。
カエレバ・ヨメレバ
もし導入されていればカエレバ・ヨメレバのカスタマイズ導入も忘れずに。
そして仕上げにもうひとつ！
アニメーション設定
ひゅっと色々動くアニメーションの設定です。
こちらから丸コピしました。ありがとうございます！！
さいごに
小さいカスタマイズはまだまだあるのですが、力尽きました。メインどころのカスタマイズは紹介できたと思います。
うちのサイトは旅行系なので写真も多く、これだけ色々やると重くなってしまった気がします。
まぁでもこのサイトをご覧になる方はほとんどが日本。タイやミャンマーに比べればネットの遅さなんて気にならないはず。あとはグーグルに嫌われなければいいのですが。
明日以降、軽くするカスタマイズを探す旅に出ようと思います。
今日のところはここまでですが、みなさんのブログライフの一助になれば幸いです！
テーマ作成者さん、そして引用させていただいたみなさん！
本当にありがとうございます！
