…らHTML、CSS、JavaScriptのコード… READ MORE 12.11.2023. スクロールに応じた目次の現在位置をハイライトする簡単な方法 この記事では、固定された目次にスクロールに応じて現在位置をハイライトする方法について詳しく解説します。Web開発者やブログ運営者にとって有用なテクニックとなれば幸いです。 READ MORE 11.11.2023. はてなブログ: JavaScriptを活用したコードブロックのUX/UI向上術 この記事では、JavaScr…

…グするように表示するJavaScriptライブラリです。これを使用すると、文字が一文字ずつアニメーションされるように表示され、まるで誰かがキーボードを使って入力しているかのような効果を得ることができます。 https://pixabay.com/users/geralt-9301/ 振り返り トップページのデモ 今回のカスタマイズ部分 カスタマイズのポイント ライブラリのCDN Typed.js jQuery Font Awesome ソースコード HTMLの構造 コードの解…

…イル コードの解説 JavaScript コードの解説 アレンジ 背景画像の固定／スクロール 交差監視を継続する おさらい コードのまとめ おわりに これまでの記事 振り返り はてなブログ無料版でトップページをカスタマイズする方法について、これまで以下の内容を紹介して参りました。 ① 基本設定、見出しの装飾、コンタクトへのリンクボタン ② Animate.cssによるスライドアニメーションとホバー効果1 ③ Animate.cssによるスライドアニメーションとホバー効果2 ④…

…、ウェブ開発者向けのJavaScriptアニメーションライブラリです。GreenSock社が開発しており、多機能でシンプルな記法で書けるため、アニメーションを実装する際におすすめです。 https://pixabay.com/users/geralt-9301/ さらにIntersection Observerを活用し、スクロールに応じたイベントトリガーを設定。Animate.cssを使ったズームインアニメーションで魅力的なデザインを追加します。デモページもご覧いただき、カス…

…イル コードの解説 JavaScript コードの解説 おさらい コードのまとめ おわりに これまでの記事 振り返り これまで4度に渡り、はてなブログ無料版でトップページをカスタマイズする方法について紹介して参りました。 ① 基本設定、見出しの装飾、コンタクトへのリンクボタン ② Animate.cssによるスライドアニメーションとホバー効果1 ③ Animate.cssによるスライドアニメーションとホバー効果2 ④ Flickityによるカルーセルスライダーの導入 今回も引…

…oogleフォント JavaScript コードの解説 アレンジ オプション指定 おさらい コードのまとめ おわりに これまでの記事 振り返り 前回まで3度に渡り、はてなブログ無料版でトップページをカスタマイズする方法について紹介しました。 ①基本設定、見出しの装飾、コンタクトへのリンクボタン ②Animate.cssによるスライドアニメーションとホバー効果1 ③Animate.cssによるスライドアニメーションとホバー効果2 今回も引き続き、トップページのカスタマイズを紹介…

… HTML、CSS、JavaScriptのコーディングについては丁寧な解説を心掛けました。本記事が、ブログやサイトをより魅力的にするカスタマイズのヒントとなれば幸いです。 https://pixabay.com/users/geralt-9301/ 振り返り デモページ 今回のカスタマイズ Recommended Leisurely Enjoy. カスタマイズのポイント ライブラリのCDN Animate.css jQuery ソースコード HTMLの構造 CSSスタイル コ…

…なHTML、CSS、JavaScriptの構造についても解説します。これをヒントにして、はてなブログのトップページをより魅力的にカスタマイズしましょう！ https://pixabay.com/users/geralt-9301/ 振り返り デモページ 今回のカスタマイズ Meet The Team カスタマイズのポイント Animate.cssとは？ ライブラリのCDN Animate.css jQuery Font Awesome ソースコード HTMLの構造 コードの補…

…実装はjQueryとJavaScriptを使用し、デスクトップではマウスホバーで階層が現れ、スマホ画面ではトグルボタンでナビゲーションと階層の表示／非表示を切り替えます。 また、前回の記事で紹介したスクロールに応じてヘッダーが消え、上に少しスクロールを戻すとヘッダーが再表示される機能もそのまま残しています。 rubirubi.hateblo.jp Webデザインにおけるナビゲーションの最適化やダイナミックなヘッダーの実装に役立つ情報が提供されていますので、ブログのカスタマイズ…

…実装はjQueryとJavaScriptを使用し、スマホ画面ではトグルボタンでナビゲーションの表示／非表示を切り替えます。 Webデザインにおけるナビゲーションの最適化やスクロールに応じたダイナミックなヘッダーの実装に役立つ情報が提供されています。ブログのカスタマイズに挑戦したい方にとって有益な情報となれば幸いです。 https://unsplash.com/@glenncarstenspeters デモページ ライブラリのCDN jQuery ソースコード HTMLの構造 …

…ング コードの解説 JavaScript コードの解説 jQuery パート: GSAP (TweenLite, TweenMax) パート: おわりに デモページ デモページを見る ライブラリのCDN 以下のscriptタグをheadなどに配置することによってそれぞれのライブラリが利用可能になります。先ずはこれらのコードを、この後に紹介するスクリプトコードより手前に設置します。 GSAP <script src="https://cdnjs.cloudflare.com/a…

…な方法を紹介します。javaScriptとCSSスタイリングの組み合わせで、読みやすく整形されたコード表示が可能となります。 デモページ コードブロックの表記方法 Markdown はてな記法（スーパーpre記法） 生成されるHTML要素 連番を振るソースコード JavaScript コードの解説 CSSでスタイリング コードの解説 アレンジ 背景色をテキストの幅に揃える 出力見本 おわりに 脚注 デモページ デモページを見る コードブロックの表記方法 以下のように記述するこ…

…ライブラリを活用したJavaScript、ほかCSSによる装飾等、コードの実装について詳細に解説しています。 See the Pen How to use details and summary tags (GSAP) by yFGq-Ziw (@yfgq-ziw) on CodePen. 以前、アコーディオン式UI（ユーザーインターフェイス）をdetails・summaryタグで作成する方法をご紹介しました。 rubirubi.hateblo.jp 今回は、改めてdetai…

… 3.xを読み込む JavaScript(jQuery) 解説 おわりに デモページ デモページを見る ソースコード CSS .table-of-contents { position: fixed; top: 0; left: 0; background: beige; z-index:2; } .toc-highlight { background-color: #007bff; color: #fff; font-weight: bold; } 解説 position:…

この記事では、JavaScriptを活用して、コードブロック内のテキストを折り返し可能にし、かつコピー機能を実装する手法に焦点を当てています。フロントエンドデザインにおいて有益なテクニックを紹介し、具体的なコーディング方法も解説していきます。 SEO デモページ コードと解説 ①head内にCSSコードを追加 ②preタグにHTMLコードを追加 ③コードブロックに折り返し機能を追加 ④コードブロックにコピー機能を追加 minify化したまとめコード Font Awesome …

… HTML CSS JavaScript minify化したコード フリー版の指定方法 font-familyの記述 font-weight スタック（stack） Quate（引用） List Style（リスト） 見出し・コード表記にアイコンを自動付与 .entry-content hr { margin: 150px auto; } textarea#text2 { padding: 15px; border: solid 2px; border-color: #9a9…

…ョンに関するCSSとJavaScriptコードが提供されています。まず、CSSコードではボタンの通常のスタイルやアクティブな状態のスタイル、ホバー状態のスタイルなどが詳細に設定されています。ボタンにはFont Awesomeアイコンが表示され、ボタンがアクティブな状態でクリックされたときにはスタイルが変更されます。 また、記事では目次のスタイルも提供されており、初期状態では画面上部から非表示に配置され、アニメーションを用いて表示される際にスタイリングが変更されます。 Java…

…ome */ h5#JavaScript::after{font-family:'Font Awesome 6 brands';font-weight:400;content:'\f3b9';color:#efd81d;margin-left:.12em}h5#HTML::after{font-family:'Font Awesome 6 brands';font-weight:400;content:'\f13b';color:#f06429;margin-left:.12…

…; exit(); JavaScriptを使用する場合: JavaScriptを使用してブラウザリダイレクトを行うことも可能です。以下はJavaScriptの例です。 window.location.href = "http://www.example.com/new-page.html"; はてなブログで301は提供されない はてなブログだとJavaScriptを使用する方式になるが、301リダイレクトははてなから提供されないため、302リダイレクトとなる。 301と302…

…ome */ h5#JavaScript::after{font-family:'Font Awesome 6 brands';font-weight:400;content:'\f3b9';color:#efd81d;margin-left:.12em}h5#HTML::after{font-family:'Font Awesome 6 brands';font-weight:400;content:'\f13b';color:#f06429;margin-left:.12…

…t: 600; } JavaScriptを活用して、ウェブページ上の記事タイトルをカスタマイズする方法を学びましょう。この記事では、特定のテキスト部分に異なるスタイリングを適用する手法を紹介します。Webデベロッパーが見出しを個別にデザインする際に役立つ情報が詰まっています。 スタイリングの実現方法 ステップ 1: HTML要素の取得 ステップ 2: 新しい要素の作成 ステップ 3: 既存のテキストの取得 ステップ 4: 新しいHTMLコードの生成 ステップ 5: HTMLの…

…CSS（ボタン①） JavaScript① ボタンを目次の上に配置 CSS（ボタン②） 表示/非表示を切り替えるコード JavaScript② CSS（目次・最終形） コードのまとめ まとめ > CSS まとめ > HTML まとめ > JavaScript 設置方法 個別の記事に適用する場合 CSSを冒頭に貼る理由 JavaScriptを最下部に貼る理由 ブログ全体に適用する場合 おわりに 目次を固定配置する 目次の構造 はてなブログでは、[:contents]と書くと記事…

…ipt> Copy JavaScript document.addEventListener("DOMContentLoaded", function() { var iframeLazyImages = [].slice.call(document.querySelectorAll("iframe.iframe_lazy")); if ("IntersectionObserver" in window) { let iframeLazyImageObserver = new…

…btest.css JavaScript file(.js): yfgq-ziw.github.io/navi-drop-demo.js ©nyanco すべてGitHubで公開（共有化）したものです~ ฅ^•ω•^ฅ 以前こちらの記事で、スタイルシートをテンプレート化し、ページごとにデザインを出し分けする方法をご紹介した際、DropBoxを使用して CSSファイルを外部共有化する方法についても触れました。 スタイルシートをテンプレート化し、ページごとにデザインを変える - …

…タについて JS (JavaScript) おわりに デモページを見る コード全体 【徹底解説】YouTube埋め込み時のカスタマイズ：動画を魅力的に見せる技5つ ② キャプションとディスクリプション 前回①の記事では、YouTube動画の埋め込みにおいて重要なプレイヤーの設定や縦横比変更に焦点を当て、魅力的な動画の見せ方について解説しました。また、キャプションとディスクリプションの重要性について、お話させていただきました。 前回の記事はこちら 今回は、その続編としてキャプシ…

…</head> このJavaScript コードを、記事の冒頭（を推奨）に追加することで、ブログ全体ではなくその記事だけ、検索エンジンのクローラによるインデックスから除外されます。エディタが「編集 見たまま」モードなら、「HTML編集」でコードを貼り付けて下さい。 コードの詳細な解説を開閉 このコード は、HTML文書のheadセクションに新しいmeta要素を追加し、そのmeta要素にname属性が "robots" で、content属性が "noindex" であることを…

JavaScript HTML CSS Online Editor オンラインエディターの代表格 CodePen（コードペン）は、プログラミングやコーディングの練習に大変便利なツールです。 この記事では、埋め込み時のテーマカラー変更、予測変換の活用、そしてビルダの高さ指定など、便利なカスタマイズ方法を紹介します。 CodePen の使い方をより効果的に活かし、クリエイティブなコーディング体験をしましょう。 CodePenとは CodePen は、オンラインエディターと呼ばれる…

Social Issues .kirinuki { max-width: 480px; width: 100%; max-height: 360px; overflow: hidden; position: relative; } .kirinuki img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto; } .cropped-image a img { margi…

…す。 この記事では、JavaScriptを使わずにCSSだけを駆使して、この便利なボタンを実装し、更に上に戻る際のアニメーションも取り入れる方法を解説します。 初心者の方にも分かりやすく、丁寧な説明を心掛けますので、良かったら読んでみて下さい。 .entry-content hr { margin: 100px auto; } h2 { position: relative; margin: 2.4em 0 1.5em; padding: 2em 0 0; font-size…

It's probably true, but it's more like an urban legend | #JohnnyKitagawa #SexualAssault #SeaofDeceit | The darkness lurking in the showbiz world of the Showa era. An acquaintance reveals a shocking story about pressure from an entertainment…