はてなブックマーク

テーマをゼロから作ってみる（14）です。「SEO 対策に必要なこと」の「7-3 SNS連携機能」です。いわゆる SNS のシェアボタンを設置します。 タイトルにもしていますが、これまではツイッターのシェアボタンのリンク先に share を使っていたのですが、intent/tweet にしたほうがいいです。いや、しないといけません。 Twitter ツイッターFacebook フェイスブックはてなブックマークボタンLINE で送るsocials.php 01Twitter ツイッター Twitter, Facebook, はてなブックマーク, LINE の4つのシェアリンクをつくります。WordPresss 用の PHP コードではありますが、そのページの URL と タイトルが取得できれば何にでも使えます。 まずはツイッター、公式のドキュメントは次のリンク先です。 Tweet button

このサイトでは記事のタイトルなどに Noto Serif のボールドを使っていますのでサブセット版を作ろうと思い、久しぶりに Google Fonts へ行きましたら、日本語フォントも随分増えています。 Google Fonts の日本語フォントGoogle Fonts の使い方サブセット版を作るNoto Serif 700 をサブセット化 01Google Fonts の日本語フォント Google Fonts に行き、Language に Japanese を選択すれば日本語フォントの一覧が表示されます。 Google Fonts 2021/3/1現在登録されている日本語フォントは以下の通りです。画像です。 タイトルなどに使えそうなデザインフォントがチラホラと出始めています。 フォントダス | 無料で商用可能なフリーフォントが探せる Fontworks｜フォントワークス Nonty.n

01表示幅によってフォントサイズを可変にする 例として下の画像のタイトルを表示幅に応じて拡大させます。 Chrome のデベロッパーツールを使っています。 表示幅 320px の場合のフォントサイズを 30px としてスタートし、最大フォントサイズを 50px にまで拡大します。CSS の単位 vw を使いますのでフォントを最大にする表示幅を決める必要があります。1920px としてみます。 #title{ font-size: calc(30px + ((1vw - 3.2px) * 1.25)); } 確かに表示幅を 1920px にしてみますとフォントサイズは 50px になっています。 計算式の書式は、 font-size: calc ( 最小フォントサイズ + ( ( 1vw – 最小表示幅 / 100 ) * ( 最大フォントサイズ – 最小フォントサイズ ) / ( 最大表示

name 属性 ソース内を data-params で検索しますと次のような箇所が作成した要素分見つかります。 <div jsmodel="CP1oW" data-params="%.@.[485493716,&quot;メールアドレス&quot;,null,0,[[1736330280,[],true,[],[[2,102,[]]]]],null,null,null,[]],&quot;i1&quot;,&quot;i2&quot;,&quot;i3&quot;,false]" 上の例で言えば 1736330280 に entry が付加され entry.1736330280 が name属性になります。 以前はこの name属性も各要素のタグの中に入力されていたのですが、いつからかその他の指定とともに配列として上位のタグの中で指定されるようになっています。また、この値は javascr

01CSS メディア特性 orientation メディアクエリのメディア特性に orientation というものがあることを知りませんでした（涙）。 これまでは javascript で if (window.innerHeight > window.innerWidth) { document.body.classList.remove('landscape'); document.body.classList.add('portrait'); } else { document.body.classList.remove('portrait'); document.body.classList.add('landscape'); } などと、body タグにクラスを付加して切り分けていましたが、この orientation を使えばメディアクエリで振り分けられます。 orienta

aタグやクリックイベントを持った要素の領域を保持したまま、css だけでフェードインしたりフェードアウトしたりする方法です。 必要なときはさほど多くないと思いますが、これが一番簡単かなという方法を思いつきましたのでメモ程度です。 要素を非表示にするプロパティopacity: 0; pointer-events: none; 01要素を非表示にするプロパティ display: none; visibility: hidden; opacity: 0; 要素を非表示する場合に使うプロパティはこの３つかと思います。 display …… 領域非保持、クリック不可、アニメーション不可 visivility …… 領域保持、クリック不可、アニメーションは animationプロパティで可 opacity …… 領域保持、クリック可、アニメーションは transitionプロパティで可 02opaci

実はもうすでにこのブログやテーマストアで公開しているテーマでも基本レイアウトには Grid Layout を使っているのですが、もっと活用できないかといろいろやってみましたら、はてなブログのコンテンツ内でもかなり便利に使えることに気づきました。 エントリーヘッダーの配置CSS グリッドレイアウトとは？ 01エントリーヘッダーの配置 通常、各記事のエントリーヘッダーは下の画像のように 日付、記事タイトル、カテゴリーと並びます。 たとえばこれを下の画像のように日付とカテゴリーを横に並べる場合、これまでは display: flex を使っていたのですが、これも display: grid を使ったほうが簡単にできます。 この CSS で上の画像のようになります。 .entry-header { display: grid; grid-template-columns: auto 1fr; gr

01概要 いつ頃からかは忘れましたが、Google Adsense にいきますと、 要注意 – 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。 と警告が出るようになっていました。これです。 要注意 – 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。 私の場合、独自ドメインで３つのサイトを運営していますので３つのサイトが表示されています。 この ads.txt が何かについて説明できるほど調べていませんのでいろいろググっていただくとして、ふと、そういえば最近 Adsense の収益が落ちているなあと感じたことを思い出し、さほど広告収入にこだわっていないとはいえ、もしやこれが原因？と不安になってきました。 02はてなブログでは設置機能は提供していない はてなブログでは ads.txt の設置機能は提供していないそうです。そりゃ

はてなブログ多機能テーマ imz-basic を公開します はてなブログ用の多機能なテーマ「imz-basic」を公開します。このテーマは、Javascript で機能を追加することが主であり、記事内のスタイルはほぼ サンプルテーマ「Boilerplate」 のままです。これをもとにいろいろ作ってみようかと思っています。また、テーマストアにも公開予定です。 デモサイト＆キャプチャ導入方法Javascript により追加されている機能サイドバーのモジュールをメニュー化カテゴリーを階層化するトップ、ボトムへスムーズスクロールトップページやアーカイブページのサムネールをオリジナル画像に変更ヘッダのタイトル画像を横幅全面に変更外部リンクを別タブでひらくトップページのページャーに「前のページ」を追加自サイトのブログカードのリンクを変更ライセンス等 02導入方法 設定 > 詳細 > headに要素を追

はてなブログ間の記事移動はJavascriptとcanonicalでリダイレクト 現在、はてなブログで４つのブログを運用しているのですが、そのうちのひとつを別のブログに統合しようと思います。 で、どうやってリダイレクトするかですが、もちろん .htaccess は使えませんので Javascript を使うしかありません。 01今回の条件 はてなブログ間で記事を移動する場合、カテゴリーもそのまま移動するのであれば、移動するブログの 詳細設定 -> headに要素を追加 に <script> location.href = http(s)://移動先ブログのドメイン + location.pathname; </script> と入れておけばリダイレクトされます。 ただ、今回の場合、 移動するブログには複数のカテゴリーがあるが、移動先ではひとつのカテゴリーにまとめる トップページ、カテゴリー

はてなブログ用 Javascriptモジュール imzModules ver.2.0 01imzModules とは？ はてなブログをカスタマイズする場合、css だけでは思うようにならないことがあります。その場合は Javascript を使い、DOM 操作をおこなって要素を追加したり、移動したりするしかありません。 その DOM 操作をモジュール化して ON/OFF 指定だけで行うことができるようにしようというのが imzModules です。 この記事だけでも完結していますが、次の記事も参照してください。 はてなブログ簡単カスタマイズ imzModules バージョンアップ はてなブログでページ読み込み時のDOM操作をモジュール化する はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ オフキャンバスメニュー付 はてなブログテーマ（開発環境） 02使用方法 下記 G

はてなブログに CSS グリッドレイアウトを導入してみる はてなブログに CSS グリッドレイアウトを導入してみる はてなブログのテーマを display: grid を使って作ってみようと思います。ブラウザの対応状況は Can I use… Support tables for HTML5, CSS3, etc です。IE にベンダープレフィックスを付けても機能しないプロパティが一部にあるようですが、いずれこれが主流になっていくでしょうから、勉強のためにもいろいろ試してみようと思います。 SASS 開発環境 v0.0.9 の公開デモ画像トップページ記事ページちょっと解説必須事項３つ解説正式版への予定 はてなブログで display: grid を使う場面があるとすれば次のケースでしょうか。 トップページを一覧表示にした場合のアーカイブエントリーの配置 ２カラムにした場合のコンテンツとサイ

03node.js のバージョンアップ >nodist -v 0.8.8 >nodist (x64) > 7.2.1 (global: 7.2.1) node は v7.2.1 が入っています。 >nodist dist （略） 10.10.0 10.11.0 >nodist 10.11.0 10.11.0 Installing 10.11.0 10.11.0 [===============] 24174/24174 KiB 100% 0.0s Installation successful. >nodist (x64) 7.2.1 > 10.11.0 (global: 10.11.0) 最新版の v10.11.0 を入れてみました。 04npm のバージョンアップ >npm -v 4.0.5 >npm install -g npm C:\Program Files (x86)\Nodi

02テーマのポイント ブログはやっぱり記事ですから、記事ページからです。 このテーマのポイントは 記事タイトルを #top-editarea に移動してページを開いた時にまず目がいくようにする 背景画像を横幅全幅かつ記事の背景に広がるように張り、印象強くする サイドバーに作成したオリジナルメニューを #blog-title に移動する スマートフォンではメニューをアイコンタッチのスライドメニューとする 投稿日時とカテゴリーの装飾にちょっとカッコつけてみる（笑） 03背景画像 前回の「はてなブログテーマ開発（5）ブログタイトル、記事タイトルの装飾」では背景画像を #blog-title に張りましたが、それですと当然そのブロック内だけになります。 上のデモ画像では、画像を #container に張って記事全体の背景に配置しています。ただ、レスポンシブでテーマを作る場合、１枚の画像で画像のサ

タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある 別ブログ「そんなには褒めないよ。映画評」のトップページのデザインで、マウスオーバーのイベントをタッチデバイスの場合にどうするかを下記のページで記事にしましたが、"ontouchstart" in window をみるだけでは判定できないデバイスがあることがわかりました。 はてなブログ／touch, mouse を振り分け、hover イベントを統一する ontouchstart ではタッチデバイスを判定できないデバイスがあるorientation での判定を追加してみる 01ontouchstart ではタッチデバイスを判定できないデバイスがある ２、３日前に、映画評を書いている別ブログのテーマを変更しました。 www.movieimpressions.com トップページを「一覧表示」にし、各

iPhoneでモーダルの背景のスクロールを止める 以前の記事「モーダルの背景のスクロールを止める」 上の記事で、メニューなどをモーダルで出す場合に背景のスクロールを止める方法を書いたのですが、やはり、iPhone 実機ではうまくいきません。再度挑戦です。 iPhone（iOS？）以外の場合 iPhone の場合 iPhone（iOS？）以外の場合 iPhone 以外は上の記事で問題ないと思います。モーダルを開いた時に body に open などのクラスを追加します。たとえば、 document.getElementById('トリガー要素のid').addEventListener('click', function(){ document.body.classList.toggle('open') }); として、CSS で body.open { overflow: hidden;

Google Form を自前のフォームで実装（はてなブログで完全カスタマイズ可） 以前、というよりも、このサイトがそうなんですが（変更済になっているかも知れません）、はてなブログにお問い合わせフォームを実装しようとして Google Form を完全カスタマイズする方法はないかと試行錯誤した際、フォームのパーツだけ取り出して submit すればいいところまではできたのですが、送信後に Google Form に遷移してしまうことをどうすることもできなくあきらめた経緯があります。 お問い合わせフォームを実装する 今回、送信後のページ遷移を自サイト、つまりはてなブログのページにすることができたという話。 改訂版があります。 Google Form を作成する自前のフォームを作成するGoggle Form の action, name 属性を自前フォームにコピーするテスト送信してみる送信完了