ＳＥＯに強いウェブ制作を行う京都の行政書士事務所
h1タグの背景を、ずっどーーーんって横一杯に取りたいとき、background-sizeをcoverにすれば綺麗に表示される。
これは分かった。でも、背景画像はスクロールするとくっついていきますね、当たり前だけど。
で、ポジションをfixedにすると、画像が拡大して表示されちゃう。これをどうにかして修正しようと色々やってみた。
このトラブルで悩んでいらっしゃる人がいれば、結論はこれだ。
「画像の高さを十分に取ってみる」
自分がミスったのは、できるだけサイズを小さくするために、画像をコンテナの縦幅ギリギリで合わせてトリミングしていたという点です。
横幅は、1920ピクセルに対応できるようなサイズにしている。でも縦は、せいぜい150とか300とか、そういう数値で切り取ってました。
何故これでは拡大表示されるのか、よくは分かりません。でも、縦幅を800にしてみたらちゃんと表示された。動いていればいいんだす河。
文字の位置を調整するのはいつだって苦労する。
特に、縦の位置を揃えるのは難題だ。
今回、色々やってみて「おっっ」と思ったTIPSがあったのでメモっておこう。
たとえば「お名前必須」というブロックがあったとして。
高さ、あいませんやん。
それを
「お名前必須」にする、みたいな。
つまりこれはね。
|
1 2 3 4 5 6 7 8 9 10 11 |
span.hoge { background:#ff9900; border-radius: 4px;color:#fff; display:inline-block; font-size:60%; margin-left:5px; padding:1px 3px; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.4); position:relative; top:-4px; } |
って感じで、ポジションをつけてあげて、トップからの高さで引っ張ってきたって感じ。
背景つけたいからパディングを設定している訳で、動かすところはもうそこしかない。
これって自分的には大発見。きっと色んなとこに載ってるんだろうけど。。。
動いてるよーぐると。
標準では、アーカイブに表示されるのは「投稿」だけになるので、カスタムポストタイプをひっくるめたタグアーカイブを表示させたいときは、ちょっとした工夫が必要になるそうだ。
|
1 2 3 4 5 6 |
function add_post_tag_archive( $wp_query ) { if ($wp_query->is_main_query() && $wp_query->is_tag()) { $wp_query->set( 'post_type', array('post','disease')); } } add_action( 'pre_get_posts', 'add_post_tag_archive' , 10 , 1); |
動いているんば。
スティッキーヘッダーは、二つのやり方があるよね。
一つ目は、最初から固定しておくやり方。そして、二つ目は画面高さを取得して、スクロールに合わせて「sticky」（とかの）クラスを追加してやる方法。
僕は後者を使うことが多い。
でね、ポジション固定してz-index追加したら、なんか、下の画面が上にシュッと動く訳ですよ。
最初、これは「ヘッダが吸い付く時の動作ってこんなもんだろう」って思ってたんだけど違った。
当たり前だけど、z-indexで重ね順を作りだしているので、下の階層のは上に上がろうとする。
なので、スムーズに動かしてやろうと思うなら、クラスを付与したと同時に（z-indexを作動させたと同時に）、下の要素にパディングトプでヘッダの高さ分の余白を入れてやればいいんですわ。
そうなったら、どこに「sticky」ってクラスを付与するかも問題になりますよね。僕はヘッダのすぐ下にある要素に直接付け足す、つまり２箇所に付け足すというやり方でやりました。あんまりスマートとは言えないけどね～。ま、いいやん、別に間違いでもない訳だし。
CSSメモっときます。
|
1 2 3 |
body.home.site-content.sticky { padding-top:136px; } |
動いてるヨーダ。
スティッキーヘッダーにして表示させた時、ちょっと高さが縮んでアニメートするやつありますやん？
あれ、やってみたかったんだけど難しいんすよね。ヘッダー内の左にロゴ、右にバナー置いているのでjqueryでmax-heightを追加して、それをトランジションで動かせばいいんだろうけど、画像縮めたら文字が滲みますやん？
だから、ヘッダのパディングを０にして、それをアニメートさせる感じで作っちゃったら意外とかっちょいい。
CSSのコードだけメモっておこう。
|
1 2 3 4 5 6 7 8 9 |
.fixedarea .site-branding { padding:10px 0; transition: all 0.5s ease; } .fixedarea.sticky .site-branding { padding:0; transition: all 0.5s ease; } |
動いてるんだワン。
お客たまが、どうしても左右の高さを揃えたいとのたまう。フルスクリーンいっぱいに使った三段組みのレイアウト。1920ピクセル画面と1366画面では行の高さは当然かわっちゃう。でも、基本の高い方が決まっていたから、そっちの高さを取得して、他の方にmin-heightで代入してしまおうという方針。
|
1 2 3 4 5 6 7 8 9 |
$(function() { $(window).on('load resize', function(){ var newsheight = $('#text-4').height(); var takasa = newsheight + "px"; $('#text-5').css( { 'min-height' : takasa , }) }); }); |
動いてるわん。
あのね、ワードプレスで管理画面をカスタマイズする情報はやくさんある。左メニューの無駄な項目をfunctions.phpに書くやつね。
たしかにそれは便利だ、クライアントワークで、お客様に管理権限を渡す場合だって、ユーザー名の条件分岐で、自分以外の人間の場合にメニューを消すことだってできるんだろう。
しか～し、今回は、管理画面にカスタムCSSファイルをひっかけて、cssでディスプレイ：ノンしちゃおうという企画。
何故そんなことするのかって？自分で覚えてるからfirebugで表示させればいつでもアクセスできるじゃん、みたいな。
まぁ、いくつかやり方はあるんだろうけど一応記念にメモっておこう。
|
1 2 3 4 5 6 |
/* load custom css for admin panel /*---------------------------------------------------------*/ function custom_css() { echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/inc/admin.css">'; } add_action('admin_head', 'custom_css'); |
で、cssファイルを作って書きますよと。
動いたよ～（笑）。
動いたのでとりあえずメモ。 HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="slidercontainer"> <ul id="slider"> <li class="slide selected"><img src="" alt="" width="" height="" /></li> <li class="slide"><img src="" alt="" width="" height="" /></li> <li class="slide"><img src="" alt="" width="" height="" /></li> <li class="slide"><img src="" alt="" width="" height="" /></li> </ul> <button id="prev">前のスライド</button> <button id="next">次のスライド</button> <div style="clear:both"></div> </div> |
スタイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.slidercontainer { margin:100px auto; padding:10px; width:487px;/*スライド幅+22ピクセル*/ border:1px solid #ccc; } #slider { display:block; width:100%; height:261px;/*スライド高さ*/ padding:0; margin:0 0 10px; overflow:hidden; } #prev, #next { bottom:0; display:block; width:120px; background-color:#00ABFF; padding:5px; border:none; font-size:17px; color:#fff; } #prev { float:left; } #next { float:right; } |
jQuery [crayon-673fe…
やりたいこと。普通にある文字を、あるタイミングで着色し、回転させる。タイミングをjqueryでコンチョローしてクラス付与、CSSでクニュッと曲げちゃう感じ。 まずはHTMLから。 [crayon-673fe3fceaf4…
やりたかったこと。
もしトップページならこれ、ページ何々ならあれ、それ以外はほにゃらら
|
1 2 3 4 5 6 7 |
<?php if(is_front_page()): ?> <p>これ</p> <?php elseif(is_page('スラッグ名')) : ?> <p>あれ</p> <?php else : ?> <p>それ以外、ここがみそあるね。</p> <?php endif; ?> |
ちなみに4.4から短縮URLが見れなくなったから、ページIDが分かりづらい、でも、編集中のURL見れば確認できるあるね。
自分はカテゴリの条件分岐でもID使うことが多かったけど、エクスポートでデータ引っ越ししたらカテゴリ番号ってずれるじゃないですか。それなら最初からスラッグでやっておくのもありなのかなと思うようになりましたです、はい。
動いてるよ～。
