はてなブログの「ブログカード」をWordPressのoEmbedに対応させる方法
先月末にはてなブログがリリースした「ブログカード」。 はてなブログの記事をきれいに記事中に挿入できるという機能ですが、これがoEmbed APIに対応しているということで、WordPressでもURLを貼り付けたら挿入できるように対応させてみました。 Image via. はてなブログ 当ブログではSSL対応を実施しましたが、はてなブログカードはhttpsに対応しておらず、読み込むことができません。そのため記事中に掲載したはてなブログカードは非表示となっております。ご注意ください。 どういうものかというと、こういうもの。 ※CSSでwidthとmarginを調整してます。 (はてなブログで)自分の記事はもちろんのこと、はてなブログのリンクを挿入すると、こうしたカード形式に整形されたボックスとして展開され、記事タイトルや概要、アイキャッチ画像がまとめて表示されるわけですね。 こういうのいいな
【告知】ワイワイゆるゆるな「Blog Crowd」というのをスタートします
数年ぶりにブログがらみでリアルなことをやります。 やることは単純で、ブログを書く人がゆるゆる集まってワイワイ飲み食いしながらブログを書いたり、書きあったり、ブログについてわからないことを話し合ったり教え合ったりする「Blog Crowd (ブログクラウド)」というイベントです。 イベントというよりかはスペースと言ったほうがいいのかな。 過去「ブログ合宿」という1泊2日でブロギングする、まさしく合宿形式なイベントって頻繁に行われていたんですよね。 ただ、さすがに泊まりは厳しいっていうのもあって、非宿泊型で都内のカフェにゆるゆる集まってブロギングする「プチブログ合宿」というのもあったりして、僕もそっちは主導して開催したりしていたんですよ。 他にも、かつてはHiMAというイベントチーム組んで「Action Bloggers Night」とか「Sweets Night」とか「Poken Night
「InstantClick」 先読みしてページ遷移を高速化するJavaScriptライブラリ
リンクを先読みしてページ遷移を高速化することができるというJavaSciptライブラリ InstantClick をご紹介。 実装してみたいけど、どの程度サーバーに負荷が掛かるのかという不安もあるので、導入するかどうしようか悩んでます。 デモを見ると結構いい感じなので導入したいんですけどねぇ。 InstantClick どういうライブラリなのかと言いますと、ページ内のリンク先をJSが先読みしてあらかじめロードしておくことで、ページ遷移のスピードを爆速化しちゃおうというもの。 といっても無作為に全てのリンクを先読みしてしまうと、それこそとんでもない負荷がかかるので、「InstantClick」ではリンクに対して、マウスがホバーした時のみ先読みするように作られています。 またホバー時に先読みするかどうかは、用意されている独自データ属性を付与して決定することが可能です。 「data-instan
【WordPress】投稿記事をmoreタグの前後で分割出力する方法
WordPressで記事を出力させるための関数にthe_content();ってのがあります。 この関数は記事をまるっと出力します。<!--more-->を挟めば前後を分けたように出力することもできますが、実際に前後で分割して出力させる方法があったので紹介します。 記事を分割して出力させるメリット メリットというほどではないですが、記事を前後で出力させることができると、記事中に設置する広告の管理がラクになるんじゃないでしょうか。 例えば<!--more-->直後に広告を設置したいといった場合、通常だと記事中にショートコードを仕込んで表示させるという方法を取ることが多いと思います。 これをテンプレート上で、記事の<!--more-->以前と<!--more-->以後を別々に出力させるようにして、その間に広告コードを設置したり、もしくは別途記事中に挿入させたい何かをPHPファイルでインクルード
【WordPress】現在記事のカテゴリーとカテゴリーリストを紐付けてリスト項目を強調する
うーんよくわからんタイトルになっちゃたかなぁ。 今回、サイドバーのカテゴリーリスト周りを見なおしまして、記事ページに設定されているカテゴリーとサイドバーのカテゴリーリストのリスト項目を紐付け、該当するリスト項目を強調表示するというカスタマイズを行いました。その備忘録です。 WordPressのカテゴリーリストを吐き出す関数にwp_list_categories();というのがあります。ここで吐き出されるタグはだいたい以下のような感じです。 <li class="cat-item cat-item-4"><a href="hoge.com/category4">カテゴリー4</a></li> <li class="cat-item cat-item-17"><a href="hoge.com/category17">カテゴリー17</a></li> <li class="cat-item c
【2013年9月】これは手放せない! モバデビ的必携iPhoneアプリ45選 | [M] mbdb (モバデビ)
3月、6月に続き、現在、僕が利用しているiPhoneアプリの3ヶ月に1度のまとめです。 これって自分の備忘録としての役割しかないんじゃないかという気がしないでもないんですが、まぁいいですまとめますw 今回はいくつか新物もあったりしますよ。 モブログ
![【2013年9月】これは手放せない! モバデビ的必携iPhoneアプリ45選 | [M] mbdb (モバデビ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0c15746e9df410de092fd126763381f772d2599/height=288;version=1;width=512/https%3A%2F%2Fmbdb.jp%2Fwp-content%2Fuploads%2F2013%2F09%2Fappstore-ios7-600x315.jpg)
「Color Test」 色相順に色を並び替えるゲーム感覚の色覚テスト
これ、結構前からあるので知ってる人もやったことある人も多いのではないかと思うんですが、久々にやったら前より高得点取れたのでご紹介。 両端に固定された色をベースに、色相順に色を並び替えてグラデーションを作るというデザイナー向けゲーム「Color Test」です。 アクセスすると、こんな感じの画面が開きます。 あとはこの4段の色相を両端に固定された色を基準としてグラデーションを作っていくだけ。色ブロックはドラッグ&ドロップで移動することができますよ。 はっきり言って難しいです。デザイナーであるとかどうとかではなく、どちらかと言えばちょっと語弊がありますが、色覚が優れているかどうかを測るテストといった感じ。 すべて並び替えたら、「Score Test」というボタンがあるので、それをクリックしましょう。するとスコアが表示されます。 スコア表示後に、年齢層と性別を送信してね的なものがありますが、まぁ
矢印を入力するショートカットがマジで便利! Google日本語入力なら簡単ですよ
いやー、これ知らんかったわー。マジで便利。 Google日本語入力のショートカットにこんなのがあるだなんて。 普段矢印記号を入力するときってどうしてます? やっぱり「やじるし」って入れて変換でしょうか? いや、実はもっと簡単な方法があったんですよ。 ブログの記事を書く時もそうですが、特に議事録などをザーッと書いたりしていると、矢印記号をよく使うことが多いんですよね。 このショートカットを知るまでは「やじるし」と打ってから変換するというのを繰り返していたんですけど、もっと簡単に打てるショートカットがあったんです。 鍵になるのは「z」キーでした。 わずか2回のタイプで矢印ショートカット これ知っちゃうと、ホント変換繰り返すのが馬鹿らしくなります。 なお、入力方式はローマ字入力のときに限られます。英数入力時は無反応だったので。
ブロネクユーザーミートアップ「Neighbors NoDoor」に参加
前日ねじ込みという荒業で華麗に参加してきましたよ。 Googleハングアウトを利用したライブ配信番組「ブロネク」が、初のリアルイベントとなる「Neighbors NoDoor」というぶっちゃけ飲み会を開催するということで、たくさんの若手ブロガーが参加する中に混じってきました。 会場となったのは代官山駅からほど近い風土カフェ&バー「山羊に、聞く?」。 総勢で約50名が参加したこのイベント。参加しているのはだいたいブログ歴5年以下くらい(短い人だと半年とか)のブロガーさんが中心かなという印象。 だいたい歴で言えば僕の場合倍近いわけですが、そんな僕ら世代が、彼らと同じくらいの年数の頃に、同じようにUSTREAMを使った配信をしたり、イベントを開催したりしていたことを考えると、そういう流れってだいたい周回していくのかなと思ったり。 いや、なんか懐かしい感覚というか、微笑ましい感覚というかなんという
WordPressで記事の内容によって記事中に挿入する広告を切り替える方法
Google Adsenseを利用していて怖いのが、広告を表示させてはならぬ禁止コンテンツにまかり間違って表示させてしまって突然BANされることですよね。 禁止コンテンツが絡みそうな記事だけ、別の広告ネットワークに切り替えられれば･･･という人向けのカスタマイズ方法です。 Photo:Wordpress Button Closeup By Stefanos Kofopoulos Google Adsenseを利用していると、ごくまれにうっかりポリシー違反をやらかして広告配信が停止されてしまったり、最悪なケースだとアカウントがBANされて二度と利用できなくなるなんてことがあります。 「わかったブログ」のかん吉さんが以前に配信停止を食らったときのことを記事にしていて、とてもわかりやすく解説してくれているので是非参考にしてください。
ここまで小さくなるの!? PNGをほとんど劣化なく圧縮する｢TinyPNG｣がスゲェ!!
こいつぁスゲェ! PNG画像を非可逆圧縮するブラウザアプリ「TinyPNG」というのを試してみたんですが、とんでもないですねコレ。 画像自体はほぼ変わらんのに、驚異的なサイズダウン。まるで禁断のダイエット法にも見えるんですが、どんな仕組みなんだろ･･･。 TinyPNG – Compress PNG images while preserving transparency 使い方はすごくかんたん。 「TinyPNG」にアクセスしたら、画面の[Drop your .png files here!]というスペースに、圧縮したいPNGファイルをドラッグ&ドロップするだけです。 圧縮のタスクが完了すると、ダウンロードリンクが表示されるので、それをクリックしてローカルに保存すればOK。 画面遷移は一切ありません。 すげーサイズダウンします これは実際にサイズダウンしてみた結果。 左が元画像で右がTi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2013年版】モバデビで絶賛稼働中のWordPressプラグイン29選