goto_jp のアーカイブ

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

2017年10月6日

http://web-tan.forum.impressrd.jp/e/2017/10/04/26906 こちらで紹介されていた情報収集の方法が良いなと思ったので、自分も真似して実践した内容を紹介します。 ### 前提 冒頭の記事ではFeedlyとPocketの併用で紹介されていましたが、ツールを分散させるのが面倒かつPocketは私用に使っているのでFeedlyの「**Read later**(あとで読む)」で代用します。 ### Feedlyの設定
続きを読む

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

2017年10月3日

`previous_posts_link()`, `next_posts_link()`、これらはWordPressのアーカイブページで「前の一覧」「次の一覧」といったページネーションリンクを出すための関数ですが、なぜかリンク切れを起こしていたので対処しました。 ### 状況:出力されるURLと実際のURLにズレがあった 以下のカテゴリー「hoge」にページネーションを置きたいと仮定する。 **example.com/hoge/** ここで `next_p
続きを読む

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

2017年9月22日

WordPressには各種SNSボタンを表示するプラグインは多数ありますが、利用数の多い人気プラグインですら自前ドメインからリダイレクトを挟んだり怪しい挙動をするのでプラグイン無しで実装する方法を紹介します。 採用しているボタンは以下4つ。 * Facebookのいいねボタン * Twitterのツイートボタン * はてなブックマークの登録ボタン * LINEのいいねボタン PHPコードからCSSまで、**FacebookのappId**が必要な箇所以
続きを読む

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

2017年9月8日

Sassのビルド時にいつの間にか以下のWARNINGが出ていることに気付いた。 ``` DEPRECATION WARNING on line 000 of ***_common.scss: #{} interpolation near operators will be simplified in a future version of Sass. To preserve the current behavior, use quotes: unquote("
続きを読む

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

2017年9月7日

WordPressで「post」と言うと投稿データのことですが、WordPressの記事内にフォームを作り「**POST**」データを送受信する方法です。 投稿本文欄でPHPを扱えるようにするプラグインならよりイージーにできますが、セキュリティの懸念もあるため使いません。プラグインに頼らずWPが本来備えている function.php の**ショートコード機能**を利用します。 ### 概要 **ページA**のフォームからPOSTでデータを送り、 **ペー
続きを読む

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

2017年8月9日

See the Pen Pugのループ処理 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTMLのメタ言語 **Pug** (旧名Jade)の、forとeachを使ったループの書き方サンプルです。 jsonと相性よさそうなのが分かりますね。
続きを読む

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

2017年8月4日

実は標準機能に「保存時に自動フォーマット」が存在していた。 基本設定 -> 設定 を開き、右側のユーザー設定に以下を追加する。 ``` "editor.formatOnSave": true, ``` これまでいちいち手動で `alt + shift + F` していた時間を返してほしい。
続きを読む

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

2017年8月2日

``` */5 * * * cd /hoge/fuge; node hoge.js ``` 上記cronで、5分おきに ```/hoge/fuga``` にcdして```hoge.js```を実行する。 セミコロン```;```を入れることでコマンド行を区切ることができる。 コード内で相対パスが記述されている場合、ディレクトリ移動しないとエラーが発生するためこうした方が良い。
続きを読む

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

2017年6月28日

* **目的:** トップページのスライド画像の更新を、固定ページから簡単に行いたい。 * **問題:** `` ベースの画像をそのまま引っ張ってくるとレスポンシブ対応がつらい。 固定ページに下記のHTMLを書いていたとする。 ``` ``` ただ表示するだけならこのままでもいいが、前述の **問題** がある。この画像を、何とかしてCSSの `background-image` で扱うように変更したい。 ### スライドを呼び出すWo
続きを読む

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

2017年6月2日

一昔前はヘッダーやフッターの固定にCSSやJavaScriptでやたら工夫が必要でしたが、今はGrid一つで簡単・安全にできます。 See the Pen Grid only App layout sample by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ### HTML ``` header ... ... foo
続きを読む

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

2017年5月31日

CSSでフォントをマスク化する方法です。 マスクされてることが分かりやすいようhoverアニメーションも付けてます。 See the Pen CSS3 Text Mask by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ### CSS マスクに関わる箇所は以下の部分です。 ```css h1 { 〜 color: transparent; background: url("{画像}
続きを読む

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

2017年5月16日

以下はGridレイアウトで画面全体をレイアウトした例です。 ブログによくあるレイアウトですが、Gridレイアウトでは**列と行**が要のため赤線を入れています。 See the Pen CSS Grid layout test 4 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ### HTML ```html ヘッダー メイン ナビゲーション 広告 サイド
続きを読む

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

2017年4月25日

Gridレイアウトで幅指定をする際に「fr」という値を使えます。 See the Pen CSS Grid layout test 2 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記のグリッド指定のCSSは以下のようにしています。 ``` grid-template-columns: 1fr 2fr 3fr 1fr; grid-template-rows: 1fr 2fr 3fr; ```
続きを読む

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

2017年4月19日

まずはサンプルをご覧ください。 See the Pen CSS Grid layout test 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記サンプルは10個のdivタグにGridレイアウトを適用したものです。 今回はGridレイアウト用プロパティを3つ使っています。この3つだけ覚えれば一般的なWebデザインなら実用に耐えうるレイアウトができます。 * grid-template-c
続きを読む

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

2017年2月28日

同一ファイルの別シートではなく、別のファイルにある値を参照したい…そんな時に使えるのが **IMPORTRANGE** 関数。 ``` IMPORTRANGE("abcd123abcd123", "シート1!A1:C10") ``` 一つ目の値は**スプレッドシートキー**で、GoogleスプレッドシートのURLの下記赤字部分に当たります。 https://docs.google.com/spreadsheets/d/**********/ QUERY 関
続きを読む

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

2017年1月24日

サンプルは以下。 See the Pen Google Chat Custom Tooltip 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 同じデータのグラフですが、下のものはマウスオンしたときのツールチップに「個」と書き加えています。 グラフ描画の直前に下記コードでフォーマットを書き換えています。 ``` var formatter = new google.visualizatio
続きを読む

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

2017年1月19日

こんにちは、ゴトーです。 最近ちょくちょくロゴにSVGアニメーションを利用しているサイトを見るので、試しにやってみたところJSライブラリなど使わず簡単にできたのでご紹介します。 「[HTMLでSVGを描画する](https://hacknote.jp/archives/24634/)」でSVGの描画について書きましたが、この描画方法にCSSを加えてアニメーションさせます。在りし日のFlashを彷彿とさせる動きができます。 See the Pen SVG
続きを読む

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

2017年1月12日

こんにちはゴトーです。 タイピング中に delete と間違えて一番右上にある Eject キーを押すことが結構あり、さすがにストレス溜まるのでキー割り当てを変えられないか探してみたら丁度よいソフトがありました。 [Karabiner](https://pqrs.org/osx/karabiner/index.html.ja) ### 使い方 1. [Karabiner](https://pqrs.org/osx/karabiner/index.htm
続きを読む

HTMLでSVGを描画する

2017年1月6日

あけましておめでとうございます、ゴトーです。 子供の頃から毎年浅草寺に初詣に参拝して、屋台の甘酒を飲んで新年を感じてます。 新年一発目の投稿は、そろそろスタンダード化してほしいSVGの利用について。スマホ用画像を何個も作るとか面倒じゃないですか。SVGで楽しましょう。 SVGの使い方は3つあります。 1. IMGタグでsvgファイルを呼び出す 2. SVGタグで直接記述する 3. USEタグで使いまわす 1は従来の画像の使い方と変わらないので
続きを読む

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

2016年12月1日

[日本語フォントこそ指定したい自動カーニング](https://ics.media/entry/14087) こちらを拝見して今まで知らなかったCSSプロパティに衝撃を受けたのでサンプルを作りました。 See the Pen font-feature-settings Test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. カーニング調整がされている方に指定しているCSSは下記のみ。 ```
続きを読む