月別: 2016年1月 | みやこデザイン｜京都のWEB＆SEOコンサルティングオフィス

高さを揃えるjquery

お客たまが、どうしても左右の高さを揃えたいとのたまう。フルスクリーンいっぱいに使った三段組みのレイアウト。1920ピクセル画面と1366画面では行の高さは当然かわっちゃう。でも、基本の高い方が決まっていたから、そっちの高さを取得して、他の方にmin-heightで代入してしまおうという方針。

$(function() {
	$(window).on('load resize', function(){
	var newsheight = $('#text-4').height();
	var takasa = newsheight + "px";
			$('#text-5').css( {
				'min-height' : takasa ,
			 })
	});
});

$(function() {

$(window).on('load resize', function(){

var newsheight = $('#text-4').height();

var takasa = newsheight + "px";

$('#text-5').css( {

'min-height' : takasa ,

})

});

動いてるわん。

2016年1月11日カスタマイズBy takaomi

wordpressで管理画面をカスタマイズ

あのね、ワードプレスで管理画面をカスタマイズする情報はやくさんある。左メニューの無駄な項目をfunctions.phpに書くやつね。
たしかにそれは便利だ、クライアントワークで、お客様に管理権限を渡す場合だって、ユーザー名の条件分岐で、自分以外の人間の場合にメニューを消すことだってできるんだろう。

しか～し、今回は、管理画面にカスタムCSSファイルをひっかけて、cssでディスプレイ：ノンしちゃおうという企画。
何故そんなことするのかって？自分で覚えてるからfirebugで表示させればいつでもアクセスできるじゃん、みたいな。

まぁ、いくつかやり方はあるんだろうけど一応記念にメモっておこう。

/*	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');

/* 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ファイルを作って書きますよと。
動いたよ～（笑）。

2016年1月11日カスタマイズBy takaomi

非レスポンシブスライダー

動いたのでとりあえずメモ。 HTML

<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>

</ul>

<button id="prev">前のスライド</button>

<button id="next">次のスライド</button>

</div>

スタイル

.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;
   }

.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-6802a…

2016年1月8日カスタマイズBy takaomi

文字を回転+着色

やりたいこと。普通にある文字を、あるタイミングで着色し、回転させる。タイミングをjqueryでコンチョローしてクラス付与、CSSでクニュッと曲げちゃう感じ。まずはHTMLから。 [crayon-6802a086e258…

2016年1月6日カスタマイズBy takaomi

ページ毎の条件分岐

やりたかったこと。
もしトップページならこれ、ページ何々ならあれ、それ以外はほにゃらら

		<?php if(is_front_page()): ?>
			<p>これ</p>
		<?php elseif(is_page('スラッグ名')) : ?>
			<p>あれ</p>
		<?php else : ?>
			<p>それ以外、ここがみそあるね。</p>
		<?php endif; ?>

<?php if(is_front_page()): ?>

<?php elseif(is_page('スラッグ名')) : ?>

<?php else : ?>

<p>それ以外、ここがみそあるね。</p>

<?php endif; ?>

ちなみに4.4から短縮URLが見れなくなったから、ページIDが分かりづらい、でも、編集中のURL見れば確認できるあるね。

自分はカテゴリの条件分岐でもID使うことが多かったけど、エクスポートでデータ引っ越ししたらカテゴリ番号ってずれるじゃないですか。それなら最初からスラッグでやっておくのもありなのかなと思うようになりましたです、はい。

動いてるよ～。

2016年1月6日カスタマイズBy takaomi

アクティブだったらサイドバーを活用したい場合

　サイドバーは普通に書くと、アクティブでない場合もマークアップされてしまう。なので、サイドバーに何か入っている時だけアクティブにするというコードが便利だ。いつでも引っ張り出すのに苦労するのでここに書き留めておこう。 [c…

2016年1月6日カスタマイズBy takaomi

Monthly Archives: 1月 2016

高さを揃えるjquery

wordpressで管理画面をカスタマイズ

非レスポンシブスライダー

文字を回転+着色

ページ毎の条件分岐

アクティブだったらサイドバーを活用したい場合