オフキャンバスメニュー付 はてなブログテーマ（開発環境） 前記事「はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ」で予告しておきました「はてなブログDOM操作モジュール imzModules」にオフキャンバスメニューを付けました。 スク…

はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ このブログのテーマを作り変えようと思います。 まずは、ベースとなるグリッドレイアウトのSASS開発環境とユニークなテーマづくりに必須のDOM操作をモジュール化してまとめてみました。 …

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 を使いますとウェブの表現力があがりますね。「グリッドレイアウト」などでググってみてください。おしゃれなサイトがいっぱい紹介されています。このブログもそろそろグリッドレ…

はてなブログに CSS グリッドレイアウトを導入してみる はてなブログのテーマを display: grid を使って作ってみようと思います。ブラウザの対応状況は Can I use... Support tables for HTML5, CSS3, etc です。IE にベンダープレフィックスを付けても機能…

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の構…

www.imuza.com Sass をインストールできましたので、開発環境（大層？）を整えます。 scss ファイルの変更を監視する --watch オプション 自動化するバッチファイル ショートカットでクリック一発 scss ファイルの変更を監視する --watch オプション .scssフ…

CSS メタ言語 LESS は、Joomla!のテーマやはてなのサンプルテーマ「Boilerplate」でも使われてしますので、ここしばらく使っていたのですが、Bootstrap4 が Sass 一本になったということもありますので Sass を使ってみようと思います。環境は Windows10 で…