CSS変数とは、「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」となっています。

変数には文字列や数値などを入れることができます。
この変数に、繰り返し利用する数値やカラーコードなどをCSS変数を使えば、
定義しておいた変数の中身だけ変えるだけで、変更が可能となります。

CSS変数の定義
利用したい部分で var(–変数名) と記述すると、定義した値を当てはめられます。

:root {
  --text-position: center;  /*text-positionは変数名*/
}
.test {
  width: 200px;
  height: 100px;
  text-align: var(--text-position);
}

CSS変数は動的に利用でき、JavaScriptに流用することができます。
下記では.testの変数–text-positionの中身を取得する記述です。

const boxElement = document.querySelector('.test');
const cssStyle = getComputedStyle(boxElement);
const cssValue = String(cssStyle.getPropertyValue('--text-position')).trim(); 
 
console.log(cssValue);

wpに標準であるタクソノミー「カテゴリー」や「タグ」とは別に、自由にタクソノミーを追加することが可能です。
自由に追加した、タクソノミーが「カスタムタクソノミー」となります。

■タクソノミー
タクソノミーは簡単に言うと「カテゴリ」や「タグ」などといった分類を自分で追加することができる事です。

■ターム
言葉で説明するとタクソノミーに属した分類です。

例えば「商品」(タクソノミー)に「食品」を追加したとします。
この場合は
「商品」がタクソノミー
「食品」がタームのようになります。

■カスタム投稿タイプ
標準の「投稿」「固定ページ」とは別に、自由にで投稿タイプを追加することができます。
追加した投稿タイプを「カスタム投稿タイプ」と呼びます。

■flex-grow
flex-growプロパティはflexのアイテムの伸長数を設定でき、数値で指定します。

Flexのコンテナがアイテムを格納して、余りがある場合、指定されたプロパティに沿って、自動的に余白を埋めるよう伸縮します。

ただし、flexアイテムでないときは伸縮しません。

■flex-shrink
flex-shrinkプロパティはflexアイテムの縮短数を設定でき、数値で指定します。

先ほどの「flex-grow」とは違い、数値が大きいほど幅が狭くなります。

そして、「flex-shrink」は「flex-wrap:nowrap」と同時に使用しないといけません。

■flex-basis
flex-basisの使い方は、width、heightと同じです。

flexアイテムの幅をwidthで指定しても、別のプロパティで比率を指定している場合、widthの値が反映されません。
その場合に幅を固定してくれるのが、このflex-basisプロパティです。

「flex-direction」が、row、row-reverseのときは「flex-basis」は横幅を指定します。
「flex-direction」が、columnやcolumn-reverseのときは「flex-basis」は縦の長さを指定することになります。

値に指定できるのは数値と、初期値である『auto』です。

マルチサイトでテーマを変更する方法です。マルチサイト化してもヘッダーやフッターが共通化されている状態だと思いますが、新規追加したサイトのテンプレートを変更することが可能です。

1.参加サイトから、サイトネットワークの管理→サイト
2.サイトを編集の設定からTemplateの箇所をテーマのフォルダ名を指定することによって使用するテンプレートの変更が可能になります。

マルチサイトはサイトごとにテーマを変えたり、使用プラグインの組み合わせを変更することができるので、汎用性を持ちつつ、サイトを一元管理できるというメリットがあります。

マルチサイトに対応しないプラグインもあり、
一般的に単一でのサイトでのみ運営するケースが多いため、マイナーなプラグインやテーマファイルの場合、マルチサイト対応を行なっていないケースがあります。

WPのマルチサイト化は、1つのサーバー、1つのプログラムで複数のサイトを運営できる便利な機能です。

ネットワークの有効化をしてから、WordPressをマルチサイト化すると親サイトのURLに「/blog」が追加されてしまい、ページのリンク切れなどを引き起こします。この「/blog」は不要なので削除する方法を紹介します。

ネットワーク管理者の管理画面から親サイトのパーマリンク設定を変更することです。

ネットワーク管理者の管理画面から「サイト」を開き、設定タブをクリックします。そうすると、「Permalink Structure」という項目があるので「/blog」を削除すれば完了です。

WordPressを初めてマルチサイト化したとき、つまずくポイントだと思うので、対処法は知っておきたいですね。

CSSの疑似クラス :only-child は、兄弟要素がない要素を指定します。
:first-childや:last-child :nth-child(n)と似た指定方法ですが、:nth-childほどに詳細に指定することはできません。

例ではonly-childという文字だけが非表示になり、テキストの文字だけが表示されます。

  

    
only-child
  

  

    
テキスト
    
テキストonly-child
  

section :only-child {
  display:none;
}

システムで組まれていて、静的に買い替えることができない場合、jQueryでの要素の移動で対応できる場合があります。

下記では、.testの内容を.contentの要素の中に移動させています。

   $('.test').prependTo($('.content'));

        
test
    
    

    

onmouseover属性とonmouseout属性を使用しての画像の切り替えをコーディングで使用することも多いと思いますが。
PCでは問題なく画像が表示されていても、iPhoneで画像をタップすると画像が消えてしまうバグが存在します。

リンク先には飛べますが、リンクからバックで戻ってきても画像がそのままの状態でキープされてしまい、リロードしないと再表示されない状態になります。

元の画像が消えないように

onmouseoverでロールオーバー画像を指定（PC表示）
onmouseoutでロールオーバー前の画像を指定（PC表示）
onmouseupでタップ前の画像を指定（iPhone表示）

3つの指定をしなければなりません。

readyはDOMツリーの構築が完了してから実行されます。

loadは画像などのサイト内のデータなど、全てが読み込まれてから実行されます。

readyは画像などが表示されるより前に実行されます。

$(function(){
    alert('');
});

$(document).ready(function() {
    alert('');
});

$(window).on('load',function(){
    alert('Hello');
});

記事を公開してから指定した期間「新着アイコン」を表示

WordPresで新着に記載した記事に対して、「新着」のアイコンの表示を可能にする方法です。

新着アイコンを表示させたい場所に、下記を記述します。「$days = 7;」の部分に指定したい期間を入力するとその期間、新着アイコンが表示されます。
下記では、投稿してから一週間、新着アイコンが表示されます。

 $elapsed ) {
    echo '新着';
  }
?>