CSS
やっとこのブログのテーマを変えることができました。 変えようと思い始めて数ヶ月、なのに印象はあまり変わらない結果となりました（笑）。白ベースを基本にしていますのでまあこんなもんでしょう。 変更のポイントをあげておきます。 ブレイクポイント ボ…
そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（4）。正月休み中にもほんとど触れずいっこうに進んでいません。 今回はサイドバーモジュールを本文下に横並びで並べた時に高さを揃えようと思います。 何をやろうとしているか 画像…
そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（3）。なのに忙しくて一向に進みません（笑）。 レスポンシブデザインのブレイクポイントについて考えてみます。 まず本文の表示最大幅を決める 本文表示幅 92vw可変、最大幅 650px …
そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（２）。 フォントサイズをビューポート（表示幅）に応じて自動で変化させます。 表示幅によってフォントサイズを可変にする 最大フォントサイズにする表示幅をコンテンツ表示幅にする…
そろそろこのサイトのデザインを変えようかと思い始めての tips チップス。 パンくずリストのカスタマイズ はてなブログパンくずリストHTML構造 パンくずリストの最後の項目を変更する パンくずリストの最後の項目を削除する パンくずリストの最後の項目を変…
デバイスの表示領域が縦長か横長かで CSS を変更したいと思ったことはありませんか？ CSS メディア特性 orientation 具体例 CSS メディア特性 orientation メディアクエリのメディア特性に orientation というものがあることを知りませんでした（涙）。 これ…
aタグやクリックイベントを持った要素の領域を保持したまま、css だけでフェードインしたりフェードアウトしたりする方法です。 必要なときはさほど多くないと思いますが、これが一番簡単かなという方法を思いつきましたのでメモ程度です。 要素を非表示にす…
実はもうすでにこのブログやテーマストアで公開しているテーマでも基本レイアウトには Grid Layout を使っているのですが、もっと活用できないかといろいろやってみましたら、はてなブログのコンテンツ内でもかなり便利に使えることに気づきました。 エント…
サイトをレスポンシブでデザインする際、画像をいくつか並べて、その縦横比を維持しながら、どんな画面サイズでも指定の横幅いっぱいに美しく並べる方法です。 こういうことです。 サイト：そんなには褒めないよ。映画評 画像が background の場合 画像が im…
オフキャンバスメニュー付 はてなブログテーマ（開発環境） 前記事「はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ」で予告しておきました「はてなブログDOM操作モジュール imzModules」にオフキャンバスメニューを付けました。 スク…
CSS Grid Layout の auto-fit を @mixin で実現 「CSS Grid Layout の auto-fit を擬似的に IE11 で実現させる」の続きです。 IE11 では対応していいない Grid Layout の auto-fit を擬似的に対応させます。擬似的というのは、auto-fit を使えばメディアクエ…
CSS Grid Layout の auto-fit を擬似的に IE11 で実現させる CSS Grid Layout を使いますとウェブの表現力があがりますね。「グリッドレイアウト」などでググってみてください。おしゃれなサイトがいっぱい紹介されています。このブログもそろそろグリッドレ…
IE11 で使えない CSS プロパティ：値（メモ） 普段ほとんど IE のことは頭から落ちてしまっていますが、時々 IE ではどんなんかな？と見てびっくりすることがあります。で、IE っていつまでサポートされているの？と調べてみましたら、なんと 2025年10月15日…
はてなブログに CSS グリッドレイアウトを導入してみる はてなブログのテーマを display: grid を使って作ってみようと思います。ブラウザの対応状況は Can I use... Support tables for HTML5, CSS3, etc です。IE にベンダープレフィックスを付けても機能…
rgba の16進数表記 #rrggbbaa はダメだって!？ 通常、ブラウザは Chrome か Firefox を使っていますので、IE はもとより Edge も、チェック時以外はほとんど立ち上げることもありません。で、たまたま、映画のレビューブログ「そんなに褒めないよ。映画評」…
gulp で sass コンパイル環境を構築 + autoprefixer + browser-sync はてなブログのテーマの作り方（それほどでもないけど）を７回ほど書いていまして、前回、display: grid を使ってみようと思いましたが、Hatena-Blog-Theme-Boilerplate ではベンダープレ…
はてなブログテーマ開発（番外）グリッドレイアウトを使ってみる 記事ページの基本構造がほぼ出来ましたので、トップページに移り、ブログタイトルなど共通部分がこのままでいけるかどうか確認します。 トップページのレイアウトは、１カラムでグリッドレイ…
はてなブログテーマ開発（7）フォントサイズを可変にする フォントサイズの指定っていうのは結構悩ましいですね。絶対値指定の px 、相対値指定の %, em, rem 、最近では vw も使われます。はてなブログテーマ開発の7回目は、フォントサイズを可変に出来ない…
はてなブログテーマ開発（6）Javascript を使って要素を移動する Wordpress や Joomla! を使って自分でブログを立ち上げれば、そもそもの基本構造も自由に変えられるのですが、はてなブログなどではそんなわけにはいかず、せいぜい CSS で見た目を変えるくら…
はてなブログテーマ開発（5）ブログタイトル、記事タイトルの装飾 はてなブログのサンプルテーマ Boilerplate を使ってのテーマ開発の５回目です。基本構造ができましたので、細部の装飾に入るのですが、トップページは各記事やアーカイブとは別に考えること…
はてなブログテーマ開発（4）ブログの基本構造を作る はてなブログのサンプルテーマ Boilerplate を使ってのテーマ開発の４回目です。前回で自動リロードの環境も整いましたので、実際に scssファイルに手を加えていきます。 はてなブログテーマ開発（1） は…
はてなブログテーマ開発（3）HTTPS環境下でBrowsersyncの自動リロードを実現 はてなブログテーマ開発（1） はてなブログテーマ開発（2） 今回は、HTTPS環境下の開発でも Hatena-Blog-Theme-Boilerplate（Boilerplate） の自動リロードを有効にする方法です。…
はてなブログテーマ開発（2）Hatena-Blog-Theme-Boilerplate を使って はてなブログテーマ開発（1） はてなが公開しているサンプルテーマ「Hatena-Blog-Theme-Boilerplate」を使ってのテーマ開発の２回目です。 npm-scripts cssファイルのインポート _core.s…
Hatena-Blog-Theme-Boilerplateを使ってテーマ開発（1） 別ブログ「＠半径とことこ60分」のテーマを変更しようと思うのですが、この機会に、はてなブログのテーマをどうやって作っているかを書いていこうと思います。 もちろん、どんな方法であれ、HTMLの構…
iPhoneでモーダルの背景のスクロールを止める 以前の記事「モーダルの背景のスクロールを止める」 上の記事で、メニューなどをモーダルで出す場合に背景のスクロールを止める方法を書いたのですが、やはり、iPhone 実機ではうまくいきません。再度挑戦です。…
モーダルの背景のスクロールを止める はてなブログのテーマをレスポンシブで作る際に、あれ？ なぜ？ と、ちょっと手間取った CSS ２題です。どちらもモバイルのメニューなど、モーダルウィンドウに関してです。 モーダルウィンドウがスクロールしない Codep…
はてなブログ／ブレイクポイント１つのテーマのワイヤーフレーム 前記事、「（はてな）ブログのブレイクポイントはひとつでいいのではないかという話」のサンプルワイヤーフレームを作ってみました。 サンプル Codepen サンプル サンプル サンプルを開いて、…
（はてな）ブログのブレイクポイントはひとつでいいのではないかという話 Webサイトをレスポンシブデザインで作る場合、はてなブログで言えば、「レスポンシブデザインのテーマを作成する」場合は、メディアクエリ（Media queries）を使って、デバイスの表示…
はてなブログ／スマホなどタッチデバイスの :hover イベント対応 映画のレビューを書いている別ブログ「そんなには褒めないよ。映画評」のデザインを変更しようとしているのですが、スマホの UI で停滞しています。 トップページは、「一覧形式」を利用して…
はてなブログ「一覧形式」の画像を美しく並べる トップページの表示形式を「一覧形式」に変更しますと、archiveページと同様の表示になり、画像は中央から 500px四方にトリミングされたサムネイルが 120px四方に縮小表示されます。その画像をオリジナルのも…
