2017-02-15

備忘録 display:noneの代替

備忘録 CSS

display:none;は要素をまるごと消してくれる。具体的には高さや幅を維持せず本当に非表示にする。

visibility:hidden;は要素の高さや幅を維持したまま消してくれる。

visibility:hidden;

width:0;

height:0;

でdisplay:none;風のことができる。

visibility:hidden;の高さと幅を消すためにwidthとheightで0を指定している。

使い所

display:none;はtransitionの効果が反映されない。

であればvisibility:hidden;を使えばいいだろうと思ったのでやってみたら使えた。

aである要素をtargetしたときにdisplay:none;からdisplay:block;へとフェードをつけて切り替えたかった。しかしdisplay:none;からのアニメーション付き切り替えは不可能だとわかり、visibility:hidden;に乗り換えた。

visibility:visible;へ切り替える際、widthとheightの値をautoか任意の値にしてやる必要がある。

つまり

とりあえずこれでいく。

2017-02-11

備忘録 Gulpを使ってローカルでWordPress動かす

備忘録

あらすじ

　オリジナルテーマを作ってくれって学校から頼まれたので、とりあえずテーマ制作に便利な環境を整えようと思った。
　とりあえずWordPressを起動してダッシュボードに到達するところまで。

1. 必要なもの

① gulp-connect-php
　(PHP動かすやつ。必要に応じてその他のプラグインも)

② WordPress
　(多分最新版でいい)

③ SQLite Integration
　(WordPressをSQLiteで動かせるようにするWordPress用プラグイン)

④ PHP.exeとPHP.ini
　(XAMPPとかに付属してくるやつでいい。C:\xampp\php\ にある)

2. gulp-connect-phpのインストール

　プロジェクト用のフォルダを作り、そこにgulpとgulp-connect-phpをインストール

npm i --save-dev gulp gulp-connect-php

　とりあえず最小構成インストール。BrowserSyncとかgulp-sassとか必要に応じて。
　あとパス通してなかったらグローバルでgulpのインストールもしといてください。
　インストールが済んだらgulpfile.jsに書き込んでいきます。

gulp.task('connect-sync', function() {
  connect.server({
    base:'wordpress',
    bin: 'C:/xampp/php/php.exe',
    ini: 'C:/xampp/php/php.ini'
  }, function (){
    browserSync({
      proxy: 'localhost:8000'
    });
  });
});

　binとiniにはそれぞれphp.exeの場所とphp.iniの場所を指定してください。
　XAMPPインストールしてたら楽でいいよね。XAMPPの起動は必要ないです。

　connect-phpに関してはざっとこんな感じ。

　今始めて知ったんだけど、はてなのコード記述できるやつめっちゃ便利ね！！！

3. WordPressとSQLite Integrationを準備する

　準備します。まずはダウンロードしてきてください。
　・WordPress
　・SQLite Integration

　先程作ったプロジェクトフォルダにWordPressを解凍します。

f:id:ntha:20170211143025p:plain

　次にSQLite IntegrationをWordPressのPluginsフォルダに解凍します。

f:id:ntha:20170211143033p:plain

　解凍が終わったら、SQLite Integrationのフォルダの中にあるdb.phpをwp-contentに移動させます。
　コピーではないので注意。

wp-configを編集する

　wordpress直下にあるwp-config-sampleを編集します。

　まずは秘密鍵を作ります。
　WordPressが秘密鍵を作ってくれるサービスを提供しているので、以下にアクセスしてコピペ。
　https://api.wordpress.org/secret-key/1.1/salt/

　それをwp-config-sampleの55行目辺りにある

define('AUTH_KEY',         'put your unique phrase here');
define('SECURE_AUTH_KEY',  'put your unique phrase here');
define('LOGGED_IN_KEY',    'put your unique phrase here');
define('NONCE_KEY',        'put your unique phrase here');
define('AUTH_SALT',        'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT',   'put your unique phrase here');
define('NONCE_SALT',       'put your unique phrase here');

　と置き換えます。
　置換したら保存。

　最後にwp-config-sampleをwp-configとリネームしておきます。

Gulpを起動してWordPressをインストールする

　プロジェクトフォルダでgulpを起動するとWordPressの初期設定画面が表示され、サイト名などの記述を求められます。
　適当に決めて進めるとダッシュボードまで直通です。

　お疲れ様でした。

2017-01-11

カルディーコーヒーのカナリオを飲んだ

コーヒー

　先日、ショッピング(とは名ばかりのイオンモール散歩)に赴いた際にコーヒーショップに寄りました。　カルディコーヒー、初めて寄りました。　たんぽぽコーヒーやら様々な品揃え。　女性客が多いイメージでした。

　ふと目を横にやると、わあ~コーヒー豆がいっぱぁい♡　これは買うしかないと思い、品種を吟味してみる。　なにやら普段目にしない豆が多々あるなか、目に止まったのはカナリオ。　イエローブルボン種という黄色いコーヒーチェリーの豆らしく、物珍しさでついつい買ってしまった。　200gで700円程度、なかなかいいお値段。

f:id:ntha:20170111102922j:plain