ブログ｜ぼうびろく

19 May

[PR]

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

10 September

スマホとPCでの表示の振り分け　Wordpress

http://webtrace-cuisine.com/201302/wpismobile/
例によって覚書コピペ。わかりやすくまとまっていました。

①スマホでの表示時のみ、特定のコンテンツを表示させる

<?php if (wp_is_mobile()) :?>
【スマホで見たときのみ表示させるコンテンツ】
<?php endif; ?>>

②上と全く反対で、
スマホでの表示時のみ、特定のコンテンツを表示させない
（wp の前に反意を意味するびっくりマークを付けることで｢モバイル機器以外なら→つまり PC での表示だったならば｣という意味になります）

<?php if (!wp_is_mobile()) :?>
【PC で見たときのみ表示させるコンテンツ】
<?php endif; ?>

③PC とスマホで表示コンテンツをそれぞれ分ける

<?php if (wp_is_mobile()) :?>
【スマホで見たときのみ表示させるコンテンツ】
<?php else: ?>
【PC で見たときのみ表示させるコンテンツ】
<?php endif; ?>

通常のHTMLの場合は「display:none;」で非表示したり:block;で表示したりしてかなりめんどうでした。WPはこれで簡単だし、余計な読み込みもなくなります。

10 September

Sticky　スクロールするとサイドバーがついてくるjQuery

http://stickyjs.com/
http://webkaru.net/jquery-plugin/sticky/
https://github.com/garand/sticky

<script type="text/javascript" src="jquery.sticky.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#side_inner").sticky({topSpacing:230, bottomSpacing:600});
});
</script>

Contained Sticky Scroll　を前に使っていたので今回もこれを使おうと思った。
しかし今回はサイドバーを上にで引っ張りあげており、このJQueryだと元あった位置から追従するため、上部が見切れてスクロールしてしまった。
上下の間隔を指定するオプションがあるのかないのかわかんないしよく調べてないので、他のjQueryを探した。

手書きのものとかもコピペして色々試したが、サイドバーの下にfloatしているmainカラムがもぐりこんじゃって、なんでこうなるの状態。
Contained Sticky Scroll　ではレイアウトが崩れたりはしない。
どうしよーーーというときに「Sticky」（今調べたがスクロールして追従する技術をスティッキーというらしい）を発見。
崩れない！オプションで上下にpadding的なものをいれられる！見切れ改善！わーい！思い通りにできた！！！今度からコレ使うわ。

※<div id="side"><div id="side_inner">サイドバー</div></div>
※囲いを二重にして、中のものに指定しないとちゃんとできない気がする

01 September

「トップへ戻る」を普通に記述する方法

http://saka-d.com/omotenashi/20120824.html

HTML
まずhtmlに「トップへ戻る」枠を書く

<div id="pagetop"><a href="#header">トップへ戻る</a></div>

SCRIPT
id名を書き換え丸写しする。数値を変えると速度や画像出現ポイントが変わる

<script>
jQuery(function() {
var topBtn = $('#pagetop');
topBtn.hide();

jQuery(window).scroll(function () {
if ($(this).scrollTop() > 150) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});

topBtn.click(function () {
jQuery('body,html').animate({scrollTop: 0}, 500);
return false;
});
});
</script>

CSS
ロールオーバーで画像を変えたい。
png透過して画像の大きさが違うとか形が違うと、下の画像が見えてしまう。
なのでon･off2枚の画像をくっつけて、hoverしたときに位置を動かす
固定するのでfixed設定。

#pagetop { position:fixed; bottom:0px; right:0px; }
#pagetop a{
display:block;
width:50px;
height:100px;
background:url(images/pagetop.png) no-repeat;
}
#pagetop a:hover{
background-position: 0 -100px;
}

WPで画像を付け替えられる「page to top」プラグインが普通にない。
勝手に置き換えればできるかもしんなけど、デフォルト設定のこととか色々あるしめんどい。
ちょっと検索したら簡単なのが設置できるじゃないか。
わざわざプラグインでやるまでもない。あまりプラグインいれたくないし。
全ページに必要だからscriptはfooterに入れるだけでいいし。

28 August

アーカイブ別、カテゴリー別テンプレートの作り方

[解決済み] カスタム投稿タイプのアーカイブ用テンプレート (7 件の投稿)
http://ja.forums.wordpress.org/topic/6064

カテゴリー別

category-6.php　など該当カテゴリーIDの数字をつける

カスタムポストUIで作った投稿ポストに別のテンプレートを使いたい場合

archive-スラッグ名.php
'has_archive' => true　必須　オプションでtrueに設定する

27 August

日本語のWEBフォントの使い方

http://allabout.co.jp/gm/gc/394994/3/

使いたいフォントファイルをアップロード

@font-face {
   font-family: フォント名;
   src: url('フォントファイル名') format("種類名");
}

@font-face {
   font-family: MyWebFont;
   src: url('./wf/freefont.otf') format("opentype");
}

h1 {
   font-family: MyWebFont;
}

フォントの種類によってはシャギッて汚く見えた。
それをtext-shadowとか駆使してぼかしてアンチエイリアスかかってるように見せるらしい。
でもめんどくさいから汚く見えるフォントを使うのをやめた。
日本語のフォントファイルは文字数が多いので容量が多い。
だから必要な文字だけ云々サービスがあるけどRoundedM+以外は有料だからやってられない。
重いなんて知ったことがくそがとフォントファイルをアップロードして使うことにする。

しかしスマホで見たら重過ぎてやばかった。
うちのwifiはくそなのでそれが顕著に現れて見れたもんじゃなかったので、日本語webフォント使いを考え直す。
でも画像を作るのがめんどくて仕方ない。

mediaクエリでのスマホサイズは@font-faceの使用をやめることにした。
そうしたら、webフォント使ってた部分がMSゴシック？になった。
えー！font-family継承してくんないの？なんか線細すぎだしどうしよう。
スマホでのフォントの見え方は関係ないが、PCでブラウザサイズを縮めたときにMSゴシックみたいのがでてくる。

スマホサイズのmediaクエリにfont-familyをもう一度書き込む。
変化がなかったので!importantしとく。これでwebフォント使ってた部分にメイリオが復活した。

追記

色々とおかしいことに気づいてなかった。
問題1　
@media only screen and (min-width: 959px){　・・・　}
の中に@font-fase{　}をいれて、スマホが読み込んでくるサイズではwebフォントを使わない書き方にしてみていた。このままで出来ていたがIEで確認していなかった。（死んでいい）
確認してみたらIEでwebフォントが読み込まれていなかった。
他のブラウザでは正常にメディアクエリ通りに切り替わっている。
IEでも@font-faceの指定以外はメディアクエリを読み込んでいる。
なんなの。

少しづつHTMLとCSSを削っていって原因を調べたら、メディアクエリだった。
@font-faceをメディアクエリ内で指定するとIEでは認識しない！

色々うんうん考えて、
1、デフォルトのフォント指定
2、全体のCSSに@font-face
3、webフォントを使いたいセレクタにまとめてフォント指定(楽にするため)
4、メディアクエリで、まとめてフォント指定したCSSにデフォルトのフォント指定を上書き指定

CSSの順番
1
font-family:"ヒラギノ明朝 Pro W3","HG明朝E","ＭＳＰ明朝","ＭＳ明朝",serif;

2
@font-face{
    font-family: myfont;
    src:url(フォントファイル名.eot?),
    　　url(フォントファイル名.woff) format('woff'),
　　　url(フォントファイル名.ttf) format('truetype');
}

3
h1, h2{
    font-family: myfont;
    }

4
@media only screen and (max-width: 959px){
h1, h2{
    font-family:"ヒラギノ明朝 Pro W3","HG明朝E","ＭＳＰ明朝","ＭＳ明朝",serif;
}
}

よく考えればこっちのやり方のほうが順々にきていてスムーズだよね
IEしね

.eot、.woff　ファイルを作るのに武蔵システムとかいうとこのソフトをDLして使った
どっかのブラウザで変換したのより武蔵のほうがファイルサイズが少なかった･･･→.eot
http://opentype.jp/woffconv.htm

フォントファイル軽量化のための.htaccessの記述
http://web-tan.forum.impressrd.jp/e/2013/12/10/16577
1番目の「webフォントの圧縮」だけやった。.htaccessのことは全然わからないので
色々設定してあとで何かが干渉したりしてわけわかんなくなるのが嫌だから。
.htaccessの記述を間違えていると500エラーがでます。
最後に改行入れるとか変な法則があります。