向かい風参考記録

陸上競技 その他 いろいろ

ブログテーマを『ZENO-TEAL』から1年ぶりに変更しデザインに手を加えました

f:id:Wetland:20200405225307j:plain

追記

4/11一旦作業終了しました。

現在、ブログを改装中です。

主にテーマやブログのレイアウト関係を変更する予定です。テスト環境なしで直接触っていますので、しばらく表示がおかしくなると思います。来ていただいている皆様にはご不便をおかけしますが、作業終了までしばしお待ち下さい。

現在のテーマ『ZENO-TEAL』について

今まで『ZENO-TEAL』を使用していました。はてなブログのユーザーならご存じの方も多いかと思いますが、比較的使用者が多いテーマです。

この記事は備忘録的に残そうと思うので、記録としてトップページのキャプチャも残しておこうかと思います。だいたい1年ほどこのテーマを使っていたことになるでしょうか。

f:id:Wetland:20200405230146p:plain

ワードプレス風のブログが簡単に作れるということで人気のテーマですが、1年くらい使っていると次のような点が気になりはじめました。

  • プリセットされている機能が後から入力したCSSと喧嘩する
  • カスタマイズしたい箇所が書き換えられない

ひとえに私の知識不足や技術の拙さが一番の原因なのですが「目次」「引用」「見出し」「強調」といった基本機能が予め設定されているため、後から追記した場合はお互いが喧嘩してしまってレイアウトが若干崩れたりしました。

基本機能には手を加えず(色などは簡単に変えられます)、テーマの流れに100%乗っかるのであればサポートページも充実しており使いやすいテーマかと思います。

ただ、私のブログの方向性とは少しずつマッチしなくなってきていたのも事実。慣れた環境から脱するには勢いが大事ですが、年度も明けたことですし、一気に手を付けてしまおうと思った次第です。

次のテーマ候補

実は、次のテーマを決めきれないまま見切り発車でテーマをリセットしています。

現在、暫定のテーマとして『MonoTsuduri』を使用しています。久々の1カラムデザインテーマです。カスタマイズが上手くいって、使い心地が良ければそのままこれにするかもしれません。

2カラムかつカード型でバッと記事タイトルを表示したい場合『マテリアルぽっぷ』が候補かなと思っています。

ただ、名前の通り全般がポップ調のデザインになります。アラサーのおっさんがこんなポップデザインでブログをやって良いものか。どうなんでしょう。

ベースの部分はやっぱり大きく変えない方が良いかな…と思ったときは『imz Basic』『絢爛(KENRAN)』あたりが候補です。

絢爛の方は名前の感じを見てもワードプレスっぽさを意識しているのでしょうか。意外とデモだけでは使用感がわからないので何ともいえません。

きちんと設定できれば『imz Pickup』なんかは綺麗で良いと思います。うちが風景写真を多めに載せるブログであれば、迷いなくこのテーマにしていたと思います。

写真メインのブログではないということと、設定が難しそうなので若干腰が引けています。優柔不断です。

4/12作業終了予定

一応、次の日曜までを目処に少しずついじっていく予定です。

昔のホームページはHTMLを手打ちで作っていたことを思うと今の方が1つ1つの設定は楽なはずなんですが、できることが多くなった分は確実に煩雑になっています。

やりたいこと、その手段はできるだけシンプルに。実生活もブログ環境の設定もそうありたいと思う次第です。

追記:今回手を加えた項目

現在4/11の夜ですが、一旦ここまでで作業を打ち切りたいと思います。カスタマイズ自体は凝りだすと選択肢が無限にありますし、キリがありませんので。

詳細は後述しますが、今回は「和色大辞典」を参考に色味を変更し、全体的に少しウェットで落ち着いた色をメインにしてみました。

それでは、今回手を加えた項目をざっと書いていきます。

ブログテーマ

ブログテーマを『MonoTsuduri』に変更しました。当初は1カラム(サイドに何もない)デザインにするつもりはなかったのですが、カスタマイズを始める直前に偶然このテーマを見つけて即決してしまいました。思った以上にしっくり来ています。

テーマに関しては『riseup』何かも良さそうだったんですが、しばらくは今のテーマのままでしょう。

ヘッダー画像

以前の写真は『雨竜沼湿原』に行ったとき撮影したものですが『苔の回廊(楓沢)』で撮ったものに差し替えました。ブログタイトルについては、満足いく入れ方ができなかったので取っ払いました。そのうち入れ直すかもしれません。

表示領域の関係で、奥行き感なんかはスマホで見た時の方が侘び寂び感(?)があって良い感じかなと思っています。

グローバルメニュー

デザインはブログテーマで設定されているものをそのままに、リンクだけ張り替えました。前よりは垢抜けたシンプルな感じですが、ここは追い追い手を加えるかもしれません。

背景色

ヘッダー画像とグローバルメニューが暗めの色だったので、デフォルトの白だと何となくバランスが悪い気がしますし、目がチカチカするので変えました。結果からいえばこれが中々決まらず最も苦労しました。

暗色と迎合しすぎると文字色(黒)が見えにくくなりますし、写真などを載せる関係もあって、あまり背景色で味付け感が出るのは好ましくありません。ああでもない、こうでもないと触っていくうちにこの色となりました。カラーコード「#fffdf2」は特に固有名詞はありませんが、配色関係のサイトを見るとパールホワイト系に近いようです。

f:id:Wetland:20200412003630p:plain

背景色を入れたことで副次的な効果もあります。背景が白色の画像や、上のリンクのような白主体のオブジェクトとの境界がハッキリ分かるようになりました。個人的にはかなり嬉しい点です。

目次の背景色

本文と同じ背景色ですと冗長感が出てしまい、目次との繋ぎも少し落ち着きがなかったので変更しました。白だと背景色から凹んで見える上に目次とのギャップが出てしまったので、類似色の『#fbfaf5(生成り色)』に設定しました。

f:id:Wetland:20200412004157p:plain

どうでしょうか、中々バランスも良くなったと思います。

見出しのデザイン・色

見出しのデザインを付箋風のものからよりシンプルに変更。大見出し:ベタ塗り、中見出し:下線にしました。小見出しも一応設定はしましたが、基本使わないことにします。

色については青緑を合わせた系統の色が好きなので、以前は北欧っぽいチェレステもどきを採用していました。今回は落ち着いた色ながら陰気にならないものを…と考え『#2c4f54(高麗納戸)』に設定。

高麗納戸は「こうらいなんど」と読みます。名前の感じの通り高級感があって良い色です。スミっぽい色ですが、これでも私の好きな青緑の系統色なんですよね。

枠の色

DIVタグで表示される枠については色味を変更しました。

枠その1

#e4007f(マゼンタ)

枠その2

#2c4f54(高麗納戸)

枠その3

#2c4f54(高麗納戸)

枠その4

#eebbcb(撫子色)

枠1のマゼンタのみ和色から外れてしまいましたが、どうしても和色でココに必要なビビット感が出なかったので仕方がありません。もしかするとコッソリ変更するかもしれません。

参考サイトなど 

備忘録的に参考にさせて頂いたサイトなどをベタベタ貼っておきます。

  

今回はここまで。