読者です 読者をやめる 読者になる 読者になる

Test!

写真とWebデザインと時たまダイエット

クリック感のあるボタン 簡易バージョン

パソコンのみの動きですけど
クリック感が生まれるようにCSSとか作ってみた。
CSS

.btn {
  color: #ffffff;
  font-size: 15px;
  background: #d93434;
  padding: 5px 20px 4px 20px;
  text-decoration: none;
  border-bottom: 2px solid #b71c1c;
}

.btn:hover {
  background: #e57373;
  border-bottom: 2px solid #b71c1c;
}

.btn:active {
  border-bottom: 0px;
}

HTML

< a href="#" class="btn">test</a>

hoverとactiveでそれぞれボーダーボトムの大きさ変えてあげるだけでも
なんか押した感が出ていいんじゃないですかね。。。
と、なんとなくメモ
実際の動きはこっちでみてねっと
codepen.io

Wordpressをお引っ越しした時にやること

サーバーかわるでしょ?そしてサイトのURLが変わったら
データベースに登録されてるURLも変更しなきゃいけない。
ということで、下記サイトを参考にお引越ししてみた。
websae.net

こちらのサイトに載ってたSQL文を叩くわけですが、自分の環境では最後のpostメタあたりで、エラーが出ちゃいました。
がとりあえず、WPオプションの変更ができればログインはできるのでまずはこちらを試してみました。

UPDATE wp_options SET option_value = replace(option_value, 'http://example.old/', 'http://example.new/') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://example.old/','http://example.new/');
UPDATE wp_posts SET post_content = replace(post_content, 'http://example.old/', 'http://example.new/');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://example.old/','http://example.new/');

でログインできたあとは
Search Regexというプラグインを使い、記事中などのデータベースでは変更できなかったURLを置き換えます。
このプラグインは、URLだけではなく、指定した文字を検索し、文字列の置き換えができます。
詳しい使い方なんかはこちらのサイトが参考になります。
www.adminweb.jp

ただ、このプラグイン、更新がされていないみたいなので使用は自己責任でお願いします。
今のところ問題なく使えてますが、いつなんとき問題が起こるかわからないのでデータベースのバックアップはこれらを
やるまえにしっかりととっとくといいですよ。あとで泣かずにすみますし。

もし、メディアのアップロードができないようなら、アップロード用のフォルダのパーミッションの確認をして、アップロードできるように変えます。

SQLのエクスポートとインポートまでは比較的かんたんにできるので、ここらへんが一番大変なところかなって思います。

twitter 一日分 ワードプレスに投稿

ということで、いまさらなんですが、ツイッターワードプレスに投稿してまとめてみたくなったのでやってみました。
Twitter Digest くらいしかプラグインがみつからなかったので、これをインストール。
https://apps.twitter.com/
でアクセストークンとかを取得します。
最近では電話番号の登録がないと使えなくなった模様。
f:id:b_105_a:20151020155253p:plain
ユーザー名
などを入れた後に取得する頻度を入れます。
1日とか1週間すぱんでとか、とりあえず、自分は1日分のツイートをまとめて取得しました。

f:id:b_105_a:20151020155258p:plain
投稿タイトルタグ時刻の表示
リツイートやメンションを含めるか含めないか
最低なんついーとから表示させるのか等が設定できます。
f:id:b_105_a:20151020155302p:plain
とりあえず、アップデートがあまりなされてませんが
最近のワードプレスでも動きました。

Drawer メニューの追加と 文字の切り替え @Jquery

スマートフォンとかでよく見かけるメニュー。上に三本の線があってそこを押すと

メニューがにょきっと出てくるやつ。それを手軽に使えるのが下記のスクリプト

CDNもあるのでとっても便利。

Drawer - Javascript · Drawer · A small CSS3 and jQuery plugin for app style drawer menu.

 

まずはスクリプトをダウンロードしてきまーす。

またはCDNで読み込んでもOK。

cdnjs.com

読み込みが必要なのは下記のファイル。

<link rel="stylesheet" href="../css/drawer.min.css">

<!-- jquery & iscroll & dropdown -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"></script>
<script src="//cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.1/dropdown.min.js"></script>

<!-- drawer js -->
<script src="../dist/js/jquery.drawer.min.js"></script>

 

drawer.min.cssJquery.draer.min.jsもCDNにあったのでそれを読み込んでもOK

https://cdnjs.cloudflare.com/ajax/libs/drawer/2.4.0/js/jquery.drawer.min.js

https://cdnjs.cloudflare.com/ajax/libs/drawer/2.4.0/css/drawer.min.css

 

でもって、公式サイトにのっている方法を参考にHTMLを書く。

Drawer - HTML markup · Drawer · A small CSS3 and jQuery plugin for app style drawer menu.

レスポンシブタイプや、トップ固定タイプなど。


で、スクリプトを呼び出す。

$(document).ready(function() {
  $(".drawer").drawer();
});

 

 以上でだいたい動く。

とても簡単。

 

ただ、メニューバーをスマフォで開いたときに閉じるボタンがわかりずらいので

メニューの文字をボタンを追加して、それを開いたときに閉じるになるように文字を変えたあげるスクリプトを書く。

文字を変える方法はこちらを参考にした。

jQueryで開閉メニュー&ボタンのテキストを切り替える | blog|blow→in

  var flg = "close";
jQuery(".drawer-toggle").click(function(){
if(flg == "close"){
jQuery(".menutitle").text("閉じる");
flg = "open";
}else{
jQuery(".menutitle").text("メニュー");
flg = "close";
}
});

でもって

 htmlはこんな感じで。

 

<div class="drawer-header">

<button type="button" class="drawer-toggle drawer-hamburger">
<div id="overlay">
<span id="close" class="menutitle">閉じる</span>
</div>
<span id="btn" class="menutitle">メニュー</span>

<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
</div>

cssは省略

phpMyAdminの文字化けを治す@ MAMP

/Applications/MAMP/Library/support-files/my-medium.cnf

をコピーしてきて名前をmy.cnfに変える。

/Applications/MAMP/conf/my.cnf

の中に下記を追加。

[client]の部分に

default-character-set=utf8

[mysqld]

の部分に

skip-character-set-client-handshake
init-connect=SET NAMES utf8
character-set-server = utf8
collation-server = utf8_bin

 

で、tableやDBを新規作成するときには文字コード

utf8_general_ci

にすること。

でカラムの文字化けが解決。

SQL で show variables like '%char%'

をしてUTF8にっているか確認。

 

Cakephp DebugKit

一番最新のDebugKitはCakephp2.X系には対応してなかった。

エラーが解消されないのでナンデダロ~ォ♪*1ナンデダロ~♪っておもってたら、単にバージョンが違うのじゃないとだめなだけだった。。。。

https://github.com/cakephp/debug_kit/tree/2.2

 

ここからダウンロードしてPluginフォルダに放り込んだらエラー解消。v( ̄Д ̄)v イエイ

*1:乂(゚д゚ ;)≡(; ゚д゚)乂

CakephpをXammpにインストールしてみた。エラー解消のためのメモ

Cakephp2.7をインストールしてチュートリアルをはじめてみました。

インストール時にいろいろつまづいたので、解消のために参考にさせてもらったHPを

メモ。

d.hatena.ne.jp

xampp環境にCakePHPをインストール | 大八プレス

 

shirokai.hatenablog.com