はてなテーマ

はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ

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

CSS Grid Layout の auto-fit を @mixin で実現

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

はてなブログに CSS グリッドレイアウトを導入してみる

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

はてなブログテーマ開発(8)スマホ用 offcanvasmenu の作り方

はてなブログテーマ開発(8)スマホ用 offcanvasmenu の作り方 別ブログ「@半径とことこ60分」のテーマ変更を機に、はてなブログのテーマ開発について書いています。今回はスマホ用のナビゲーションメニューを作ります。 はてなブログテーマ開発(1) はて…

はてなブログテーマ開発(0)とりあえず完成させた

はてなブログテーマ開発(0)とりあえず完成させた 別ブログ「@半径とことこ60分」のテーマ変更を機に、はてなブログのテーマ開発について書いています。まだいろいろ書くことはあるのですが、テーマ変更とともに独自ドメイン化と HTTPS 化をやろうというこ…

gulp で sass コンパイル環境を構築 + autoprefixer + browser-sync

gulp で sass コンパイル環境を構築 + autoprefixer + browser-sync はてなブログのテーマの作り方(それほどでもないけど)を7回ほど書いていまして、前回、display: grid を使ってみようと思いましたが、Hatena-Blog-Theme-Boilerplate ではベンダープレ…

はてなブログテーマ開発(番外)グリッドレイアウトを使ってみる

はてなブログテーマ開発(番外)グリッドレイアウトを使ってみる 記事ページの基本構造がほぼ出来ましたので、トップページに移り、ブログタイトルなど共通部分がこのままでいけるかどうか確認します。 トップページのレイアウトは、1カラムでグリッドレイ…

はてなブログテーマ開発(7)フォントサイズを可変にする

はてなブログテーマ開発(7)フォントサイズを可変にする フォントサイズの指定っていうのは結構悩ましいですね。絶対値指定の px 、相対値指定の %, em, rem 、最近では vw も使われます。はてなブログテーマ開発の7回目は、フォントサイズを可変に出来ない…

はてなブログテーマ開発(6)Javascript を使って要素を移動する

はてなブログテーマ開発(6)Javascript を使って要素を移動する Wordpress や Joomla! を使って自分でブログを立ち上げれば、そもそもの基本構造も自由に変えられるのですが、はてなブログなどではそんなわけにはいかず、せいぜい CSS で見た目を変えるくら…

はてなブログテーマ開発(5)ブログタイトル、記事タイトルの装飾

はてなブログテーマ開発(5)ブログタイトル、記事タイトルの装飾 はてなブログのサンプルテーマ Boilerplate を使ってのテーマ開発の5回目です。基本構造ができましたので、細部の装飾に入るのですが、トップページは各記事やアーカイブとは別に考えること…

はてなブログテーマ開発(4)ブログの基本構造を作る

はてなブログテーマ開発(4)ブログの基本構造を作る はてなブログのサンプルテーマ Boilerplate を使ってのテーマ開発の4回目です。前回で自動リロードの環境も整いましたので、実際に scssファイルに手を加えていきます。 はてなブログテーマ開発(1) は…

はてなブログテーマ開発(3)HTTPS環境下でBrowsersyncの自動リロードを実現

はてなブログテーマ開発(3)HTTPS環境下でBrowsersyncの自動リロードを実現 はてなブログテーマ開発(1) はてなブログテーマ開発(2) 今回は、HTTPS環境下の開発でも Hatena-Blog-Theme-Boilerplate(Boilerplate) の自動リロードを有効にする方法です。…

はてなブログテーマ開発(2)Hatena-Blog-Theme-Boilerplate を使って

はてなブログテーマ開発(2)Hatena-Blog-Theme-Boilerplate を使って はてなブログテーマ開発(1) はてなが公開しているサンプルテーマ「Hatena-Blog-Theme-Boilerplate」を使ってのテーマ開発の2回目です。 npm-scripts cssファイルのインポート _core.s…

Hatena-Blog-Theme-Boilerplateを使ってテーマ開発(1)

Hatena-Blog-Theme-Boilerplateを使ってテーマ開発(1) 別ブログ「@半径とことこ60分」のテーマを変更しようと思うのですが、この機会に、はてなブログのテーマをどうやって作っているかを書いていこうと思います。 もちろん、どんな方法であれ、HTMLの構…

(bug fix)はてなブログ「一覧形式」の画像をオリジナルのものに変える

(bug fix)はてなブログ「一覧形式」の画像をオリジナルのものに変える はてなブログのトップページを「一覧形式」にした場合の画像をサムネールではなく元画像に差し替える下記記事のスクリプトは、画像が png や gif の場合にエラーとなります。 元記事:…

はてなブログ/ブレイクポイント1つのテーマのワイヤーフレーム

はてなブログ/ブレイクポイント1つのテーマのワイヤーフレーム 前記事、「(はてな)ブログのブレイクポイントはひとつでいいのではないかという話」のサンプルワイヤーフレームを作ってみました。 サンプル Codepen サンプル サンプル サンプルを開いて、…

はてなブログ/カテゴリー別記事一覧のHTML構造が変更されました

なにげなく当サイトのカテゴリー別記事一覧を見ていましたら、あれ? タイトルにゴーストが出ているじゃありませんか! それに一覧の項目の上の空白が広くなっている!? どういうこっちゃとデベロッパーツールで調べてみましたら、カテゴリー名が #top-box …

はてなブログのホームを他の記事と違うデザインする/ cms-style(7)

はてなブログを Wordpress 風に! > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。cms-style(7)まできましたが、役に立つようなことを書けているかどうか自分ながら微妙ですね(笑)。 で、これまではサイ…

#top-editarea をページタイトルエリアとして利用する cms-style(4)

はてなブログを Wordpress 風に! > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 前回 では カスタマイズ > ヘッダ > タイトル下 に何らかのコードを挿入することで表示される #top-editarea に背景を付け…

背景画像の使い方でブログ臭さが消える cms-style(3)

はてなブログを Wordpress 風に! > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 ウェブサイトのデザインは、グリッドレイアウトと呼ばれるブロック単位でデザインを考える方法を使う場合が多いと思います…

デスクトップはメニューバー、スマホはオフキャンバスメニュー cms-style(2)

はてなブログを Wordpress 風に! > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 まずは全体の構想と「タイトルとメニュー」の解説です。 全体の構想 スマホ用のオフキャンバスメニューを準備する Javascri…

はてなブログをWordpress風に! cms-style(1)

このサイトは「はてなブログ」を使って書いているのですが、テーマを Wordpress や Joomla!など CMS 風にしています。それなりに手のこんだことをしていますので自分のメモも兼ねて解説をしていこうと思います。 Wordpress や Joomla! ぽさって何だろう? は…

はてなブログテーマ/Cherry Blossom

はてなブログテーマストアに投稿した「Cherry Blossom」の解説記事です。 スクリーンショット 概要 テーマカラーの変更 ブログタイトルバックのイメージ変更 タブ表示仕様に必要なこと タイトル下(ヘッダ) フッタ デザインCSS チューニング スクリーンショ…

はてなブログテーマ Hyperspace Javascript 版 公開!

はてなブログ テーマストアに投稿した Hyperspace の Javascript 版(以下、JS 版)の解説記事です。当サイトがそのテーマの導入サイトです。(当サイトはすでに他のテーマに変わっています) なお、以下、テーマストア投稿のテーマは、CSS 版と表記します。…

はてなブログテーマ Hyperspace を公開しました。

はてなブログのテーマストアに投稿した「Hyperspace」の解説記事です。 Hyperspace - テーマ ストア デモサイト 概要 CSSオンリーバージョン 必須事項 推奨事項 カスタマイズ Javascriptバージョン デモサイト hyperspace.hatenablog.jp

はてなブログテーマ hyperspace (完成)

「はてなブログテーマ hyperspace」がやっと完成し、当サイトで運用をはじめました。 このテーマは、「Hyperspace by HTML5 UP」のデザインイメージに触発されて作り始めたのですが、いつのまにやら、すっかり違うものになり、むしろ「Strata by HTML5 UP」…

はてなブログテーマ hyperspace=クロスブラウザチェック

今回、クロスブラウザという点で決定的な問題となるのは、CSS では、 viewport calc flexbox transition transform Javascript では、 LocalStrage, SessionStorage あたりです。 Chrome, Opera, Edge(Windows)は問題なし Firefox では、line-height に ca…

hyperspace じゃなくなってきた=はてなブログテーマ hyperspace (5)

HTML5UP のテンプレート Htperspace のデザインイメージをはてなブログに実現しようとやってきたのですが、随分違ったものになってきました。 hyperspace.hatenablog.jp 変わってきた理由は、このテーマはこのサイトに利用しようと思っているのですが、やは…

ページによる振り分け、動的に DOM要素を作る=はてなブログテーマ hyperspace (3)

「HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?」の3回めです。 下がデモサイトです。時間が取れる時に少しずつやっていますので徐々に変わっていきます。 hyperspace.hatenablog.jp 次は、nav-panel に入れるコンテンツ作…