[{"data":1,"prerenderedAt":315},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$frecjd93995i1":263},{"featured":4,"latest":129,"categories":227},[5,14,27,37,48,56,66,76,86,96,106,114,122],{"slug":6,"title":7,"date":8,"excerpt":9,"image":10,"categories":11},"custom-database-tables","Custom DataBase Tables","2015-11-24T02:29:34","You can create the new own table freely in the your WordPress database via this plugin. Then, you can make the management of table or (as view or entry or edit) data in a simple user interface.\\nAlso,","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fcdbt-overview.png",[12],{"slug":13,"name":7},"cdbt",{"slug":15,"title":16,"date":17,"excerpt":18,"image":19,"categories":20},"10_php_tips_for_developers","PHP開発者が心得ておくべき10の鉄則","2016-01-11T18:38:09","PHPだけに限った話ではないが、プログラミングを行うに当たって、心得て、準備しておくと失敗が劇的に減る事柄をまとめてある良い記事を見つけたので、私なりの解釈で意訳しつつ、経験則を踏まえてあらためてまとめてみた。 オリジナ…","\u002Fassets\u002Fuploads\u002F2016\u002F01\u002Feyecatch-php-10-tips.jpg",[21,24],{"slug":22,"name":23},"column","コラム",{"slug":25,"name":26},"development","開発関連",{"slug":28,"title":29,"date":30,"excerpt":31,"image":32,"categories":33},"jquery-timeline-v1","2種類の横型タイムラインを簡単に作成できる「jQuery.Timeline」をリリース","2017-05-29T14:55:46","現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。 ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、そち…","\u002Fassets\u002Fuploads\u002F2017\u002F05\u002Fjquery_timeline_image.png",[34],{"slug":35,"name":36},"jqtl","jQuery.Timeline",{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":43},"optimize-browser-cache-of-static-resources","更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる","2018-01-31T15:47:47","WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見て…",null,[44,47],{"slug":45,"name":46},"codes","コード集",{"slug":25,"name":26},{"slug":49,"title":50,"date":51,"excerpt":52,"image":53,"categories":54},"jquery-timeline","jQuery.Timeline version2 – full documentation","2019-03-04T20:40:48","Plugin Overview The jQuery.Timeline plugin provides you two types of the horizontal timeline. You can create a…","\u002Fassets\u002Fuploads\u002F2019\u002F03\u002Fjquery.timeline_v2.jpg",[55],{"slug":35,"name":36},{"slug":57,"title":58,"date":59,"excerpt":60,"image":61,"categories":62},"released-the-sloth","Released the Sloth of mobile-first CSS micro framework!","2019-04-16T18:04:25","I released the “Sloth” that is mobile-first CSS micro framework. I have long used frontend framewo…","\u002Fassets\u002Fuploads\u002F2019\u002F04\u002Fsloth_doc_head.png",[63],{"slug":64,"name":65},"sloth","Sloth",{"slug":67,"title":68,"date":69,"excerpt":70,"image":71,"categories":72},"challenge-to-conceal-the-wordpress-site","WordPressサイトを徹底的に秘匿化する","2020-02-02T23:59:58","私は自分の個人サイトをはじめ、仕事でもWordPressサイトを運用している。WordPressは気軽にサイトを立ち上げられてカスタマイズも簡単な、素晴らしいオープンソースなのだが、世界中で使われまくっているその知名度…","\u002Fassets\u002Fuploads\u002F2020\u002F02\u002Fshutterstock_1878005929.jpg",[73],{"slug":74,"name":75},"wordpress","WordPress関連",{"slug":77,"title":78,"date":79,"excerpt":80,"image":81,"categories":82},"what-is-forkor","Made a shortened URL app called Forkor","2020-07-07T22:27:01","What’s Forkor? Forkor is a service that provides a shortened URL feature that allows you to redirect any…","\u002Fassets\u002Fuploads\u002F2020\u002F07\u002Fforkor.png",[83],{"slug":84,"name":85},"forkor","Forkor",{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":92},"manual-about-svg-japan","インタラクティブな日本地図を生成するJSプラグイン「SVG Japan」","2020-11-16T21:19:58","各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「SVG Japan」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードはgit…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fsvg-japan.png",[93],{"slug":94,"name":95},"svg-japan","SVG Japan",{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":102},"wp-ignitor-plugin-to-conceal-wordpress-site","WordPressサイトを秘匿化するプラグイン「WP Ignitor」","2021-01-19T15:28:21","以前「WordPressサイトを徹底的に秘匿化する」という記事で、WordPress建てのサイトを秘匿化する方法を取り上げたのだが、あれをサイト構築時に毎度実施するとなるととても労力が必要であった。そこで、もっとお手軽…","\u002Fassets\u002Fuploads\u002F2021\u002F01\u002Fbanner-1554x500-1.png",[103],{"slug":104,"name":105},"wp-ignitor","WPイグナイタ",{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":112},"tastewp","無料でWordPressサイトを複数作成できるWEBサービス「TasteWP」","2021-03-25T20:21:59","私が日本語翻訳に協力しているWEBサービス「TasteWP」について紹介しようと思う。 https:\u002F\u002Ftastewp.com このサービス、サインアップすることなく無料で自分用のWordPressサイトを作れるとい…","\u002Fassets\u002Fuploads\u002F2021\u002F03\u002FTasteWP_screenshot.png",[113],{"slug":74,"name":75},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":120},"monster-hunter-rise-skill-simulator","モンハンライズのスキルシミュレータを作ってみた！","2021-06-28T20:24:52","コラムで連載していたNintendo Switch版『モンスターハンターライズ』のスキルシミュレータ開発がやっと一段落して一通り完了した。いやぁ、記事書きながら同時並行で開発すると思っていた以上に時間がかかるもんだなぁ…","\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_v100.png",[121],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":127},"comparison-of-javascript-date-libraries","JavaScriptの日時ライブラリを比較してみた","2021-07-28T22:39:19","ネイティブJavaScriptで日時を取り扱う場合、ビルトインされているDateオブジェクトを使うことになるのだが、このDateオブジェクトは取り扱いにクセが多く、直感的に日時を操作できない点でも有名である。そこで、専…",[128],{"slug":25,"name":26},[130,141,153,165,175,184,192,195,198,206,213,220],{"slug":131,"title":132,"date":133,"excerpt":134,"image":135,"categories":136},"pulllog_launched","ガチャ履歴を記録・分析できるWebサービス「PullLog」","2025-08-22T13:05:30","このたび、新しい個人開発サービスとして 「PullLog（プルログ）」 をリリースした。 URLはこちら https:\u002F\u002Fpulllog.net PullLogとは？ PullLogは、ソーシャルゲームのガチャ履歴を記録…","\u002Fassets\u002Fuploads\u002F2025\u002F08\u002Fpulllog_stats_jp.png",[137,140],{"slug":138,"name":139},"industries","プロダクト",{"slug":25,"name":26},{"slug":142,"title":143,"date":144,"excerpt":145,"image":146,"categories":147},"mockapi-php-openapi-schema-generation","モックAPIのレスポンスから OpenAPI 3.0 スキーマを自動生成するPHPツール","2025-04-17T09:31:52","私自身がそうなのですが、OpenAPI仕様書を毎回手作業で書いていて「面倒だな」と思ったことはありませんか？ そんな（私と）あなたにぴったりのツールがあります。 レスポンスの例さえ用意すれば、OpenAPI 3.0 スキ…","\u002Fassets\u002Fuploads\u002F2025\u002F04\u002Fswaggerui-preview.png",[148,151,152],{"slug":149,"name":150},"mockapi-php","MockAPI-PHP",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":154,"title":155,"date":156,"excerpt":157,"image":158,"categories":159},"ambient_playlist_customize","Ambientでメメントモリのラメントプレイヤーを作る","2023-11-30T17:32:39","「Ambient」の最新バージョン 1.2.0で実装した「疑似フェーダー」機能を使って、ソーシャルゲーム「メメントモリ」のYouTube公式チャンネルで公開されているMVを集約したラメント専用プレイヤーを作ってみた。 ラ…","\u002Fassets\u002Fuploads\u002F2023\u002F11\u002Fambient_mememori_1.png",[160,163,164],{"slug":161,"name":162},"ambient","Ambient",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":171},"released_ambient_demo_version","Ambientメディアプレイヤーのクラウド版デモを公開","2023-11-22T13:47:36","つい先日「Ambient」の最新バージョン 1.1.0をリリースして、それに合わせてクラウド版デモサイトも公開してみた。 なお、クラウド版デモでローカルのホストコンピュータのメディアを再生するには、そのメディアファイルも…","\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbientMediaPlayer-typologo.png",[172,173,174],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":180},"ambient-media-player","YouTubeと自分のPC内メディアを同時に再生できるメディアプレイヤーを作ってみた","2023-10-20T00:00:25","私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。 そういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。…",[181,182,183],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":190},"what-is-the-sunorhc","Sunorhc is a date-time library for JavaScript","2021-08-25T22:55:55","Sunorhc is a lightweight library for handling dates and times for JavaScript. The library wraps a native JavaS…","\u002Fassets\u002Fuploads\u002F2021\u002F08\u002Fshutterstock_1091212919_resized.jpg",[191],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":193},[194],{"slug":25,"name":26},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":196},[197],{"slug":25,"name":26},{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":204},"mhrise-skill-simulator-creation-chapter-12","モンスターハンターライズのスキルシミュレータを作ってみる！ 第12回","2021-06-21T13:11:46","今回は「マイセット登録」と護石データの「エクスポート／インポート」機能の追加をしていく。折り良く（悪く？）「FF7リメイク・インターグレード」や「FORTNITEシーズン7」が出たこともあって、そっちをプレイしてたらこ…","\u002Fassets\u002Fuploads\u002F2021\u002F04\u002Fb6ca09e9a7f6faf27641f62dabe64c6ff97b4f326aa478379e3c112aa28eb9ab.jpg",[205],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":211},"mhrise-skill-simulator-creation-chapter-11","モンスターハンターライズのスキルシミュレータを作ってみる！ 第11回","2021-06-07T14:52:31","さて、今回はユーザー個別データの管理部分を開発していく予定だが、まずその前にやっておくことがある。 新スキル「風雷合一」に対応する Ver.3.0の大型無料アップデートで追加された新スキルに「風雷合一」というのがある…",[212],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":218},"mhrise-skill-simulator-creation-chapter-10","モンスターハンターライズのスキルシミュレータを作ってみる！ 第10回","2021-06-02T00:29:10","今回は、護石管理画面の作成だ。この護石管理では、ユーザーごとに護石の登録を行う機能と、登録した護石を削除する機能を持つ仕様になる。この画面から登録した護石データはデータベースに格納するので、フロントエンド側からのリクエス…",[219],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":225},"mhrise-skill-simulator-creation-chapter-9","モンスターハンターライズのスキルシミュレータを作ってみる！ 第9回","2021-05-22T23:56:27","さて、今回はVuexによるデータ・キャッシュの実装だ。一度データベースから読み込んだデータをフロントエンド側で再利用可能なストアに格納することで、データベースへの接続回数を減らしてシステム負荷を下げるとともに、UX的な…",[226],{"slug":22,"name":23},[228,230,232,236,238,239,240,241,242,244,247,248,250,252,254,258,261],{"slug":161,"name":162,"count":229},3,{"slug":13,"name":7,"count":231},7,{"slug":233,"name":234,"count":235},"csnp","Custom Sticky Notes",2,{"slug":84,"name":85,"count":237},1,{"slug":35,"name":36,"count":229},{"slug":149,"name":150,"count":237},{"slug":64,"name":65,"count":237},{"slug":94,"name":95,"count":237},{"slug":74,"name":75,"count":243},37,{"slug":245,"name":246,"count":237},"wpqt","WP Qiita",{"slug":104,"name":105,"count":237},{"slug":22,"name":23,"count":249},29,{"slug":45,"name":46,"count":251},16,{"slug":138,"name":139,"count":253},5,{"slug":255,"name":256,"count":257},"lifelog","ライフログ",64,{"slug":259,"name":260,"count":235},"uncategorized","未分類",{"slug":25,"name":26,"count":262},45,{"type":264,"post":265},"post",{"slug":266,"title":267,"date":268,"excerpt":269,"image":42,"categories":270,"modified":272,"html":273,"tags":274,"related":284,"prev":301,"next":308},"controll-svg-files-by-html5","HTML5でのSVGファイル操作のおさらい","2014-10-09T12:59:39","最近、HTML5でベクターグラフィックスを取り扱う時にSVG形式のファイルを利用しているWEBサイトが増えて来ている。iOS系のデバイスが超高解像度のRetinaディスプレイを採用しているので、PCサイト向けに準備した8…",[271],{"slug":25,"name":26},"2022-04-20T11:22:06","\u003Cp>最近、HTML5でベクターグラフィックスを取り扱う時にSVG形式のファイルを利用しているWEBサイトが増えて来ている。iOS系のデバイスが超高解像度のRetinaディスプレイを採用しているので、PCサイト向けに準備した800×600や1024×740といった大きめな画像でも、Retina端末で見るとぼやけてしまうという状況になったのが原因かもしれない。この状況でRetinaディスプレイでも綺麗に見れる高精細な画像を提供しようとすると、今度はファイルサイズが肥大化して、トラフィック側に悪影響が出るというジレンマに悩まされる。それらを解決すべく利用が進んだのがSVG形式のベクター画像だ。\u003Cbr \u002F>\n数年前、SVGGirlとかいうコンテンツが流行っていた時は、まだSVG形式のファイルを利用できるブラウザが少なかったんだが、今どきのモダンブラウザは普通の画像ファイルと同じ感じに簡単に取り扱えるようになった。\u003Cbr \u002F>\n今後、SVGファイルの取り扱いが増えそうな感じがするので、ここでおさらいしておこうかと思った次第。\u003C\u002Fp>\n\u003Ch3>SVG形式のファイルをHTMLで表示する方法\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Cstrong><IMG> を使う\u003C\u002Fstrong> ─ HTMLのIMGタグにSVGファイルを直接指定するやり方。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode><img src=\"logomark.svg\" width=\"32\" height=\"32\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>\u003Cstrong>CSSを使う\u003C\u002Fstrong> ─ CSSの\u003Ccode>background-image\u003C\u002Fcode>プロパティで背景画像として指定するやり方。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode><div style=\"width:32px; height:32px; background-image:url(logomark.svg); background-size:100%;\"><\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>\u003Cstrong><SVG> タグを使う\u003C\u002Fstrong> ─ HTML内に（インラインで）直接SVGタグでベクターパスを指定して描画するやり方。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode><svg id=\"logomark\" x=\"0px\" y=\"0px\" width=\"155px\" height=\"155px\" viewBox=\"0 0 155 155\" enable-background=\"new 0 0 155 155\">\n  <polygon id=\"logomark-polyline\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#0CB9C7\" points=\"128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 \"\u002F>\n<\u002Fsvg>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>\u003Cstrong><OBJECT> タグを使う\u003C\u002Fstrong> ─ HTMLのOBJECTタグでSVGファイルを埋め込むやり方。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode><object type=\"image\u002Fsvg+xml\" data=\"logomark.svg\" width=\"256\" height=\"256\"><\u002Fobject>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>どの表示方法も現在のモダンブラウザで利用可能なので、表示するだけなら、お手軽にIMGタグやCSSを使うのがベストだろう。ただ、マウスオーバー時やクリック時にイベントを拾ってSVG形式のスタイルを変更したい場合などは、各ブラウザで挙動が異なる。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>SVG形式ファイルの各ブラウザの対応状況\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>ブラウザ\u003C\u002Fth>\n\u003Cth>Chrome\u003C\u002Fth>\n\u003Cth>Safari\u003C\u002Fth>\n\u003Cth>Firefox\u003C\u002Fth>\n\u003Cth>Opera\u003C\u002Fth>\n\u003Cth>IE11\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>1. <IMG> で表示\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>2. CSSで表示（読込み型）\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>3. CSSで表示（インラインスタイル）\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>4. インライン<SVG> で表示\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>5. インライン<SVG> ＋ JavaScript操作\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>6. <OBJECT> で表示\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>7. JavaScript埋込型SVG ＋ <OBJECT>\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>○\u003C\u002Ftd>\n\u003Ctd>×\u003C\u002Ftd>\n\u003Ctd>×\u003C\u002Ftd>\n\u003Ctd>×\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>IMGタグやCSSで表示してしまうと、表示されたSVG形式ファイルに対してJavaScript等で一切操作ができないので、インラインSVGタグとして埋め込むか、イベントハンドラ処理のJavaScriptをSVG（XML文書）内に直接埋め込んだSVGファイルをOBJECTタグで埋め込むかの二択になる。しかし、JavaScript埋め込み型SVGファイルのOBJECTタグでのイベント発動に対応しているのは現時点でChromeとSafariのWebkit系ブラウザだけなので、クロスブラウジングを考えるのならインラインSVGタグ＋JavaScriptというセットが無難である。しかし、オレとしては、インラインSVGタグはHTMLの可読性が著しく下がるので避けたいところなんだが…今のところどうにもならない。\u003C\u002Fp>\n\u003Cp>ちなみに、JavaScriptでSVGファイルのスタイルを変更する例を下記に紹介しておく。下記、128×128と256×256のサイズのSVG画像はマウスを上に乗せると色が変わるようなJavaScriptを書いてある。\u003C\u002Fp>\n\u003Ctable>\n\u003Ctr>\n\u003Ctd style=\"vertical-align: middle; text-align: center;\">\n\u003Cdiv style=\"width: 16px; height: 16px; background-image: url(\u002Fassets\u002Fofficial\u002Fms_logomark.svg); background-size: 100% 100%; background-repeat: no-repeat;\">\u003C\u002Fdiv>\n\u003C\u002Ftd>\n\u003Ctd style=\"vertical-align: middle; text-align: center;\">\n\u003Cdiv style=\"width: 32px; height: 32px; background-image: url(\u002Fassets\u002Fofficial\u002Fms_logomark.svg); background-size: 100% 100%; background-repeat: no-repeat;\">\u003C\u002Fdiv>\n\u003C\u002Ftd>\n\u003Ctd style=\"vertical-align: middle; text-align: center;\">\n\u003Cdiv style=\"width: 64px; height: 64px; background-image: url(\u002Fassets\u002Fofficial\u002Fms_logomark.svg); background-size: 100% 100%; background-repeat: no-repeat;\">\u003C\u002Fdiv>\n\u003C\u002Ftd>\n\u003Ctd style=\"vertical-align: middle; text-align: center;\">\n    \u003Csvg id=\"il-monaural-sound-logomark\" x=\"0px\" y=\"0px\" width=\"155px\" height=\"155px\" viewBox=\"0 0 155 155\" enable-background=\"new 0 0 155 155\">\n        \u003Cpolygon id=\"il-ms-logomark-line\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#0CB9C7\" points=\"128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 \"\u002F>\n        \u003Cpath id=\"il-ms-logomark-mask\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#FFFFFF\" d=\"M142.21,78.07l-8.35-31.14c-1.28-1.4-2.49-2.54-3.63-3.42c-2-1.54-4.85-2.33-8.59-2.33c-4.11,0-7.45,1.02-9.99,3.06c-2.57,2.04-3.82,4.69-3.82,7.89c0,2.79,1,5.24,3.02,7.36c2.03,2.16,5.77,4.17,11.22,6.09c5.42,1.92,9.67,3.87,12.69,5.85C137.79,73.44,140.27,75.65,142.21,78.07z M106.08,84.88v4.59c0,11.6,4.86,17.36,14.62,17.36c4.31,0,7.72-1.54,10.27-4.63c2.33-2.85,3.59-6.7,3.77-11.52c-0.32-1.22-0.8-2.44-1.43-3.67c-1.26-2.45-2.83-4.46-4.71-6.03s-5.22-3.2-9.96-4.86c-3.37-1.16-6.22-2.32-8.53-3.48c-0.92-6.58-3.5-12.08-7.76-16.54c-2.15-2.27-4.58-4.08-7.27-5.44c0.29-5.52,2.7-10.3,7.3-14.28c4.91-4.25,10.84-6.38,17.83-6.38c3.14,0,6.31,0.49,9.51,1.48L128.25,26L57.56,7.06L5.81,58.81l3.9,14.55c1.1-5.18,3.47-9.64,7.08-13.38c5.17-5.35,11.79-8.03,19.82-8.03c8.21,0,14.86,2.68,19.93,8.03c0.37,0.39,0.73,0.78,1.08,1.19c0.35-0.41,0.71-0.8,1.09-1.19c5.17-5.35,11.79-8.03,19.82-8.03c8.21,0,14.86,2.68,19.93,8.03c5.1,5.35,7.62,12.31,7.62,20.95V84.88z M100.46,111.97c-4.27-4.48-6.73-10.08-7.42-16.87l-0.2,0.04v-4.12v-6.14v-2.4c0-11.6-4.86-17.36-14.62-17.36c-4.31,0-7.72,1.55-10.27,4.63c-2.52,3.09-3.79,7.34-3.79,12.73V120H50.92V82.48c0-11.6-4.86-17.36-14.62-17.36c-4.31,0-7.72,1.55-10.27,4.63c-2.52,3.09-3.79,7.34-3.79,12.73V120H22.2l2.55,9.5l70.69,18.94l28.64-28.64c-1.19,0.13-2.43,0.2-3.69,0.2C112.18,120,105.53,117.32,100.46,111.97z\"\u002F>\n        \u003Cpolygon id=\"il-ms-logomark-stroke\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"none\" stroke=\"#7D7D7D\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" points=\"128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 \"\u002F>\n    \u003C\u002Fsvg>\n\u003C\u002Ftd>\n\u003Cp>\u003Cscript>\nvar svg_img = document.getElementById('il-monaural-sound-logomark');\nsvg_img.setAttribute('width', '128');\nsvg_img.setAttribute('height', '128');\nsvg_img.onmouseover = changeHoverColor;\nsvg_img.onmouseout = changeDefaultColor;\nfunction changeHoverColor() {\n    document.getElementById('il-ms-logomark-line').setAttribute('fill', '#FFFFFF');\n    document.getElementById('il-ms-logomark-mask').setAttribute('fill', '#0CB9C7');\n    document.getElementById('il-ms-logomark-stroke').setAttribute('stroke', '#0CB9C7');\n}\nfunction changeDefaultColor() {\n    document.getElementById('il-ms-logomark-line').setAttribute('fill', '#0CB9C7');\n    document.getElementById('il-ms-logomark-mask').setAttribute('fill', '#FFFFFF');\n    document.getElementById('il-ms-logomark-stroke').setAttribute('stroke', '#7D7D7D');\n}\n\u003C\u002Fscript>\u003C\u002Fp>\n\u003Ctd style=\"vertical-align: middle; text-align: center;\">\n    \u003Cobject type=\"image\u002Fsvg+xml\" data=\"\u002Fassets\u002Fofficial\u002Fms_logomark.svg\" width=\"256\" height=\"256\">\u003C\u002Fobject>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\" style=\"font-size: 14px;\"><IMG>\u003Cbr \u002F>(16×16)\u003C\u002Ftd>\n\u003Ctd align=\"center\" style=\"font-size: 14px;\"><IMG>\u003Cbr \u002F>(32×32)\u003C\u002Ftd>\n\u003Ctd align=\"center\" style=\"font-size: 14px;\">inline style\u003Cbr \u002F>(64×64)\u003C\u002Ftd>\n\u003Ctd align=\"center\" style=\"font-size: 14px;\"><SVG>\u003Cbr \u002F>(128×128)\u003C\u002Ftd>\n\u003Ctd align=\"center\" style=\"font-size: 14px;\"><OBJECT>\u003Cbr \u002F>(256×256)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\u003Cp>上記の例のソース部は、\u003C\u002Fp>\n\u003Cpre>\u003Ccode><img src=\"\u002Fassets\u002Fofficial\u002Fms_logomark.svg\" width=\"16\" height=\"16\">\n<img src=\"\u002Fassets\u002Fofficial\u002Fms_logomark.svg\" width=\"32\" height=\"32\">\n<div style=\"width: 64px; height: 64px; background-image: url(\u002Fassets\u002Fofficial\u002Fms_logomark.svg); background-size: 100% 100%; background-repeat: no-repeat;\"><\u002Fdiv>\n<svg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" xmlns:xlink=\"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxlink\" id=\"inline-monaural-sound-logomark\" x=\"0px\" y=\"0px\" width=\"155px\" height=\"155px\" viewBox=\"0 0 155 155\" enable-background=\"new 0 0 155 155\">\n  <polygon id=\"inline-ms-logomark-line\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#0CB9C7\" points=\"128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 \"\u002F>\n  <path id=\"inline-ms-logomark-mask\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#FFFFFF\" d=\"M142.21,78.07l-8.35-31.14c-1.28-1.4-2.49-2.54-3.63-3.42c-2-1.54-4.85-2.33-8.59-2.33c-4.11,0-7.45,1.02-9.99,3.06c-2.57,2.04-3.82,4.69-3.82,7.89c0,2.79,1,5.24,3.02,7.36c2.03,2.16,5.77,4.17,11.22,6.09c5.42,1.92,9.67,3.87,12.69,5.85C137.79,73.44,140.27,75.65,142.21,78.07z M106.08,84.88v4.59c0,11.6,4.86,17.36,14.62,17.36c4.31,0,7.72-1.54,10.27-4.63c2.33-2.85,3.59-6.7,3.77-11.52c-0.32-1.22-0.8-2.44-1.43-3.67c-1.26-2.45-2.83-4.46-4.71-6.03s-5.22-3.2-9.96-4.86c-3.37-1.16-6.22-2.32-8.53-3.48c-0.92-6.58-3.5-12.08-7.76-16.54c-2.15-2.27-4.58-4.08-7.27-5.44c0.29-5.52,2.7-10.3,7.3-14.28c4.91-4.25,10.84-6.38,17.83-6.38c3.14,0,6.31,0.49,9.51,1.48L128.25,26L57.56,7.06L5.81,58.81l3.9,14.55c1.1-5.18,3.47-9.64,7.08-13.38c5.17-5.35,11.79-8.03,19.82-8.03c8.21,0,14.86,2.68,19.93,8.03c0.37,0.39,0.73,0.78,1.08,1.19c0.35-0.41,0.71-0.8,1.09-1.19c5.17-5.35,11.79-8.03,19.82-8.03c8.21,0,14.86,2.68,19.93,8.03c5.1,5.35,7.62,12.31,7.62,20.95V84.88z M100.46,111.97c-4.27-4.48-6.73-10.08-7.42-16.87l-0.2,0.04v-4.12v-6.14v-2.4c0-11.6-4.86-17.36-14.62-17.36c-4.31,0-7.72,1.55-10.27,4.63c-2.52,3.09-3.79,7.34-3.79,12.73V120H50.92V82.48c0-11.6-4.86-17.36-14.62-17.36c-4.31,0-7.72,1.55-10.27,4.63c-2.52,3.09-3.79,7.34-3.79,12.73V120H22.2l2.55,9.5l70.69,18.94l28.64-28.64c-1.19,0.13-2.43,0.2-3.69,0.2C112.18,120,105.53,117.32,100.46,111.97z\"\u002F>\n  <polygon id=\"inline-ms-logomark-stroke\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"none\" stroke=\"#7D7D7D\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" points=\"128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 \"\u002F>\n<\u002Fsvg>\n<script>\nvar svg_img = document.getElementById('inline-monaural-sound-logomark');\nsvg_img.setAttribute('width', '128');\nsvg_img.setAttribute('height', '128');\nsvg_img.onmouseover = changeHoverColor;\nsvg_img.onmouseout = changeDefaultColor;\nfunction changeHoverColor() {\n    document.getElementById('inline-ms-logomark-line').setAttribute('fill', '#FFFFFF');\n    document.getElementById('inline-ms-logomark-mask').setAttribute('fill', '#0CB9C7');\n    document.getElementById('inline-ms-logomark-stroke').setAttribute('stroke', '#0CB9C7');\n}\nfunction changeDefaultColor() {\n    document.getElementById('inline-ms-logomark-line').setAttribute('fill', '#0CB9C7');\n    document.getElementById('inline-ms-logomark-mask').setAttribute('fill', '#FFFFFF');\n    document.getElementById('inline-ms-logomark-stroke').setAttribute('stroke', '#7D7D7D');\n}\n<\u002Fscript>\n<object type=\"image\u002Fsvg+xml\" data=\"\u002Fassets\u002Fofficial\u002Fms_logomark.svg\" width=\"256\" height=\"256\"><\u002Fobject>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>SVGファイル内に画像自体のイベントは全て埋め込んでおいて、HTML側ではOBJECTタグで呼び出すだけでその画像に対してのイベントは考えなくていいという、今どきで言うと「Web Components」的なやり方がすごく気に入っているので、ぜひ他のブラウザもこのやり方ができるようにしてもらいたいものだ。\u003C\u002Fp>\n",[275,278,281],{"slug":276,"name":277},"html5","HTML5",{"slug":279,"name":280},"javascript","JavaScript",{"slug":282,"name":283},"svg","SVG",[285,288,293,298],{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":286},[287],{"slug":94,"name":95},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":289},[290,291,292],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":294},[295,296,297],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":299},[300],{"slug":25,"name":26},{"slug":302,"title":303,"date":304,"excerpt":305,"image":42,"categories":306},"how-to-register-a-dedicated-icon-of-wordpress-plugin","WordPressのプラグインに専用アイコンを登録する方法","2014-09-27T01:10:37","WordPress4.0から、プラグインに専用のアイコンを表示させられるようになった。 WordPress管理パネルのプラグイン新規追加の画面 WordPress.orgのプラグイン検索結果一覧の画面 オレも自分のプラグ…",[307],{"slug":74,"name":75},{"slug":309,"title":310,"date":311,"excerpt":312,"image":42,"categories":313},"wondering-whether-cdbt-plugin-should-be-corresponding-to-the-composite-primary-key-type-table","CDBTプラグインを複合主キー型テーブルに対応させるべきか","2014-10-17T13:06:51","別件でUnicodeの「サロゲートペア」について調べていたら、データベースの「サロゲートキー」と「複合主キー」についての記事が目に留まって思いっきり脱線した次第。で、最近抱えていたデータベースの複合主キーについてのとある…",[314],{"slug":13,"name":7},1793391398647]