javascript

はてなブログに Google Form を iframe で埋め込む

当サイトの 「 お問い合わせフォーム 」の実装方法です。 次の記事も参考にしてください。 iPhone で iframe を fixed にする場合の問題 iPhoneでは、フォーム入力のあるiframeをposition:fixedで使ってはいけない 仕様は次の記事を参考にしてください。 は…

はてなブログ/検索モジュールをどこに配置しよう? cms-style(6)

はてなブログを Wordpress 風に! > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 ブログというのは思いついたら書くというパターンが多いですので、なかなかサイト全体の構造をわかりやすく表示することが…

はてなブログのカテゴリーをタグクラウドにしてトップページに表示する cms-style(番外)

当サイトは、はてなブログに Wordpress風の自作テーマをあてていますが、トップページをどうしようかと悩んだ末、タグクラウドを表示することにしました。 すでに完成していますのでトップページを見ていただければどういうものかわかると思いますが、Javasc…

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

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

はてなブログのスクロールを戻すとすぐに表示されるタイトル&メニュー

あまり役に立たないかもしれないものを作ってみました(笑)。 はてなブログのタイトル(#blog-title)にカテゴリー(.hatena-module-category)を移動してメニュー化し、スクロールを進めた場合は通常通りタイトル&メニューは消えてゆきますが、逆にスクロ…

はてなブログのトップページを固定して企業サイト風にする方法

はてなブログはブログなんですから、トップページは記事を複数個掲載する仕様になっています。ただ、いろいろカスタマイズに手を出しますと、固定ページに出来ないかと思い始めます。その方法です。 予約投稿でトップページをつくる 日付など不要なものを消…

はてなブログ/軽量・高速ソーシャルボタン・シェアボタン(LINE付き、選択可能版)

はてなブログ用の軽量・高速自作ソーシャルボタンの LINE付き、各ソーシャルボタン選択可能版です。 概要 ボタンの見た目 スマートフォンの場合 利用方法 事前準備(Facebook、Twitter 使用の場合は必須) カスタマイズ > フッタ への挿入コード カスタマイ…

はてなブログ/軽量・高速ソーシャルボタン・シェアボタン改訂版(各記事に複数表示が可能)

下記記事にて、はてなブログ用の軽量・高速自作ソーシャルボタンを公開していますが、公式ボタンのように記事の上下に入れられないかとのリクエストをいただきましたので改訂版を公開します。 www.imuza.com 改訂版では、デザイン > カスタマイズ > 記事 > …

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

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

はてなブログ/jQuery なしで動く【ボトムナビゲーション】(かなり)汎用版

はてなブログをスマホで表示した場合のナビゲーションとして、「戻る、進む、ホーム、最新記事、カテゴリー、トップへ移動」をボトムに表示するプラグイン的なものを作りました。かなり汎用的に使えると思います。jQuery を入れる必要はありません。 見た目 …

はてなブログ/ボトムナビゲーション改訂版

(2016/10/19)以下に汎用版があります。 www.imuza.com jQuery なしで、はてなブログにボトムナビゲーションを作った前回の記事「はてなブログ=スマホ用カスタマイズ、最新記事、カテゴリーのナビゲーションをボトムに表示する(jQueryなし) - IMUZA.com」…

はてなブログ=スマホ用カスタマイズ、最新記事、カテゴリーのナビゲーションをボトムに表示する(jQueryなし)

(2016/10/14)改訂版があります。 はてなブログ/ボトムナビゲーション改訂版 - IMUZA.com 「はてなブログ=レスポンシブデザインの場合のスマホ UI を考えてみる - IMUZA.com」で記事にしたスマホ用ボトムナビゲーションは、オール Javascript で作り込ん…

【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成)

(2016/9/6)プロフィールページ(/about)のエラー修正(可読版参照) (2016/12/4)記事の上下に表示可能な改訂版があります はてなブログの読み込みが重い理由のひとつは、ソーシャルボタンがiframeで読み込まれているからです。以下5回の記事で、hatena…

【はてなブログ高速化5】 Google+のシェアボタンをカウント付きで自作する

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 はてなブログのソーシャルボタン軽量化、最後の Google+ です。 これも他のボタンと同じように、Java…

【はてなブログ高速化4】ツイート数付きツイートボタンをオリジナルでつくる(素の javascript 付き)

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript - IMU…

【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 「【はてなブログ高速化2】Facebookシェアボタン/シェアカウントを素の Javascript で取得する」の…

【はてなブログ高速化2】Facebookシェアボタン/シェアカウントを素の Javascript で取得する

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 前記事の「【はてなブログ高速化】シェアボタン(ソーシャルボタン)を改良して読み込みを速くする」…

【はてなブログ高速化】シェアボタン(ソーシャルボタン)を改良して読み込みを速くする

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 はてなブログの読み込みが重い(遅い)のは、ソーシャルボタン群やブログカードに iframe を使ってい…

はてなブログ爆速計画=ソーシャルボタンをスクロールタイミングで遅延ロードする

はてなブログのソーシャルボタンが重いということで、5秒後に読み込む方法を下記記事にしたのですが、もうひとつでしたので、今度は記事ブロックがウィンドウの上に到達した時に読み込む方法を考えてみました。 www.imuza.com 考え方は、social-buttons を…

はてなブログのソーシャルボタンを5秒後に遅延ロードする

はてなブログのソーシャルボタンはとても重いです。 記事ページはまあなんとか許容範囲かと思いますが、トップページに5記事を表示したりしますと、ボタンの表示だけに3,4秒かかっています。 で、何とかならないかといろいろ考えてみました。 「続きを読…

はてなブログのリンクを素の Javascript で別ウィンドウに開く(jQuery なし)

はてなブログのリンクは、標準ですと、外部リンクでも同じウィンドウで開きます。設定で変更することもできませんので、ググりますと、別ウィンドウで開くスクリプトがたくさんヒットします。 数ページ見ただけですが、素の Javascript で書かれたものがあり…

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

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

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

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

はてなブログに SessionStorage で「前のページ」を実装する=はてなブログテーマ hyperspace (4)

「HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?」の4回めです。 HTML5 UP で公開されているテンプレートのデザインイメージをはてなブログに移植(?)しています。 デモサイト ソース ほぼ構想通りにできてきました。あと…

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

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

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

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