goto_jp さんのアバター 81views

Feedlyで超高速情報収集をするための設定・手法

http://web-tan.forum.impressrd.jp/e/2017/10/04/26906 こちらで紹介されていた情報収集の方法が良いなと思ったので、自分も真似して実践した内容を紹介します。 前提 冒頭の記事ではFeedlyと 2017年10月6日
goto_jp さんのアバター 21views

previous_posts_link、next_posts_link がリンク切れ(404)するので対応した

previous_posts_link(), next_posts_link()、これらはWordPressのアーカイブページで「前の一覧」「次の一覧」といったページネーションリンクを出すための関数ですが、なぜかリンク切れを起こしていたので 2017年10月3日
goto_jp さんのアバター 49views

【コピペ可】WordPressにプラグインなしで「いいね」などSNSボタンを表示する

WordPressには各種SNSボタンを表示するプラグインは多数ありますが、利用数の多い人気プラグインですら自前ドメインからリダイレクトを挟んだり怪しい挙動をするのでプラグイン無しで実装する方法を紹介します。 採用しているボタンは以下4つ。 2017年9月22日
goto_jp さんのアバター 15views

Sass:変数+%でプロパティ値をビルドするとWARNINGが出る

Sassのビルド時にいつの間にか以下のWARNINGが出ていることに気付いた。 DEPRECATION WARNING on line 000 of ***_common.scss: #{} interpolation near opera 2017年9月8日
goto_jp さんのアバター 41views

WordPressのページ間でPOSTデータを送受信する

WordPressで「post」と言うと投稿データのことですが、WordPressの記事内にフォームを作り「POST」データを送受信する方法です。 投稿本文欄でPHPを扱えるようにするプラグインならよりイージーにできますが、セキュリティの懸 2017年9月7日
goto_jp さんのアバター 42views

Pugでリストをループ出力する

See the Pen Pugのループ処理 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTMLのメタ言語 Pug (旧名Jade)の、forとeachを使ったループの書き方サンプルです。 2017年8月9日
goto_jp さんのアバター 33views

Visual Studio Code:保存時に自動フォーマットする

実は標準機能に「保存時に自動フォーマット」が存在していた。 基本設定 -> 設定 を開き、右側のユーザー設定に以下を追加する。 "editor.formatOnSave": true, これまでいちいち手動で alt + shift + F 2017年8月4日
goto_jp さんのアバター 42views

cronで複数行コマンドを叩く

*/5 * * * cd /hoge/fuge; node hoge.js 上記cronで、5分おきに /hoge/fuga にcdしてhoge.jsを実行する。 セミコロン;を入れることでコマンド行を区切ることができる。 コード内で相対パ 2017年8月2日
goto_jp さんのアバター 70views

WordPress:投稿記事のHTMLをPHPにパースして自由自在に扱う

目的: トップページのスライド画像の更新を、固定ページから簡単に行いたい。 問題: <img> ベースの画像をそのまま引っ張ってくるとレスポンシブ対応がつらい。 固定ページに下記のHTMLを書いていたとする。 <li> 2017年6月28日
goto_jp さんのアバター 52views

CSS3:Gridレイアウトで簡単に作れるモバイル用レイアウト

一昔前はヘッダーやフッターの固定にCSSやJavaScriptでやたら工夫が必要でしたが、今はGrid一つで簡単・安全にできます。 See the Pen Grid only App layout sample by Kazuyoshi G 2017年6月2日
goto_jp さんのアバター 155views

CSS3:フォントで画像をマスクする

CSSでフォントをマスク化する方法です。 マスクされてることが分かりやすいようhoverアニメーションも付けてます。 See the Pen CSS3 Text Mask by Kazuyoshi Goto (@KazuyoshiGoto) 2017年5月31日
goto_jp さんのアバター 118views

CSS Gridレイアウト入門:グリッドの結合と列番号・行番号の概念

以下はGridレイアウトで画面全体をレイアウトした例です。 ブログによくあるレイアウトですが、Gridレイアウトでは列と行が要のため赤線を入れています。 See the Pen CSS Grid layout test 4 by Kazuy 2017年5月16日
goto_jp さんのアバター 340views

CSS Gridレイアウト入門:「fr」でのサイズ指定

Gridレイアウトで幅指定をする際に「fr」という値を使えます。 See the Pen CSS Grid layout test 2 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記のグリ 2017年4月25日
goto_jp さんのアバター 212views

CSS Gridレイアウト入門:基本の3プロパティ

まずはサンプルをご覧ください。 See the Pen CSS Grid layout test 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記サンプルは10個のdivタグにGridレ 2017年4月19日
goto_jp さんのアバター 72views

IMPORTRANGE関数で外部のスプレッドシートファイルを参照する

同一ファイルの別シートではなく、別のファイルにある値を参照したい…そんな時に使えるのが IMPORTRANGE 関数。 IMPORTRANGE("abcd123abcd123", "シート1!A1:C10") 一つ目の値はスプレッドシートキ 2017年2月28日
goto_jp さんのアバター 137views

【Googleチャート】ツールチップのフォーマットを書き換える

サンプルは以下。 See the Pen Google Chat Custom Tooltip 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 同じデータのグラフですが、下のものはマウスオン 2017年1月24日
goto_jp さんのアバター 2,408views

CSSだけでSVGをアニメーションさせる

こんにちは、ゴトーです。 最近ちょくちょくロゴにSVGアニメーションを利用しているサイトを見るので、試しにやってみたところJSライブラリなど使わず簡単にできたのでご紹介します。 「HTMLでSVGを描画する」でSVGの描画について書きました 2017年1月19日
goto_jp さんのアバター 140views

MacのEjectキーに別の挙動を割り当てる

こんにちはゴトーです。 タイピング中に delete と間違えて一番右上にある Eject キーを押すことが結構あり、さすがにストレス溜まるのでキー割り当てを変えられないか探してみたら丁度よいソフトがありました。 Karabiner 使い方 2017年1月12日
goto_jp さんのアバター 298views

HTMLでSVGを描画する

あけましておめでとうございます、ゴトーです。 子供の頃から毎年浅草寺に初詣に参拝して、屋台の甘酒を飲んで新年を感じてます。 新年一発目の投稿は、そろそろスタンダード化してほしいSVGの利用について。スマホ用画像を何個も作るとか面倒じゃないで 2017年1月6日
goto_jp さんのアバター 203views

文字詰め(カーニング)をCSS1行で設定する

日本語フォントこそ指定したい自動カーニング こちらを拝見して今まで知らなかったCSSプロパティに衝撃を受けたのでサンプルを作りました。 See the Pen font-feature-settings Test by Kazuyoshi 2016年12月1日
goto_jp さんのアバター 124views

WordPressのContactform7だけで作る簡易招待システム

下記仕様の「招待システム」をWordPressのContactform7とJavaScriptのみで実装する方法です。 フォームを送信すると自分の招待コードが発行される 招待コードとフォームURLを友達に伝え入力してもらう 招待コードを入力 2016年11月18日
goto_jp さんのアバター 75views

A-Frame入門:a-cylinder(円柱)とa-sphere(球)

「A-Frame」の<a-cylinder>について紹介します。 サンプル See the Pen A-Frame Basic : cylinder by Kazuyoshi Goto (@KazuyoshiGoto) on C 2016年11月11日
goto_jp さんのアバター 40views

【PHP】特定の月の末日を取得する

echo date('Y-m-t', strtotime("2016-11-01")); 日付フォーマットの「t」はその月の日数を返すので、必然的に末日になる。 2016年11月9日
goto_jp さんのアバター 810views

【JavaScript】MutationObserverでDOMを監視する

ボタンクリックなどユーザが自発的にするイベント以外で、「ある要素がある状態になった時」にイベントを発生させたい時、その「ある要素」を監視する必要があります。そんな時にMutationObserverを使うことで解決します。 サンプル See 2016年11月4日
goto_jp さんのアバター 427views

MS Edge で placeholderが消えてしまう問題の解決

Windows10のEdgeでフォームを確認したら、inputフィールドからplaceholderが消えてしまっていた。 同じくWin10のIE11で確認したらplaceholderがちゃんと表示されていたので、何退化しとんじゃと思って対策 2016年10月31日
goto_jp さんのアバター 65views

Facebook Messengerで送るリンク

Facebookの「いいね」や「シェア」ではなく、特定の人へMessenger形式で送るためのリンク。 AppIDが必要な点に注意。 設定については公式ドキュメントを参照してください。 なお「いいね」や「シェア」と同じく、投稿本文の内容はい 2016年10月28日
goto_jp さんのアバター 227views

A-Frame入門:a-planeとa-box

最近ハマっている、HTMLだけでVR空間を作れるライブラリ「A-Frame」について紹介します。 準備 ヘッダーでA-Frameのライブラリを読み込む必要があります。今回のサンプルは下記のCDNを使っています。 https://cdnjs. 2016年10月27日
goto_jp さんのアバター 117views

ヒラギノ角ゴが太く見える問題を解決する:その2

以前下記の内容を書きました。 ヒラギノ角ゴが太く見える問題を解決する MacOSが El Capitan 以降の人ならこれで解決しますが、それ以前の人は解決しません。 旧式の「ヒラギノ角ゴPro」が当たってしまい、SafariとChrome 2016年10月20日
goto_jp さんのアバター 100views

CSSだけで数値をカウントし表示する

サンプルはこちら。 See the Pen counter-increment test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTMLにもCSSにも数値は書いておらず、連番リスト(o 2016年10月5日
goto_jp さんのアバター 102views

iOSでtextareaの余白が大きくなる

input[type=text], input[type=password], textarea { 〜 padding: 15px; 〜 } 上記のようなCSSでフォームパーツに一括して余白を指定していたところ、PCでは問題ないがiOSだ 2016年10月4日