カテゴリー: コーディング

カスタム投稿のアーカイブページにもAll in One SEOのディスクリプション設定を反映する方法です。アーカイブページなどにAll in One SEOのメタ情報を適用するためにはfuction.phpに下記の記述をする必要があります。

カスタム投稿のタクソノミーとアーカイブページの固定ページを作って、できたpageIDを以下に入れると、meta情報が反映されます。

// ===========================
// = カスタム投稿のアーカイブページにもAll in One SEOのディスクリプション設定を反映する =
// ===========================
function aioseop_title_extention($title){
  if(is_post_type_archive('タクソノミー')){
    $title = get_post_meta(pageID, _aioseop_title, true);
  }
  return $title;
}
add_filter('aioseop_title', 'aioseop_title_extention');

function aioseop_keywords_extention($keywords){
  if(is_post_type_archive('タクソノミー')){
    $keywords = get_post_meta(pageID, _aioseop_keywords, true);
  }
  return $keywords;
}
add_filter('aioseop_keywords', 'aioseop_keywords_extention');

function aioseop_description_extention($description){
  if(is_post_type_archive('タクソノミー')){
    $description = get_post_meta(pageID, _aioseop_description, true);
  }
  return $description;
}
add_filter('aioseop_description', 'aioseop_description_extention');

レスポンシブサイトでtableを扱うとき、横並びになっていたthやtdのセルをブロック要素にして、横幅100%で表示させることがあります。

指定方法は、thおよびtdにdisplay:blockを指定するだけです。
これで、tdがブロック要素として表示されるので、各ボックスが横幅100%になり、たてに順に並びます。

単にtableにもdisplay:blockをするだけではできません。

table {
    width:100%;
    display:block;
}

blockにするのはthとtdにしてtable の横幅を100%にします。

table {
    width:100%;
}
th,td {
    display:block;
}

横並びのボックスの高さ(下辺)を揃えたい時は、Flexboxを使うと高さを揃えることが可能です。

文字数などで高さがばらばらのボックスを高さを揃えて配置したいときなどに便利です。

例えば、float: left; で横並びのボックスを配置した時、文章量などが変わるとボックスの高さがバラバラで揃いません。

そんな時、Flexbox を使うと、文字量が多いボックスの高さにに他のボックスの高さが揃ってくれるのです。

■html

  

    

      

      
テキストテキストテキストテキスト
    
    

      

      
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    
    

      

      
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    
  

■css

.box{
 display:flex;
}
.box li{
 width: 31%;
 margin: 1%;
}

便利なFlexboxですが、
Flexboxは全てのブラウザとバージョンに対応しているワケではないので、ベンダープレフィックスを使用したほうが良いでしょう

.box {
  display: -webkit-box;
  display: -moz-box;    
  display: -ms-flexbox;
  display: -webkit-flex; 
  display: flex
}

Noto Fontsは、GoogleとAdobeが連携して制作したフォントです。
世界の言語を1つのフォントセットで表現したものです。

フォントセットにない文字を表示させようとすると豆腐文字が出てきてしまいますが。
Noto Fontsではそんなことはありません。

フォントの名前もno more tofuからきているそうです。

文字数ですが、Noto Sans JPが6,992文字
Noto Sans Japaneseが6,934文字。です。
Noto Sans JPでは漢字が35文字増えており、漢字以外は23文字増えています。

ですが問題点もあり、

文字を表示するのに時間がかかってしまうので、使用する文字などできるだけ少なくしたほうがよさそうです。

CDNのWebフォントを利用し、
日本語のWebフォントはサイズが大きいので、CDNなどの利用者のブラウザにキャッシュされているものを使用し、Note Fontsの場合で言えば、Googleのサーバのものを指定することです。

jQueryでCSSの属性値を変更したりできます。これを応用すれば動的にcssの変更などができるようになります。
基本的には下記のようになります。

■css

#js {
    font-size:16px;
    font-weight: bold;
}

■js

$(function() {
    $("#js").css({
        "font-size": "16px",
        "font-weight": "bold"
    });
});

上記のように記述すれば同じ効果が得られます。

文字の先頭と最後をあわせるのにTABや空白などを入れて調整するときもありますが、text-justify-lastを使うと、文字の頭と最後を揃えて字間が調整されるので、便利です。

letter-spaceなどで調整もできますが、字間の調整も一括でできるのでより使いやすい方法だと思います。

  text-align: justify;
  text-justify-last: inter-ideograph;

フッターなどにカテゴリのリストをリンク付きで表示させることができるWordPressタグです。
カテゴリーを直接記述するのもいいですが、カテゴリーの数が多くなってくると管理も大変なので、
カテゴリを管理画面から編集することができるので、システムで動的に吐き出したほうが、制作は楽です。

:matches()擬似クラスは複数のセレクタをたった1行で簡潔に記すことができるものです。

.contents h2,
.contents p,
.contents ul, {
　　margin:10px 0;
}

同じ親要素内の子にスタイルを適用しているのですが、そのまま並列して記載しており、記述が長くなってしまいがちです。
ですが、:matches()を使えば、下記のようにシンプルにまとめることができます。

:matches(.contents) :matches(h2, p, ul) {
　　margin:10px 0;
}

FirefoxやChromeではベンダープレフィックス対応で:any()擬似クラスを使用したほうが良いです。

:-webkit-any(.contents) {
　　margin:10px 0;
}

:-moz-any(.contents) {
　　margin:10px 0;
}

フォントサイズをjqueryで変更は必ず必要とは限りませんが、ブラウザで文字サイズ変えられたり、拡大の方法がわからない人にとっては、必要になります。
(ブラウザの標準機能として文字の拡大の方法を知らないユーザーが多いことから、文字拡大機能を見える形でページ上に設置したほうが親切ということです。

下記では「大」「中」「小」とボタンを表示し、それぞれ押すことで、サイトの文字サイズを変更することが可能です。
■html

     

       
小
       
中
       
大
     

$(function(){ 
	$("#font li").click(function(){
		$("#fontSize li").removeClass("current");
		var fontCss = $(this).attr("class");
		$(this).addClass("current");
		if(fontCss == "large"){
		  $("body").css("fontSize","0.875em"); 
		}else if(fontCss == "middle"){
		  $("body").css("fontSize","0.75em");
		}else{
		  $("body").css("fontSize","0.625em");
		}
 	});
});

閲覧しているページの文字サイズを大きく表示したいという必要性はあるので、
そのニーズを満たすことはできますが、これはユーザーエージェント側で担うべきです。

:only-of-typeの疑似クラスは、nth-of-type(n)やnth-child(n)セレクタと似ています。
nth-of-type(n)やnth-child(n)が複数の子要素に対するものでありますが、
only-of-typeは唯一の子要素に対して指定できます。
ページ内に3個の要素があり、商品リストなどが表示されていた場合。
販売しなくなった商品は消去していくとすると、3点示される場合と、一点だけしか表示されないこともあります。

一点しか表示しない場合、空のボックスは表示せず、全幅で表示するようにすることができます。

■html

  
      
商品01
      
商品02
      
商品03

■css

list li{  
      float: left;
      margin-right: 10px;
      width: 100px;
    }

    article:only-of-type {  
      width: 100%;
      margin-right: 0;
    }