CSS
はてなブログテーマ開発（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四方に縮小表示されます。その画像をオリジナルのも…
ページトップへ戻るスムーズスクロール（jQueryなし） HTML Javascript CSS はてなブログ用 お問い合わせ等 当サイトの右下に表示している「 」は、クリックしますとスクロールしてページトップに戻ります。こうした「ページトップに戻る」リンクは最近では…
当サイトの 「 お問い合わせフォーム 」の実装方法です。 次の記事も参考にしてください。 iPhone で iframe を fixed にする場合の問題 iPhoneでは、フォーム入力のあるiframeをposition:fixedで使ってはいけない 仕様は次の記事を参考にしてください。 は…
iPhone で、iframe を position:fixed にした場合の挙動に苦労しています。 前記事： iPhone で iframe を fixed にする場合の問題 問題整理 iOS アップデートでさらに挙動が変化 position:static で表示し上までスクロールさせる 問題整理 問題を整理します…
はてなブログ（当サイト）に Google Forms でお問い合わせフォームを作ろうとしているのですが、iframe をポップアップで表示する際に iPhone で引っかっています。 Googleフォーム自体は、すでに別記事で完成していますのでリンクで済ませればいいんですが…
はてなブログを Wordpress 風に！ > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。cms-style（７）まできましたが、役に立つようなことを書けているかどうか自分ながら微妙ですね（笑）。 で、これまではサイ…
はてなブログを Wordpress 風に！ > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 ブログというのは思いついたら書くというパターンが多いですので、なかなかサイト全体の構造をわかりやすく表示することが…
はてなブログを Wordpress 風に！ > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 今回は記事タイトルブロックについてです。ご覧のように、大きく記事タイトル、そしてその下に日付とカテゴリーを配置して…
はてなブログを Wordpress 風に！ > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 前回 では カスタマイズ > ヘッダ > タイトル下 に何らかのコードを挿入することで表示される #top-editarea に背景を付け…
はてなブログを Wordpress 風に！ > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 ウェブサイトのデザインは、グリッドレイアウトと呼ばれるブロック単位でデザインを考える方法を使う場合が多いと思います…
当サイトは、はてなブログに Wordpress風の自作テーマをあてていますが、トップページをどうしようかと悩んだ末、タグクラウドを表示することにしました。 すでに完成していますのでトップページを見ていただければどういうものかわかると思いますが、Javasc…
はてなブログを Wordpress 風に！ > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 まずは全体の構想と「タイトルとメニュー」の解説です。 全体の構想 スマホ用のオフキャンバスメニューを準備する Javascri…
このサイトは「はてなブログ」を使って書いているのですが、テーマを Wordpress や Joomla!など CMS 風にしています。それなりに手のこんだことをしていますので自分のメモも兼ねて解説をしていこうと思います。 Wordpress や Joomla! ぽさって何だろう？ は…
あまり役に立たないかもしれないものを作ってみました（笑）。 はてなブログのタイトル（#blog-title）にカテゴリー（.hatena-module-category）を移動してメニュー化し、スクロールを進めた場合は通常通りタイトル＆メニューは消えてゆきますが、逆にスクロ…
はてなフォトライフからはてなブログに画像を挿入しますと、クリックでポップアップ表示となります。記事内の画像を小さく表示する場合は便利といえば便利なんですが、クリックしてもほとんど同じ程度では意味がありません。 ポップアップ表示を CSS 一行で…
はてなブログはブログなんですから、トップページは記事を複数個掲載する仕様になっています。ただ、いろいろカスタマイズに手を出しますと、固定ページに出来ないかと思い始めます。その方法です。 予約投稿でトップページをつくる 日付など不要なものを消…
はてなブログ用の軽量・高速自作ソーシャルボタンの LINE付き、各ソーシャルボタン選択可能版です。 概要 ボタンの見た目 スマートフォンの場合 利用方法 事前準備（Facebook、Twitter 使用の場合は必須） カスタマイズ > フッタ への挿入コード カスタマイ…
下記記事にて、はてなブログ用の軽量・高速自作ソーシャルボタンを公開していますが、公式ボタンのように記事の上下に入れられないかとのリクエストをいただきましたので改訂版を公開します。 www.imuza.com 改訂版では、デザイン > カスタマイズ > 記事 > …
はてなブログテーマストアに投稿した「Cherry Blossom」の解説記事です。 スクリーンショット 概要 テーマカラーの変更 ブログタイトルバックのイメージ変更 タブ表示仕様に必要なこと タイトル下（ヘッダ） フッタ デザインCSS チューニング スクリーンショ…
CSS3 の Flex レイアウトをご存じですか？ 当サイトでも、過去記事、 www.imuza.com で紹介しているのですが、Flex レイアウトとは、これまでレイアウトに floatを使っていた場面で使用できるプロパティです。今回、はてなブログのこんなところにも使えると…
はてなブログをスマホで表示した場合のナビゲーションとして、「戻る、進む、ホーム、最新記事、カテゴリー、トップへ移動」をボトムに表示するプラグイン的なものを作りました。かなり汎用的に使えると思います。jQuery を入れる必要はありません。 見た目 …
(2016/10/19)以下に汎用版があります。 www.imuza.com jQuery なしで、はてなブログにボトムナビゲーションを作った前回の記事「はてなブログ＝スマホ用カスタマイズ、最新記事、カテゴリーのナビゲーションをボトムに表示する（jQueryなし） - IMUZA.com」…
