読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

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

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

はてなブログの画像クリックポップアップ表示をCSS一行で解除する方法

はてなフォトライフからはてなブログに画像を挿入しますと、クリックでポップアップ表示となります。記事内の画像を小さく表示する場合は便利といえば便利なんですが、クリックしてもほとんど同じ程度では意味がありません。 ポップアップ表示を CSS 一行で…

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

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

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

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

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

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

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

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

はてなブログ/トップページの記事をタブ式表示にしてみた

はてなブログのトップページの記事をタブで切り替えられるようにしてみました。 スマホの場合は、こんな感じになります。 運用サイトはこちらです。 ausnichts.hatenablog.com アドセンスやソーシャル・ボタンにも Javascript を使っているせいか、タブの表…

CSS3 の display: flex がスゴイ! はてなブログのカスタマイズに活用!

CSS3 の Flex レイアウトをご存じですか? 当サイトでも、過去記事、 www.imuza.com で紹介しているのですが、Flex レイアウトとは、これまでレイアウトに floatを使っていた場面で使用できるプロパティです。今回、はてなブログのこんなところにも使えると…

Sass/css ファイル作成自動化とクリック一発でコンパイル自動監視

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

Sassインストール/gemアップデートでエラー、AddTrustExternalCARoot-2048.pem.がNot Found(解決)

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

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

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

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

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

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

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

はてなブログ=レスポンシブデザインの場合のスマホ UI を考えてみる

レスポンシブデザインでサイトを作る場合、一番やっかいなのは、スマホやタブ(パッド)のメニューやページ移動など UI をどうするかです。そういうこともあって、はてなブログでは、レスポンシブにしない場合のトップページは、最新記事7件を表示するデザ…

【はてなブログ】ヘッダの背景画像の位置調整(レスポンシブデザインの場合)

はてなブログで、レスポンシブデザインのテーマを使い、ヘッダに画像を当てるとその配置に結構苦労します。特に背景イメージではなくタイトルですと、スマホでタイトルがはみ出したりします。 私自身もうまくいかないなあと思いつつ背景イメージでしたので適…

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

(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 版と表記します。 CSS 版 との違い 導入方法 Javascript CSS ダウン…

はてなブログのグローバルヘッダー=PC のヘッダーをモバイル用に変更する

はてなブログでは、グローバルヘッダーという、はてなブログロゴやユーザー向けのナビゲーションメニューが、標準ですと黒いバーで一番上に表示されます。これですね。 このヘッダーは、はてなブログPro ですと非表示にもできるのですが、全くなくしてしまう…

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

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

スクリプトなし :target でアニメーションをスタートさせる

スクリプトなしでアニメーションをスタートさせるトリガーに、:hover や :checked はよく使っています。 たとえば、公開中のはてなブログのテーマでは、:checked を使ってモバイルのハンバーガーメニューのトリガーにしています。 とことこ with Menubar - …

ホバーエフェクト :hover をスマホでどう実現するか?

ホバーエフェクトでググれば、かっこいいアニメーションのものがたくさんヒットします。 ただ、スマホなどタッチデバイスの場合、a 要素にエフェクトをつけても、エフェクトが始まる前にリンク先に飛んでしまいます。他の要素にエフェクトを付けて、そのエフ…

はてなブログテーマ 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…

はてなブログテーマ=対応ブラウザはどこまでにすべきか?

どこまで旧式ブラウザに対応するか、主に IE, iOS-Safari, Android の話になるのかと思いますが、結構悩ましい問題です。 などと、はてなブログテーマ hyperspace を作るうえで迷っていたのですが、あらためて「はてなブログテーマ制作の手引き」を見てみま…

はてなブログテーマ hyperspace がなかなか完成しない=のは、flexbox, viewport, calc などの対応状況のせい

はてなブログテーマ hyperspace 、ほぼ完成しているのですが、古い android や iOS Safari へ対応が出来ていませんので、運用に二の足を踏んでいます。 現在、それらのブラウザになんとか対応させようと鋭意努力中で表示が乱れていますが、デモサイトはこち…

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

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

CSSでホバー(マウスオーバー)エフェクト=スライドして詳細表示、クリックでリンク先へ移動

はてなブログのトップページは、記事をいくつか表示して、タイトルをクリックすると各ベージへ飛ぶという、いわゆる標準的なブログ仕様になっています。 当たり前なんですが、ちょっと寂しいと思うこともあり、トップページだけはもう少し変化をつけたいとか…

はてなブログに 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」をそのまま使って作っていきます。 左サイトバー はてなブログでは、…

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

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

Yahoo! API ルビ振りの精度 と はてなブログ五十音順インデックスその後

Yahoo! API を使って「漢字仮名交じり文」を「ひらがな」に変換する はてなブログのタイトルにふりがなを振り、php 配列に格納する はてなブログの記事の五十音順タイトル一覧を作る の三記事で、はてなブログの五十音順タイトル一覧を作ってきたのですが、Y…

はてなブログの記事の五十音順タイトル一覧を作る

はてなブログのタイトルにふりがなを振り、php 配列に格納するの続きです。 タイトルにふりがなが付きましたので、ふりがなでソートして書き出せばいいのですが、インデックスをどうするかです。450記事もありますと「あ行」「か行」では1ブロックが多くな…

はてなブログのタイトルにふりがなを振り、php 配列に格納する

Yahoo! API を使って「漢字仮名交じり文」を「ひらがな」に変換するの続きです。 はてなブログの記事は、ダッシュボード > 設定 > 詳細設定 > エクスポート で MT形式のテキストファイルに書き出せます。これは一度エクスポートするとそのデータが保存されて…

Yahoo! API を使って「漢字仮名交じり文」を「ひらがな」に変換する

別ブログ「そんなには褒めないよ。映画評」でミニシアター系の映画レビューを書いているのですが、続けているうちに500本くらいになっていますので、タイトルの五十音順で検索したり、一覧で見ることは出来ないかと考えてみました。 まず、今後のことを考え…

はてなブログテーマ=とことこ with Menubar

はてなブログ テーマストアに投稿した「とことこ with Menubar」の解説記事です。 テーマの特徴 運用(デモ)サイト モバイルでのテーマ使用 タイトル画像について 画像を使用しない場合 別の画像を使用する場合(2/9一部変更) タイトル下のメニューバー サ…

CSS ホバーエフェクト(:hover)で画像の上に文字を出す

下記リンクの別ブログで映画のレビューを書いているのですが、そのトップ画面についてご質問をいただきましたので方法をまとめました。 そんなには褒めないよ。映画評 このサイトは、はてなテーマストアで公開している「Simple Responsive with Menubar」を…

「続きを読む readmore,seemore」をちょっぴりオシャレに=はてなブログ

トップページ( page-index )に複数の記事を表示する場合、「続きを読む( Readmore )」を入れたりしますが、はてなブログの場合、デフォルトですと通常リンクのままですのであまり目立ちません。これですね。 で、以前どこかで文字が徐々に消えていく Rea…

はてなブログテーマ=Simple Responsive with Menubar

はてなブログ テーマストアに投稿した「Simple Responsive with Menubar」の解説記事です。 テーマ作成の考え方 運用(デモ)サイト 使用上の必須事項 カスタマイズ メニューバーにメニューを配置する カテゴリーをメニューバーにする(手動) カテゴリーを…

はてなブログの月間アーカイブをメニューバーにする

別ブログ「そんなには褒めないよ。映画評」で映画の感想を書いているのですが、まもなく10年ほどになりますので過去記事を見てもらううまい方法はないものかと考え、「月間アーカイブ」をメニューバーにする方法を思い立ちました。 ausnichts.hatenablog.jp …

Adsense を Javascript で動的に作成し、ブログの好きな場所に挿入する

(2016/4/13一部文章を削除してしまったのか、中途半端に始まっているようです) その他 index ページの記事中に入れられないとか、本文中に入れようとすると毎回コードをコピペしなくてはいけないとか結構面倒なものです。 で、全て Javascript でできない…

はてなブログの本文下にダブルレクタングルでアドセンスを貼る

1ページ3つまでのアドセンスをどうすると効果的に貼れるか、まあやってみるしかないということで、別ブログではヘッダ下に入れたりしているのですが、このブログでは、 右サイドの一番上に 300×250 レクタングル1つ トップページと各記事ページでは、本文…