goto_jp さんのアバター 0views

WordPressにプラグインなしで「いいね」などSNSボタンを表示する

WordPressには各種SNSボタンを表示するプラグインは多数あるのですが、メジャーなものですらリダイレクトを挟んだり怪しい挙動をするのでプラグイン無しで実装する方法を紹介します。 採用しているボタンは以下4つ。 Facebookのいいね 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 さんのアバター 24views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 さんのアバター 65views

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

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

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

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

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

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

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

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

HTMLでSVGを描画する

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

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

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

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

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

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 さんのアバター 38views

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

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

【JavaScript】MutationObserverでDOMを監視する

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

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

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

Facebook Messengerで送るリンク

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

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

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

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

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

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

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

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

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

CSS3Dの基本

See the Pen CSS3D基本 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSだけで3D空間を作れます。 「Jade」、「Scss」表示の「VIEW COMPILED」からコンパ 2016年9月29日
goto_jp さんのアバター 176views

CSSだけで作る万華鏡

See the Pen kaleidoscope by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 「Jade」、「Scss」表示の「VIEW COMPILED」からコンパイル後のソースを確認でき 2016年9月27日