フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

ヘッダー画像をレスポンシブにきれいに表示する方法

※2021/1/16「画像とテキストを表示」してお使いの方では画像の表示がずれてしまうため、「ヘッダー画像周りの余白を消す」コードを一部修正しています。お手数ですがコードを入れ直してください。 どうも!フジグチです! 先日リリースしたはてなブログテー…

はてなブログテーマCappuccino着せ替えデザイン12選+カラー変更ジェネレーター

どうも!フジグチです! ありがたいことに先日リリースした新しいはてなブログテーマ【Cappuccino】は、リリース直後から人気テーマのランキングに入るなど、予想以上に多くの皆様に使って頂いています。 今回はこのテーマの配色の変更方法と、コピペで使え…

はてなブログテーマCappuccinoを公開しました!

どうも!フジグチです! 当サイトでは、はてなブログのカスタマイズを主に行ってきました。 そんな私がこの度、オリジナルテーマ【Cappuccino】(カプチーノ)をテーマストアに公開したのでお知らせいたします。 テーマのコンセプトはラテアート(アイキャッ…

HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】

どうも!フジグチです! 前回の記事で「ページ内リンク」について書きました。 ページ内リンクを使いこなせば、閲覧する側のちょっとした手間を省くことが出来るので、ユーザビリティが良くなります。 このページ内リンクを使えば色々なサイトでよく見かける…

サイト内の指定した場所にリンクしてユーザビリティを上げる!

どうも!フジグチです! 前回の記事の「スムーズスクロールのメリット」の見出しの中で「ページ内リンクを記事に入れることがある」ということを書きました。 指定した場所へリンクすることによって、読者を迷わせることなく目的の場所まで導くことが出来ま…

CSSのみ!簡単にスムーズスクロールを導入する

どうも!フジグチです! 目次から見出しに移動する時やトップへ戻るボタンのように、ページ内をリンクで移動する時にスムーズにスクロールするのを見たことはありませんか? 当サイトでもスムーズスクロールを設定しているのですが、とても簡単なCSSのみで実…

はてなブログタグをカスタマイズする

はてなブログタグの機能が使えるようになりました。 新たに使えるようになったことで、今までは想定していなかったようなデザイン崩れに悩んでいませんか? そんな方のために、はてなブログタグのデザインの調整の仕方を書きました。

はてなブログでサイドバーを固定して追従させるカスタマイズ

はてなブログのサイドバーを、スクロール時に固定して追従させるカスタマイズを紹介しています。 反映されない時の注意点や、アレンジの仕方等をまとめたのでご覧下さい。

ステップバー(タイムライン)で手順の説明をオシャレに分かりやすくするCSS

手順の説明や時系列の説明に便利なステップバー(タイムライン)を作りました。 デザインも5種類用意し色のカスタマイズもしやすいように工夫してあるので、是非この記事を読んでご自身のブログに導入してみてください。 さまざまなブログサービスにも対応…

サイト表示速度の改善をさせる 画像遅延読み込み【loading="lazy"】

どうも!フジグチです! 前回妻のブログで出たCLSエラーについて調べる際にPageSpeed Insightsを使い、修正の確認作業を行いました。 その際あまりにもパフォーマンススコアが低かったので、改善する方法を探してみたところ記事によっては20ポイントほどのス…

サーチコンソールで「CLS に関する問題」が出た時の対処法

どうも!フジグチです! 先日妻のブログが「ウェブに関する主な指標」の「CLS に関する問題: 0.25 超(モバイル)」というサーチコンソールのエラーが出ました。 あまり見慣れないエラーにどう対応して(当ブログの問題ではないのですが)エラーを修正できた…

CSSが反映されない?そんな時に確認すべき6つのこと

どうも!フジグチです! 当ブログではカスタマイズ系の記事をよく書くので、コードの確認を「非公開のカスタマイズ専用のブログ」でテーマを何種類か入れ替え、問題なく反映されるか確認していました。 しかし、その入れ替え作業がだんだんめんどくさくなり…

トップへ戻る