ＳＥＯに強いウェブ制作を行う京都の行政書士事務所
お客たまが、どうしても左右の高さを揃えたいとのたまう。フルスクリーンいっぱいに使った三段組みのレイアウト。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-6629b…
やりたいこと。普通にある文字を、あるタイミングで着色し、回転させる。タイミングをjqueryでコンチョローしてクラス付与、CSSでクニュッと曲げちゃう感じ。 まずはHTMLから。 [crayon-6629b995265e…
やりたかったこと。
もしトップページならこれ、ページ何々ならあれ、それ以外はほにゃらら
|
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使うことが多かったけど、エクスポートでデータ引っ越ししたらカテゴリ番号ってずれるじゃないですか。それなら最初からスラッグでやっておくのもありなのかなと思うようになりましたです、はい。
動いてるよ～。
サイドバーは普通に書くと、アクティブでない場合もマークアップされてしまう。なので、サイドバーに何か入っている時だけアクティブにするというコードが便利だ。いつでも引っ張り出すのに苦労するのでここに書き留めておこう。 [c…
