レスポンシブのdlリストで、スマホ表示ではdtとddを縦積みにしてddのみに1pxのborder-bottom、PC表示ではdtとddを横並びにしてdtとdd両方に1pxのborder-bottomを設定しました。
そして、デザイン上PC表示で最終行のdtとddのborderを消す必要があり、それぞれlast-of-typeでborder-bottomをnoneに設定したところ、消していない部分のborderの太さがChromeのみ倍くらいにぼやけていました。積む件数は3段なので奇数のせいかなと思い、一段増やしたりもしましたが変わらず。
結局解決法が見当たらず、border-bottom:noneを諦め、borderの太さを変えずにborderの色を消す（border-bottom-color:transparent;）でとりあえず設定しました。Chromeだけ…何故…。
dd {
border-bottom: 1px solid #000;
}
dd:last-of-type {
border-bottom-color: transparent;
}
@media (min-width:768px) {
dl {
display: flex;
flex-wrap: wrap;
}
dt {
border-bottom: 1px solid #000;
}
dt:last-of-type {
border-bottom-color: transparent;
}
}
Facebookのページプラグインを導入したサイト制作案件でのFirefox動作チェックでしばらく悩みました…。
当該サイトはSSLに対応していなかったのでそれが原因かなと思いましたが、Chromeでは問題なく表示されていたので違う方向で調べることに。
そこで、過去に制作した他のサイトでTwitterの埋め込みが表示されていなかったことを思い出しました。
Firefoxのコンテンツブロッキング（トラッキング防止機能）が影響しているようです。
オプションの「コンテンツブロッキング」で「検出されたすべてのトラッカー」のチェックを外すことで表示されるようになりました。
こういったブロック機能の使用は閲覧ユーザー次第とも言えますが、やはりチェックしないといけませんね。
WordPress管理画面の固定ページ一覧が何故か表示されないという問題につまずきました。新規追加はできるのですが、制作した固定ページが一覧に表示されないのです。
プラグインの削除や再インストールなど試しましたが、外観のテーマを切り替えたら表示されることに気付きました。カスタムテーマを使っていたので、そこに原因があったようです。
そして思い出したのが「予約語」の存在。WordPressがすでにシステムで使っていて、ユーザーがスラッグ等で使用することのできない言葉です。
functions.php内のカスタム投稿タイプのスラッグで「order」という単語を使ってしまっていました。スラッグを変更したところ解決されました。
予約語一覧はこちら（WordPress Codex 日本語版内）
上記サイトの中にあるようにヒントや説明、エラー内容も出ず、ただ固定ページの一覧が表示されないだけだったのでびっくりです。注意が必要ですね…。
WordPressテンプレートタグのbloginfo、非推奨になっていたパラメータがいくつかありましたのでメモです。
style.cssのURL出力は
<?php bloginfo('stylesheet_url'); ?>
ではなく
<?php echo get_stylesheet_uri(); ?>
を推奨。
トップページに戻る場合等、サイトアドレスのURL出力は
<?php bloginfo('url'); ?>
ではなく
<?php echo home_url(); ?>
を推奨。
jsや画像等のパスに使用するテーマディレクトリのURL出力は
<?php bloginfo('template_directory'); ?>
ではなく
<?php echo get_template_directory_uri(); ?>
を推奨。
定期的にチェックしないといけませんね…。
.htaccessの内容変更や、htmlソースの最上部（doctype宣言よりも上）に
<?php require('./xxxx/wp-load.php'); ?>
を記述する等、htmlでphpが動くようにしておきます。
wp_headとwp_footerを下記のように記述します。
<head>
略
<?php wp_head(); ?>
略
</head>
<body>
略
<?php wp_footer(); ?>
</body>
任意の場所にContact Form 7のショートコードを読み込みます。
<?php echo do_shortcode( '[Contact Form 7のショートコード]' ); ?>
前提としてサーバ内の.htaccess等の設定で、htmlでphpが動くようにしておきます。
WebARENAの場合、.htaccess内に下記の1文を追加します。
AddHandler application/x-httpd-php53 .html
次に、該当htmlファイルの冒頭に
<?php require('./xxxx/wp-blog-header.php'); ?>
あるいは
<?php require('./xxxx/wp-load.php'); ?>
を記入します（パスは環境によって変わります）。
その後はWordPressで使っている記述をそのまま使用できます。
12月9日、渋谷の東京カルチャーカルチャーにて行われた『中村元の超水族館ナイト 増館号』に招待いただき、行ってきました。
『中村元の超水族館ナイト』は水族館プロデューサーである中村元さんのトークショーで、過去25回行われていますが、チケットは毎回すぐに完売してしまう超人気のイベントです。
来年新たにリニューアルされる水族館の情報や、プロデュースされた水族館の裏話などもたくさん聞けて、実際に水族館に行く楽しみがさらに増えました。
また、東京カルチャーカルチャーのプロデューサーであるテリー植田さんの司会進行も素晴らしく、中村さんとの掛け合いの絶妙さに、会場は終始笑いが絶えませんでした。
ちなみに会場となった東京カルチャーカルチャーは飲食しながら観ることができる場所で、とても雰囲気がよく、なによりタイ料理とハーブティーが豊富なのがとても嬉しかったです。
中村さんは経営窮地に陥ったいくつもの水族館を救ってきた問題解決力の高い方です。
このイベントでなにか生きるヒントが掴めるかもしれません！
水族館に関わる話や生物の生態だけでなく、中村さんの人生論や雑談もとても面白いですので、水族館に興味がない人にもオススメです。
ご興味のある方は次回是非、参加してみてください。
中村元さんのWEBサイト
WEB水族館 全国の水族館ガイド
パララックス用のjQueryプラグインfullPage.jsをWordPressに組み込んだところ、Contact Form 7の送信リダイレクトが効かなくなりました。
今回パララックスするのは1ページだけで、他のページはfullPage.jsを読み込まずにContact Form 7だけを使用して問題なくリダイレクトが出来たので、やはりコンフリクトが原因のようです。
あれこれ試し、もうfullPage.jsかContact Form 7どちらかを違うプラグインで試してみるしかないかなと思った最後にダメ元でjQueryのバージョンを上げてみたところ、解決。
下記のようにWordPress側のjQueryを読み込まずに、使用したいバージョンのjQueryをGoogle Hosted Librariesから読み込む方法を取りました。
function add_files() {
// WordPress本体のjquery.jsを読み込まない
wp_deregister_script('jquery');
// 使用したいjQueryの読み込み
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', "", false );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
jQueryのバージョンを3.1.1に上げて解決したのは、今回のサイトは対象ブラウザをIE9以上と考えていたので使えた方法かもしれません。
fullPage.jsもContact Form 7も単体では古いバージョン（当初設定していたのは1.9.1）で動いていたので、バージョンの違いでの解決はちょっと盲点でした。
最近めっきりレスポンシブルのサイトが増えましたが
スマホサイトのみ追加で作るときに
端末認識用に稼動させるhtaccessをあれこれ調べてて
なかなかうまくいかなかったのですが、
最終的にうまくいったものをご紹介させていただきます。
目標はスマホでアクセスしたときに、どのhtmlにアクセスしたとしても
そのページに対応したスマホ用のページに飛ばすというものです。
構造はPCサイトディレクトリ内にスマホサイトディレクトリを置き
ファイル名を同じにしておく必要があります。
（例 PCサイト：about.html スマホサイト：sp/about.html）
それをhtaccessで書くとどうなるかというと
RewriteEngine On
RewriteCond %{REQUEST_URI} !(^/sp/)
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ /sp/$1 [R,L]
となります。
RewriteCond %{REQUEST_URI} !(^/sp/)
ここの部分はhtaccessはディレクトリ以下すべてに作用するために
スマホサイトディレクトリでは作用してほしくないために記述しております。
またPCサイトではphpだけれど、スマホサイトではhtmlだった場合は
RewriteCond %{REQUEST_URI} ^/sp/ [NC]
RewriteRule ^(.*)\.php$ /$1.html [R=301,L]
を追加することで対応が可能です。
今回からスタンプの大きさが標準サイズになっております。どうやら小さいスタンプは視認性が悪いということで審査にひっかかるようで。何はともあれ無事リリースできました。なかなか難しいところもありますがスタンプ制作楽しいですね！
