はてなブログ無料版のトップページを自分好みにカスタマイズするシリーズの8回目です。今回は、Typed.jsライブラリを利用してタイピングアニメーションを実装する方法を中心に、ブログ名周りの装飾について解説します。 記事ではライブラリのCDN設定からHTML…

⑦カウントアップアニメーション はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの７回目です。 以下、今回の内容となります。 カウントアップアニメーションの実装 Intersection Observer（スクロール監…

はてなブログ無料版のトップページを自分好みにカスタマイズするシリーズ第6回目。今回は、GSAPを使用したスタイリッシュなカルーセルの実装方法を紹介します。Intersection Observerを活用し、スクロールに応じたイベントトリガーを設定。さらに、Animate.c…

⑤Animate.cssを使ったフリップアニメーションと ポートフォリオのディスプレイ はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの５回目です。 以下、今回の主な内容となります。 Intersection Observer（…

はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの第４弾です。 今回は、Intersection Observer Animate.cssを使ったスライドインアニメーションに加え、Flickityを使ったカルーセルスライダーの導入方法…

この記事では、はてなブログ無料版のトップページをより魅力的にカスタマイズするための具体的な方法を紹介します。Intersection ObserverとAnimate.cssライブラリを活用して、オススメ記事やページへのリンク画像にスクロールに応じたスライドアニメーショ…

この記事では、はてなブログ無料版のトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。 Intersection ObserverとAnimate.cssライブラリを駆使して、画像カードにスライドアニメーションを加え、マウスホバ…

本記事では、無料版はてなブログのトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。 ブログを運営する上での重要なポイントを押さえつつ、分かりやすく解説します。ぜひ、これらの手順やアイディアを取り…

Webデザインにおける洗練されたドロップダウンメニューの実装方法を、jQueryとJavaScriptを駆使して解説。デスクトップとスマートフォンで使いやすいナビゲーションを構築し、スクロールに応じたヘッダーのダイナミックな表示切り替えも取り入れました。カス…

本記事では、一定距離スクロールするとヘッダーが消え、上に少しスクロールを戻すとヘッダーが再表示されるグローバルナビゲーションを簡単に設置する方法を紹介します。この実装はjQueryとJavaScriptを使用し、スマホ画面ではトグルボタンでナビゲーション…

本記事では、画像やテキストなどのスライドアニメーションを簡単に実装する方法を紹介します。GSAP（GreenSock Animation Platform）ライブラリとjQueryライブラリの組み合わせで、スムーズにスライドするアニメーション効果が容易に実現可能となります。

本記事では、はてなブログでpreタグを使ってコード表記をする際に、行ごとに連番を付ける簡単な方法を紹介します。 jQueryライブラリとCSSスタイリングの組み合わせで、読みやすく整形されたコード表示が可能となります。

この記事では、はてなブログの記事タイトルにCSS3を使用して背景画像を追加するテクニックを紹介します。角度をつけたり、さまざまなフィルターを組み合わせてオリジナルなデザインを実現しましょう。

今回の記事では、details・summaryタグを使用したアコーディオン式UIのアクセシビリティ向上を目指し、GSAP（GreenSock Animation Platform）ライブラリを活用してアニメーション効果を追加する方法を紹介します。基本構造からHTML、CSS、JavaScriptのコード…

この記事では、固定された目次にスクロールに応じて現在位置をハイライトする方法について詳しく解説します。Web開発者やブログ運営者にとって有用なテクニックとなれば幸いです。

この記事では、JavaScriptを活用して、コードブロック内のテキストを折り返し可能にし、かつコピー機能を実装する手法に焦点を当てています。フロントエンドデザインにおいて有益なテクニックを紹介し、具体的なコーディング方法も解説していきます。

ブログの魅力を引き立てる秘密の武器、それはお気に入りのフォント。今回は、フリーフォントのWebフォント化までの手順を詳しく解説。サブセット化や「unicode-range」の指定によるページ読み込みの軽量化で、読者に快適な閲覧体験を提供する方法もご紹介し…

この記事では、CSS・HTMLコードによるFont Awesomeアイコンの指定方法とそのバリエーションについてご紹介します。

この記事では、目次ボタンのデザインとアニメーションに関するCSSとJavaScriptコードが提供されています。まず、CSSコードではボタンの通常のスタイルやアクティブな状態のスタイル、ホバー状態のスタイルなどが詳細に設定されています。ボタンにはFont Awes…

CSS備忘録です。

新しいブログへ記事を移転する際は、コピーコンテンツの問題を避けるためのSEO対策が重要です。301リダイレクトとCanonicalタグの活用方法について解説します。

CSS備忘録です。

JavaScriptを活用して、ウェブページ上の記事タイトルをカスタマイズする方法を学びましょう。この記事では、特定のテキスト部分に異なるスタイリングを適用する手法を紹介します。Webデベロッパーが見出しを個別にデザインする際に役立つ情報が詰まっていま…

この記事では、はてなブログで目次を固定配置し、表示非表示をボタンで切り替える方法について解説します。目次の固定配置からボタンの作成、デザイン、表示の切り替えまで、ステップバイステップでご紹介します。 また、ページの最後にはこの記事で紹介して…

var noindex=document.createElement("meta");noindex.name="robots";noindex.content="noindex";var head=document.getElementsByTagName("head")[0];head.appendChild(noindex); .entry-content .table-of-contents{position:relative;margin:2em 5px;padd…

var noindex=document.createElement("meta");noindex.name="robots";noindex.content="noindex";var head=document.getElementsByTagName("head")[0];head.appendChild(noindex); /* スクリプトと連動 */ h1.entry-title a span.en { font-family: "Marcell…

この記事では、ページパフォーマンス向上に効果を発揮する、「IntersectionObserver」を使用した動画の遅延読み込みについて詳しく解説します。 「IntersectionObserver」とは何か、その利用方法やSEOへの影響について紹介します。さらに実装方法についても…

この記事では、WebPとAVIFといった次世代の画像フォーマットを使って、ウェブサイトのパフォーマンス向上について詳しく探求します。ページ速度とSEOの向上を実現するための具体的な手法や、``、``要素を使った画像の埋め込み方法を解説します。また、主要な…

この記事では、WebP と AVIF という最新？とはもはや言えませんが、しかし次世代を担う画像フォーマットを使用して、ウェブサイトの速度を向上させる方法について解説します。 Lighthouse と PageSpeed Insights のツールを活用して画像圧縮の重要性を理解し…

この記事では、HTMLの``（順序のないリスト）と``（順序のあるリスト）タグを使ったブログ記事のカスタマイズ方法を詳しく解説します。 アイコンの変更やマークの非表示、入れ子リストの作成から、``タグでの番号スタイルの変更や目次への適用例まで、幅広い…