はてなブログ
はてなブログ無料版のトップページを自分好みにカスタマイズするシリーズの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ライブラリを駆使して、画像カードにスライドアニメーションを加え、マウスホバ…
本記事では、無料版はてなブログのトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。 ブログを運営する上での重要なポイントを押さえつつ、分かりやすく解説します。ぜひ、これらの手順やアイディアを取り…
本記事では、はてなブログでpreタグを使ってコード表記をする際に、行ごとに連番を付ける簡単な方法を紹介します。 jQueryライブラリとCSSスタイリングの組み合わせで、読みやすく整形されたコード表示が可能となります。
この記事では、はてなブログの記事タイトルにCSS3を使用して背景画像を追加するテクニックを紹介します。角度をつけたり、さまざまなフィルターを組み合わせてオリジナルなデザインを実現しましょう。
CSS備忘録です。
CSS備忘録です。
この記事では、はてなブログで目次を固定配置し、表示非表示をボタンで切り替える方法について解説します。目次の固定配置からボタンの作成、デザイン、表示の切り替えまで、ステップバイステップでご紹介します。 また、ページの最後にはこの記事で紹介して…
この記事では、はてなブログで個別記事に対して`noindex`の``タグ（メタタグ）を指定する方法に焦点を当てます。 通常、はてなブログではブログ全体に対して、は設定箇所がありますが、記事ごとの noindex設定がサポートされていません。そのため、読者によ…
自分のカテゴリが今どうなってるか正直分かっていなかったため、、整理のために「IT the Best」さんの記事を参考に、このブログの全カテゴリー別記事一覧を表示してみました。 記事が複数ある場合、 左にスクロールできます。
はてなブログを利用中に、編集ボタンが表示されなくなったことはありませんか？ この記事では、その原因と解決方法を詳しく解説します。特に、サードパーティのCookieをブロックする設定をしている場合の対処法を初心者にも分かりやすく説明します。 不具合…
この記事は、ブログに貼り付ける画像の比率について探求し、代表的な比率に焦点を当ててその背後にある興味深いストーリーを紐解いています。記事では、黄金比、白銀比、青銅比、白金比、そして16:9の比率について詳しく説明し、それぞれの比率の由来や歴史…
スタイルシートをテンプレート化し、ページごとにデザインを変える。 CSSファイルをクラウドに保存して共有、LINKで呼び出す方法について。 はてなブログ
はてなブログの1カラムテーマを個別の記事で2カラムに変更し、さらにサイドバーを固定する方法
Markdownでリンクを貼る際にtarget="new"を指定できない問題に直面しました。この記事では、Markdown記法をそのまま生かしながら、自サイト以外のリンクを別ウィンドウで開く方法を紹介します。
この記事では、はてなブログの「月別アーカイブ」をウェブサイトの任意の場所に配置する方法を解説します。 具体的には、Ajaxを使用した非同期呼び込みの仕様と、HTML・CSSを活用したカスタマイズが可能になるメリットについての内容です。 この手法を利用し…
Markdown記法の基本から応用まで詳しく解説。引用、改行、コード挿入、表作成、リンク、画像挿入、脚注、装飾、打消し線、エスケープ文字、HTML、CSS、TEXなどを網羅。手軽ながら柔軟性に欠ける一面もあるMarkdownのメリット・デメリットも考察。記事を通じ…
CSS備忘録です。
寄せたい画像の位置と書き方 真ん中 上のコード [f:id:画像:plain:h240] の解説 右寄せ（さらに左側に文字を回り込ませる） 左寄せ（さらに右側に文字を回り込ませる） 横並び 寄せたい画像の位置と書き方 真ん中 <center>[f:id:画像:plain:h240]</center> 上のコード [f:id:…
Syntax Highlighting of Source Code with Hatena Notation スーパーpre記法 html css javascript python sh ruby hatena おまけ 表組 項目名ありの表 引用記法 Syntax Highlighting of Source Code with Hatena Notation スーパーpre記法 >|| ～～ || 整形…
AIでブログ記事は書けるか？ キーワードを決める ✖「はてなブログ aboutページ」 競合ページの調査をChatGPTにお願いする 参考にする見出しを意味のあるものに絞る いよいよChatGPTの出番！ 出力した記事の検証 AIでブログ記事は書けるか？ 最近、aboutペー…
aboutページの見直し 定期的な見直しが必要です汗 画像の遅延読み込み aboutページの見直し ブログ開設当初、いろいろとブログカスタマイズについて調べていくなかで、「ごあいさつ」や「自己紹介」ページというのがブログには大抵存在するな、と気づき、は…
Meet Kanzi, an extraordinary bonobo living in America. He is a remarkable ape who can memorize over 1000 English words and understand everyday human conversations with his keen ears. While bonobos may resemble chimpanzees at first glance, …
『奇跡のボノボ、カンジ』3夜目です。 ボノボとヒトにはたくさんの共通点があって、なかにはヒトが見習うべき部分も多いと感じます。 30年以上前の1993年に放映されたNHKスペシャル、『天才ザル・カンジくん。驚異・類人猿の知能』という番組紹介のつづきを…
はじめに。つぶやきと前回の続き 『奇跡のボノボ、カンジ』と勝手に銘打って（笑）つぶやいている2夜目です。 前回途中までお話したNHKスペシャル、『天才ザル・カンジくん。驚異・類人猿の知能』という番組紹介のつづきをどうぞ。 ボノボとは、ヒトにもっと…
