【WordPress】投稿画面でカテゴリーの検索できないの？Post Category Filterプラグインならできます！ | バシャログ。
WordPressサイトを一瞬でPWA化できる PWA for WordPress【プラグイン紹介】 | バシャログ。
今年の春頃、iOSのServiceWorker対応で、PWA（Progressive Web Apps)がWeb界隈を賑わせましたね。 私は6月にAndroid Bazaar and Conferenceに参加してまいりました。 春は東大の本郷キャンパスでしたが、秋は川崎で開催されます。現在も参加登録できます! 申込はconnpassから。 PWA for WordPress WordCamp Tokyo 2018や、私が参加した日本Androidの会9月定例会で紹介がありました。サイトをPWA化するためには、manifest.jsonとservice-worker.js、他にアイコン用の画像などが必要となります。 これらを非常に簡単に設定してくれるプラグインです！ (利用には対象のWordPressサイトがhttps化している必要があります) 使ってみました！ プラグインをインストールし
【WordPress】多言語対応プラグインPolylangでhome_url()を使うときに気を付けること | バシャログ。
みなさんこんにちは、yamashitaです。 6月からクーラーをフル稼働していて8月にはどうなっていることやら心配です。 さて今回はPolylangプラグインを設定している状態でhome_url()を使う際の注意点を一つ紹介したいと思います。 Polylangとは 設定することで多言語ページのURLを設定してくれるプラグインで、各投稿・ページにも対応するページが存在するか一覧で確認できるようになります。 今のところ自分は使用していませんが、有料版には自動翻訳もあるようです。 home_url()の動作 テンプレート上で使用する場合はほとんど通常時と同じ感覚で使って大丈夫です。 出力内容は以下の通りです。 デフォルト言語ページの場合、http://example.co.jp/の様にトップのURLがそのまま出力されます。 他の言語ページの場合、http://example.co.jp/enの様
JSでエクセルを扱う ( SheetJS js-xlsx が凄い ) | バシャログ。
どうもfujiharaです。本日はブラウザJSでエクセルを扱える、SheetJS js-xlsx を紹介します。 背景 あるデータをブラウザ上で表示したいが、スプレッドシート(apiを利用)やCSVファイルを編集(エクスポート)するのは 避けたいということで探していたところ、npmにSheetJS js-xlsxというものがありました。 サンプル 今回はエクセルからHTML, CSV(配列)への変換をします。 npm インストール npm install xlsx csv-parse javascript ※IE11対応の場合の箇所追記しました。 import XLSX from 'xlsx'; import parse from 'csv-parse'; //IE11対応の場合は import parse from 'csv-parse/lib/es5'; fetch( '/data/s
Highcharts.jsでドーナツグラフを表示させたい！ーその３.タイマー機能を作る | バシャログ。
『ドラゴンクエストⅪ』を、嫁の分も合わせて2本予約をした kouraku です。 『GUNDAM VERSUS』は7月6日発売、そして『ドラゴンクエストⅪ』は7月29日発売・・・ 今からこの怒涛の7月をどう乗りこなすか、悩み事は尽きませんね。 さて今回は、前回作成したドーナツグラフを元に、更に応用してタイマー機能を作っちゃおう！ という内容をメモメモ。 【前回の記事】 【この記事で必要な知識】 HTML/CSS JavaScript jQuery 前回のおさらい 前回作成したドーナツグラフは、以下のようなものでした。 今回は、このサンプルを元にタイマー機能を作ります。 タイマー用にHTMLを変更する まずはHTMLを少しだけ変更します。 [pug] .wrap #container .count-wrap .num 60 ドーナツグラフを表示させる #container を .wrap で
Webページに動画を埋め込んでみたくなりました。 | バシャログ。
最近Delphiにはまりそうなyamashitaです。「これで簡単に検証に役立つツールなんて作れたらなあ」なんて妄想してます。 さて今回紹介するのはHTMLで動画を再生させるVideoタグです。 動画をページに埋め込みたかったのでいくつか動画を再生する方法を調べましたが一番簡単そうに見えたので採用しました。 ご存知の方も多いかと思いますが、備忘録にお付き合いいただければと思います。 第一関門～クリックしても再生できない～ 埋め込むだけならすぐできました。ソースとサイズを指定してタグで囲むだけです。 <video width="100"> <source src="/movie/sample.mp4"> </video> ですがこれだと問題がありました。サムネをクリックするだけでは再生されないのです。 何度クリックしても再生されません。なんとか右クリックからできましたが、普通そこまで頭が回り
kouraku的、Macで仕事するときの３種の神器（アプリ）！ | バシャログ。
「シーブレインアドベントカレンダー2017」7日目担当するのは、kouraku です。おはこんばんちわ。 「これがないと仕事にならない！」というテーマの元、シーブレインスタッフが12月1日からクリスマスまで、毎営業日に記事を投稿しておりますが、前回はつぼログ。から fukazawa さんによる「ライムグリーンのぼよいやつ」でしたね。「ぼよいやつ」って何だろう？この不思議なタイトルだけで、ついついクリックしてしまいます（笑） ハイ、ということで、ワタクシ kouraku が思うところの「これがないと！」 MacとWindows、使用状況はハーフハーフ コーダーの仕事として、Windows歴が長い kouraku も、最近はMacで仕事を完結させることが多くなってきました。とはいえ、やはりWindowsでの表示・動作確認は行わないといけないし、案件によってはWindowsでしか開発ができなかっ
これって使えたっけ？今だからこそ IE8 対応コーディングのポイントをおさらい | バシャログ。
こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体
JavaScriptでSNSのカウンターを取得する | バシャログ。
どうもfujiharaです。 連日の雨・雨・雨。人生で今年が一番梅雨を感じれる年かなと。 本日は先日弊社 Latin から紹介がありましたバシャログリニューアルのポイント3 めっちゃ重かったソーシャル周りのスクリプトを非同期かつ、 カウント数のみをJSONで取得する仕様に変更 についての実装方法を説明します。 流れ たいした流れではないのですが、各SNSのAPI用URLに取得したい記事のパラメータを付随し、問い合わせをするとjson形式で値が取得できます。 はてブ数の取得 はてブ数の取得方法です。 // 問い合わせURL は "http://api.b.st-hatena.com/entry.count" // クエリーは url となります。 <script> $.ajax({ url:'http://api.b.st-hatena.com/entry.count' + '?url='
つかえる。チェックツールまとめ | バシャログ。
こんにちは。mackyです。 今日は、安心の品質をお届けするために使える賢いちょっとしたツールたちを紹介して、私はGW気分に突入しようと思います。GWは実はまだ予定がない…家に引きこもってサイトでも作ってみようかな…ちくしょー！というそこの君。是非、使ってみてほしい。 ちなみに、今日ご紹介するツールは主にAlt、Title、META情報、リンクに関するもので、Chromeの拡張機能になります。 Popup Image Alt Attribute 一番シンプルなチェックツール。チェックしたい画像にカーソルを載せるだけで、フワりとAltが表示されます。はい。そんなに、画像数が多くない場合はこれでいいかもしれません。ただ、超急いでるときはそのフワり感にイラっとしてしまうかも。 Alt & Meta viewer フワらなくていいからスパッと出してくれ。という方や、画像数の多いECサイトなどにはこ
【Photoshop】人物を素早く切り抜く方法 | バシャログ。
こんにちは。mackyです。 もうすぐカレーの季節ですね。「CSS カレー」で検索したら（暇じゃないです）「フレームワークはカレーのルーだ！」って記事が引っかかりました。 この一文でイメージがつかめる素晴らしい例えですね。カレーってすごいですね。（暇じゃないです） さて、今日はタイトル通り、人物をいい感じに素早くキレイに切り抜く方法をご紹介するのですが、特に人物の服と背景が同化しちゃってるような写真の場合に使える技だと思います。 使用するツールはPhotoshop CS5.1です。 こんな感じの写真を用意します。 ※ロイヤリティフリーの素材を使用しています。 ポイント1：レイヤーを最低2つ以上複製しておく。 複製はいくつあっても構いませんが、最低2つは複製しておいてください。背景はひとまず非表示にしておきます。 ポイント2：明度を下げてしまおう。 一番上のレイヤーを選択し、調整レイヤーから
「なんとなく」を解消。z-indexを掘り下げてみた。 | バシャログ。
こんにちは。mackyです。 春なので、足元をスニーカーに変えて駅までダッシュしてみたら、ブーツでのダッシュより2分ほど早く駅に着けるようになりました。が、その分5分ほど長く寝てしまうようになったせいか、結局ギリギリです。そして汗だくです。夏にむけて、このダイエット法でいこうかと思います。 さて今日は、なにげにあやふやに理解していると痛い目にあう、z-indexについてまとめてみました。 スタックコンテキストとスタックレベル まず、重なりを自由に操るためには、スタックコンテキストとスタックレベルを理解しておく必要があります。 z-indexの意味やpositionとの併用のしかたをどれだけ知っていても、ここを理解していなければあまり意味がありません。 しかし、私は何度か説明を読みましたが、最初はほぼ意味不明。 とりあえず説明してみます。 スタックコンテキストとは ざっくり言うと、同じスタッ
CSS で「吹き出し」をつくってみる | バシャログ。
こんにちは。mackyです！ 最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。 よかったら読んでみてください。 では、早速。 HTML HTMLはこの一行。 <div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div> CSS：スタンダードな角丸長方形 使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。 .baloon { width: 400px; padding: 10px; background: #FF3399; position: relative; color: #fff; border-radius: 5px; text-align: center; } .baloon:before { content: ""; position: absolu
【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形する | バシャログ。
今年も残り1ヶ月になりました、そろそろ娘へのクリスマスプレゼンの準備をしなくては… ishida です。 さて今回は、grunt-csscomb についてです。 grunt-csscomb は CSSのプロパティをソートしてくれるプラグインです。 コードを記述する際に並び順を意識することなくコーディングを進められるのでとても便利です。 しかしデフォルトのまま使用すると以下のような感じになります。 無駄な改行や { 前での折り返しなど気になる点が多々あります。 このコードを整形するには、configファイルで設定します。 Gruntのcsscombオプションでjsonファイルを指定 まず、Gruntfile.js にて csscombオプションでjsonのファイルを以下のように指定します。 grunt.initConfig({ csscomb: { options: { config: 'c
chrome デベロッパーツールのマルチデバイス開発向け機能「デバイスモード」 | バシャログ。
朝晩が寒くなりつつあり、戦々恐々としている kimoto です。寒いの嫌い。暑いのも嫌いだけど。 さて、すでに知っている人はもちろん沢山いると思いますが、chrome のデベロッパーツールの中の「デバイスモード」が便利なので、さらっとご紹介。 デベロッパーツールとは デベロッパーツールは右上の「三」みたいなアイコンから、「その他ツール」→「デベロッパーツール」で使えます。 デベロッパーツールは、HTML 構造の確認や読み込み時間の測定、JavaScript のデバッグツールなど、機能は多岐にわたります。 その中で今回紹介するのは「デバイスモード」です。 デベロッパーツールの左上の携帯アイコンからデバイスモードに入れます。 デバイスモードのここが便利！いろいろなデバイスをシミュレートできる デバイスモードに入ると、画面はこんな感じになります。 左上の「Device」というところのプルダウンを
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。
こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント（480px）を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</
【Photoshop】作業効率UPするTipsを集めました。 | バシャログ。
9月6日（土）新木場ageHaでの、WIRED CLASHでA.MochiとLEN FAKIが楽しみなokadaです。 今回は、Photoshopの作業効率UPするTipsを集めました。 選択したもの以外非表示にする。 レイヤーの枠内の目アイコンを[Alt]キーを押しながらクリック。 作成中の選択範囲の移動 選択範囲を作成中にSpaceを押しながらドラッグで移動。 不透明度変更 変更をしたいレイヤーを選択し、数字を入力して変更。「4」だと40％、「22」だと22％。 オブジェクトから選択範囲作成 レイヤーのサムネイルを[Ctrl]キーを押しながらクリック。 スポイトツールでPhotoshop外の色をひろう 1.スポイトツールを選択 2.キャンパスでクリック 3.そのままドラッグして任意の場所の色をひろう レイヤーの重ね順を変更 移動したいレイヤーを選択し、、[Ctrl]+[]] で上に移動
なんだかちょっと楽しい...。フォームの新しい入力属性と疑似クラス | バシャログ。
こんにちは。mackyです。いやー、夏ですね。夏が終わったらもう年末ですね。私は毎年この時期から猛スピードで一年が終わります。早く走らないと。。詳しくはコチラをご覧ください。 さて、今日は、HTML5で新しく追加された入力属性にちょっと「なんか楽しいかも...」と感じたので、この気持ちが冷めないうちにまとめることにしました。 autofocus オートフォーカス。 ページを開いたときにフォーカスされるようになる。ちなみに、emailはHTML5で追加されたtype属性の値で、メールアドレス専用のキーボードを表示させることが出来る。 <form> <label>お名前: <input type="text" name="name" class="text" autofocus/></label> </form> お名前: autocomplete オートコンプリート。 入力候補はdatali
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Windows 版 SourceTree で "POTENTIAL SECURITY BREACH!" という警告が出たときの対処 | バシャログ。