2017年7月26日水曜日

透明度のトランジションはボックスに直接

ホバー時に透明度を変更し、そのアクションをゆっくりとさせる、トランジションを加えるには
ボックスに戻るときの transition
ボックスのホバーに ホバー時の transition
を設定する。
要はアンカーとアンカーのホバーではなく、ボックスに直接設定する。

.box{

はば
width:300px;
高さ
height:56px;

角丸にする
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;

背景色
background:#000;

今回トランジションする透明度プロパティ
opacity:0.7;

3秒かけて元の0.7に戻る
transition:3s;

}

.box a:link{
アンカーでは無効
}
.box a:hover{
アンカーのホバーも無効
}

.box:hover{

ホバー時の透明度
opacity:0.9;

1秒かけて0.9になる
transition:1s;
}

以下、ボタン反応部分の設定(ボックスと同じにする)

.back-to-news a{

display:block;

width:300px;
height:56px;

border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;

}


2017年7月20日木曜日

SSL同士の接続


ともにSSL接続可能な
https://www.akasaka-tops.co.jp

https://www.zakuro.co.jp

さきにakasaka-topsをSSL化していた。

zakuro.co.jp からのリンクがあり、「https://akasaka-tops.co.jp/・・・」としていた。
その後 zakuro.co.jp  もしばらくは問題なくつながっていたが、今日になって

********************************
安全な接続ではありません

akasaka-tops.co.jp の所有者によるウェブサイトの設定が不適切です。あなたの情報が盗まれることを防ぐため、このウェブサイトへの接続は確立されません。

詳細...

エラーを報告すると、悪意のあるサイトの特定とブロックに役立ちます

akasaka-tops.co.jp は不正なセキュリティ証明書を使用しています。

この証明書は www.akasaka-tops.co.jp にだけ有効なものです。

エラーコード: SSL_ERROR_BAD_CERT_DOMAIN
********************************

という画面になり、開けなくなった。
akasaka-tops.co.jpは「www」がないと同様のアラートが出るものだったが、いままで zakuro.co.jp 内のリンクからは正常につながっていた。
今回接続不能になった原因は不明だが zakuro.co.jp がSSL化されたのが影響しているのかもしれない。
いずれにせよ、SSL で繋ぐときはアンカータグの「www」の有無を確認する必要がある。



2017年7月19日水曜日

個別投稿ページのテンプレート sgl-{category}.phpの振り分け「single.php」

個別投稿ページのテンプレート。
 sgl-{category}.phpでカテゴリ別にテンプレートを分けたい場合「single.php」で条件分岐「if文」を使って振り分ける。
自分でやっておきながら、すっかり忘れて半日無駄にしたので、記録しておく。

<?php if(in_category(array('category-1,category-2'))): ?>

<?php get_template_part('sgl','category'); ?>

遅延効果「transition」はアンカーではなくボックスに適用する

遅延効果「transition」はアンカーではなく
ボックスにホバーをつけて適用する


.box{
opacity:0.6;
transition:3.0s; // 通常のボックスは「行き」
}
.box:hover{
opacity:0.9;
transition:0.3s; // ホバーのボックスは「戻り」
}


※アンカーの文字色は変わるが、
※トランジションには対応しない。

.box a{
display:block;
color:white; // 文字色 白から
}
.box a:hover{
color:orange; // 文字色 オレンジへ 
}


2017年7月13日木曜日

perl CGIで生成するHTMLファイル内のjavascriptの記述あるいは”バックスラッシュエスケープ”

Perl CGIの”print "Content-type: text/html; charset=UTF-8\n\n";”からHTMLファイルを生成し、その中で javascriptを動かそうとするときJSスクリプトの中にはいっている
「$」をPerlがフォームから受け取った変数の接頭辞と解釈してそれに続くスクリプトが処理できなくなる。
CGI をPerlで記述し、その中にjavascriptを直に書く場合は「$」の前に「バックスラッシュ」を入れてエスケープする。
今回は送信フォーム中の名前の欄で振り仮名を自動で書き込むjQuery構築のためだったが、Perl CGIで同的に生成するHTMLにjavascriptを記述する場合に共通することと思われる。


<tr><th colspan="2">名前</th>
<td>
<input type="text" id="userName" placeholder="お名前を入力" name="_name">
</td></tr>
<tr><th colspan="2">ふりがな</th>
<td>
<input type="text" id="userNameKana" placeholder="ふりがなを入力" name="furigana">


<script>\$(function(){\$.fn.autoKana('#userName','#userNameKana',{katakana:false});});</script>

2017年7月11日火曜日

ログイン名表示の前の命令

ログイン状態を判定して条件分岐し、ログインしているならユーザー名表示とする場合、直前の命令をリセットしなければいけない。
ちなみに、”<?php bloginfo('template_url'); ?>”はリセットしなくても正常に処理される。



<!--global contents FIXED-->
<div id="global-contents">
<?php wp_nav_menu(array('theme_location' => 'global-contents')); ?>
<?php wp_reset_query(); ?>

<?php wp_reset_query(); ?>

↑これがないと”<?php the_author(); ?>”がでない


<!--ログイン状態-->
<div id="global-contents-members">
<?php if (is_user_logged_in()) : ?>

<div><?php the_author(); ?>さん</div>
<div><a href="/?a=logout">ログアウト</a></div>
<?php else : ?>
ゲストさん
<div><a href="<?php bloginfo('template_url'); ?>/mypage/">ログイン/会員登録</a></div>

<?php endif; ?>
<?php wp_reset_query(); ?>
<!--global contents members end ログイン状態--></div>


<!--global contents FIXED end--></div>

2017年7月5日水曜日

キーボードの下げ方

これを見ている人はほとんどいないと思いますが、「何かしなければ」と思ったので、こちらと我が写真サイトに掲載します。
なにせキーボードの下げ方を説明書に書かなかったので。


キーボードを下げるにはリターンキーをクリックしてください。

Please click a return key to lower a keyboard.


iPhone / iPad APP

[ Web Search Words 2 ]

by Ayumu Suzuki
トップページでカテゴリ(構造物/structure)内の記事を読みこむところで以下のエラーが出て、それ以降の処理ができなくなった

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 1089 bytes) in /home/users/0/moo.jp-suzukiayumu/web/wp-includes/wp-db.php on line 1846


試に
<?php get_posts('category_name= structure&posts_per_page=12'); ?>

get_posts

query_post
にしたところ、解決した。