はじめに
こんにちは！
このブログを立ち上げて20年も経ちました！
過去、デザインの見直しを何度か行ってきており、2019年からはCocoonに落ち着いて、特に変えておりませんでした。今回20年という節目で少しだけ見直しを行いましたので紹介したいと思います！
見直し箇所
見た目
見た目に関するデザインを一部新旧交えて紹介したいと思います。
こちらは以前の h2, h3, h4 です。
当時、Cocconに切り替えた際はフラットデザインでシンプルで良いと感じて、このままとしてました。ただ色の濃いメインカラー1色のみの配色であり、やや刺激的な感じがありました。
そこで、次のようにメインカラーを抑えて落ち着いた形へ変更しました。また、上下が詰まった感じあったので間隔を調整しました。codeについては前から角ばっていたのが気になっていたので、qiitaのように丸まった見た目にしました。
この色調をベースに、目次とサイドバーも修正しています。
以下は全体の以前の見た目です。目次も左側によっており何だか不格好です。
次のような見た目へ変えました。全体的に刺激的な色が減り、コントラストも小さくなったことでスッキリした印象、読みやすくなったかと思います。
特にサイドバーに合った目次は、以前は目次の下に目次と2回表示されていました。
目次の下の目次は消去し、目次のインデントによって太さの変更と、上下のパディングの微調整をしました。
利用したCSSの技術
今回、CSSに変数を用意して、CSS上で明るい色や、暗い色も計算して作成しました。var(--変数名)(mozilla)は2014年～2016年、color-mix(mozilla)は2023年と比較的最近利用できるようになった技術です。
:root {
--nt-color: #6f77f3;
--nt-text: #494949;
--nt-light: color-mix(in srgb, var(--nt-color) 40%, white);
--nt-dark: color-mix(in srgb, var(--nt-color) 70%, black);
--nt-background: #f4f4f4;
}
また、複数のセレクターを設定する際、昔は次のように書く必要がありましたが、
.article h2, .article h2, .article h3, .article h4, .article h5) {
疑似クラスの:is()(mozilla)を利用してスッキリ書きました。こちらも2020年～2022年に対応された新しい技術です。
.article :is(h2, h3, h4, h5) {
color: var(--nt-text);
background: var(--nt-background);
margin-top: 40px;
}
動作
目次の各ボタンを押下した時の動作も変えております。
元々は各ヘッダにidを挿入して、以下のように「同じページの要素へのリンク」をしておりました。
<!-- 以下のセクションにリンクする <a> 要素 --> <p><a href="#Section_further_down">下記の見出しまでジャンプ</a></p> <!-- リンク先の見出し --> <h2 id="Section_further_down">さらに下のセクション</h2>
この方法は楽ですが、一度にジャンプするため、画面の変化が一瞬で変わり、どこを見ているのが分かりにくいという問題がありました。これを解決するためにJavaScriptでアニメーションをさせるという方があるのですが、昔は便利な関数がなく作りこむのが面倒な印象で止めておりました。
window.scrollTo()(mozilla) に2016年から behavior:'smooth' というオプションが追加され、2020年でEdge含めて全ブラウザで対応しました。今回はこれを活用して次のように作りました。
// クリック時にスクロールを実行
link.addEventListener("click", function (e) {
e.preventDefault();
scrollToTarget(target_node);
});
/**
* 指定した要素を画面の高さ1/10の位置にスクロールする
* @param {HTMLElement} element - スクロール先の要素
*/
const scrollToTarget = function (element) {
const offsetTop = element.getBoundingClientRect().top + window.scrollY;
const targetPosition = offsetTop - window.innerHeight / 10;
window.scrollTo({
top: targetPosition,
behavior: "smooth",
});
};
なんて簡単に作れるようになったんだと驚いていましたが、速度の調整が行えなかったり少し不満があったので、少し複雑になったのですが次のような形をとりました
/**
* 一定速度でスクロール（距離に応じて時間を自動調整）
* @param {number} targetY - スクロール先のY座標
* @param {number} speed - スクロール速度(px/ms)（例: 1px/ms = 1000pxを1秒で移動）
*/
function smoothScrollVariable(targetY, speed = 2) {
const startY = window.scrollY;
const distance = targetY - startY;
// 距離に応じてスクロール時間(ms)を計算（最小300ms、最大2500ms）
const duration = Math.min(Math.max(Math.abs(distance) / speed, 300), 2500);
const startTime = performance.now();
/**
* イージング関数（加速→減速）
* @param {number} t 0～1の進行率
*/
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
function animate(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = easeInOutQuad(progress);
window.scrollTo(0, startY + distance * eased);
if (elapsed < duration) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
// window.scrollTo({ top: targetPosition, behavior: "smooth", });
smoothScrollVariable(targetPosition, 2); // 速度 2px/ms
参考情報ですが、今回位置を明確に指定するためにJavaScriptで作りましたが、位置の指定がなければ scroll-behavior(mozilla) というCSS設定でもスムーズに動作は可能となっています。
広告
広告も見直しを行いました。
Google Adsense では自動広告をONにしているのですが、その中にオーバーレイフォーマットというのがあり
- アンカー広告
- サイドレール広告
- 全画面広告
とあるのですが、よく分からず全部ONにしていました。アンカーや全画面は邪魔だったのでいったん取り除きました。
本当はQiitaのように右側のサイドバーの目次の上に広告を張り、サイドレール広告も外したいのですが、2020年のGoogle AdSenseのポリシー [Google AdSense] 追尾広告のアップデートとポリシーに関するQ&A で条件が緩くなったものの未だダメなようです。
あとは、除外エリアという設定があり、今までこれも良くわからず使用していませんでしたが、ブログのヘッダーやフッターに広告が挟まりこむことがあったので、これを利用して挟まりこまないように改善しました。
おわりに
最後まで読んでいただきありがとうございます。
今回、見た目、動作、広告という3つの観点で、デザインの見直しを行いました。
最近は、Webオープン系の仕事も行うようになったので、昔の知識をアップデートして色々なことが出来るようになっていければと思います。
コメント