カスタム分類のページの URL を変更する

admin コメントをする

固定ページなどでは親をつけたりして、パーマリンクの設定が可能です。
今回はアーカイブページの場合のスラッグのつけ方を紹介します。

register_post_type(
 'news',
 array(
 'label' => 'お知らせ',
 'public' => true,
 'hierarchical' => false,
 'has_archive' => true,
 'rewrite' => array('slug' => '親/news'),
 'supports' => array(
 'title',
 'editor',
 'thumbnail',
 'excerpt'
 ),
 'menu_position' => 1
 )
 );

‘rewrite’ => array(‘slug’ => ‘親/news’),

rewrite パラメータ
「rewrite => array(‘slug’ => ‘カスタム投稿名’)」と指定すると
「http://ブログのアドレス / 親階層 / カスタム分類のスラッグ / 」でアクセスできます。

ページ外リンクにクラスを付与

admin コメントをする

ページ外リンクにアコーディオンメニューなどがある場合、アンカーリンクで飛んだ、
リンク先のdiv要素に対してactiveなどのクラス名を付与したりする場合があります。

そんな時下記のスクリプトでクラス名を付与することができます。

widthでtableの幅がうまく指定できない時

admin コメントをする

IEのバージョンや古いiphoneなどで、テーブルのtd幅を width で指定しても効いてくれないことがあります。

そんなときの対処法です。
その場合tableにtable-layoutのfixedを適用してあげると、指定することのできなかったテーブルの横幅を指定できるようになります。

また、レスポンシブ構築でうまく改行されないといった場合は

word-wrap: break-word;

上記でうまく解決できると思います。

tableは少し癖があって扱いづらいですが、この2つのCSSを知っていれば対処できる場合がるので便利です。

CSS3で縦書きにする方法

admin コメントをする

ブラウザ間によって異なりますが、writing-mode: vertical-rl;を指定したときには、
Chrome、Safariは右詰めになります。
Firefoxでは左詰めで表示されます。

tate {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}

行間を設定したい場合、line-heightで設定します。
text-indent。1em（1文字分）下げれば、縦書きにはピッタリです。

Youtube動画のレスポンシブ対応

admin コメントをする

youtubeの動画をブログなどに貼り付けるとき、スマホの場合によっては、レスポンシブ化しなければならないこともあります。
そういうときには、縦の長さを含めて大きさが変わるようにするcssの設定が必要になります.

■html

■css

.youtube{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.youtube iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

このcssであればレスポンシブに対応された状態になります。

要素の中身が変更されたとき実行

admin コメントをする

今回は要素の中身が変更されたとき実行するjqeryの紹介です。
wpなどで動的に書き出される要素に対して、もっと見るボタンなどの中身の文字や画像の変更をjqueryで行うことが可能です。

var content = null;
$(document).ready(function() {

    var a = function() {
        if (content != $('#item').text()) {
            if (content != null) {
                
               $(function(){
	       $('.itemDetail .soldout').each(function(){
		var txt = $(this).html();
		$(this).html(
			txt.replace(/変更前/g, '変更後')
		);
	});
});

            }
            content = $('#item').text();
        }
    };
    setInterval(a, 300);
});