はてなテーマ

はてなブログ/カテゴリー別記事一覧の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 に入れるコンテンツ作…

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

「HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?」の2回めです。 まず、テーマ名を決めないと記事が分かりにくいですね。元デザインの名前「hyperspace」をそのまま使って作っていきます。 左サイトバー はてなブログでは、…

はてなブログテーマ=HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?(1)

HTML5 UP で公開されているテンプレートのデザインイメージをはてなブログに移植(?)してみようと思います。正確には移植ではなく、デザインを拝借(パクリ?)する行為かと思います。 ライセンスは、クリエイティブ・コモンズとなっていますので、制作者…