せっかくだからとスマホで「Visaタッチ決済」を使ってみてますが、思ってたより便利で気に入っています。
ただ、最初の設定で少しつまづいたので、記録に残しておきます。
前提として、公式からは下記のように案内されています。
・Visaのタッチ決済を Google Pay で使おう。
https://www.smbc-card.com/brand/googlepay_visa/index.html
結論、このリンク先の「設定方法」の通りに行えばOKです。
ただ自分の場合、なぜかSTEP1の【「 Google Pay をはじめる」をタップし、】の部分がアプリにありませんでした。
ネットで調べた結果、下記のページを発見。
・Vpassで「Google Pay の設定」メニューがみつからない
Google Payアプリをダウンロードしてから一度も起動していなかったので、
https://bbs.kakaku.com/bbs/88050001164/SortID=24644515/
一度起動するとVpassでメニューが表示されるようになりました。
お騒がせしました。
確かに1回も起動したことないなと思って、起動してみたところ、無事Vpassアプリに設定ボタンが表示されました。(ちょっとタイムラグはあったかもしれない)
あとの設定は簡単であっという間に終わりました。
公式が説明してほしいと思いつつ、機種依存の問題かもしれないし、なんとも言えない感じです。
三菱住友の公式やらなんやら、「Google Pay」と説明していてそれは正しいですが、現在は「Google Payアプリ」はありません。
「Google ウォレット」というアプリに機能を吸収された形になっているようです。
・参考:『Google Wallet』と『Google Pay』の違い:財布と決済手段の差
https://mupon.net/202304-difference-google-wallet-pay/
Googleウォレットにクレジットカードを設定するのは、GoogleウォレットとVpassアプリどちらからでもできますが、
という違いがあります。
「Visaタッチ決済」を使いたければ、Vpassアプリから登録しましょう。
]]>ちょっとフォームは停止中だけど、プラグインをver4.03にアップデートしたらWordPressでエラーが出て、ブログが閲覧できなくなりました。
エラーが起きている該当箇所を見てみるとこう書いてある。
※class.main.phpの362行目
$transient = [];
変数を配列で初期化しているこの書き方はPHP5.4以降しか対応していない。
PHPのバージョンを調べるとは5.3でした。PHP5.3はもうサポートが切れているので、PHPのバージョンを上げることで解決しました。
ちょっと放置しすぎていたのを反省します。
旧:/%category%/%post_id%/ 新:/%year%/%monthnum%/%postname%/
変更自体は簡単で「設定 > パーマリンク設定」の「月と投稿名」をポチッと押して保存するだけ。
ただ、そのままだと日本語がURLに使われてしまうので、1つ1つ直しました。
記事が多かったら変更はかなり難しかったと思う。
少し前にカテゴリ名のスペルミスをしているのを発見しました。(1年以上も「Android」が「Andorid」になっていた。恥ずかしい)
慌てて直したんですが、その時にブログ記事のURLも変わってしまいました。
そういったこともあり、変更の可能性のある文字列をURLに含めるのは止めようと思いました。
それから色々と調べて今の形に。
これは最初からこうすべきだったと反省。
最後に迷ったのが英語の区切りにハイフン(-)を使うかアンダースコア(_)を使うかどっちにするか。
自分としてはアンダースコアのほうが文字の選択がしやすいので好きなんですが、天下のGoogle様に従いハイフンにしました。
URL に区切り記号を使用します。http://www.example.com/green-dress.html という URL の方が、http://www.example.com/greendress.html という URL よりずっとわかりやすくなります。URL にはアンダースコア (_) ではなくハイフン (-) を使用することをお勧めします。
Google と相性の良い URL の作成 – ウェブマスター ツール ヘルプ
長い物には巻かれていこう。
ブログ記事の本文下に横幅の大きい広告を設置してありますが、閲覧しているサイズが小さいと広告がはみ出してしまいます。
そこは「overflow: hidden;」で非表示にしておけば良いんですが、Androidのブラウザ(Xperia arc Android2.3.4)から見た場合、こちらの想定している表示になりません。(勘弁して)
そこでPCとモバイルで表示する広告を変えることにしました。
/* Adsense表示エリア ここから */
<?php if (wp_is_mobile()) : ?>
// モバイル用の広告コード
<?php else: ?>
// PC用の広告コード
<?php endif; ?>
/* Adsense表示エリア ここまで */
WordPress3.4以上となってしまいますが、モバイルかどうかを判定するwp_is_mobile関数を使って、広告コードを切り替えます。
注意点としてはiPadもモバイルと判定されてしまうことで、そこが気になるなら以下のサイトで紹介されているように自分で関数を作るのが良いと思います。
僕はブログを書くときに、記事のプレビューをよく使います。
普通に広告コードを貼り付けているだけだと、そのプレビュー画面にもAdSenseの広告が表示されます。
これは誤クリックの元にしかならない気がしたので、プレビュー画面には広告を表示させず、それ以外のページでは表示するようにしました。
<?php if (!is_preview()) : ?>
// プレビュー画面以外のページに広告を表示する
/* Adsense表示エリア ここから */
<?php if (wp_is_mobile()) : ?>
// モバイル用の広告コード
<?php else: ?>
// PC用の広告コード
<?php endif; ?>
/* Adsense表示エリア ここまで */
<?php endif; ?>
WordPressのis_preview関数は、そのまんまプレビュー画面かどうかを判定する関数です。 それを利用してAdsenseの表示エリアを丸ごと囲い、表示・非表示を切り替えます。
ちなみにAdsenseとは関係ないですが、Zenbackのところも同じ方法で非表示にして、スッキリさせました。
]]>
まず1次審査は必要事項をフォームに入力して申し込むだけ。
その日のうちに1次審査完了のメールが届いた。(11月8日)
そこからAdSenseの広告コードをブログに貼り付けて空白の広告が表示されるようになり、その2日後に2次審査完了のメールが届きました。(11月10日)
審査完了のメールが10日の深夜に届いていて、10日の朝にブログを確認したらもう実際の広告が表示されていました。
申し込み時点で記事数が13個しかなかったので、そこが一番気になってましたが、問題なかったようです。 アクセス数は……まあ、地道に更新していくしかないということで。
]]>
PCで表示している画像をそのままスマートフォンで見るとぼやっとしていて汚い。
ページの容量を削減するためにも画像の使用はなるべく減らす方向に。
まず、サイトロゴ(Stylish Fool)をGoogle Web Fontsから読み込んだフォントを使いました。
スマートフォンだと綺麗に見えるけど、PCから見るとChromeでテキストの表示が少し汚いのが気になる。
それに加えてグローバルナビゲーションもアイコン画像以外はテキストに変更。
jQueryのライブラリは自分のサーバーに置いたものを読み込んでいました。
が、お問い合わせに使っているWordPressのプラグイン「Contact Form 7」でもjQueryを読み込んでいたのに気づかず、jQueryを2回読み込んでいました。
ライブラリを多重で読み込むのを防ぎ、さらにCDNでjQueryを読み込むようにWordPressのテンプレートを修正しました。
// header.php 「head」閉じタグの前を以下のようにする
<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', array(), '1.8.2');
wp_head();
?>
</head>
GoogleのCDNサービスはマイナーバージョンまで指定するとキャッシュされる期間が長くなるみたいです。
1に画像。2に画像。
PC用のサイズが大きい画像をスマートフォンでもそのまま読み込んでいるので、スマートフォン専用サイトと比べてパフォーマンスは落ちています。
この問題に対しての上手い解決法は今のところ見付けられてません。
このブログはページの要素が少ないので、記事本文に画像を多く使わなければそれほど重くならないはず。
それで良いんだろうか。
さて、僕の環境だと以下のパスに設定ファイルがありました。
C:\Users\{ユーザ名}\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\DocumentTypes\MMDocumentTypes.xml
「MMDocumentTypes.xml」を書き換え、拡張子「.scss」のファイルでもCSSのコードヒントが使えるようになって、めでたし、めでたし……だと思いきや、Dreamweaver の起動時にエラーが出るようになってしまいました。
しかも、これ1つではなく
「ドキュメントタイプ”PHP”は追加されません。……」
「ドキュメントタイプ”CSS”は追加されません。……」
「ドキュメントタイプ”JavaScript”は追加されません。……」
という感じで連続で出てくる。
勘弁してくれーと思いながらバックアップから変更した箇所を元に戻しても、エラーは止まらず。
かなり焦った。
もう一度落ち着いて、「SassとDreamweaverのコードヒントでCSSをさらに効率的に」の記事を読んでみました。
コードビューが表示される様に指定してあるファイルを開きます。macだとこんなかんじでしょうか。
/Applications/Adobe Dreamweaver CS5/Configuration/DocumentTypes/MMDocumentTypes.xml
このファイルをどこか別の場所(同じフォルダではなくて)にバックアップをとっておきます。
ここで気づいたんですが、僕はMMDocumentTypes.xmlを同じフォルダにバックアップとして保存していました。
バックアップの置き場所を考えるのが面倒だったので、こうしてしまったわけですが、このバックアップしたファイルを別の場所へ移すと見事にエラーが出なくなりました。
「仕様です」と言われれば、そうなんだろうけど……うーん。
既存のCSSをSassのファイルに変換できるサイトを使って作ったソースを参考に、移植しつつ、書き直しつつという感じ。
リセットCSSなど含め、全て「style.css」の1ファイルにまとめました。
いざやってみるとSassのインストールも簡単だったので、もっと早く使ってみれば良かった。
僕の環境はWindowsなので以下の記事を参考にしてRubyのインストールからやりました。
アフターのほうではSassの機能である「セレクタのネスト」や「mixin」などを使ってます。
/* wp-pagenavi ===============================*/
.wp-pagenavi{
padding:0 0 5px 0;
}
.wp-pagenavi .pages{
font-size:0.8em;
margin:0 10px 0 0;
}
.wp-pagenavi a{
border:1px solid #ccc;
color:#666;
margin:3px;
padding:5px 10px;
text-decoration:none;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
}
.wp-pagenavi a:hover{
background:#7296DF;
border:1px solid #7296DF;
color:#fff;
}
.wp-pagenavi .current{
border:1px solid #7296DF;
color:#fff;
background:#7296DF;
margin:3px;
padding:5px 10px;
}
.wp-pagenavi .extend{
margin:0 5px;
}
/* wp-pagenavi ===============================*/
.wp-pagenavi {
padding: 0 0 5px 0;
.pages {
font-size: 0.8em;
margin: 0 10px 0 0;
}
a {
border: 1px solid #ccc;
color: #666;
margin: 3px;
padding: 5px 10px;
text-decoration: none;
@include transition(all 0.2s ease);
&:hover {
background: #7296DF;
border: 1px solid #7296DF;
color: #fff;
}
}
.current {
border: 1px solid #7296DF;
color: #fff;
background: #7296DF;
margin: 3px;
padding: 5px 10px;
}
.extend {
margin: 0 5px;
}
}
アフターのコードを人が読みやすいようにコンパイルすると以下のようになる。
当然、ビフォーのコードとほぼ同じものが出来上がる。
/* wp-pagenavi ===============================*/
.wp-pagenavi {
padding: 0 0 5px 0;
}
.wp-pagenavi .pages {
font-size: 0.8em;
margin: 0 10px 0 0;
}
.wp-pagenavi a {
border: 1px solid #ccc;
color: #666;
margin: 3px;
padding: 5px 10px;
text-decoration: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.wp-pagenavi a:hover {
background: #7296DF;
border: 1px solid #7296DF;
color: #fff;
}
.wp-pagenavi .current {
border: 1px solid #7296DF;
color: #fff;
background: #7296DF;
margin: 3px;
padding: 5px 10px;
}
.wp-pagenavi .extend {
margin: 0 5px;
}
使いこなせるかどうかはまだまだこれから。
]]>今年の6月にTwitterのロゴが新しくなり、ロゴ使用のガイドラインも変わってました。
公式ブログとガイドラインによると「かわいいフォント」や小文字の「t」は使ってはいけないと。
自分的にはあの「かわいいフォント」は好きだったのでちょっと寂しい。
ということで、「ver2.0」へリニューアルしました。
上記のブラウザでCSS3のアニメーションを含めて、ばっちり。
要は各ブラウザの最新バージョンってことですね。(2012年4月25日現在)
ただ、Operaはフォントサイズが他のブラウザに比べてかなり大きくて、ちょっと気になる。
※2012年5月1日 追記
再度確認してみたら、Operaのフォントサイズは特に問題ありませんでした。
Internetなんとかっていうブラウザのことは知りません。
見られなくなるわけではないので、それで良しと勝手にしてます。
「ver1.0」に引き続き、青色をメイン、というよりほぼ青一色。 理由は青が好きな色だからと、配色に自信がないから。
デザインはまだ全く自信が持てない。難しい……。分からない……。
それから、ブログの名前がちょっと、いやかなり恥ずかしく思えてきて、ドメイン名の「sfool」に変えようかと考えたけど、結局そのままに。(一度公開したモノを変えられるかっ!)
でも、自分がこのブログのことを呼ぶときは、「えすふる、えすふる」と言っています。
よろしくお願いします。(?)