Hatena Blog Tags
はてなブログ トップ
脱jQuery
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

脱jQuery

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
Askthewind's diary•2ヶ月前

🎨 【はてなブログ公式テーマ「Life」】note風プロフィール固定カスタマイズ ✨

こんにちは、Askthewindです🌿 今回は、はてなブログ公式テーマ「Life」 で あの人気メディア「note」っぽいプロフィール表示を再現する 超おしゃれカスタマイズ方法をご紹介します ✨ 「note風プロフィール表示」を、モバイルファースト設計で実装します！ スマホではシンプルに、 PCでは note のように左上に固定 → スクロールで元の位置に戻る。 そんな“自然で洗練された”動きを実現しましょう 🌸 💡 完成イメージ 🎨 noteっぽい、すっきりしたデザイン 📱 スマホでは通常のプロフィール表示（邪魔にならない） 💻 PCでは左上に固定 1 記事ページはスクロールで自然にサイドバ…

#脱jQuery

関連ブログ

Askthewind's diary•2ヶ月前

【コピペOK】はてなブログにタブ式サイドバーを導入する方法｜最新記事・注目記事/人気記事をすっきり整理

✨ はてなブログに「タブ切り替え式サイドバー」を導入する完全ガイド みなさん、こんにちは！Askthewindです。 ブログを読んでくださってありがとうございます。 今回は「サイドバーをどう整理するか？」という、多くのブロガーが直面する課題にスポットを当てます。 はてなブログのサイドバー、「最新記事」「注目記事」と縦に積み上げていくと、すぐにスクロールが長くなってしまいます。 せっかく読者が記事を読んでくれても、必要な情報にたどり着く前に煩わしさを感じて離脱してしまう。これではもったいないですよね。 そこで今回は、サイドバーをスッキリ整理し、クリックひとつで「新着順」を切り替えられる タブ式の…

#脱jQuery
Askthewind's diary•2ヶ月前

【はてなブログ改造】サイドバーのアーカイブモジュールを折りたたみ式にする方法（Vanilla JS版）

こんにちは、Askthewindです。 ブログを長く続けていると、どうしても「アーカイブ」が膨れ上がってしまいます。 10年以上書いている方なら、サイドバーに延々と年月リストが並び、訪問者にとっては圧迫感すら覚えるほど。 そんなときに役立つのが「アコーディオン式アーカイブ」です。 普段は閉じておき、必要なときにクリックして開く──これだけでサイドバーの見通しがグッとよくなります。 今回は jQuery不要・Vanilla JS（プレーンなJavaScript）だけで実現できる折りたたみ式アーカイブ のコードをご紹介します。 完成イメージ 完成コード 以下のJavaScriptを「管理画面 → …

#脱jQuery
Askthewind's diary•2ヶ月前

📖 はてなブログに「サイドバー目次」を自動で追加する方法【Flexbox Grid レイアウト float完全対応版】

Intersection Observerで軽く・スマートに動く！ ✨ はじめに：読者の滞在時間を伸ばす「サイドバー目次カスタマイズ」 こんにちは、Askthewindです🌿 長文記事を書くとき、サイドバーに目次があると読者にとってとても便利ですよね。 でも「HTMLモジュールを追加して目次が無いときのサイドバーのデザインが崩れるのがいや…」と感じたこと、ありませんか？😌 そんな悩みを一発で解決するのが、今回紹介するHTMLモジュールを追加せずに動作する自動生成型サイドバー目次スクリプトです。 このコードは「サイドバーにHTMLモジュールを自分で用意しなくてもOK」な、まさに“ユーザーフレンド…

#脱jQuery
Askthewind's diary•2ヶ月前

【はてなブログ改造】パンくずリストを記事下に移動する魔法のコード【SEOにも効果的】

こんにちは、Askthewindです。 はてなブロガーの多くは、パンくずリストのすぐ下に記事タイトルが表示される仕様に違和感を覚え、思い切ってパンくずを非表示にしているケースが少なくありません。 しかし、パンくずリストはSEO的にもユーザー導線的にも非常に重要な要素。 消してしまうのはもったいないのです。 はてなブログを使っていて「パンくずリストの位置、もっと自由に変えられたらいいのに」と思ったことはありませんか？ WordPressのように設定で位置を選べないはてなブログでは、デフォルトで記事本文の上に出てしまいます。 実はこの“パンくずリストの位置”は、SEO（検索エンジン最適化）やユーザ…

#脱jQuery
Askthewind's diary•2ヶ月前

🚀 SEOにも強い！軽量＆美しい「TOPへ戻る」ボタンをVanilla JSで実装する方法

こんにちは、Askthewindです。 ブログやWebサイトでよく見かける「TOPへ戻る」ボタン。 シンプルな機能ですが、実装方法によっては サイトの読み込み速度やユーザー体験 に大きな差が出ます。 今回は、jQueryや外部アイコンライブラリに頼らず、軽量で視覚的にも華麗 な「TOPへ戻る」ボタンを実装する方法をご紹介します。 しかも使うのは Vanilla JS（純粋なJavaScript） だけ。 無駄な依存は一切ありません。 🎯 コードサンプル：TOPへ戻るボタンの実装 HTML はてなブログに貼り付ける場合は 「デザイン → カスタマイズ → フッタ」に貼り付けてください。 <!--…

#脱jQuery
Askthewind's diary•2ヶ月前

【完全保存版】noteライクなグローバルナビを爆速で実装する方法

こんにちは、Askthewindです。 今日は「noteみたいにシンプルで軽いグローバルナビ」を HTML＋CSS＋ちょっとのJavaScript だけで実装する方法をご紹介します。 「おしゃれに見えるのに無駄がない」って、やっぱり note のデザインはすごいですよね。 そこで私も研究して、最小限のコードで note 風ナビを完全再現してみました。 🎯 ポイントは3つだけ 🌈 PC版は横並びのナビ 🌈 スマホ版はハンバーガーメニューでスライドイン 🌈 URLに基づいて自動で「今いるページ」をハイライト 🌈 正直これ以上ないくらいシンプル 🌈 余計なライブラリは一切不要です。 🎀 このコードの…

#脱jQuery
Askthewind's diary•3ヶ月前

【簡単3秒】検索フォームの文字を好きな言葉に変える方法【はてなブログ】

こんにちは、Askthewindです！ 今日は「はてなブログの検索フォームのプレースホルダーを自分の好きな文字に変えたい！」という人向けに、超簡単にできる方法をご紹介します。 たったこれだけのコードで、あなたのブログの検索フォームがオリジナルに大変身します✨ 1 まずはコードを用意 「管理画面 → デザイン → カスタマイズ → フッタ」に貼り付けてください。 <script> document.addEventListener('DOMContentLoaded', () => { const search = document.querySelector('input.search-mod…

#脱jQuery
Askthewind's diary•3ヶ月前

はてなブログが見違える！サムネ付き「前後リンク」で記事移動をもっと快適に

はてなブログを長く書いていると、どうしても気になるのが **記事下の「前の記事・次の記事」リンクです。 デフォルトはテキストだけで目立ちにくく、読者の回遊を逃してしまいがち。 そこで今回は、サムネイル＋矢印付きで見やすくおしゃれにするカスタマイズを紹介します。 コードをコピペするだけで導入できます。 🎨 このカスタマイズの良い点（特に優れている点） 1 デザイン性アップ！ サムネイル画像が入ることで、記事下リンクが一気に目立ちます。 2 設置が簡単 はてなブログの設定画面にコピペするだけで動きます（追加のプラグイン不要）。 3 WordPress風の操作感 prev = 古い記事 / next…

#脱jQuery
Askthewind's diary•3ヶ月前

【はてなブログカスタマイズ】Archive・関連記事・最新記事/人気記事の画像をオリジナルURLで表示する方法

はてなブログでは、記事のサムネイル画像が はてなのCDN（画像配信サーバー） を経由して表示されます。 これにより、以下のような問題が起きることがあります。 ・ JPEGやPNGが自動圧縮され、微妙に画質が落ちる ・ GIFアニメーションが「静止画」になってしまう ・ ブログのデザイン性や訴求力が損なわれる そこで今回は、Archiveページ・関連記事・最新記事/人気記事の画像をオリジナルのURLに戻す方法 をご紹介します。 Archiveページの画像をオリジナルに変換 問題点 Archiveページの記事一覧では、記事アイキャッチがサムネイルとして背景表示されます。 しかしCDN経由なので圧縮…

#脱jQuery