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

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

この記事では、GitHub Pagesを使用してブログにCSS・JSファイルを外部共有する方法について解説します。外部共有化することで、簡単にスタイルや機能のアップデートを行い、複数のブログやWEBサイトで同じスタイルを利用することもできます。

動画ブログをより引き立たせるために、キャプションとディスクリプションのカスタマイズ方法を詳しく解説します。 HTML・CSS・JavaScriptコードを駆使して、視覚的な魅力を高め、ユーザーエクスペリエンスを向上させましょう。 アニメーションの活用も紹介し…

この記事では、はてなブログで個別記事に対して`noindex`の``タグ（メタタグ）を指定する方法に焦点を当てます。 通常、はてなブログではブログ全体に対して、は設定箇所がありますが、記事ごとの noindex設定がサポートされていません。そのため、読者によ…

オンラインエディターの代表格 CodePen は、プログラミングやコーディングの練習に大変便利なツールです。 この記事では、埋め込み時のテーマカラー変更、予測変換の活用、そしてビルダの高さ指定など、便利なカスタマイズ方法を紹介します。 CodePen の使い…

はてなブログで埋め込みリンクを使うとき、デフォルトの表示形式にちょっとした違和感を感じませんか？この記事では、埋め込みリンクの表示をカスタマイズする方法を解説します。

縦横比を計算する方法を備忘録としてまとめました。縦横比が異なる画像を統一した面積で配置する際の計算手順を詳細に解説しています。 LaTeXを用いた数式の記法も紹介し、具体的な計算例も示しています。 これを備忘録として活用し、与えられた縦横比と面積…

特撮ヒーロードラマ「帰ってきたウルトラマン」第33話「怪獣使いと少年」は、差別や未知なるものへの恐怖、集団心理の闇を描いた衝撃的なエピソードです。放送当時、社会問題となっていた公害や差別を風刺し、物議を醸した本作は、ウルトラマンを通じて子ど…

動画紹介をさらに魅力的にカスタマイズするテクニックを紹介します。 CSSやGoogleフォントの活用でタイトルやディスクリプション（動画紹介文）のテキストを装飾したり、動画プレイヤー埋め込み時のプロパティ指定、そしてレスポンシブな画面比の変更まで、…

この記事では、JavaScriptを使用せずにCSSだけを使って「TOPへ戻るボタン」を実装する方法を詳しく解説しています。Scroll-driven Animationsという新しいAPIを活用し、スクロール途中でのボタン表示やトップへの滑らかなスクロールを実現します。初心者にも…

Font Awesome - アイコンアレンジ一覧：アニメーション、サイズ／カラー／角度変更まとめ