【jquery】タイトルを抽出して目次を作成+ページ内スクロール

プラグイン入れるのが微妙なラインだったんで簡単な目次作成のjqueryさくっと。
キュレーションとかブログサイトは目次付きが主流らしいですね~。

動作サンプルはこっち

HTML

<div id="mokuji"></div>
<div style="height:1000px;"></div>
<h3 class="title">あああ</h3>
<div style="height:1000px;"></div>
<h3 class="title">いいい</h3>
<div style="height:1000px;"></div>
<h3 class="title">ううう</h3>
<div style="height:1000px;"></div>

JS

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=4.3'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js?ver=4.3'></script>
<script>
$(document).ready(function(){
    var count = 1;
    $('<p>目次</p>').appendTo('#mokuji');
     $("h3.title",this).each(function(){
     	$('<span class="links">' + $(this).text() + '</span>').appendTo('#mokuji');
     	count++;
     });
    $(document).on("click",".links ", function() {
        var i = $(".links").index(this)
        var p = $("h3.title").eq(i).offset().top;
        $('html,body').animate({ scrollTop: p }, 'fast');
        return false;
    });
});
</script>

CSS

<style>
span {display:block;cursor:pointer;}
</style>

【.htaccess】日本語で301リダイレクトかけるとき

rewrite試したりしてたけど、

リダイレクト前のURLはエンコードせず、リダイレクト後のURLはエンコードします。

の一言!

参考:【.htaccess】日本語あれこれで301リダイレクトに失敗する場合の対処法
http://ysklog.net/server/2440.html

【例】
http://aaa.jp/日本語.html

http://aaa.jp/aaa/日本語.html

Redirect 301 /日本語.html http://aaa.jp/aaa/%E6%97%A5%E6%9C%AC%E8%AA%9E.html

etc

[htaccess]キャッシュクリア

301リダイレクトURL設定を間違っていて修正した場合、
大体は更新→ブラウザ再起動で直るのですが、なかなか反映されない場合もある模様でした。
閲覧者に閲覧履歴消去してもらうのも変な話なので
htaccessでキャッシュクリアしてしまうのがよさげ

<Files ~ "\.(html|php|jpe?g|gif|png)$">
Header set Pragma no-cache
Header set Cache-Control no-cache
</Files>
etc

[wordpress]固定ページやTOPページなどでユーザー情報を取得・表示させる

3.5以降から WP_Queryならぬ WP_User_Queryが使えるようになったようなので
TOPとか固定ページでの表示が可能です。
基本的な使い方はWP_Queryと一緒で foreach が居るくらい?
カスタムフィールドも取得できます

<?php
$args = array(
	'role' => 'editor',//投稿者権限
	'order'    => 'ASC',
	'meta_key' => 'sort',
	'orderby'  => 'meta_value_num'
	);
	
$the_query = new WP_User_Query( $args ); ?>

<?php if ( ! empty( $the_query->results ) ) : ?>
<?php foreach ( $the_query->results as $user ) : ?>
<?php 
$uid		= $user->ID;
$meta 		= get_field('meta_key','user_'.$uid);
?>

<h5><?php echo $user->display_name;?></h5>
<p><?php echo $meta;?></p>

<?php endforeach;?>
<?php else :?>
<?php endif;
wp_reset_postdata(); ?>

【wordpress】カテゴリごとの記事一覧自動取得

引用:カテゴリごとの記事の一覧をトップページに羅列したい

いまのとこ使わないけど覚書φ(-ω-)カキカキ

<?php
$categories = get_categories();
foreach($categories as $category) :
  echo '<h5>' . $category->cat_name . '</h5><ul>';
  query_posts('showposts=5&cat=' . $category->cat_ID);
    while(have_posts()) :
      the_post();
      echo '<li>' . get_the_title() . '</li>';
    endwhile;
  wp_reset_query();
  echo '</ul>';
endforeach;
?>

【SASS】【CSS3】画像にscaleを使ってホバーアニメーション

一個前の記事のオマケみたいなもの
これも今日のコーディングで作ったのでついでに載せとこうかなと
一個前の記事内 「@mixin anime」使ってます。

動きはあらかじめ拡大画像を表示させておき、ホバーすると標準サイズの画像に縮小するって感じです。

SASS


@mixin imgscale($scale-x : 1,$scale-y:1){
    -webkit-transform: scale($scale-x,$scale-y);
    -moz-transform: scale($scale-x,$scale-y);
    -o-transform: scale($scale-x,$scale-y);
    -ms-transform: scale($scale-x,$scale-y);
    transform: scale($scale-x,$scale-y);
}

			a {
				img {
					@include imgscale(1.1,1.1);
					@include anime;
				}
			a:hover {
				img {
					@include imgscale(1,1);
					@include anime;
				}
			}

配布されてるmixin使うのが手っ取り早いのでしょうが、人の作ったやつってどうも苦手で自分用のを作らないとダメな性分^▽^;

【SASS】【CSS3】ハンバーガーボタンに動きをつける

ハンバーガーメニューで動きのあるものを見つけて、これいいなぁと思ってたので、ちょうど今日コーディング依頼があったのでサクっと作ってみました。つっても全部SASSです。例のごとくsampleなどは面倒なのでないです。そのうち、このブログにも反映させとうかなー。できたてほっかほかですよー。(byライスの人)

動きとしては、クリックすると2個目の棒線が消え、1個目・3個目の線が斜めにアニメーションするようになっています。

SASS

@mixin anime {
    -moz-transition: -moz-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    transition: transform 0.1s linear;
}
@mixin rotate($rotate : -10){
    -webkit-transform: rotate($rotate + deg);
    -moz-transform: rotate($rotate + deg);
    -o-transform: rotate($rotate + deg);
    -ms-transform: rotate($rotate + deg);
    transform: rotate($rotate + deg);
}

@mixin button {
	display:block;
	width:40px;
	height:40px;
	border:none;
	@include kadomaru(10px);
	background:$color5;
	@include abs-tr(25,15);
	
	span {
		display:block;
		height:3px;
		width:90%;
		margin:5px auto;
		background:$white;
		@include kadomaru(5px);
		@include anime;
		@include rotate(0);
	}
}
@mixin buttonclose {
	span:nth-child(2) {
		display:none;
	}
	span:nth-child(1) {
		@include anime;
		@include rotate(-45);
		position:relative;
		top:4px;
	}
	span:nth-child(3) {
		@include anime;
		@include rotate(45);
		position:relative;
		top:-4px;
	}
}


	button {
		display:block;
		@include button;
		
	}
	button.close {
		@include buttonclose;
	}

HTML

 <button><span></span><span></span><span></span></button>