はてなブログ

はてなブログはHTTPS化するのかしないのか、早くアナウンスして!

Google Search Console から、当サイトも含め、はてなブログで運用しているサイトに Chromeでブラウズする場合「保護されていません」という警告を表示するとのメールが来ています。 すでに今年の1月でしたか、パスワードを入力する場合に HTTPS でなければ…

はてなブログPro に固定ページ機能が追加されました

固定ページを作成できるようにしました(はてなブログPro) - はてなブログ開発ブログ 当サイトがそうですが、はてなブログでトップページを固定しようとしますと、CSS や Javascript の手を借りないと出来なかったことが新機能として追加されました。6/27付…

はてなブログ機能追加/記事下に「関連記事」を表示します

別ブログなんですが、新しく記事を投稿してチェックしていましたら、記事の下に「関連記事」が5記事表示されているではありませんか。 あれ? なんだコレ? と、ちょうど記事投稿の際に設定画面を開いたりしていましたので、自分で何かいじったかな?とあれ…

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

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

はてなブログにお問い合わせフォーム実装

やっと当サイトにお問い合わせフォームを実装できました。 ここに至る前記事2つです。 iPhone で iframe を fixed にする場合の問題 iPhoneでは、フォーム入力のあるiframeをposition:fixedで使ってはいけない モバイル、タブレットの仕様 デスクトップの仕…

iPhoneでは、フォーム入力のあるiframeをposition:fixedで使ってはいけない

iPhone で、iframe を position:fixed にした場合の挙動に苦労しています。 前記事: iPhone で iframe を fixed にする場合の問題 問題整理 iOS アップデートでさらに挙動が変化 position:static で表示し上までスクロールさせる 問題整理 問題を整理します…

iPhone で iframe を fixed にする場合の問題

はてなブログ(当サイト)に Google Forms でお問い合わせフォームを作ろうとしているのですが、iframe をポップアップで表示する際に iPhone で引っかっています。 Googleフォーム自体は、すでに別記事で完成していますのでリンクで済ませればいいんですが…

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

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

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

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

はてなブログにお問い合わせフォーム Google Forms

はてなブログにお問い合わせフォームを作ろうと思いググりましたら、やはり欲しいと思われる方が多いようで結構ヒットします。 「Google フォーム」の記事が多いですね。 やってみました。 Google フォームにアクセスする フォームを作成する メールアドレス…

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

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

はてなブログの記事タイトルの配置を考える cms-style(5)

はてなブログを Wordpress 風に! > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 今回は記事タイトルブロックについてです。ご覧のように、大きく記事タイトル、そしてその下に日付とカテゴリーを配置して…

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

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

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

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

はてなブログに編集履歴保存機能がついた、こりゃ便利!

はてなブログにバージョン管理機能(?)がついたようです。 同時作業でブログを書いたりしていますと、うっかりも発生しやすく、なにげなく消してしまい後悔することがたまにありますが、この機能があればもう安心です。 「記事(下書き)を更新する」ボタ…

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

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

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

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

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

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

サイトデザイン変更/はてなブログを Joomla! (Wordpress) 風にする

久々にサイトデザインを変更してみました。 Joomla! 風といったところですが、CMS のシェアでは Joomla! は Wordpress に圧倒的に水をあけられていますので Wordpress 風と言ったほうが分かりやすかと思います。 CMS のシェア この記事をご覧になっている方…

Chromeでの日本語変換がおかしい件、Chrome Canary では解消

www.imuza.com Chromeでの日本語変換がおかしい件、Chrome Canary では解消されています。 こちらが、Chrome Canary 58.0.3026.0 版のはてなブログ Mardownモードの画像です。分節カーソルがちゃんと移動していますし、入力中の文字じゃないところに分節カー…

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

あまり役に立たないかもしれないものを作ってみました(笑)。 はてなブログのタイトル(#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 で…