商品紹介Webパーツのデザインをかえるやつ - すなばいじり
進捗：人力検索での回答をしたやつ。 一部のはてなブログ使いの方に需要があるやつなのですが、CSS書いてみました。 どうぞご利用ください。 q.hatena.ne.jp スマートフォン版 PC版 あまり使う気が無いWebパーツなのですが、需要があるのなら良いかな。と思ったやつです。 もう少し腰を据えて書けばスマートになりそうですが、「何をやっているか」が見える・分りやすさを加味すると、これくらいでも良いかな。と思うやつです。 日報みたいなエントリー。 NEW リズムでともだち こぐまのトンピー ぬいぐるみ 出版社/メーカー: イワヤ メディア: おもちゃ＆ホビー この商品を含むブログ (1件) を見る
はてなブログ向けのよく使うライブラリを作った - すなばいじり
主に自分がよく使う(可能性がある)ものを切り出して「あの仕組みはどのプラグインに使っていたかな？」という解決法として利用するためのものです。 去年も似たような記事を書いたやつ。 Htnpsne.API.ts for HatenaBlog CommonAPI 使い方 このエントリー時点では、以下の機能を提供します。 Htnpsne.API.htmlTagData 現在閲覧中ページの属性 ブログの名前 ブログのベースURL 表示されているデバイスモード(PC表示/スマートフォン表示) 投稿者 などが取得できます。 ソースを確認すると分かりますが、 document.getElementsByTagName("html")[0].dataset を返しているだけなので、サッと使って終わる場合は上の1行を利用すると良いでしょう。 Htnpsne.API.setupCSS(url) スタイルシートの
はてなブログの貼り付けにVineが対応していた - すなばいじり
Vineて何？という方は、とりあえずアクセスしてみると良いと思います。 一言でいうと、外国の方が数秒の時間のノリノリな何かを投稿している。そんなサイトです。 さて、早速貼り付けてみましょう。編集画面でURLをペタリとするだけです。 https://vine.co/v/eYTxxmxDT9l vine.co ﾋﾟｯｶﾌﾞｰ (いない いない ばあ) oEmbedは正義だと思うやつです。 oEmbedって何？ 埋め込み情報をWebサービス間でやり取りするための規格と考えてもらえるとしっくり来ると思います。 xmlまたはJSON形式で配信されます。 先ほどのVineコンテンツは、 <link rel="alternate" type="application/json+oembed" href="https://vine.co/oembed/eYTxxmxDT9l.json" title="La
【追記あり】ページ速度についてのメモ - すなばいじり
メモ。 最近またページスピードに関する話題(エントリー)が増えた 「とにかく画像圧縮」ネタが流行っているように見える 「Web2.0」前後のテクニックのような画像を連結したり1byteでも削る努力ネタが帰ってきた雰囲気 ブログ等であれば、カメラから「撮って出し」でアップロードするよりは、適当な設定を行った画質調整・リサイズを行った方が良いのは、正しい選択 そもそもの発端の「検索結果で『表示遅いよ』の表示」は低速回線向け仕様 低速2G環境で10秒くらい待たされるような環境で表示されるのではないか？という事 日本では速度制限されている時にストレスなく見れるかというレベルのお話ではないか？ 対象がネット新興国ではなく、日本向けなら、そこは切り捨てて良いと思う ページスピードの究極はテキストのみ 「画像もCSSもWebフォントもない」という出来ないことを目指すよりは、程々を目指すのがユーザーへの満
記事と便利スクリプトの扱いを考えるお話 - すなばいじり
大はてな実験で出している「便利そうなやつ」は大体はてなブログ用に用意しています。 また、他にも多くの作者が「便利なやつ」を提供しています。 今回は、扱い方のお話。 使おう 「そういえば、あの部分はどうやるんだっけ？」 という疑問を持った時に、 はてなブログ (便利にしたい内容) という調べ方をすると、大体の事が解決できます。 問題解決の目的は同じでも、考え方や手法によって複数の答えが出てきます。検索のTOPが自分の最善とは限らないので、色々試してお好みの方法で解決しましょう。 紹介しよう 解決できて良かったですね。もしかしたら、ブログを持っている読者の方も困っているかもしれない。それでは、紹介してあげましょう。 はてなブログでは、元になったブログページのURLを貼り付けると、自動的にブログパーツ的なものに変わります。貶した書き方をしなければ作者もきっと喜ばれるでしょう。*1 例 http:
ブログいじるやつ - すなばいじり
はてなブックマークの新着を眺めていると、年に何回かある「はてなブログカスタマイズ系」エントリーが上がってきていて、今期(？)の人々がブログ弄りの時期に入りましたねぇと眺めているのですが、 そういえば大はてな実験タグを付けていても一覧に表示させていないやつが幾つかあったなと、エントリーの整理をTodoに入れて「ちょっとは手入れをしよう」という意識を持っておきたいと思います。 パンくずリスト系は何処を見れば良いのか不明な部分もありますし。 ある種のブームみたいなものなのですが、書き終わったらどう掘っていくのか、何をネタに書いていくのかを見て行くのが楽しいと思います。*1 余談 すなばいじりで書いているものは、アニメーション系のエフェクトをあまり使わない方針でやっていますが、他ブログでは「カスタマイズ」という事で、つい「ぬるぬる」動かしたくなる傾向がありますよね。 インパクトは有るようにも思える
Googleにパンくずリストに使うサイト名を教えるやつを作った - すなばいじり
自分でGoogleに教える事ができるのなら、サクサクと作れるやつを作れば良いのです。という事で作った。 なお、既に こちらを利用している方は、何もしなくても対応済みとなります。 こちらは同時に適用した例となります。 ※「Googleにsocial profile を教えるやつを作った」を利用している方は、新たに追加する必要があります。 このエントリーのものは、はてなブログ以外でも利用できます。 どうぞご利用ください。 つかいかた 各部を入力してボタンを押すだけでJSON-LDが出力されます。 丸ごとHTMLのヘッダに貼り付ければOKです。 パンくずリストを作るやつも同時に利用すると良いですよ。 psn.hatenablog.jp つくるやつ プロフィールタイプ WebSite 名称(サイト名) URL 代替で使用するサイト名(オプション) 貼り付けるやつ 生成する はてなブログではどこに貼
はてなブログにサイドメニューを追加できるようになりました - すなばいじり
サイドメニューを付けたい はてなダイアリーにもある「ボタンを押すと横からメニューが出て来て、新しいエントリーや人気のエントリー、シェアボタンとか色々ついたやつ」が欲しいよね。 「シェアさせていただきまっす」って言われたりしたい。*1 どうやってやるの？ やってみよう、大はてな実験 で。 使ってみる (現在、機能追加を前提として公開しています。) 以下のコードを貼り付けるだけで設置完了です。 設定→詳細設定→「headに要素を追加」に貼り付けます。 貼り付けた後に「変更する」ボタンを押して導入完了です。 非同期読み込みを行う為、少し量が多く感じますが、これだけで動きます。 どうぞご利用ください。 <script> (function(H,T,N,p,s,n,e){H.Htnpsne=H.Htnpsne||{};Htnpsne[s]=Htnpsne[s]||function(){(Htnpsn
面白そう と言うだけなら簡単 - すなばいじり
なので、書いた。(勝手に) カスタムされたモバイル版サイドメニューなので、他のブログでは色々とダメな気がします。 追記 150621: カスタマイズ版の提供を終了し、本来の版に統合しました。 id:bulldraさん所だけずるい！ みんなで使えるようにしますので、もう少しお待ちください。 <script> (function(window, document, script, src, object, newElement, referenceElement) { window['Htnpsne'] = window['Htnpsne'] || {}; Htnpsne[object] = Htnpsne[object] || function() { (Htnpsne[object].q = Htnpsne[object].q || []) .push(arguments) }; newE
パンくずリストの考え方を整理する - すなばいじり
更新されたエントリーがあります。 psn.hatenablog.jp 構造化テストツールが新しくなり、機能変更・追加が行われたというお話で、今までOKだった記述がNGになったというネタを見て「これはこういう意味ですよ。」という解説を書いておかないとなぁと考えていたら一週間くらい過ぎそうなので、いい加減書いておきます。 構造化テストツールのチェックが厳しくなった？ パンくずリストの部分で起こっているようです。 厳密に言えばそうなります。 この部分ですね。きちんとリンクを置かないとエラーが表示されるようになった。というお話のようです。 そういえば、このエントリーを書いてもシブタクさん気づかないですね。 IDコールできません。 そもそもどういう事だろう？ 一例として、簡単にパンくずを表現すると カテゴリ > 今見ているページのタイトル このような表現になります。 HTML+microdataでマ
コード書き直す文化 - すなばいじり
コードレビューについて。 先日IDコールが飛んできて「新しくコード書きました」というエントリーを見てきて思い出した事がありまして、 d.hatena.ne.jp もう一年前のお話なのだと驚きながら、一部が自転車置き場の議論のようにも思いました。 自転車置き場の議論？ 比較的どちらでも良い事象についての議論に時間を使ってしまう事、くらいに捉えてもらえばOKです。 感覚的には、究極メニュー VS 至高のメニュー くらいのお話です。 自転車置場の議論 - bkブログ 配布されているスクリプトがエラーを抱えていて動作していない、他の部分と競合を起こしている、巻き込んで落ちる、といった致命的な事象であればともかく、minify(圧縮)されていなかったりコメントがそのままだったりという部分は、ツールで処理してしまえば良いのです。 Closure Compiler Service デプロイ(みんなで使え
はてなブログの画像タイトルとaltを編集できる「はてブロimageTitle」というChrome拡張を作った - すなばいじり
はてなブログでは、fotolifeを使って画像を貼り付ける事ができるけど、タグとかよく分からないし、もっと簡単に意味のある説明文やタイトルにしたいなぁ。 やってみよう、大はてな実験 で。 「ブログタイトル」を変更したい場合は、こちらをご覧ください。 はてなブログの画像向けSEO対策としてalt属性とtitle属性を編集したい どうやって使うの？(Google Chrome版) どうやって使うの？(Firefox版) 設定を変えて便利に使いたい この拡張機能を消したい。アンインストールするには？ 機能を増やしてほしい その他FAQ 作ってみてどうだった？ 自動でやってくれるSEO対策を導入して書くことに集中したい 記事作成画面でAlt・Title属性を編集できるChrome拡張機能を作りました。 どうぞご利用ください。 Chrome拡張機能ですので、Chromeが必要です。 Firefox版
たとえば、こう - すなばいじり
汎用的に <table border="0"><tr><td id="ads_place">表示したい広告</td></tr></table> <script type="text/javascript"> if( document.querySelector("html").getAttribute("data-page") !== "index"){ // "data-page" を調べると、どのページに居るかが判ります。entry=記事ページ など var ads = window.document.getElementById("ads_place") ; ads.innerHTML=''; } </script> 追記： index トップページ archive 記事一覧 (年月のみを含む) entries-year-month-day 日時指定された(この場合は年月日)記事一覧
No CAPTCHA reCAPTCHAを使おう - すなばいじり
掲示板の投稿やWebサービスの登録時に時々現れる recaptcha 。 ちょっと入力が手間だったり、クネクネした文字が読めなかったりするアレです。 導入メモ。 recaptcha のへアクセスすると「さっそく使う」というボタンが出てくるので、押します。(Googleアカウントは無ければ作成してください。) 登録が済むと使用開始への準備を行います。 分かりやすい名前と、使用するドメインを決定します。 このドメインについては、1つのキーで複数のドメインを指定したり(複数の)特定のサブドメインのみを指定する等、柔軟に設定する事が可能です。 ※ one per lineとありますので、1行ずつ記入していきます。 Getting Started - reCAPTCHA — Google Developers ぺたりと貼れば表示されます。 試してみる No CAPTCHA reCAPTCHAの場合、
はてなブログで記事の日付に曜日を付けるやつ2 を更新しました - すなばいじり
機能変更のお知らせ スマートフォンでも表示できるようになりました。 曜日の出力を任意の文字に変更できるようになりました。 既に設置されているコードのまま、引き続き利用する事が可能です。 スマートフォン版を含む、全てのページで表示させる場合はコード貼り付け位置の変更が必要になります。 表示をカスタマイズする場合、コードの追記が必要になります。 また、こちらは上級者向けですが デフォルトのタイミングを待たずに表示させる 上記のオプションが利用できます。 どうぞご利用ください。 NEW リズムでともだち こぐまのトンピー 出版社/メーカー: イワヤ メディア: おもちゃ＆ホビー この商品を含むブログ (1件) を見る
コード投げる文化 - すなばいじり
朝一番にカレンダーをカスタムするやつが出てきていたので、 id:bulldra さんは相変わらずサクサクとコード書いているのが良いですねぇと思った。 はぶ(噛まない方)*1にissue投げるか考えて、あっちはあっちの文化というか、やり取りがダラダラ残る仕組みなので、はてブの方にあとでやるフラグを立てて置いたら更に更新されていた。良い。 糞コードを供養しておく <script> window.addEventListener("DOMContentLoaded", function(){ // カレンダー取得タイミングをとる方法を書くのが面倒だったのでタイミング決め打ち // わりとなんとかなる setTimeout("kusocode();", 200); }, false); function kusocode(){ // 対象ノードを選択 var target = document.q
はてなブログのカレンダーを弄るやつ - すなばいじり
サイドバーにカレンダーが付きました。 曜日とか見れて便利！ でも、出来たばかりだから白黒で少し味気ないです。 ちょっと色とか付けてみたい。 やってみよう、大はてな実験 で。 ※月末の土曜日の色付けが間違えていたので修正しました。 カレンダーモジュールが付いたので、色を付けてみよう！ デザインのCSS部分に以下のスタイルを追加します。 /* カレンダー本体 */ .archive-module-calendar .calendar-day { /* カレンダー本体 */ color: #919191; } .archive-module-calendar .calendar-day a { /* カレンダー本体 a */ text-decoration:none; } .archive-module-calendar .calendar-day .archive-module-calenda
はてなブログのカテゴリーや記事一覧にアドセンスなどを表示させるやつ - すなばいじり
一覧ページに「固定ページ」のリンクとか貼りたい 記事のヘッダやフッタ、サイドバーに色々リンクを付ける事ができるけど、記事一覧の中に入れたいよね。ランキング表示とか時々そういうやつ有るじゃない。 どうやるの？ やってみよう、大はてな実験 で。 こちらの記事が上がっていて、「出来るけど無くても良いかな？」と思っていましたが、 多分できるけど、adsenseの広告コードをいじった時のペナルティが見えないので手を出してない部分。Amazonとかa8とかの画像単純リンクなら安全にできるかな。 / “はてなブログでカテゴリーページ等にアドセンスを表示させる方法…” http://t.co/UzhK7GBi9T — 池田仮名 (@bulldra) 2014, 11月 5 id:bulldra (池田仮名)氏が反応したので、 @bulldra 書きますか/書きましょう — PSN(psne.jp) (@p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログの合わせて読みたいのやつをどうにかする。 - すなばいじり
スマートフォン版にドロワーメニューを追加しました - すなばいじり
