ブログカスタマイズ
はてなブログ無料版のトップページを自分好みにカスタマイズするシリーズの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ライブラリを駆使して、画像カードにスライドアニメーションを加え、マウスホバ…
本記事では、無料版はてなブログのトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。 ブログを運営する上での重要なポイントを押さえつつ、分かりやすく解説します。ぜひ、これらの手順やアイディアを取り…
この記事では、はてなブログの記事タイトルにCSS3を使用して背景画像を追加するテクニックを紹介します。角度をつけたり、さまざまなフィルターを組み合わせてオリジナルなデザインを実現しましょう。
ブログの魅力を引き立てる秘密の武器、それはお気に入りのフォント。今回は、フリーフォントのWebフォント化までの手順を詳しく解説。サブセット化や「unicode-range」の指定によるページ読み込みの軽量化で、読者に快適な閲覧体験を提供する方法もご紹介し…
この記事では、はてなブログで目次を固定配置し、表示非表示をボタンで切り替える方法について解説します。目次の固定配置からボタンの作成、デザイン、表示の切り替えまで、ステップバイステップでご紹介します。 また、ページの最後にはこの記事で紹介して…
この記事では、WebP と AVIF という最新？とはもはや言えませんが、しかし次世代を担う画像フォーマットを使用して、ウェブサイトの速度を向上させる方法について解説します。 Lighthouse と PageSpeed Insights のツールを活用して画像圧縮の重要性を理解し…
この記事では、HTMLの``（順序のないリスト）と``（順序のあるリスト）タグを使ったブログ記事のカスタマイズ方法を詳しく解説します。 アイコンの変更やマークの非表示、入れ子リストの作成から、``タグでの番号スタイルの変更や目次への適用例まで、幅広い…
動画ブログをより引き立たせるために、キャプションとディスクリプションのカスタマイズ方法を詳しく解説します。 HTML・CSS・JavaScriptコードを駆使して、視覚的な魅力を高め、ユーザーエクスペリエンスを向上させましょう。 アニメーションの活用も紹介し…
Font Awesome - アイコンアレンジ一覧：アニメーション、サイズ／カラー／角度変更まとめ
ウェブサイトやアプリケーションのユーザーエクスペリエンスを向上させるために、クリック可能な要素をユーザーに効果的にアピールする方法があります。この記事では、CSSを使用してクリックされた場所に波紋効果を追加する手法を詳しく説明します。
この記事では、はてなブログの「月別アーカイブ」をウェブサイトの任意の場所に配置する方法を解説します。 具体的には、Ajaxを使用した非同期呼び込みの仕様と、HTML・CSSを活用したカスタマイズが可能になるメリットについての内容です。 この手法を利用し…
この記事では、Webデザインにおけるおしゃれな検索ボックスの実装方法について詳しく解説します。 検索ボックスは右上に固定され、クリックするとスムーズに表示されます。 簡単なCSSとJavaScript（JQuery）を活用して、右上に固定されたおしゃれで可愛らし…
Font Awesome - よく利用するアイコンだけまとめ
Web ページにソース コードを表示する場合は、読みやすさとアクセシビリティの両方を考慮することが重要です。 この記事では、jQuery を使用してコードの折り返し表示を切り替える方法を紹介します。 コードが画面内に収まりきらない場合でも、スクロールバ…
この記事では、CSSのみを使用して作成された吹き出しデザインとアイコンの組み合わせバリエーションをご紹介します。 かわいらしい要素を取り入れ、軽量でありながらも魅力的な吹き出しのスタイリング方法を学び、レスポンシブな設計にも対応させるテクニッ…
HTMLの「details」タグを使用して、長いコードやテキスト部分を簡単に折りたたむ方法をいっしょに学びましょう。コーディングブログやカスタマイズに最適な、シンプルなアコーディオンメニューを作成できます。 複雑なJavaScriptやCSSは不要です。必要なのは…
1日1優。ポチっ、が支えです 小さなひとこと、お待ちしてます(≧◡≦)❤️ 読者登録もいただけますとうれしいです～ class「r-fuki piyo」のなぞ 捜査は難航 事件の全貌 気を取りなおして ここで問題が 強引に解決 今回のコード HTML CSS こんばんは、暑さもすこ…
やりたいこと できるかな？ URLの違い JavaScriptで特定のURLを識別 やりたいこと サイドバーの目次タイトルを、表示するページによって変更したい できるかな？ URLの違い https://rubirubi.hateblo.jp/entry/～ https://rubirubi.hateblo.jp/archive/～と…
バナー（リンクなし） みなさん、こんばんは。ハテブカスタムです これを流したい→ 「はてなブログ初心者によるブログ初心者のためのブログ」 ←これを流したい バナー（リンクあり） これは宣伝→ 今月公開 絶賛上映中！ 【新着情報】お知らせテキストをここ…
AIでブログ記事は書けるか？ キーワードを決める ✖「はてなブログ aboutページ」 競合ページの調査をChatGPTにお願いする 参考にする見出しを意味のあるものに絞る いよいよChatGPTの出番！ 出力した記事の検証 AIでブログ記事は書けるか？ 最近、aboutペー…
aboutページの見直し 定期的な見直しが必要です汗 画像の遅延読み込み aboutページの見直し ブログ開設当初、いろいろとブログカスタマイズについて調べていくなかで、「ごあいさつ」や「自己紹介」ページというのがブログには大抵存在するな、と気づき、は…
ブログのスマホ対応について。 スマホ表示のとき、メニューをいちばん下に固定して、グローバルナビゲーションを使いやすいデザインに変更しました。 どれくらい効果があるか、Googleアナリティクスのイベントトラッキングを使って検証します。
Googleの無料ブログサービス、Bloggerについて。Twitterカード、SNSソーシャルボタン、トップへ戻るボタンの設定・設置方法を紹介しています。
Googleの無料ブログサービス、Bloggerの紹介です。始め方、おすすめのテンプレート、ワードプレスからの移転、使い方など。
