忍者ブログ
20 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

25 August

レスポンシブデザイン時にする基本設定

いつものことにより、色々なところからのコピペ

http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/
これを書かないと画面が縮小されなかった

ピンチできない大手サイトって結構ある
縦横で倍率可変okな設定にすると、レイアウトがめんどそう
ガタガタいわれたくないときは強制的に拡大縮小不可!
リキッドレイアウトなら絶対これのほうがいい。
リキッドにせず、横幅320px固定ならピンチok設定でいいと思う。

・横向きのときは文字数を増やしたい場合
(ピンチで拡大縮小できない)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

・縦横どちらのときでも1行の文字数他レイアウトをまったく同じにしたい場合
(横になると画像も文字も横幅にあわせて拡大される)
(横向きで極端に拡大される)
<meta name="viewport" content="width=device-width">

・拡大縮小できつつ、横向きで1行の文字数を増やしたい場合
(縦横で表示倍率が変わってしまう)
<meta name="viewport" content="width=device-width,initial-scale=1.0">


文字サイズ自動調整OFFのcssらしい
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;


画像を画面サイズに合わせて縮小するcss
img{
max-width:100%;
height:auto;
}

テキストが変に左によりすぎてる。width指定もmargin・padding指定もしてないのに!
テキストのbackgroudに画像、もしくはbg-colorを指定すること。そうすると直る。
Android4系?のページの自動調整で勝手に整形されるため。うぜー。

画面サイズごとのcss指定
@media only screen and (max-width:1024px){ }

最近はスマホでも解像度があがっているため、320pxとか640pxとかで見てる人は存在するの?
するだろうけどそんな細かく気にする必要ある?
まとめて小さいサイズはこれだ!ってやったほうが楽じゃない?
つまりレスポンシブデザインを作る時点で、複雑設計をしてはいけない。

私のスマホでなんでちゃんと縮小されないんだろうって悩んでた。
$(window).width()
これで解像度を調べたところ1000いくつとかあって、スマホの見た目のサイズと全然違った。
そりゃ640以下のmediaクエリとかに書き込んでも反映しないはずだよ。
本当の1024サイズと
、スマホの画面領域360pxで全然違うじゃん。
なんかもうめんどくせー。
1024以下(タブレット・スマホ)と以上(パソコン)で分けるのが簡単でしょ!

スマホでjsを実行させたくない条件分岐のしかた
http://webpad.felicyle.com/jquery/iphone-js-no/

PR
16 August

クロールエラーをなくしたい 404.phpを作る ワードプレス

404.phpを作る


index.phpをコピーしてファイル名を変更する
<p>指定されたページは存在しませんでした</p>
<a href="<?php echo home_url(); ?>">トップページへ戻る</a>
とでも書き込む

.htaccessの先頭
ErrorDocument 404 /index.php?error=404
と書き込む
wpが入ってるフォルダを作っているなら
ErrorDocument 404 /blog/index.php?error=404
などと書きこむ
※wpがインストールされてるフォルダ内の.htaccessに書く
上の階層にもあるしよくわかんなくて色々やった

page.php single.php archive.php index.php(記事があれば)の先頭(get_headerの上)に
<?php if (!have_posts()) {
header("HTTP/1.1 404 Not Found");
include (TEMPLATEPATH . '/404.php');
return; } ?>

と書き込む
※404.phpに書いてはいけない。適当に書いたら存在しないページが真っ白になった。
http://www.koikikukan.com/archives/2007/05/21-022525.php

wpのテンプレを使用すると、記事のとこには大抵「記事がなかったらこの文を出す」っていう命令があると思います。でもそれだと404をgoogleにだしてないということになるらしいので、無いページは無い!ということをGoogleに伝えるために、記事がない場合は404.phpを出すようにするコードです。

既に削除したり変更したスラッグってありますよね。
WPは簡単にページが作れるので作っちゃ捨て、みたいなとこあると思います。
でも一定期間おいといてその間にクロールがきちゃってURL拾われるとやばいです。
削除したあとにまたクロールが来てページがないよーって言われます。
この404クロールエラーは検索結果に影響しないってGoogleがいってるのでほっといていいと思うんですが、色々と煩い人もいるのでなくす必要がある人もいるかと思います。

手っ取り早く404クロールエラーをなくすのはrobots.txtでクロールが来ないようにブロックすることみたいです。でもWPで適当に記事作って捨ててるとゴミがたくさん404エラーで出てきてrobots.txtが汚くなります。なんかそれは嫌なんですよね。

次に無いページからリダイレクトすることです。
でもそれは「ソフト404エラー」といってあまりよろしくないらしいです。
リダイレクトは古いURLから新しいURLに飛ばすのが本来の使い方っぽい?
でもWPは初期設定で.htaccessにindexにリダイレクト命令が書き込まれています。
だから色々設定が必要なんです。

どこかの誰かが間違ったURLを貼り、そのリンクを誰かがクリックしたとしても404クロールエラーが出るそうです。どうしようもないよね。私のせいじゃないんですけど。
使ってるスラッグがおかしくて機能してないならともかく、削除していらないスラッグのことでエラーでてどうこういわれるとかイライラするわ。
16 August

wordpress seo by yoast で設定すること 覚書 ワードプレス

wordpress seo by yoast


日本語化パッチの導入
http://pasonal.com/wordpress-seo-by-yost-jp-download/

header.phpの<title>の中身を下記変更
<title><?php wp_title( '|', true, 'right' );?></title>

テンプレテーマを使うとbloginfo("name")みたいにサイト名を表示するテンプレートタグが書いてあると思います。しかしSEOプラグイン使うなら、これが邪魔になってくるので消します。

カテゴリーと、カスタムフィールドのみで作られた投稿内容がないページはプラグインでdescriptionを勝手に作ってくれません。なので個別ページで記述します。
06 August

welcart 保有ポイント、付与ポイントについてのあれこれ

「基本設定」→「ショップ設定」→「ポイント率初期値

これは設定してから新規登録した商品にしか反映されない
そのため後からポイントつけたいなと思ったら、全ての商品詳細ページで個別にポイント率を入力する必要がある。はーだりい何百ページを全て書き直し・・・。
今ポイントの予定が無くてもとりあえず初期値は1%とかに設定しておき、
「会員ポイント」→「付与しない」で無効化しておくほうがいいとおもう。


「基本設定」→「営業設定」→「キャンペーン対象



該当カテゴリーに入ってるものすべてを対象とし、
「一律ポイント○倍」や「○%割引き」を設定する。
キャンペーン専用カテゴリーを作るか、既存のカテゴリーから選ぶかする。
しかし一つのカテゴリーしか設定できない
複数種類のポイント倍付けをしたかったら、個別ページでポイント%を変える必要がある


「受注画面詳細」→「付与ポイント



ここに入力されたものは、「会員リスト」の「保有ポイント」に加算される。
商品を削除すると「付与ポイント」も減る。
個別に修正したい場合は「会員リスト」の「保有ポイント」をいじる。


保有ポイントを表示する



<?php if(usces_is_membersystem_point()): ?>ポイント:
<?php echo usces_the_member_point();?> p
<?php endif; ?>

表示させたい場所に上記を書き込む。
※一旦会員をログアウトしないと保有ポイントが反映されない(無駄にハマったふざけんな)
[解決済み] ポイント付与について
http://goo.gl/IHrK1X


ポイントレートを表示する


どちらか一方のみ記述だと思っているのと違う数値が出てしまいます。

<?php usces_point_rate_discount(
); ?>
キャンペーンポイントレートの数値を出力
→通常モードでも、キャンペーンカテゴリーの商品はキャンペーン特典に記述したポイントレートで表示されてしまう

<?php usces_point_rate(); ?>
通常ポイントレートの数値を出力
→キャンペーンモード中なのにキャンペーンカテゴリー品も通常ポイントレートで表示されてしまう。

http://welcustom.net/point-rate-display/
有名なwelcartカスタマイズブログのこのページのコードを参考に挿入し、ちゃんと表示できました。キャンペーンスケジュール・キャンペーンポイントを設定して更新してみてください。
通常時とキャンペーン時でポイントレートが切り替わってれば正常です。

「営業日設定」→「キャンペーン・スケジュール


ここの日付を設定すると、「基本設定」で設定したキャンペーンカテゴリー及び倍率へ、自動的に予約日に切り替わります。キャンペーン予約日を設定しないときは、「年」を空欄にします
「ホーム」→「表示モード」のところに、今設定されてる状態が表示されます。
受注詳細画面の中の「キャンペーンセール」のところに、開催期間中の買い物は何のキャンペーンをしていたかが記述されます。
ポイント付与トラブルを避けるためにも、「キャンペーン・スケジュール」で日付を設定したほうがのちのち記録に残るようです。

普段はポイント付与なしで、たまにポイント付与したい場合。


1、「基本設定」→「営業設定」→「キャンペーン対象」→「全商品」にし、
   「キャンペーン特典」→「ポイント 0 倍」にします。
2、「営業日設定」→「キャンペーン・スケジュール」の「年」を空白にします

これで表示モードは「通常モード」のまま、ポイントレートが0%になりました。
通常1% × ポイント0倍 = 0%
ここを「全商品」「ポイント1倍」で全商品1%(通常1%の場合)になります。
確認は <?php usces_point_rate_discount($post->ID); ?>% を記述してみてください。

今時はポイント付けるとなれば通常でつくのが当たり前ですが、通常時はナシにしたいという人もいるかもしれません。こういうふうにやろうとしてぶっつけ本番でやりました。キャンペーンが終わり、ポイントつけないのだから「付与しない」を選んで更新したら、保有ポイント項目自体表示されなくなりました。「あれ、できなくない?これ」とマジ焦りです。

ポイント持ってる人がもういるのに、ポイント使えないとかやばいじゃん。でも通常時にポイント付与したくないしどうしよう・・・。
ポイント率はもう1%に全て書き換え済みです。これをまた全部0%に書き換えるのか?という焦りでやばかったわけですが、なんとか解決できてよかったです。
でも全然正攻法じゃないとおもうのでうーん。
一括でポイント率書き換えのなんかないのか。

てかXAMPPで検証すべきだった。出来ると思って本番でやってやらかすとこだった。


30 July

nth-of-typeの使い方 意外と知らないセレクタ

:nth-of-type(odd) ・・・ 奇数番目の要素に適用
:nth-of-type(2n+1) ・・・ 奇数番目の要素に適用
:nth-of-type(even) ・・・ 偶数番目の要素に適用
:nth-of-type(2n) ・・・ 偶数番目の要素に適用
:nth-of-type(3n) ・・・ 3,6,9,12…番目の要素に適用
:nth-of-type(3n+1) ・・・ 1,4,7,10…番目の要素に適用
:nth-of-type(-n+3) ・・・ 最初の3つの要素に適用
:nth-child(n+3) ・・・ 最初の3つの要素以外に適用
http://d.hatena.ne.jp/smartboy/20131229/p1
http://weboook.blog22.fc2.com/blog-entry-268.html