mysqldumpのときだけソケットエラーが出る
現状は ソケットのパスを指定してmysqldumpすることで実行できる
mysqldump -q wordpress -u root -p > バックアップファイル名 -S /Applications/MAMP/tmp/mysql/mysql.sock
そんなに頻繁にすることでもないのでこれでいいかなとも思う
環境
mac10.10.2
MAMP3.0.7.3
MAMPをインストールして
mysqlにアクセスしようとしたら
ソケットエラーでアクセスできないので
/Applications/MAMP/tmp/mysql/mysql.sock
を指定すればいいという記事が多かったのでその通りにして
無事アクセスできるようになった。が
今度はバックアップするためにmysqldumpを実行しようとすると
ソケットエラーになる
mysqldump: Got error: 2002: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38) when trying to connect
tmpフォルダー内のmysql.sockをつかってサーバーにつなげることができない というエラー
よく見るとパスが違う
実際にMAMPの mysql.sock があるのは
/tmp/mysql/mysql.sock
なので ダンプするときのパスの設定を直せばうまくいきそうだが、どこに書いてある?
confファイルをあさってみる
my-large.cnf はok
my-medium.cnf はok
my-small.cnf はok
というかなんでこんなにあるの?
やみくもにファイルをみてもダメだったので
調べていると コマンドを実行するときにソケットを指定できるようなので試してみた
mysqldump -q wordpress -p root > back -S /Applications/MAMP/tmp/mysql/mysql.sock
すると次のエラー
Access denied for user 'XXX'@'localhost' (using password: YES) when trying to connect
ユーザーがrootじゃなくて自分の名前になっていたので ユーザーを指定すればいけるかと考える
mysqldump -q wordpress -u root -p > back -S /Applications/MAMP/tmp/mysql/mysql.sock
エラーは出ず、成功したようなので 確認してみると 確かに back というファイルができている
中身もちゃんとあるのでこれで 'できない'状態からは抜け出せた
あとは mysqldump するときの ソケットの設定をどこで書けばいいのか調べればいいのだけれど
まだわからない
wordpressテーマの作成でつかうタグのまとめ index.php編
[ 記事一覧 ]
index.php
- bloginfo('name') ブログのタイトル
- echo home_url('/') トップページへのリンク
- wp_nav_menu(); functions.phpと連動
- dynamic_sidebar(); functions.phpと連動
- get_header() ヘッダーを読み込む
- get_footer() フッターを読み込む
- get_sidebar() サイドバーを読み込む
- get_template_part('任意のファイル'); 任意のファイルを読み込む
(記事一覧のループ)
- if (have_posts()) : while (have_posts()) : the_post();?> 記事の数だけ処理を回す
- endwhile; else:
...「記事がなかったら」記事がないというメッセージを表示
- endif;
(ループの外でつかう)
- previous_posts_link() 前の記事一覧へのリンク
- next_posts_link() 次の記事一覧へのリンク
Firefox で max-width が効かないときの解決法
親要素に width:100%; を指定する
ブートストラップでレスポンシブデザインを取り入れたサイトを作った時に
画像に対して img-responsive を設定すると画像が画面幅に応じて大きくなったり
小さくなったりするはずだったがなぜかFirefoxだけ効かずにレイアウトが崩れる
img-responsive には max-width:100%; が設定されているのでこれがなぜか効いていないということなので検索してみると
親要素の display:table をしている要素に table-layout:fixed を指定する事で回避できる
という記事が多く見られるが、今回はこれには当てはまりそうになく、困ってしまった。
100% というのは当然親要素に対する100% だと考えるので ウェブインスペクタで親要素のスタイルを確認してみると特に width に対しての設定はない。
ということは 当然 autoが適用されていると考える
この辺が怪しいと感じたので試しに 親要素に対して適当な width を設定してみると
反応した!
width の設定が書かれていればいいのかと思って、あえて width:auto; を指定してみると
動かない;
ということは 親要素の width の設定が auto になっていると max-width:100%; は効かないということなので、影響のない width:100%; を親要素に指定してみると 画像がちゃんとレスポンシブ仕様になった。
似たようなことが以前にもあった。
CSSで 3D のスタイルを試していた時に 親要素に perspective を指定していたが なぜか
Firefox だけ 効いていない;
ウェブインスペクタで色々いじってみると 直前の 親要素に perspective を設定すると 反応することがわかった。
テストサーバーにアップしたらえらいことになっていた
製作していたECサイトのトップページが
とりあえず一通り完成したので
試しにサーバーにあげてチェックしてみた
なんかいろいろおかしい
[ mac safai ]
bootstrapのアイコンが表示されていない
ー> safaiのセキュリティーの設定で読み込みをブロックしていたらしい
[firefox]
スライダーが動いた時に画像がバグる
ー>原因不明、bootstrapのカルーセルのソースコードには
style="background:#green" を 都合でつけていた。
それが上に乗っている画像とかぶっていたので style を削除
[android]
.collapse をつかったスライドダウンのエフェクト時に
ボタンの表示が大きくなってもとに戻らない( 謎 )
ー>未解決
[ * ]
画面の右端に変な隙間がある
スライダーの矢印の位置が画面からはみ出す
ー>col とrow の使い方に誤りがあった
/ 以下 メモ /
画面に変な隙間がある
最初 container-fluid を知らずに
画面幅いっぱいにするために
containerをつけずに row と col をせっていしていた。
あとで間違いだと気付いたが、その全部を修正しきれていなかったようだ
しかも、hidden-sm などで見えなくなっているところに効いていたのでなかなか見つけられなかった
すべて訂正してなおったかに見えた...
スマホで見るとまた変な隙間ができる
画面幅が最小の時のスタイルを疑う
ボタンの中に設定していた row と col の設定と
そこに記述したテキストの長さが関わって
ボタンの大きさがゆがんでいた
2つ設定していたボタンの構造
<div class="container">
<div class="row">
<div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="row">
<button class="btn btn-default" data-toggle="collapse" data-target="#models2" aria-expanded="false" aria-controls="models2">
<div class="col col-lg-offset2 col-lg-8 col-md-offset-2 col-lg-8 col-sm-offset-2 col-sm-8 col-xs-offset-2 col-xs-8">
<img src="image/keitai2.png" height="150" width="320" class="img-responsive">
</div>
<div class="col col-lg-2 col-md-2 col-sm-2 col-xs-2"> </div>
<div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
<p class="lead">機種から探す</p>
</div>
</button>
</div>
</div>
(もう一つ同じものを col で 6 づつの幅に設定)
...
一行の中に 2つの 列を6づつに設定し それぞれに ボタンを配置
そのボタンの中に列をつくり 2(余白) 8(画像) 2(余白) として 左右に 2 づつの余白をとった
さらにその下にキャプションのように文字を入れたかったが .captionではうまくいかなかったので
もう一つ 幅12の列を作って折り返しによって下に回り込ませている
が
これが悪さをした
最初のボタンの文字は 機種から探す で
もう一方のボタンは デザイナーから探す だった
この文字数の差でレイアウトが崩れた
デザイナーから探す だと 長すぎて 画面幅が最小の時に ボタンの幅 12 分よりも幅をとって 列の幅を変形させていた
これが行の幅の外にはみ出して 右側にへんな余白が生まれていた
ので
(container と row のなかに入っている)
<div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<button class="btn btn-default" data-toggle="collapse" data-target="#models2" aria-expanded="false" aria-controls="models2">
<div class="row">
<div class="col col-lg-offset2 col-lg-8 col-md-offset-2 col-lg-8 col-sm-offset-2 col-sm-8 col-xs-offset-2 col-xs-8">
<img src="image/keitai2.png" height="150" width="320" class="img-responsive">
</div>
<div class="col col-lg-2 col-md-2 col-sm-2 col-xs-2"> </div>
</div>
<div class="row">
<div class="col">
<p class="lead">デザイナーから探す</p>
</div>
</div>
</button>
</div>
</div><!-- row -->
</div><!-- container -->
ボタンを 6 づつの幅で配置するのは変わらない
その中に 余白と画像の行 と テキストの行 の二つを設定して
切り離したらうまくいった。
grunt watch がうまく動かない
bootstrapのgetting started でgruntをいれて
lessファイルの書き換えに成功したので
また同じように編集しようと
bootstrapのフォルダまでディレクトリチェンジして
grunt watch
Running "watch" task
Waiting...
この状態でlessファイルを書き換えたら動くはず
とおもって作業したが
反応がない
前回の作業手順を見直すと
なんだかよくわからないままさきに
grunt dist というコマンドをうっていたので
↑(distファイルが初期化されるのですでにファイルがある場合はやめましょう)
同じように
grunt dist
としたあとで
grunt watch
Running "watch" task
Waiting...
として
lessファイルを編集したら反応した。
一回grunt watch を停止したら
grunt distからやり直さないといけないのか?
↑(distファイルが初期化されるのですでにファイルがある場合はやめましょう)
とおもって
^C
でgrunt watchを停止してから再度
grunt watch
Running "watch" task
Waiting...
してlessファイルを編集するとちゃんと動いた
ひょっとしたらlessのフォルダを別のものと置き換えたのが原因か?
あとで調べよう
追記
単純に違うファイルを操作していただけだった。
grunt dist を実行すると
distフォルダの中身が初期化されるみたいで
今まで作ってきたhtmlファイルやimgファイルが全部消えてしまった...
バックアップあったから良かったけど、これからは気をつけよう
消えたファイルはゴミ箱にもないけれど、どこに行ってしまったんだろう
スライダーのslickの使い方とトラブルメモ
使い方まとめ
[HEAD]
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
[HTML]
<div class="NAME">
<div><div>
<div><div>
<div><div>
...
</div>
//矢印のカスタマイズをする場合に追加
<div class="ARROWS_NAME">
<div class="slick-next">
<img src="image/next.png" height="68" width="44" alt="">
</div>
<div class="slick-prev">
<img src="image/prev.png" height="67" width="43" alt="">
</div>
</div>
[SCRIPT]
<script>jqueryを読み込む</script>
<script>
$('.NAME').slick({
appendArrows: $('.ARROWS_NAME'),
});
</script>
NAME と ARROWS_NAME をスクリプトの部分で結びつける
複数のスライダーを作る場合はそれぞれ名前を変えて個々に設定する
トラブル
矢印がでてこない
デモで表示されている矢印がなぜか表示されない
slick-theme.css を 読み込まないようにすると
下に next/prev がボタンで表示された
slick-theme.css を読み込むようにして
backgroundを指定したら両端に矢印の端っこが見えた
スライダーの枠を中心にして矢印が配置されるらしい
左右にmarginを取ると矢印が出てきた
矢印のフォントの色が、defaultのthemeでは白で
今作っている背景が白だから具合が悪い
もう少しおおきな矢印にもしたかったので
矢印をカスタマイズしようと思った
矢印を画像に変えるとスライダーが動かない
本サイトをみてみると矢印がカスタマイズできそうだったので
読んでみたがよくわからなかった。
たまたまYahoo知恵袋に同じ投稿があったので
それを見ながら書いてみたが上手くいかない
とりあえずDEMOがあったのでそのコードをコピペしてみる
するとちゃんと動いた
なにが原因なのかと思ってslickのオプションを指定していくと
slidesToShow: 3
を指定した時に動かなくなった。
いろいろ試していてよくわからなくなっていたので
一回整理してみた。
本サイトではオプションを $('ELEMENT').slick({OPTIONS});
としていたが、デモのコードは var slick = $('ELEMENT').slick({OPTIONS});となっていて
こっちでは矢印のカスタマイズの設定だけしていた
なんで変数にいれているのかよくわからなかったが
どっちかにまとめようと思って、とりあえずDEMOが動いているので、そのコードにオプションをまとめたら
やっと動いた。
でも本サイトの書き方と違うので、本サイトの書き方でまとめたらちゃんと動いたので
そっちに統一した。
スライダーを複数作ったら動かなくなった
単純にクラスが被っていた。本当はIDで指定するところを共通の部分はクラスで一括で指定しようとしたところで不具合が出た。凡ミス。
ちなみにひとつの矢印が複数のスライダーに設定されていると、全部動くと思いきや
最初にでてきたスライダーだけが動くということが起きる。