Also read(あわせて読みたい)の表示が一部変更されました - すなばいじり画面サイズによって、ボタンのレイアウトやサイズが変更されるようになりました。 HTMLの構文を見直し、構造データとしての関連項目という意味を持たせるようになりました。(asideタグを利用していますが、状況によってdivタグに修正される場合があります。) 動作確認用の表示が追加されました。 どうぞご利用ください。 これらの変更により出力されるHTMLが変更されたため、カスタムCSSを適用しているブログでは、文字が1段階大きく表示される場合があります。 psn.hatenablog.jp
はてなブログ向けのよく使うライブラリを作った - すなばいじり
主に自分がよく使う(可能性がある)ものを切り出して「あの仕組みはどのプラグインに使っていたかな？」という解決法として利用するためのものです。 去年も似たような記事を書いたやつ。 Htnpsne.API.ts for HatenaBlog CommonAPI 使い方 このエントリー時点では、以下の機能を提供します。 Htnpsne.API.htmlTagData 現在閲覧中ページの属性 ブログの名前 ブログのベースURL 表示されているデバイスモード(PC表示/スマートフォン表示) 投稿者 などが取得できます。 ソースを確認すると分かりますが、 document.getElementsByTagName("html")[0].dataset を返しているだけなので、サッと使って終わる場合は上の1行を利用すると良いでしょう。 Htnpsne.API.setupCSS(url) スタイルシートの
はてなブログでパンくずリストを利用する - すなばいじり
検索結果にカテゴリーを表示して、訪問者に便利な案内を提供しましょう。(SEO対策) はてなブログ(無料版)、はてなブログProのどちらでもご利用いただけます。どうぞご利用ください。 パンくずリストは最新の仕様*1に合わせてあります。 はてなブログの「カテゴリーごとのページ」に欠落しているパンくずリストを修正します。 説明をスキップして貼り付けコードを作成する サマリー パンくずリストとは？ パンくずリストを設置する準備 準備と考え方 カテゴリーが1つ(親)ではダメですか？ 孫カテゴリーを作りたいのですが コードを貼り付ける きちんと動作しているか確認したい エントリーを書くときのコツ 旧バージョンからのバージョンアップについて 古い設定を貼り付けた場所を忘れてしまいました よくある質問 リストの表示は無くても良いのですか？ はてなブログ(無料版)でパンくずリストは利用できますか？ Goog
はてなブログにGoogleの「AMP」が対応できた - すなばいじり
数日前のエントリーの続きです。 ドキュメントには同一ドメインやサブドメインの指定のみ記述されていましたが、別ドメインでもAMP*1対応できたようです。良かったですね。 数日前のエントリー。 psn.hatenablog.jp 意外とシビアなタイミングのようですが、検索結果から見つけることができたので、これにて「別ドメインからでも対応可能」という事になります。 AMPロゴと対応の文字が表示されます。 別ドメインからAMP HTMLを配信していますが、検索結果に表示されるドメインはAMP HTMLから指定するcanonicalにあるドメインになります。 後ほど残りの検証が必要な部分の確認をしようと考えていたのですが、検索結果表示の変更タイミングと重なってしまったため、もうしばらく様子を見る必要がありそうです。 スライドできるリンクページが追加されています。 エントリー時点での「はてなブログ」と
Googleの「AMP」非対応のはてなブログをハックして対応するやつを作ったので知見を共有する - すなばいじり
TL;DR ※too long; didn’t read. ＝長すぎて読まない人向け 3行でおｋ 御託をこねるよりコードを書けという有名な言葉があるので作った。 AMP(Accelerated Mobile Pages Project)という儚い夢から醒めさせる為に実証コードを書いた。手斧もいいけど技術で殴るよ！ 次回予告はウェブページの読み込み時間を計測する PageSpeed Insights でスコア60程の(修正しようねと言われる)はてなブログを85以上の結果を叩き出す為に、ハックするお話。 読者になって見逃さないようにする サマリー TL;DR このエントリー時点での知見 所見 はてなブログ上での実装について Search Consoleの結果表示について サポートされている構造化データ要素がありません 属性が足りないなど AMP HTMLをリッチに表示させる リスト表示 広告表
(例えば、)はてなブログで特定の要素を抽出したい - すなばいじり
色々試行錯誤をされて解説していただいたエントリー。 記事中でも「3つ目のh3の前」などと指定ができるので、これを記事一覧でもできないか考えて改善していきたい。最終的には他人のgithubコードを利用せずに、DOMオブジェクト生成して、自分で場所を決めて出力したいな。 はてなブログのトップページ記事一覧にアドセンスを挿入する方法 - ゼロツク そもそもドキュメントが足りていなかったという部分と、技術的に可能であるという実証で止まっているコードであった為に、試行錯誤する事になってしまったので、もう少し何とかしたいと考えています。 ※「何か」は独立したコードになります。 さて、引用している部分の解説を一つ。 querySelectorAllを使う jQueryにも似たようなものがありますが、最近のブラウザで一般的に利用できるquerySelectorAllを使います。 document.quer
Firefox版はてなブログの画像タイトルを変えるやつ - すなばいじり
大分疲れた感がありますが、進捗です。 このエントリー時点の話になりますが、FirefoxのWebExtensionsの互換性が色々と揃っていないので、素直に動いてくれません。 時期尚早という言葉がぴったりな状況なのですが、最低限の機能を実装させて動かしてみた というバージョンになります。 psn.hatenablog.jp Chrome版はこちらから 進捗 動きました。良かったですね。 燃え尽きる前にに登録します。 Warnが1つ出ているのは、例の実験中ボタン(見出し記法を出すやつ)の影響です。 残り0文字まで書ききれたので満足です。偶然なのですが、上手く書ききれたやつです。 レビューのキュー待ちに追加されました。待ちはこの時点で240程度あるそうです。 それまでの間、あなたやアドオンの URL を知っている人は詳細ページから直接インストールできます えっ？ addons.mozilla.
はてブロimageTitleにてプレビューウィンドウが利用できるようになりました - すなばいじり
前回のアップデートにて拡大表示ができるようになりましたが、更に拡大して画像を確認したい(アップロードされている画像を等倍で確認したい)という方の為に、プレビューウィンドウを使って表示できるようになりました。 既に導入済みの場合は、自動更新を待つか拡張機能一覧(chrome://extensions/)にある更新ボタンを利用してアップデートすることができます。 利用してみたい！という方は、以下のリンクからインストールが可能です。 どうぞご利用ください。 はてなブログの画像タイトルとaltを編集できる「はてブロimageTitle」というChrome拡張を作った - すなばいじり psn.hatenablog.jp どうぞご利用ください。 実験中の機能(余談) 前エントリーの[:contents]のボタンが利用できます。 実験中の機能の為、予告なく変更や利用不可になる場合があります。 進撃の熊
Google検索のモバイル版で高速に表示するAMPを分解しながら確認するやつ - すなばいじり
メモです。ここには有益な情報はありませんのでご理解ください。 実際に動いているものから見たAMP 見かけ上は画面が変わっていますが、ページが移動していないと考えると「早さの理由」が解るかと思います。 検索結果の表示 Googleの検索結果 Top Stories コンテンツ1コンテンツ2… 画像1 画像2 … サマリー1 サマリー2 … 検索結果 … Top Storiesのサマリー表示は、最初にロードされる。 コンテンツ(本文)はiframeに入っていて、出番が来るまでは非表示になっている。半分程度は読み込みを待機している。 ユーザーが操作をして画像やコンテンツが表示されるべき領域に近づくと追加で読み込まれる。 この辺りの挙動は、デベロッパツールで検索結果を表示させた後に帯域を絞ってやると分かりやすい。 Twitter等の専用ライブラリがある。 <script custom-elemen
Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ
JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get
【プログラミング】Brainf*ckを作ってみた【実況解説・番外編】
■今回は、番外編です。Twitterでリクエストがあったのを見て、即席で作りました。■一発撮りです。バグやミスを頻発させております。その上に今回は本当にグダグダです。申し訳ありません。■IE6とメモ帳での制作です。■Brainf*ckの実行環境を作り、そのうえでBrainf*ck Programmingをしています。Brainfuckのプログラミングがどんなものか、この動画を見て伝われば……伝わる気がしないな。■次回作の要望などは、Twitterの「tkihira」宛にメッセージをください。■ソースや過去作品→http://void-main.org/niconicoprogram/■マイリスト→mylist/16170739
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログの合わせて読みたいのやつをどうにかする。 - すなばいじり
Twitterのふぁぼマークがハートに変わったので がんばれ❤️がんばれ❤️ にするChrome拡張機能作った - すなばいじり
はてなブログの画像貼り付けを大きな画像で確認したい - すなばいじり
JavaScriptによる図形の描画