はてなブログ無料版: トップページを魅力的にカスタマイズする方法⑧

はてなブログ無料版のトップページを自分好みにカスタマイズするシリーズの8回目です。今回は、Typed.jsライブラリを利用してタイピングアニメーションを実装する方法を中心に、ブログ名周りの装飾について解説します。 記事ではライブラリのCDN設定からHTML構造、CSSスタイル、JavaScriptコードまで詳細に説明し、メッセージ、ソーシャルアイコンなどをダイナミックに演出する手法を紹介します。 これらのテクニックを取り入れ、読者との魅力的なインタラクションを築くヒントを提供します。

はてなブログ無料版: トップページを魅力的にカスタマイズする方法⑦

⑦カウントアップアニメーション はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの7回目です。 以下、今回の内容となります。 カウントアップアニメーションの実装 Intersection Observer（スクロール監視）によるイベントトリガー 今回は、数値をカウントアップするアニメーションの実装方法を紹介します。カウントアップのイベントトリガーには、Intersection Observerを利用しています。 https://pixabay.com/users/geralt-9301/

はてなブログ無料版: トップページを魅力的にカスタマイズする方法⑥

はてなブログ無料版のトップページを自分好みにカスタマイズするシリーズ第6回目。今回は、GSAPを使用したスタイリッシュなカルーセルの実装方法を紹介します。Intersection Observerを活用し、スクロールに応じたイベントトリガーを設定。さらに、Animate.cssを使ったズームインアニメーションで魅力的なデザインを追加します。デモページもご覧いただき、カスタマイズのポイントや必要なライブラリのCDN、ソースコードの解説を通じて、カルーセルの魅力を探ってみましょう。最新のポストを引き立てるLatest Postsブロックに、ユーザーの好みに合わせた新たな魅力を与えましょう。

はてなブログ無料版: トップページを魅力的にカスタマイズする方法⑤

⑤Animate.cssを使ったフリップアニメーションと ポートフォリオのディスプレイ はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの5回目です。 以下、今回の主な内容となります。 Intersection Observer（スクロール監視）によるイベントトリガー Animate.cssを使ったフリップアニメーション ポートフォリオのディスプレイ https://pixabay.com/users/geralt-9301/

はてなブログ無料版: トップページを魅力的にカスタマイズする方法④

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

はてなブログ無料版: トップページを魅力的にカスタマイズする方法③

この記事では、はてなブログ無料版のトップページをより魅力的にカスタマイズするための具体的な方法を紹介します。Intersection ObserverとAnimate.cssライブラリを活用して、オススメ記事やページへのリンク画像にスクロールに応じたスライドアニメーションを追加しました。HTML、CSS、JavaScriptのコーディングについても丁寧に解説しています。この記事が、ブログやサイトをより魅力的にするカスタマイズのヒントとなれば幸いです。

はてなブログ無料版: トップページを魅力的にカスタマイズする方法②

この記事では、はてなブログ無料版のトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。 Intersection ObserverとAnimate.cssライブラリを駆使して、画像カードにスライドアニメーションを加え、マウスホバーでSNSボタンやメッセージを表示する仕組みも取り入れています。 さらに、Animate.cssの導入方法や基本的なHTML、CSS、JavaScriptの構造についても解説します。これを参考にして、はてなブログのトップページをより魅力的にカスタマイズしましょう！

はてなブログ無料版: トップページを魅力的にカスタマイズする方法①

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

ブログをアップグレード！: jQueryで学ぶ複数階層ドロップダウンメニューの手法

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

スクロールすると消え、上に戻すと再表示されるナビゲーションの簡単な実装方法

本記事では、一定距離スクロールするとヘッダーが消え、上に少しスクロールを戻すとヘッダーが再表示されるグローバルナビゲーションを簡単に設置する方法を紹介します。この実装はjQueryとJavaScriptを使用し、スマホ画面ではトグルボタンでナビゲーションの表示／非表示を切り替えます。 Webデザインにおけるナビゲーションの最適化やスクロールに応じたダイナミックなヘッダーの実装に役立つ情報が提供されています。ブログのカスタマイズに挑戦したい方にとって有益な情報となれば幸いです。

GSAPライブラリを活用してスライドアニメーションを実装する簡単な方法

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

はてなブログ: コードブロックに行番号を振る簡単な方法(jQuery)

この記事では、はてなブログでpreタグを使ってコード表記をするときに、行ごとに連番を付ける簡単な方法をご紹介します。jQueryライブラリとCSSスタイリングを組み合わせ、コードブロックをカスタマイズする手順を丁寧に解説していきます。

はてなブログ: タイトルに背景画像を付けるテクニック(CSS3)

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

アクセシビリティを考慮したWebデザイン: detailsとsummaryタグの使い方

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

スクロールに応じた目次の現在位置をハイライトする簡単な方法

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

JavaScriptを活用したコードブロックのUX/UI向上術

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

Webサイトにお気に入りフリーフォントを取り入れよう: 使い方完全解説

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

Font Awesome・CSSでの指定バリエーション

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

はてなブログ : blog作成備忘録③ - CSS Cheat Sheet -

CSS備忘録です。

目次ボタン：CSSデザイン・アニメーション

button#toggle-button.active-style,button#toggle-button:active{background-size:200% 100%;background-position:right bottom;transition:.5s,background-position .5s;color:#fff}.table-of-contents{position:fixed;top:calc(-100% - 100px);left:20px;transition:top .5s;background:#f0f8ff;min-width:336px;max-hei…

目次ボタン：CSSデザイン・アニメーション

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

はてなブログ : blog作成備忘録③ - CSS Cheat Sheet -

CSS備忘録です。

ブログのお引越し: コピーコンテンツ対策とSEO最適化。リダイレクト、Canonicalタグの活用

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

はてなブログ : blog作成備忘録② - CSS Cheat Sheet -

CSS備忘録です。

はてなブログ : blog作成備忘録② - CSS Cheat Sheet -

CSS備忘録です。

JavaScriptを使用して記事タイトルの一部のスタイリングを変更する方法

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

【はてなブログ】目次を固定配置し、表示非表示をボタンで切り替える方法

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

Decorating the table of contents (noindex)

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; padding: 1em 2em; background: rgb(252, 250, 247, 87%); bord…

グーグルブロガー／Twitterカード、SNSボタン、トップに戻るボタン設定方法

Googleの無料ブログサービス、Bloggerについて。Twitterカード、SNSソーシャルボタン、トップへ戻るボタンの設定・設置方法を紹介しています。

グーグルブロガー／Twitterカード、SNSボタン、トップに戻るボタン設定方法

Googleの無料ブログサービス、Bloggerについて。Twitterカード、SNSソーシャルボタン、トップへ戻るボタンの設定・設置方法を紹介しています。

グーグルブロガー／Twitterカード、SNSボタン、トップに戻るボタン設定方法

Googleの無料ブログサービス、Bloggerについて。Twitterカード、SNSソーシャルボタン、トップへ戻るボタンの設定・設置方法を紹介しています。

記事タイトルどデカ画像／Article title and gigantic image (noindex)

var noindex=document.createElement("meta");noindex.name="robots";noindex.content="noindex";var head=document.getElementsByTagName("head")[0];head.appendChild(noindex); pre.code { font-family: 'Fira Code', monospace; } h1.entry-title { background-image: url(https://cdn-ak.f.st-hatena.com/images/fotol…

トップページ

『コトサワに聞いとけ』様の記事を参考にカスタマイズしたトップページです。（https://zinseimurige.hatenablog.com/）

■

/*========= スクロール途中からヘッダーの高さが小さくなるためのCSS ===============*/ #header{ /*はじめの高さを設定*/ height: 170px; width:100%; /*以下はレイアウトのためのCSS*/ display: flex; justify-content: space-between; align-items: center; background:#333; color:#fff; text-align: center; padding: 20px; } /*HeightMinというクラス名がついたら高さを小さく、上部固定に*/…

iframe埋め込み動画の遅延読み込み：IntersectionObserverの実装

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

次世代画像フォーマットの利用方法：WebPとAVIFの実践ガイド

この記事では、WebPとAVIFといった次世代の画像フォーマットを使って、ウェブサイトのパフォーマンス向上について詳しく探求します。ページ速度とSEOの向上を実現するための具体的な手法や、``、``要素を使った画像の埋め込み方法を解説します。また、主要なブログプラットフォームへの実装手順や、最新のブラウザとの互換性についても取り上げます。次世代フォーマットの将来性についても考察します。

WebPとAVIFを使ってサイトの速度向上：画像圧縮の未来

この記事では、WebP と AVIF という最新？とはもはや言えませんが、しかし次世代を担う画像フォーマットを使用して、ウェブサイトの速度を向上させる方法について解説します。 Lighthouse と PageSpeed Insights のツールを活用して画像圧縮の重要性を理解し、「cwebp」というツールを用いて WebP に画像を変換する手順を学びます。また、WebP と AVIF の利用に関する注意点、メリット・デメリットなども紹介します。 サイトの速度向上とユーザーエクスペリエンスの向上を実現しましょう。

HTMLリストタグの活用術：<ul>と<ol>でブログ記事を魅力的にカスタマイズしよう

この記事では、HTMLの``（順序のないリスト）と``（順序のあるリスト）タグを使ったブログ記事のカスタマイズ方法を詳しく解説します。 アイコンの変更やマークの非表示、入れ子リストの作成から、``タグでの番号スタイルの変更や目次への適用例まで、幅広い使い方を紹介します。 FontAwesomeなどのアイコンを使ったリストや、目次への応用例を通して、読者にわかりやすく魅力的なコンテンツを提供する方法を一緒に学びましょう。

GitHubでブログにCSS・JSファイルを外部共有化する方法【初心者向け】

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

【徹底解説】YouTube埋め込み時のカスタマイズ：動画を魅力的に見せる技5つ②

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

はてなブログでのnoindexメタタグ設定の裏技: 個別記事の検索エンジン非表示を実現する方法

この記事では、はてなブログで個別記事に対して`noindex`の``タグ（メタタグ）を指定する方法に焦点を当てます。 通常、はてなブログではブログ全体に対して、は設定箇所がありますが、記事ごとの noindex設定がサポートされていません。そのため、読者によっては検索エンジン に表示されてしまうことがあります。 しかし、本記事ではちょっとした裏技を使うことで、個別記事に対しても検索エンジンから非表示にする手法を紹介します。 初心者にもわかりやすく解説し、その他にもクローラ、SEO的メリット、UX 向上の観点からも掘り下げています。裏技のコードや、応用例にも触れ、はてなブログに限らずサイトユーザーにとっても役立つ情報を提供しています。 とくにSEO戦略やプライバシー保護に関心のある方にとっては、有益な内容となっています。

CodePen埋め込みカスタマイズ：テーマカラー変更、予測変換、プレビューでの高さ指定など

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

はてなブログの埋め込みリンクを”ちょこっと”カスタマイズ：表示形式の変更方法

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

埋め込みリンク挿入時の表示内容の変更方法：ちょこっとカスタマイズ - はてなブログ

Hatena Notation 埋め込みリンクの挿入 埋め込みリンク表示の変更方法 カード＋リンクURL :embed:cite（デフォルト） カードのみ :embed カード＋タイトル :embed:title Markdown記法、はてな記法でリンクを埋め込むとき、カード下に付いてくるリンクがちょこっとだけ(＾-＾；)、気になっていました。 このリンク 埋め込みリンクの挿入 はてなブログでは、リンクアイコンからURLアドレスを貼り付けると、表示形式を選択できるガイドが表示されます。 ここのリンクの表示形式で『埋め込み』を選択したとき、デフォルトでは以下のような形式で、コードが貼り付けされま…

縦横比の計算とLaTeX（レイテック）記法【完全に備忘録】

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

集団の恐怖・差別の烙印 - ウルトラマンが問いかける社会の闇

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

【徹底解説】YouTube埋め込み時のカスタマイズ：動画を魅力的に見せる技5つ①

動画紹介をさらに魅力的にカスタマイズするテクニックを紹介します。 CSSやGoogleフォントの活用でタイトルやディスクリプション（動画紹介文）のテキストを装飾したり、動画プレイヤー埋め込み時のプロパティ指定、そしてレスポンシブな画面比の変更まで、全ての要素にこだわります。 さらに、マウスクリックでディスクリプションの表示非表示をするアニメーションも実装。動画紹介をより魅力的にする方法を一挙公開！します笑

CSSのみで「TOPへ戻るボタン」を簡単に作る方法：スクロール途中で表示し、上に戻るアニメーションを実装！

この記事では、JavaScriptを使用せずにCSSだけを使って「TOPへ戻るボタン」を実装する方法を詳しく解説しています。Scroll-driven Animationsという新しいAPIを活用し、スクロール途中でのボタン表示やトップへの滑らかなスクロールを実現します。初心者にもわかりやすいステップバイステップの説明で、Webデザインの視点からユーザーエクスペリエンスを向上させる手法を提案しています。

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

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

ジャニーズ問題と虚飾の海 Probably True, But It Sounds Like An Urban Legend Johnny Kitagawa

もうジャニーズいいよ、今更？という方も多いかと思います。 しかし、いまだに何かと話題の「ジャニーズ」ですが、、思い出した話がありまして。 もう結構昔のことですが、当時マスコミ関係で脚本の仕事をしていた、と或る知人から飲みの席で、こんな話を聞きました。疎覚えですが。。こんな感じだったと思います。 「若い頃、頼まれた脚本の仕事があったんだけど。 話を読んだら結構面白そうだから、ぜひ、やります、って言って引き受けたの。 それが、『虚飾の海』、っていう本を映画化する脚本の手伝いで…。」 虚飾の海、っていうのは星新一さん（有名なショートショートの作家でなく）ていう、元芸能マネージャーの業界暴露本で、実際…

シームレスなユーザーエクスペリエンス：グローバルメニューの実装と写真付きサブメニューの秘密①

ウェブサイトのナビゲーションは訪れるユーザーにとって重要な要素です。この記事では、クリックでナビゲーションが横から出現する洗練されたグローバルメニューの実装方法を詳細に解説します。さらに、マウスホバー時に写真付きのサブメニューが開くエレガントなデザインの秘訣も明らかにします。HTML、CSS、およびJavaScriptを使用して、使いやすく、魅力的なユーザーエクスペリエンスを提供するためのステップバイステップの手順をご紹介します。グローバルメニューの導入で、あなたのウェブサイトはモダンでスタイリッシュな印象を与えること間違いなしです。

ドロップダウン メニューの設計と実装：写真を駆使したユーザーフレンドリーなナビゲーション

この記事では、ウェブサイトのナビゲーションを魅力的にする方法を紹介します。 画面左側のナビゲーションに、イメージ画像を組み合わせたドロップダウン メニューのデザインと、実装方法を詳しく解説し、ユーザーエクスペリエンスを向上させるためのヒントを提供します。 ウェブデザインにおける新たなアイデアを見つけたい方におすすめの一読です。

お気に入りのブログカードデザインを複数、同じページで楽に使い分ける方法

この記事では、ブログカードデザインを簡単に切り替えて同じページで使う方法について詳しく説明します。 異なるカードデザインを適用する手順と、その実装方法について解説。 また、カードを使い分ける際のメリットや、カードを使って特定のページ内にリンクを貼る方法も紹介します。

全カテゴリー別記事一覧ページ hatebcustom

www.it-the-best.com 自分のカテゴリが今どうなってるか正直分かっていなかったため、、整理のために「IT the Best」さんの記事を参考に、このブログの全カテゴリー別記事一覧を表示してみました。 class ListPageByAllCategory { static run() { let c = this.get_allCategory(); this.show_archive(c); this.set_Style(); } static get_allCategory() { // 全てのカテゴリーを取得 var categoryList = []; let cate…

社労士特別研修②（試験に落ちたら？再受講は必要？）

この記事は、特定社労士試験に関するさまざまな情報をまとめたものです。 特に、特定社労士試験についての基本情報や受験に関する疑問について詳しく説明しています。 試験の日程や合格基準、受験料などや、試験に落ちた場合の再受講についての情報が含まれています。 特定社労士試験を受験する際に役立つ情報を提供しています。

社労士特別研修（中央発信講義①）

特定社労士とは何か、社労士との違い、そして特定社労士になるための特別研修についての詳細を紹介します。特別研修の内容や難しさ、受講者の実体験に触れながら、特定社労士資格を目指す道のりについて考察します。

Japanese Techno JukeBox YouTube IFrame

This article will show you how to set up a custom player for Japanese techno music lovers. Explore how to enjoy music from everyone from YMO to Derrick May in one place. We'll also cover customization options such as changing player size and playing in a new window. Immerse yourself in the world of Japanese techno music.

文字や動画を真ん中や左右に寄せたい！：水平方向に配置する基本のCSS

この記事では、CSSを活用してウェブページ上の要素を水平方向に配置する基本的なテクニックを紹介します。テキストや動画を中央寄せや左右寄せに配置するための方法について解説し、具体的なコード例を提供します。ウェブデザインやフロントエンド開発に興味がある方にとって、便利なスキルを身につける手助けになるでしょう。

【はてなブログ】「編集」ボタンが表示されない！そんなときの対処法

はてなブログを利用中に、編集ボタンが表示されなくなったことはありませんか？ この記事では、その原因と解決方法を詳しく解説します。特に、サードパーティのCookieをブロックする設定をしている場合の対処法を初心者にも分かりやすく説明します。 不具合を解消し、快適なブログライフを過ごしましょう。

更新の手間を減らせる！はてなブログの自動ping送信設定

はてなブログで手動のping送信作業から解放される方法を紹介します。IFTTT（If This Then That）を活用して、ブログの記事更新をトリガーにping送信を自動化しましょう。この記事ではIFTTTの使い方から具体的な設定手順まで詳しく解説します。 自動化により、ブログランキングサービスへのping送信が簡単に行え、ブログ更新の手間を大幅に削減できます。ブログ運営者や初心者の方に役立つ情報を提供します。

Sticky（追従サイドバー、スクロール）について、うまくいかない方はこれを試してみて下さい CSS

このCSSの備忘録は、追従サイドバー（Stickyサイドバー）の実装において、時折発生する問題に対処する方法を提供しています。要素に「position: sticky」を適用するだけではうまくいかない場合がありますが、ここではその問題に対処するためのアプローチを示しています。 具体的には、親要素に「display: flex」を追加することで、追従サイドバーの機能を改善できることがあります。これにより、サイドバー要素が正しくスクロールに追従し、期待通りの挙動を示すでしょう。 この方法は、特に追従サイドバーをCSSのみで実装しようとしている場合に役立つでしょう。検索ボックスがスクロール時に画面上部に固定されるようなUIを実現したい場合に、このアプローチを試してみてください。

Sticky（追従サイドバー、スクロール）について、うまくいかない方はこれを試してみて下さい CSS

追従スクロール、サイドバーのCSSプロパティ値「sticky」を設定しても、うまくいかないときは親要素に「display: flex」を追加してみてください。 .hatena-module-custom-sticky { position: sticky; top: 50px; } テストページ #box2 { display: flex; } .hatena-module-custom-sticky { position: sticky; top: 50px; } テストページ

画像と映像の比率の魔法 ~ 美の数式と16:9の誕生 ~

この記事は、ブログに貼り付ける画像の比率について探求し、代表的な比率に焦点を当ててその背後にある興味深いストーリーを紐解いています。記事では、黄金比、白銀比、青銅比、白金比、そして16:9の比率について詳しく説明し、それぞれの比率の由来や歴史を紹介しています。さらに、映画のアスペクト比についても触れ、16:9の誕生について解説しています。 この記事は、画像の比率がデザインや美的感覚にどれだけ影響を与えるかについて興味を持っている読者に向けられており、様々な比率の背後にある歴史や文化的背景に興味を持つ人々にとって魅力的な情報を提供しています。画像の比率は、デザインやコンテンツ制作において重要な要素であり、その選択には意味があることを読者に伝えることを目的としています。

スタイルシートをテンプレート化し、ページごとにデザインを変える

スタイルシートをテンプレート化し、ページごとにデザインを変える。 CSSファイルをクラウドに保存して共有、LINKで呼び出す方法について。 はてなブログ

1カラムテーマの2カラム化：はてなブログ

はてなブログの1カラムテーマを個別の記事で2カラムに変更し、さらにサイドバーを固定する方法

CSSを使用したホバーエフェクト: 回転、フリップ、浮き上がり、色変化の実装方法

この記事では、カスタムCSSを使用してウェブボタンに魅力的なホバーエフェクトを実装する方法を解説します。色の変化、浮き上がり、フリップ、回転など、さまざまなアニメーション効果をボタンに適用し、ウェブデザインをより魅力的にする手順を詳細に紹介します。CSSの基本から高度なテクニックまで、デザイナーとフロントエンド開発者向けの実用的なガイドとなっています。 記事を通じて、カスタムボタンデザインの実装に必要なコードや概念を理解し、ウェブサイトのユーザーエクスペリエンスを向上させる方法を学びましょう。

自動YouTube埋め込みコード生成ツール （Ver.1）

このツールは、YouTube動画の埋め込みコードを自動生成する便利なユーティリティです。ユーザーは動画URLを入力し、カテゴリタグを選択することで、選択したカスタマイズ後の埋め込みコードを取得できます。

Markdownでtarget="_new"（blank）を指定し、リンクを別ウィンドウで開く方法

Markdownでリンクを貼る際にtarget="new"を指定できない問題に直面しました。この記事では、Markdown記法をそのまま生かしながら、自サイト以外のリンクを別ウィンドウで開く方法を紹介します。

リンクを貼るときのひと手間、「target="_new"」の利点

この記事では、Webサイト運営者やウェブデベロッパーに向けて、セキュアな外部リンク設定の方法に焦点を当てます。特に、「target="_new" rel="noopener noreferrer"」という属性の利点について説明し、なぜこの設定が推奨されるのかを詳しく解説します。

テキストを中央配置し、左右逆寄せにデザインする方法 CSS HTML ③

この記事では、HTMLとCSSを使って、ウェブページ上でテキスト要素を特定のデザインに配置する方法について解説します。 具体的には、2つのテキスト要素を中央に配置し、左側要素の文字は右寄せに、もう一方はまた要素と逆寄せにする方法です。

クリックして欲しい場所を目立たせる、波紋がふわっと広がるアニメーション CSS

ウェブサイトやアプリケーションのユーザーエクスペリエンスを向上させるために、クリック可能な要素をユーザーに効果的にアピールする方法があります。この記事では、CSSを使用してクリックされた場所に波紋効果を追加する手法を詳しく説明します。

カレンダー（月別アーカイブ）を任意の場所に置く方法 はてなブログ ①

この記事では、はてなブログの「月別アーカイブ」をウェブサイトの任意の場所に配置する方法を解説します。 具体的には、Ajaxを使用した非同期呼び込みの仕様と、HTML・CSSを活用したカスタマイズが可能になるメリットについての内容です。 この手法を利用してユーザビリティ向上に活用しましょう。

【参照用】HTMLエンティティ：「&nbsp;」とか「&#058;」とか

HTMLエンティティは、ウェブ開発者にとって不可欠なツールです。HTMLエンティティはアンパサンド(&)で始まりセミコロン(;)で終わるテキストの一固まりで、特殊文字や予約済み文字の表示に使用されます。 さらに、HTMLエンティティはセキュリティ上も重要です。また、エンティティを使用することで、異なる文字エンコーディングやブラウザの互換性の問題を回避し、ウェブコンテンツの一貫性を維持できます。

ふしぎな錯覚現象、いろいろ。

ふしぎな錯覚現象をいろいろ紹介

オシャレで可愛い検索ボックスを、右端にちょこんと付けたい CSS / JQuery / HTML

この記事では、Webデザインにおけるおしゃれな検索ボックスの実装方法について詳しく解説します。 検索ボックスは右上に固定され、クリックするとスムーズに表示されます。 簡単なCSSとJavaScript（JQuery）を活用して、右上に固定されたおしゃれで可愛らしい検索ボックスを実現する手順を紹介します。 ブログデザインを崩さずに検索機能を追加したい方にとって、役立つ情報となっています。

【参考用】大手サイトのテキスト本文で使用しているフォント色まとめ

ウェブサイトで一般的に使用されているフォント色について表にまとめました。デザインの参考になるカラースキームを見つけるのに役立つ情報です。

基本的なHTMLとCSSを用いたシンプルなドロップダウンメニューの実装方法

この記事では、シンプルなドロップダウンメニューの実装方法を解説します。 今回ご紹介するコードは、Webページに簡単なドロップダウンメニューを実装するためのものであり、CSSとHTMLの基本的な知識があれば理解できるものです。 メニューの表示と非表示を制御するためにチェックボックスとラベルを使用し、CSSを使ってアニメーションとスタイリングを実現しています。 ハンバーガーアイコンをクリックすると、メニューがスムーズに表示され、ユーザーがナビゲーションを行えるようになります。 メニュー項目にホバーするとアンダーラインが表示されるなど、ユーザーエクスペリエンスを向上させるための機能も組み込まれていま…

Font Awesome - よく利用するアイコンだけまとめ

Font Awesome - よく利用するアイコンだけまとめ

サイトに音声オン・自動再生でYouTubeを置く方法: IFrame Player API - Page.4

var noindex = document.createElement("meta"); noindex.name = "robots"; noindex.content = "noindex"; var head = document.getElementsByTagName("head")[0]; head.appendChild(noindex); .post-category { top: 30px; } WebサイトにYouTube動画を埋め込むことは、訪問者に対して情報を視覚的に提供し、コンテンツの魅力を高めるために非常に重要です。 この記事では、YouTube動画のWebサイト…

サイトに音声オン・自動再生でYouTubeを置く方法: IFrame Player API - Page.3

var noindex = document.createElement("meta"); noindex.name = "robots"; noindex.content = "noindex"; var head = document.getElementsByTagName("head")[0]; head.appendChild(noindex); .post-category { top: 30px; } WebサイトにYouTube動画を埋め込むことは、訪問者に対して情報を視覚的に提供し、コンテンツの魅力を高めるために非常に重要です。 この記事では、YouTube動画のWebサイト…

サイトに音声オン・自動再生でYouTubeを置く方法: IFrame Player API - Page.2

var noindex = document.createElement("meta"); noindex.name = "robots"; noindex.content = "noindex"; var head = document.getElementsByTagName("head")[0]; head.appendChild(noindex); .post-category { top: 30px; } WebサイトにYouTube動画を埋め込むことは、訪問者に対して情報を視覚的に提供し、コンテンツの魅力を高めるために非常に重要です。 この記事では、YouTube動画のWebサイト…

トップへ戻るボタン：Webサイト／ブログへの実装手順・メリットデメリット

この記事では、ウェブサイトやブログに「トップへ戻るボタン」を実装する方法とそのメリットについて詳しく解説しています。最新のWebデザインにおいて、ページをスクロールした際に画面右下に表示されるこのボタンは、ユーザーエクスペリエンス向上やSEO対策に貢献する重要な要素となっています。記事では、HTML、CSS、JavaScriptを使用してボタンを実装する手順を説明し、それぞれの実装方法の長所と短所を比較しています。また、トップに戻るボタンを設置する必要性や、具体的な作成手順についても紹介しており、ユーザーエクスペリエンス向上とWebページのSEO対策に貢献する方法として、このボタンの設置を検討する際に役立つ情報を提供しています。

サイトに音声オン・自動再生でYouTubeを置く方法: IFrame Player API

この記事では、YouTube動画をウェブサイトに埋め込み、ページアクセス時に音声をONにして自動再生させる方法について詳しく説明します。埋め込みの基本手順から、プロパティ・パラメータの設定カスタマイズ、さらにはiframe APIとJavaScriptを使用して動画プレイヤーを制御する方法まで、ステップバイステップで解説します。ウェブサイトの訪問者に動画を効果的に提供し、魅力的なユーザーエクスペリエンスを実現しましょう。

手軽で快適！軽量言語「Markdown」記法まとめ。使い方、メリット・デメリット

Markdown記法の基本から応用まで詳しく解説。引用、改行、コード挿入、表作成、リンク、画像挿入、脚注、装飾、打消し線、エスケープ文字、HTML、CSS、TEXなどを網羅。手軽ながら柔軟性に欠ける一面もあるMarkdownのメリット・デメリットも考察。記事を通じて、見やすく簡単な文書作成のスキルを獲得しましょう。

手軽で快適！軽量言語「Markdown」記法まとめ。使い方、メリット・デメリット

Markdown Markdown（マークダウン）は、文書を記述するための軽量なマークアップ言語です。この言語は、プレーンテキスト形式で手軽に書かれた文書をHTMLに変換するために開発されました。 Markdownを使用すると、文書の構造や文字の強調などを簡単に指定できるため、会議の議事録、社内ドキュメント、メモの作成など幅広い用途に利用できます。 Markdownの主な特徴は以下の通りです： 手軽に文章構造を明示できる： 見出しやリスト、引用などを簡単に示すことができます。 簡単で、覚えやすい： シンプルな記法であり、多くのルールを覚える必要がありません。 特別なアプリが不要： Markdo…

ブログに音楽を埋め込む方法 サウンドファイルのプレイヤー設置手順

ブログに音楽を埋め込む方法を詳しく解説。DropboxなどのクラウドドライブやYoutube等を利用した音声ファイルの埋め込みから、ブログ記事内でのプレイヤー設置まで、手順を分かりやすく説明します。

JSFiddleの埋め込み設定：Resultタブをデフォルトに

この記事は、JSFiddleを使用してWeb開発プロジェクトを共有または埋め込む際に、デフォルトの表示タブを"Result"に変更する方法について詳しく説明しています。また、埋め込み後のダークモード⇔ライトモード切り替え方法も。 読者は、このガイドを通じて、JSFiddleの埋め込みコードをカスタマイズし、望む通りに表示を制御できるようになります。

スタイリッシュなキラキラボタンの作成手法: HTMLとCSSで魅惑のエフェクトを実装③

この記事では、HTMLとCSSを使用して、魅力的なキラキラエフェクトを持つボタンを作成する方法を詳しく解説します。アニメーションやスタイリングの手法を組み合わせ、ユーザーエクスペリエンスを向上させる効果的なボタンのデザイン手法を紹介します。また、Google フォントとFontAwesome アイコンの組み込みについても詳しく解説し、デザインの幅広いオプションについても触れます。デザインやアニメーションに興味のある方に向けた内容となっています。

スタイリッシュなキラキラボタンの作成手法: HTMLとCSSで魅惑のエフェクトを実装①

この記事では、HTMLとCSSを使用して、魅力的なキラキラエフェクトを持つボタンを作成する方法を詳しく解説します。アニメーションやスタイリングの手法を組み合わせ、ユーザーエクスペリエンスを向上させる効果的なボタンのデザイン手法を紹介します。また、Google フォントとFontAwesome アイコンの組み込みについても詳しく解説し、デザインの幅広いオプションについても触れます。デザインやアニメーションに興味のある方に向けた内容となっています。

スタイリッシュなキラキラボタンの作成手法: HTMLとCSSで魅惑のエフェクトを実装②

この記事では、HTMLとCSSを使用して、魅力的なキラキラエフェクトを持つボタンを作成する方法を詳しく解説します。アニメーションやスタイリングの手法を組み合わせ、ユーザーエクスペリエンスを向上させる効果的なボタンのデザイン手法を紹介します。また、Google フォントとFontAwesome アイコンの組み込みについても詳しく解説し、デザインの幅広いオプションについても触れます。デザインやアニメーションに興味のある方に向けた内容となっています。

効率的なテキストのクリップボードへのコピーボタン実装方法: Async Clipboard APIの活用 - JavaScript

この記事ではWebアプリケーションのUX(ユーザエクスペリエンス)向上のために重要なクリップボードへのコピー機能を取り上げます。Async Clipboard APIを活用し、JavaScriptを使用した実装手順やコード例を通じて、初心者でも理解しやすくお届けします。さらに、セキュリティの向上にも焦点を当てます。Async Clipboard APIによる効率的でモダンなテキストのクリップボードへのコピーを実現する方法を詳しく解説！

はてなブログ : blog作成備忘録 - CSS Cheat Sheet -

1. 💻 - Related to programming and web development.2. 🎨 - Pertaining to design and styling.3. 📐 - Associated with layout and design adjustments.4. 📝 - Relating to code and style notation.5. 🧩 - Reflecting the puzzle-like assembly of code and style.6. 🔍 - Relevant to debugging and element inspection.7…

シンプルなウェブサイトのトップページデザイン例

この記事では、基本的なウェブサイトのトップページのデザインを紹介します。ヘッダー、セクション、フッターなどの要素を使ったシンプルなレイアウトの例を掲載し、各セクションの役割やコンテンツについても解説します。

コードの折り返し表示を切り替える便利な方法 - jQueryを使用して実装

Web ページにソース コードを表示する場合は、読みやすさとアクセシビリティの両方を考慮することが重要です。 この記事では、jQuery を使用してコードの折り返し表示を切り替える方法を紹介します。 コードが画面内に収まりきらない場合でも、スクロールバーを表示せずにコードを見ることができます。Slick Carousel ライブラリを活用し、コードの折り返し表示を切り替える仕組みを実装します。 さらに、実際のコード例とともに、どのようにしてこの機能を実装するかをかんたんに解説します。

【コード付き】かわいいアイコン付き吹き出しデザイン集：CSSのみだから軽量、レスポンシブ

この記事では、CSSのみを使用して作成された吹き出しデザインとアイコンの組み合わせバリエーションをご紹介します。 かわいらしい要素を取り入れ、軽量でありながらも魅力的な吹き出しのスタイリング方法を学び、レスポンシブな設計にも対応させるテクニックを探求します。 魅力的なUIを構築するヒントなど、デザイン愛好者やWeb開発者の皆様からのクリエイティブなご意見などもいただけますと幸いです。

HTML「details」を使用して長いコードを簡単に折りたたむ方法

HTMLの「details」タグを使用して、長いコードやテキスト部分を簡単に折りたたむ方法をいっしょに学びましょう。コーディングブログやカスタマイズに最適な、シンプルなアコーディオンメニューを作成できます。 複雑なJavaScriptやCSSは不要です。必要なのは「details」と「summary」タグのみです。タイトルは「summary」タグで簡単に設定し、内容は「details」タグ内に記述します。 「open」属性を追加することで、最初から展開された状態で表示することも可能です。この手法で、スタイリッシュなアコーディオンメニューを簡単に作成しましょう。

【ブログデザイン】セリフを話すアイコンを、アニメーションで動かしたい #CSS #カスタマイズ

class「r-fuki piyo」のなぞ 捜査は難航 事件の全貌 気を取りなおして ここで問題が 強引に解決 今回のコード HTML CSS .l_toc { margin: 30px auto; font-weight: bold; } .l_toc a { text-decoration: none; } .l_toc ol { padding-left: 0; list-style: none; counter-reset: section; background-color: #464646; padding: 20px; display: contents; } .child_ol…

【はてな記法】画像の位置を変えたいけど、ツールバーにアイコンがない…！真ん中や右に寄せたいとき

寄せたい画像の位置と書き方 真ん中 上のコード [f:id:画像:plain:h240] の解説 右寄せ（さらに左側に文字を回り込ませる） 左寄せ（さらに右側に文字を回り込ませる） 横並び 寄せたい画像の位置と書き方 真ん中 <center>[f:id:画像:plain:h240]</center> 上のコード [f:id:画像:plain:h240] の解説 f:id:まではそのままで。そのうしろ、「画像」のところから「はてなID」「はてなフォトライフ」の画像IDを入れる 例⇒ fobitows:20190806171734p 「w」と「h」で画像の大きさを指定 例⇒ :w500（幅 500…

【ブログカスタマイズ】ページのURLに応じて、同じ場所のテキストを変更 #JavaScript

やりたいこと できるかな？ URLの違い JavaScriptで特定のURLを識別 やりたいこと サイドバーの目次タイトルを、表示するページによって変更したい できるかな？ URLの違い https://rubirubi.hateblo.jp/entry/～ https://rubirubi.hateblo.jp/archive/～とりあえずは通常記事とアーカイブ（カテゴリー含む）で。 JavaScriptで特定のURLを識別 指定したURLのパスに基づいて、特定のテキストを表示するためには、JavaScriptを使用する必要があります。以下は、JavaScriptを使ってURLに基づいてテキ…

【はてな記法】よく使うソースコードのシンタックスハイライト：スーパーpre記法( > ～ < )

Syntax Highlighting of Source Code with Hatena Notation スーパーpre記法 html css python sh ruby hatena おまけ 項目名ありの表 引用記法 Syntax Highlighting of Source Code with Hatena Notation スーパーpre記法 > ～～ 整形したHTMLなどのソースをそのまま表示（pre）'> ここにコードの種類 ''''ここにコードを書く ' シンタックスハイライトをはてな仕様で利用するには、ソースコードを一度はてな記法で書いてから、コピペしなけれ…