umeyuka

東京でwebデザイナーをしています

umeyuka

東京でwebデザイナーをしています

Contactform7を静的ページで表示

Contactform7を表示したい静的ページに記載（DOCTYPEより上に） <?php require("../wp/wp-load.php"); ?><!DOCTYPE html> ヘッダーとフッターに記載 //ヘッダー閉じタグの上に<?php wp_head(); ?></head> <body>//ボディ閉じタグの上に<?php wp_footer(); ?></body> 問合せフォームを埋め込みたい場所にショートコード <div><?php echo

umeyuka

    • WP固定ページのショートコード

      WP固定ページのルールとして、固定ページのテキストエディターにphpコードを記述することはできない。 PHPをかくときは、 ①ページテンプレートを使う ②ショートコードを使う どちらかになる。 今回は②のショートコードについて。 １.functions.php内に以下の記述 function my_php_Include($params = array()) {extract(shortcode_atts(array('file' => 'default'), $para

      umeyuka

      • 疑似要素のサイズ指定

        /*--- 背景画像としてwidth・height指定可能 ---*/.ex:before { content: ''; display: inline-block; width: 40px; height: 40px; background-image: url(../img/ex.jpg); background-size: contain; vertical-align: middle;}/*--- width・height効かない ---*/.ex:before {

        umeyuka

        • githubのイレギュラー備忘録

          ■起きたこと ・githubのパスワードを失念 ・二段階認証設定していた＋スマホ変更したため二度とログインできない ★2段階認証システム 機種変更時の再設定方法 ・新しいgithubアカウント作成 ↓ ・今まで使っていたgithub desktopをサインアウトし、新しいgithubアカウントでサインイン（サインインはできていること確認） ・git cloneしようとしても、「Please tell me who you are」の表示 　　★git config --glo

          umeyuka

        Contactform7を静的ページで表示

        umeyuka

          レスポンシブについて

          レスポンシブデザインとは、見る人のデバイス（パソコン、 タブレット、モバイルなど）に関係なく、共通のURL・HTML・CSSで画面サイズに応じてレイアウトやデザインを変えることを言います。 ★共通のURL・HTML・CSSでかくため、管理が簡単 ★URLが統一されていることで、シェアしやすい ★Google検索アルゴリズムに対応できる PCとスマホでURLをわけて表示させるという方法もあるが、Googleは推奨していない。（現在モバイルユーザーがPCユーザーを上回っている

          umeyuka

          レスポンシブについて

          umeyuka

          counter-increment備忘録

          ちょこちょこ使う連番CSS <!-- html --><div class="cake_wrap"> <div class="cake_wrap_item"> <h2>ショートケーキ</h2> <p>苺が乗った生クリームたっぷりのケーキ</p> </div> <div class="cake_wrap_item"> <h2>モンブラン</h2> <p>栗のクリームが山の形のようになったケーキ</p> </div

          umeyuka

          counter-increment備忘録

          umeyuka

          javascriptで一括税込価格にしたいとき

          今まで税抜き表記だった部分を、税込表記に変更したいときのcode備忘録！ <!-- html --><h1>ケーキ屋さん</h1><h2>好きなケーキを選んでね</h2><table class="c-wrapp"> <tr> <th>ショートケーキ</th> <td>500円</td> </tr> <tr> <th>モンブラン</th> <td>1000円</td> </tr> <tr> <

          umeyuka

          javascriptで一括税込価格にしたいとき

          umeyuka

          npm

          npmとは何か？ Node Package Managerの略でnpmという。 Node.jsのパッケージを管理するもの。 （Node.jsはサーバーサイドのJavaScript） npmコマンド //バージョン確認$ npm -v$ npm --version$ npm version//対話形式でpackage.jsonを生成$ npm init//対話形式の答えを全部yesでpackage.jsonを生成$ npm init -yes//ローカルへインストール$ n

          umeyuka

          npm

          umeyuka

          CX DIVE

          4/17(水)「テクノロジーにより進化するコミュニケーションとCXの未来」 御登壇者 ユカイ工学株式会社　青木さん 株式会社Synamon　武樋さん ハフポスト　南さん ユカイ工学株式会社概要 - ユカイなロボティクスで世界をユカイにする。 - すべての家庭にロボットが当たり前にある世界 - 去年リリース「Qoobo」 3/30にファンミーティングを行った。 - Bocco（見守りロボット）お年寄りユーザー増えている。 株式会社Synamon概要 - VRを活用

          umeyuka

          CX DIVE

          umeyuka

          Amazon Rekognition事前準備

          1：Amazon Rekognitionとは 公式サイトはこちら。 1）高精度な顔分析および顔認識が可能。 2）イメージ分析用 「Amazon Rekognition Image」 と、ビデオ分析用 「Amazon Rekognition Video」の2つのAPIがある。 2：事前準備 Rekognitionを使うために、まずは事前準備が必要。 今回やりたいこと＝画像がアップロードされたら、その人物がS3バケット内に保存されている画像と一致するかどうか？を返して欲しい。（

          umeyuka

          Amazon Rekognition事前準備

          umeyuka

          SCSSとSASS

          SCSSとSASSについてのアウトプットです。 1）Rubyをインストール（Macの場合は予め入っているので不要） RubyInstaller $ ruby -v //rubyのバージョン確認。出なければインストール必要 2）Sassのインストール（Mac版） SCSSを使う場合もこちらを行う。 ＄ sudo gem install sass　//インストール$ sass -v　//バージョン確認： 表示されればOK 3）Sassの監視（watch） フォルダを指

          umeyuka

          SCSSとSASS

          umeyuka

          Slack×GAS連携（"みやもとさん"シンプルVer)

          こんにちは。 勤怠管理の方法の一つとして、SlackとGAS（スプレッドシート）を連携してみることになり、二日間苦戦していたのでnoteに残すことにしました。 本家：みやもとさんは本当に便利！すごいなあと思います。 詳しい連携方法は本家githubを確認して頂くとして、シンプルにメモしていきます。 1）GoogleAppsScript作成 ・GoogleAppsScriptにて、githubのmain.js内コピペ。 ・GAS内のsetUp関数を実行し、「Slack Ti

          umeyuka

          Slack×GAS連携（"みやもとさん"シンプルVer)

          umeyuka

          gitについて

          gitコマンドの記録。 リモートリポジトリの作成と、gitにユーザー名とメールアドレスは登録済みの状態以降のお話です。 1）.git ディレクトリの作成 作業しているディレクトリへ移動し、下記コマンドを入力。 $ git init 2）リポジトリへの登録 $ git add [オプション]$ git add hoge.html 　//hoge.htmlファイルのみを指定$ git add *.html //.htmlの全ファイルを指定$ git add . /

          umeyuka

          gitについて

          umeyuka

          Netlify⇔github連携

          Netlify⇔github連携についてのまとめ。 1：githubアカウントを作成する。（詳細は割愛） 2：githubリポジトリ新規作成 　1）Repository nameを付けてCreate。 3：ローカルからgithubリポジトリへpush 　1）ターミナルで「作成したディレクトリ（ファイル）」内へ移動し以下（二行目以降）を打つ。 MacBook: username$ cd hogehoge　//(移動したいディレクトリに移動する)MacBook: hoge

          umeyuka

          Netlify⇔github連携

          umeyuka

          Vue.jsコンポーネント①

          今日はコンポーネント（1）について。 1：コンポーネントとは？ html要素の一つのかたまり（例えばヘッダーなど）のこと。UIを部品化し、同じWebサイトの異なるページでも再利用可能にしたり、管理しやすくするためのツールの一つである。同じようなコードを何回も繰り返すと煩雑になってしまうため、シンプルにわかりやすくコンポーネント化しておくことで開発効率を高められる。 2：コンポーネントのメリット ・再利用性が高まり、開発効率を上げることができる。 ・既存コンポーネントを再利

          umeyuka

          Vue.jsコンポーネント①

          umeyuka

          UXデザインについて②

          1：ミラーの法則 人間が短期的に記憶できる情報量の限界が「7±2」であると、認知心理学者のジョージ・A・ミラー氏は発表した。これはかたまりの数を意味していて、7±2にまとめると記憶しやすいという。 例）電話番号0123987456　　　　　　→　電話番号 0123-987-456レストラン名叙々苑ABCDE店　→　レストラン名 叙々苑 ABCDE店 ユーザーに記憶・認識してほしい情報項目内では、この法則に乗っ取ってわかりやすく表示するなどするとよい。 2：ヒックの法則

          umeyuka

          UXデザインについて②

          umeyuka