miiitaka さん プロフィール

  •  
miiitakaさん: てらこや.work
ハンドル名miiitaka さん
ブログタイトルてらこや.work
ブログURLhttps://www.terakoya.work/
サイト紹介文WordPressのテーマやプラグイン開発・JavaScriptなどのナレッジブログ
参加カテゴリー
更新頻度(1年)情報提供52回 / 281日(平均1.3回/週) - 参加 2017/07/28 17:59

miiitaka さんのブログ記事

  • Atomエディタのショートカットキーまとめ(コード編集)
  • 他のショートカットキーまとめAtomエディタのショートカットキーまとめ(タブ操作)ショートカットキー一覧(コード編集)今回はコード編集編。行の追加カーソルがある位置の行の上または下に空行を追加してくれます。これ意外と使う。Ctrl + ↑ + Enter(上に行を追加)Ctrl + Enter(下に行を追加)Command + ↑ + Enter(上に行を追加)Command + Enter(下に行を追加)行のコピー&ペーストカーソルがある位置の行をコピーして [続きを読む]
  • Atomエディタのショートカットキーまとめ(タブ操作)
  • 他のショートカットキーまとめAtomエディタのショートカットキーまとめ(コード編集)ショートカットキー一覧(タブ操作)GitHubが開発していることでおなじみのAtomエディタです。プログラミング教室のWebサイト制作の授業で生徒さん達に使用してもらっていて、効率よくコーディングしてもらうためにショートカットをおぼえてもらっています。自分自身もちょっと忘れることがあるので、覚書としてまとめておこうと思います。Windo [続きを読む]
  • Scratchで作成した変数を削除する方法
  • 最近イベントでScratchでプログラミング体験教室なんていうのを開いていまして。そのイベントで使用する資料を作る中でわからなかったことがあったのでメモしておく。作成した変数が削除できない不要になった変数を削除しようと思ってメニューなど探したが無いぞ……右 かと思ったのですがそれでも何も起こらず。調べてみるとどうやら、削除対象の変数にマウスカーソルを持っていき、「Shiftキー + 左 」で削除する [続きを読む]
  • Googleスプレッドシートで日付から曜日を表示する方法
  • TEXT関数を使って表示毎度忘れてしまうのでメモ。Excelではユーザー定義書式記号で「aaaa」を使いますが、GoogleスプレッドシートではTEXT関数を用いて第二引数に「d」を使って表示します。A1に「2018/1/9」と入力されている場合=TEXT(A1, "d") // 「9」と表示されます(日)=TEXT(A1, "dd") // 「09」と表示されます(日:2桁ゼロパディング)=TEXT(A1, "ddd") // 「火」と表示されます(曜日:略)=TEXT(A1, "dddd") / [続きを読む]
  • CSSのhover動作時に他の要素のCSSの値を変更する方法
  • li要素のhover時に子要素のCSSの値を変える考えてみたらものすごく単純だった。あまり使う場面はないと思うのですが、そういう要望があったので実装。なんでも商品一覧みたいなページをコーディングするにあたり、1つの商品をli要素として、li要素をhoverしたら、その子要素の画像とテキストをCSSのtransitionなどでアニメーションさせたいというもの。最初はJavaScriptでとも考えたのですが、CSSだけでできました。この使い方知ら [続きを読む]
  • .htaccessでファイル(拡張子単位)の有効期限を設定する方法
  • ブラウザのキャッシュを活用するGoogleのPageSpeed Insightの適用可能な最適化に「ブラウザのキャッ
    シュを活用する」という項目に対応する方法をメモ。Header set Cache-Control "max-age=2592000, public"
    ;Header set Cache-Control "max-age=604800, public"Cache-Control max-age最低7日間(604,800秒)以上にしない
    といけないようです。画像やWebフォント系は変更はそうそうないので、30日間に設定。CSS/HTML/JavaSc
    riptファイ [続きを読む]
  • WordPressのログイン画面のロゴ画像などスタイルを変更する方法
  • ログイン画面のカスタマイズ企業のWebサイトなんかをWordPressで制作することはよくあるのですが、管理画面(特にログイン画面)でWordPressで作りましたよ感が出まくっています。見る人が見ればどういうシステムで構築されているかなんて一目瞭然なのですが、実際に運営する人達に少しでも「自分達のWebサイトだ!」と愛着を持ってもらうためにログイン画面のアイコンやコーポレートカラーを使ってあげたい。ということでログイン [続きを読む]
  • リンク要素のhover時に下線をCSSでアニメーション表示させる方法
  • 線を引くようなアニメーションよくグローバルメニューなどにマウスオーバーするとその要素に下線がアニメーション表示されるのを見かけます。ちょっとしたアニメーションがあるだけで、気持ちおしゃれに見えるから不思議。ということで、HTMLとCSSでの下線アニメーションをまとめておきます。HTMLの以下のコードを使用して、CSSの設定を行います。 MENU01 MENU02 MENU03 MENU04 MENU05下線が左から右に引かれるアニメーション [続きを読む]
  • iOS(iPhone Safari)でclickイベントが発生しない場合の対処方法
  • ハンバーガーメニューの反応が悪いiPhoneユーザーから「ハンバーガーメニューの反応が悪い」と言われ、ちょっと調査した内容をメモ。最初にjQueryで以下のように設定していました。$("#button").on("click", function(){ // clickイベントの処理});#buttonはimg要素で、 イベントを実装しています。パソコンのブラウザでは特に問題なかったのですが、発売されたばかりのiPhoneXのSafariで動作確認したらやたら反応が悪い。 [続きを読む]
  • video要素のload()をjQuery3系用に書き換える方法
  • JavaScriptでHTMLのvideo要素を操作今まで、video要素のloadメソッドを以下のように書いていました。(jQueryを使用しています)$(function(){ $("#video要素のID").attr("src", "videoファイルへのパス"); $("#video要素のID").load();}jQuery3系を使ってみたかったWordPressの案件で使用していて、WordPress4.9.1現在でのWordPress同梱のjQueryのバージョンは1.12.4なのですが、これをjQueryの最新の3系にかえてみようと思って [続きを読む]
  • GoogleタグマネージャーでJavaScriptの配列指定と配列の長さを取得する方法
  • Googleタグマネージャーで配列の中身を取得したいJavaScriptの値をGoogleタグマネージャー(以下、GTM)で使用できるのは理解できているのですが、配列となった場合どうやら少し取得方法が異なる模様。例えば、以下のようなJavaScriptがあるとします。var foo = [];foo["bar"] = ["baz"];グローバル変数(配列)fooを定義して、foo["bar"]要素の文字列値、"baz"を取得したい。そこでGTMの変数→ユーザー定義変数で以下のように設定 [続きを読む]
  • 1行横並びのth/td要素を縦に並べるためのCSS設定方法
  • フォームのレイアウトにdl要素を使うかtable要素を使うか問題以下のようフォームがあるとします。これはtable要素でレイアウトしています。HTMLとCSSは以下の通り。 お名前 電話番号 table { border-collapse: collapse; width: 500px;}th,td { border: solid 1px #ccc; padding: 5px;}input { box-sizing: border-box; width: 100%;}いけてる人達はdl要素、dt要素、dd要素を華麗に回り込ませた [続きを読む]
  • CSSでbr要素を無効にする方法
  • レスポンシブサイトのコーディング時のbr要素ちょっと目からウロコだったのでメモ。あがってきたデザインがパソコン用のサイトの方は改行があるのに、スマフォ用は改行がない。うーん、改行するまとまり箇所をspan要素で囲って、CSSでblock要素化するかなーとも考えたんですけど、美しくない。そこで、ハッとなった。スマフォのサイズになった時にbr要素を無効にすれば良いんだと。そしたらできた。@media screen and (max-width: [続きを読む]
  • D3.jsで円グラフを作成する(テキストの追加)
  • 合計値を円グラフ中央に表示前回作った円グラフをもう少し改良。まずは円グラフの中央にグラフの合計値を表示させたい。円グラフの中央をあけるまずは円グラフの中央をあけます。前回デフォルト値で設定していたinnerRadisu(内円)の値をプラグインをコールするときに渡してあげます。$(function(){ $("#pieChart").D3PieChart({ "data": [50, 30, 20], "innerRadisu": 40 });});40をセットしたので直径40pxの内円が空き [続きを読む]
  • D3.jsで円グラフを作成する(jQueryでプラグイン化)
  • HTMLを準備D3.jsを使用して円グラフを作成します(v4:バージョン4)。jQueryでプラグイン化することを前提に作成したいので、jQueryもCDNで読み込みます。まずは基本のHTMLコードを以下のように書きます。 Pie Chart 11行目のid="pieChart"の要素内に円グラフを表示するためのプラグラムを、d3.pie-chart.jsファイルにコードを書いていきます。円グラフを表示するsvg要素を設定まずは円グラフを表示するsvg要素を指定し [続きを読む]
  • JavaScriptの配列・連想配列のキーの存在チェック方法
  • 配列キー値の存在チェック配列・連想配列のキーが存在するかのチェック方法のまとめ。通常配列のキー存在チェックチェック方法は、単純にif文に直接条件として設定すればよいです。var foo = [];foo.push("bar");foo.push("baz");if (foo[0]) { console.log(foo[0]);}連想配列のキー存在チェック連想配列もチェック方法は同じで、if文に直接条件設定。var foo = [];foo["bar"] = "barbar";foo["baz"] = "bazbaz";if (foo["bar"]) [続きを読む]
  • Google Analytics トラッキングコードのバージョンまとめ
  • gtag トラッキングコードいつの間にかGoogleAnalyticsのトラッキングコードにgtagが設定できるようになっていました。(2017/10/05確認)しかし、まだタグマネージャーには専用の設定メニューは出ていません。SearchConsoleとの連携も取れるか不明なので、とりあえず様子見といったところです。新規で実装することがあれば実験してみようかなと思いますので、追って追記する予定。これまでのトラッキングコード丁度資料を作ってい [続きを読む]
  • WordPressのヘッダー要素で必要ない情報を削除する方法
  • head要素内に自動で出力される情報を削除したいWordPressでテーマを作成するとhead要素内に自動で出力される情報があります。もちろん必要な情報もありますが、場合によっては出力されなくても良い情報もあります。これらはテーマ関数ファイルのfunctions.phpに削除処理を記述することで、出力しないようにできるのでそれをまとめておきます。meta name="generator"の削除meta情報のname属性の値「generator」は、文書の作成に使用 [続きを読む]
  • WordPressのテキストエディタにボタンを追加する方法
  • 毎回使うタグを登録しておきたいデータの移行をしていてどうしても手入力で記事を移動しなければいけない事案が発生して、せっせと移していたのですが、毎回同じタグ書くのが面倒…。基本、投稿のエディタはテキストモードでコーディングするのですが、タグを挿入できるボタン(クイックボタン)を追加したいと思い調査。さすがWordPress、APIがある。クイックタグAPIクイックタグAPIを使って追加してみます。Codexのリファレンス [続きを読む]
  • SVGでブロック崩し:circle要素でボールの生成と反射移動
  • SVGの基本図形:circle要素前回は、rect要素を生成してパドル(バー)を出現させました。今回は、ブロックにぶつけるボールを生成するのに、circle要素を使います。生成してからボールを動かしてみて、壁にぶつかったら反射するところまで作ってみたいと思います。初期設定ファイルにボールの初期値を格納またまた前回作成したblock-breaking-init.jsにボールの初期値を格納する変数を書き足します。〜略〜 paddle : { x : 250 [続きを読む]
  • PHPの名前空間(namespace)とuseの使い方の基本
  • クラス名の重複(衝突)PHPStormでコードを書いている時に以下のような警告が出ました。Other declaration of class Foo exist at foo1.php less…The inspection can produce two types of warnings:Undefined class: Declaration of referenced class is not found in built-in library and project files.Multiple declarations: this version of IDE *will* have problems with completion, member resolution and inheritance [続きを読む]
  • file_get_contentsやcURL(カール)でGETリクエストを送信する方法
  • APIをGETでコールして配列を取得したいちょっとしたプロジェクトで、他社サービスのAPIを利用する必要があったのでメモ。PHPからAPIをGETでコールして戻ってくるJSONデータ(文字列)をPHP用に配列にパースして戻す処理を書きたかったので書いた。/** * GET Request send. * * @param string $url * @param array $params * @return array|boolean $data */public function getJson( $url, $params = array() ) { if ( count( [続きを読む]