【CSS】Flexboxを使いこなす – まとめ

CSS Flexboxは、プロパティがたくさんあって、初めは覚えるのが大変だと思いましたが、一通り使ってみて思ったのは、レイアウトの実現が楽で、プロパティが多くてもストレスレスな感じですね。
Flexコンテナ(親要素)とFlexアイテム(子要素)、それぞれに記載するプロパティを図にしてみました。

Flexコンテナ(親要素)に記述するプロパティ

以下、詳細へのリンクと、要約です。

Flexboxの基本の記述
「desplay: flex」と最初に記述。必須。

flex-direction
方向の指定 値:row, row-reverse, column, column-reverse

flex-wrap
改行可否の指定 値:nowrap, wrap, wrap-reverse

flex-flow
「flex-direction」「flex-wrap」を一緒に記載するショートハンド

justify-content
水平方向の配置 値:flex-start, flex-end, center, flex-between, flex-around

align-items
垂直方向の配置 値:flex-start, flex-end, center, baseline, stretch

align-content
行の配置 値:flex-start, flex-end, center, flex-between, flex-around, stretch

Flexアイテム(子要素)に記述するプロパティ

以下、詳細へのリンクと、要約です。

flex-grow
flexアイテムの伸長倍率 値:数値(マイナス無効)

flex-shrink
flexアイテムの短縮倍率 値:数値(マイナス無効)

flex-basis
flexアイテムのサイズ 値:auto, 数値(pxなど)

flex(ショートハンド)
「flex-grow」「flex-shrink」「flex-basis」を一緒に記述するショートハンド

align-self
各Flexアイテムの垂直方向の配置 値:flex-start, flex-end, center, baseline, stretch

order
Flexアイテムの並べ替え 値:数値

【CSS】Flexboxを使いこなす – その3

CSS Flexboxを使いこなす – その1CSS Flexboxを使いこなす – その2 の続きです。

前回までにまとめたこと

これまでのプロパティは、Flexコンテナ(親要素)の方に記述をして、Flexコンテナ内のFlexアイテム全体に値を指定していましたが、今回のプロパティは、各Flexアイテム(子要素)にそれぞれに値を指定します。

flex-grow プロパティ(Flexアイテムの伸びる倍率)

Flexコンテナ(親要素)に全てのFlexアイテム(子要素)を格納してなおスペースが余る場合、そのスペースを自動的に埋めるための各Flexアイテムの伸びる倍率を指定します。

(デフォルト flex-grow: 0 マイナスの値は無効)

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-webkit-box-flex: 0;
	-ms-flex-positive: 0;
	flex-grow: 0;
	}

例)
Flexコンテナ(親要素)に、widthが30px の6個のFlexアイテム(子要素)は入っています。
左詰めで、右側に96pxの余りのスペースがあります。

全てのFlexアイテム(子要素)に、flex-grow:0と、同じ値を指定すると、余りのスペースは6等分され、96px÷6=16pxで、各Flexアイテムは16pxずつ伸びます。

flex-growに異なる値を指定すると、余りのスペースはその割合で分配されます。
↓の図の場合、2番目のFlexアイテムのみflex-grow:3で、他はflex-grow:1なので、2番目は他に比べて3倍伸びます。

サンプルページ: flex-grow.html

flex-shrink プロパティ(Flexアイテムの縮む倍率)

Flexアイテム(子要素)のサイズの合計が、Flexコンテナ(親要素)のサイズを上回ってしまう場合、自動的にFlexコンテナの中に収めるために、各Flexアイテムの縮む倍率を指定します。

(デフォルト flex-shrink: 1 マイナスの値は無効)

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-negative: 1;
	flex-shrink: 1;
	}

例)
Flexコンテナ(親要素)に、widthが50px の6個のFlexアイテム(子要素)は入っています。Flexアイテムの幅の合計は、Flexコンテナより48px小さいです。

全てのFlexアイテム(子要素)に、flex-shrink:1と、同じ値を指定すると、はみ出した部分は6等分され、48px÷6=8pxで、各Flexアイテムは8pxずつ縮みます。

flex-shrink:0とすると、そのFlexアイテムは、オリジナルのサイズを維持します。それ以外の数値を指定されたFlexアイテムが、その数値の比率で縮みます。
↓の図の場合、2番目と3番目ののFlexアイテムのみflex-shrink:0なので、オリジナルの50pxを維持します。他はflex-grow:1なので分割され縮みます。

サンプルページ: flex-shrink.html

flex-basis プロパティ(Flexアイテムのサイズを指定)

各Flexアイテム(子要素)のサイズを指定できます。widthとほぼ同じですが、後に記述するflexショートハンドに含められるので便利です。

(デフォルト flex-basis: auto

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
	}

例)
Flexアイテム(子要素)に、flex-basis:autoを指定すると、元のサイズを維持します。
↓の図の場合、5番目のFlexアイテムのみ、flex-basis:150pxが指定されているので、サイズ変更されています。

サンプルページ: flex-basis.html

flex プロパティ(flex-grow、flex-shrink、flex-basisをまとめて指定するショートハンド)

flex-grow、flex-shrink、flex-basisを個別に指定するよりも、flexプロパティを利用してまとめて指定する方を、W3Cで推奨しているようです。

(デフォルト flex: 0 1 auto

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-flex: 0 1 auto;
	flex: 0 1 auto;
	}

「flex:」に続けて、スペースを開けて、「flex-grow」「flex-shrink」「flex-basis」の順に指定します。

「flex: 0 1 auto」なら、「flex-grow: 0」「flex-shrink: 1」「flex-basis: auto」となります。

また、「flex: auto」「flex: none」という値も指定できます。
「flex: auto」=「flex: 1 1 auto」
「flex: none」=「flex: 0 0 auto」

サンプルページ: flex-shorthand.html

align-self プロパティ(各Flexアイテムの垂直方向の配置を指定)

align-items プロパティでは、Flexコンテナ(親要素)の中にある全てのFlexアイテム(子要素)に対して同じ配置を指定しますが、align-selfは、それぞれのFlexアイテムに個別に配置を指定します。

(デフォルト align-self: auto

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-item-align: auto;
	-ms-flex-grid-row-align: auto;
	align-self: auto;
	}

align-self プロパティに指定できる値は、align-items プロパティと同じです。

「align-self: auto」align-items プロパティで指定された値を維持
「align-self: flex-start」上揃え
「align-self: flex-end」下揃え
「align-self: center」中央揃え
「align-self: baseline」ベースライン揃え
「align-self: stretch」Flexコンテナの高さ、もしくはコンテンツが一番多いFlexアイテムに合わせる

「align-self」の値は、「align-items」より優先されます。

サンプルページ: align-self.html

order プロパティ(Flexアイテムの並べ替え)

HTMLの記述の順番を変えずに、Flexアイテムの配置の順番を変えられます。

(デフォルト order: 0

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	}

サンプルページ: order.html

おしまい!

⇒ 次回、CSS Flexboxまとめ です。

⇒  Flexbox を使いこなす – その1

⇒  Flexbox を使いこなす – その2

【CSS】Flexboxを使いこなす – その2

CSS Flexboxを使いこなす – その1 の続きです。

前回は、以下の3点についてまとめました。

今回は、以下の3点です。

justify-content プロパティ(水平方向の揃え方の指定)

flex-direction プロパティで指定した方向に対して、Flexアイテム(子要素)の配置を指定できます。

(デフォルト justify-content: flex-start

justify-content: flex-start(並列の場合「左揃え」、縦列の場合「上揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

サンプルページ: justify-content-flex-start.html

justify-content: flex-end(並列の場合「右揃え」、縦列の場合「下揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

サンプルページ: justify-content-flex-end.html

justify-content: center(「中央揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

サンプルページ: justify-content-center.html

justify-content: space-between(最初と最後のアイテムは端に、それ以外は等間隔に配置)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

サンプルページ: justify-content-space-between.html

justify-content: space-around(最初と最後のアイテムも含め、全てのアイテムを等間隔に配置)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-pack: distribute;
	justify-content: space-around;
}

サンプルページ: justify-content-space-around.html

align-items プロパティ(垂直方向の配置の指定)

全てのFlexアイテムに対して、垂直方向の配置を指定します。

(デフォルト align-items: stretch

align-items: flex-start(並列の場合「上揃え」、縦列の場合「左揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

サンプルページ: align-items-flex-start.html

align-items: flex-end(並列の場合「下揃え」、縦列の場合「右揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

サンプルページ: align-items-flex-end.html

align-items: center(「中央揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

サンプルページ: align-items-center.html

align-items: baseline(ベースラインを揃えて配置)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}

サンプルページ: align-items-baseline.html

align-items: stretch(Flexアイテムの高さが指定されてない場合、一番コンテンツの多いものに高さを合わせる)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

サンプルページ: align-items-stretch.html

align-content プロパティ(行の配置)

flex-wrap プロパティで「nowrap」以外に設定した場合、複数行になります。その時の行の配置を指定します。

(デフォルト align-content: stretch

align-content: flex-start(並列の場合「上揃え」、縦列の場合「左揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: start;
	align-content: flex-start;
}

サンプルページ: align-content-flex-start.html

align-content: flex-end(並列の場合「下揃え」、縦列の場合「左揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: end;
	align-content: flex-end;
}

サンプルページ: align-content-flex-end.html

align-content: center(「中央揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: center;
	align-content: center;
}

サンプルページ: align-content-center.html

align-content: space-between(最初と最後の行は端に、他の行は等間隔)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: justify;
	align-content: space-between;
}

サンプルページ: align-content-space-between.html

align-content: space-around(最初と最後の行も含め、全ての行が等間隔)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: distribute;
	align-content: space-around;
}

サンプルページ: align-content-space-around.html

align-content: stretch(最初の行は端に揃え、行の後に等間隔のスペース)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: stretch;
	align-content: space-stretch;
}

サンプルページ: align-content-stretch.html

ここまで!

⇒  Flexbox を使いこなす – その1

⇒  Flexbox を使いこなす – その3

【CSS】Flexboxを使いこなす – その1

並列、縦列レイアウトの切り替えがシンプルなコードで行える Flexbox が使いこなせると、レスポンシブデザインが簡単にできますね。サンプル用のウェブページも作ってみました。ソースと合わせて動きを見てもらえればと思います。
プロパティがかなり多いので、今回は以下の3点をまとめます。

Flexbox とは

Flexコンテナ(親要素)の中に、いくつかの Flexアイテム(子要素)を内包する構成です。
Flexコンテナ内でのFlexアイテムの配置、伸縮などを指定することができます。

↓ の HTML において、クラス item の6つの要素の配置、サイズを、順々にCSS Flexbox を利用して指定していきます。

HTML

<div class="flex-container">
   <div class="item one">1番目の要素</div>
   <div class="item two">2番目の要素</div>
   <div class="item three">3番目の要素</div>
   <div class="item four">4番目の要素</div>
   <div class="item five">5番目の要素</div>
   <div class="item six">6番目の要素</div>
</div>

Flexboxの基本の記述

CSSに「desplay: flex」と指示することで、要素が並列になります。

CSS

.flex-container {
	display: flex;
}

対応していないブラウザもあるかもしれないので、プレフィックスのも記述した方がいいでしょう。(以後、全て、プレフィックスも記します。)

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

サンプルページ: flex-01.html

flex-directionプロパティ(方向の指定)

flex-directionを使うと、HTMLはそのままで、Flexコンテナの主軸の方向を設定することができます。

(デフォルト flex-direction: row

flex-direction: row(並列 左から右へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

サンプルページ: flex-direction-row.html

flex-direction: row-reverse(並列 右から左へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

サンプルページ: flex-direction-row-reverse.html

flex-direction: column(縦列 上から下へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

サンプルページ: flex-direction-column.html

flex-direction: column-reverse(縦列 下から上へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	-ms-flex-direction: column-reverse;
	flex-direction: column-reverse;
}

サンプルページ: flex-direction-column-reverse.html

flex-wrapプロパティ(改行可否の指定)

縮小して1行に収めるか、幅を超えたら改行するかを指定できます。

デフォルト flex-wrap: nowrap

flex-wrap: nowrap(縮小して1行に収める)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

サンプルページ: flex-wrap-nowrap.html

flex-wrap: wrap(縮小しないで複数行に配置 左から右へ 上から下へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

サンプルページ: flex-wrap-wrap.html

flex-wrap: wrap-reverse(縮小しないで複数行に配置 左から右へ 下から上へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
}

サンプルページ: flex-wrap-wrap-reverse.html

flex-flowプロパティ(flex-direction, flex-wrapをまとめて指定するショートハンド)

デフォルト flex-flow: row nowrap

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
}

「flex-flow:」に続けて、スペースを開けて、「flex-direction」「flex-wrap」の順に指定します。

サンプルページ: flex-flow.html

ここまで!続きは・・・

⇒ CSS Flexboxを使いこなす – その2

⇒ CSS Flexboxを使いこなす – その3

ドロップダウンメニュー(レスポンシブ対応)jQuery編

WordPressの最近のテーマは大概、メニューなどレスポンシブ対応で、自動でドロップダウン式に切り替わるようになっていますが、古いテーマを利用するとか、手書きで書く場合など、使えるかなと思って、レシピ的にメモしておきます。
ドロップダウンメニューはCSSだけでも実現できますが、今回はjQueryです。

ddmenu.js

jQuery(document).ready(function($){

	var agent = navigator.userAgent;
	var list = jQuery("div.menu-container");

	function menuslide(){
	//メニュー表示非表示
	jQuery("p.navtitle").click(function(){
	if(jQuery(list).css("display")=="none"){
		jQuery(list).slideDown("normal");
	}else{
		jQuery(list).slideUp("normal");
	}
    });
    }

    if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1){
        menuslide();

    }else if(agent.search(/Android/) != -1){
        menuslide();

	}else{
		var replaceWidth = 700;
		function widthSize(){
			var windowWidth = parseInt(jQuery(window).width());
			if(windowWidth >= replaceWidth) {
				jQuery(list).css("display","block");
			} else if(windowWidth < replaceWidth) {
				jQuery(list).css("display","none");
			}
		}
		jQuery(window).resize(function(){widthSize();});
			widthSize();
			menuslide();
  }
});

CSS

@media screen and (min-width: 701px) {
    p.navtitle {
        display: none;
    }
}

@media (max-width: 700px) {
    /* @media (max-width: 700px) Reduce font-sizes for better readability on smaller devices */
p.navtitle {
        color: #ffffff;
        dispaly: block;
        cursor:pointer;
        line-height:1.4;
        font-size: 14px;
        font-weight:bold;
        margin: 1.2em 0 1.2em 5px;
    }
    #access div {
        margin: 0;
    }
    #access ul {
        margin: 0;
    }
    div.menu-menu-1-container {
        height: auto;
        width: 100%;
        display: none;
    }
    div.menu-container ul {
        width: 100%;
    }
    div.menu-container ul li {
        float: none;
        background: #222;
        width: 100%;
        padding: 0;
        text-align: left;
        font-size: 14px;
    }
    div.menu-container ul li a {
        border-bottom: solid 1px #666;
    }
    
   .nav-btn-ico {
      display: inline-block;
      position:relative;
      margin: 0 10px 3px 0;
      padding: 0;
      background: #ffffff;
    }
    .nav-btn-ico, .nav-btn-ico:before, .nav-btn-ico:after {
      width: 14px;
      height: 3px;
    }
    .nav-btn-ico:before, .nav-btn-ico:after {
      display: block;
      content: "";
      position:absolute;
      top: 50%;
      left: 0;
      background: #ffffff;
    }
    .nav-btn-ico:before {
      margin-top: -8px;
    }
    .nav-btn-ico:after {
      margin-top: 4px;
    }  
}

【WordPress】子テーマを作る

WordPressって、割合頻繁にアップデートされるんですよね。テーマもアップデートされるので、テーマ内のファイルを直接カスタマイズしていた場合、書き込んでいたものがすべて消えてしまった!なんて悲しいことになってしまいます。つらいですねー。

そんなことが起こらないように、「WordPressのインストール」→「設定」→「テーマを選らぶ」まで進んだら、まずはカスタマイズ専用の「子テーマ」を作成します。これで、元々のテーマ(親テーマ)がアップデートされても、子テーマはそのままカスタマイズされた状態で残ります。

子テーマ作り手順

1. 最低限必要なファイルを作る( style.css と function.php )
2. 子テーマのディレクトリを作り、ファイルをアップロード
3. WordPress 管理画面より、子テーマを有効化する

手順その1. ファイル作成(style.css と function.php )

このような二つのファイルを作成します。

style.css

/*
 Template:     twentyseventeen
 Theme Name:   twentyseventeen-child
*/

新しいスタイルシート(style.css)を作り、スタイルシートヘッダに、最低限必要な2つの情報を書き込みます。

Template: 親テーマのディレクトリ名
Theme Name: 子テーマ名

親テーマのディレクトリ名ですが、サーバーにあるWordPressファイルの中、「wp-contents > themes」の直下に見つかります。
子テーマ名は任意ですが、親テーマ名に「-child」を付け加えることが推奨されています。

functions.php

<!--?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

新しいfunctions.phpを作り、親テーマと子テーマのスタイルシートをキューに入れる記述をします。4行目で親テーマのstyle.cssを先に読み込み、続いて5行目で子テーマのstyle.cssが読み込まれます。

他に、style.cssに@importを書き込む方法もありますが、こちらの方法が推奨されていますね。実際に私も試してみましたが、反応やや遅めです。

手順その2. 子テーマのディレクトリを作り、ファイルをアップロード

子テーマのディレクトリを作ります。場所は、サーバーにあるWordPressファイルの中、「wp-contents > themes」内。
親テーマと同じ階層に置きます。

作ったディレクトリに、「style.css」と「functions.php」をアップロードします。

手順その3. WordPress 管理画面より、子テーマを有効化


WordPress 管理画面より、「外観」→「テーマ」で、先ほど作った子テーマが反映されているか確認します。

子テーマがあったら、「有効化」をクリック。

これで子テーマの設定は終了です。

親テーマと子テーマの関係

CSSなら、先ほど作ったstyle.cssに、追加したい内容のみ書き込みます。
その他、PHPファイルは、親テーマからダウンロードしたものをカスタマイズし、子テーマへアップロードします。
(PHPファイルは、特に子テーマとの関係を記述するなどの必要はありません)

親テーマの内容と、子テーマの内容は、以下のような関係で反映されます。

CSS: 親テーマの「style.css」に、子テーマの「style.css」を 内容を追加
PHP: 親テーマのPHPファイルに、子テーマのPHPファイルを 上書き
(functions.php のみ例外)

また、子テーマのディレクトリ内に、サイトで利用する画像を入れるためのディレクトリを作っておくとよいでしょう。

【WordPress】CSSのキャッシュを自動リロードさせる方法

はっと気が付いたのですが、CSSって更新しても、キャッシュに残っている場合、スーパーリロードさせないと新しいのが反映されないんですよね。ここもちょこちょことCSS書き足しているのですけれどね・・・。自分だけで見ているのなら、その都度スーパーリロードをかければいいのですが、公開していることを考えるとどうすればいいのか?「皆様、何月何日何時、CSS更新しましたので、キャッシュのリロードお願いします」なんてわけにもいきませんしね。

CSSのキャッシュを自動リロードさせるには、どうすればいいのか?
CSSファイルの更新日時を取得し、それに合わせてリロードするよう、htmlのheadに指示を書き込むことで解決できるみたいです。

やりたいこと

CSS更新時、クライアント側のキャッシュを自動的にリロードさせる

利用する関数

[ PHP関数 ]
filemtime() → ファイルの更新時刻
date() → 日時の取得

[ WordPress関数 ]
bloginfo() → サイト情報を表示
get_stylesheet_directory() → 現在のテーマ、子テーマのスタイルシートのディレクトリパスを取得

手順

1. WordPressの利用中のテーマ、もしくは子テーマ(すでにheader.phpが子テーマの中にあるのなら)から、FTPで header.php をダウンロード
2. header.php に自動リロードの指示を追加
3. 子テーマに header.php をアップロード(子テーマについては後日書きます)

head.php

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<!--?php wp_head(); ?-->

/* ここに↓を追加 */
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>
?ver=<?php echo date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css')); ?>" />

</head>

↑の head.php は、テーマ twenty seventeen のものですが、wp_head() の読み込まれたあとに追加すれば問題ありません。
やっていることは、要するに、更新日をそのままstyle.cssのバージョン名として、新たなstyle.cssとして認識させるということです。キャッシュに残っているのと別のバージョンなら、改めて読み込まれます。

【CSS/HTML】サイトにソースコードを記述する

このサイトのページに、CSSやPHPなどのソースコードを載せたいのですが、そのための記述の仕方をまとめます。

やりたいこと

左に行数を表示し、右にソースコードを記述

HTMLタグ

<pre>タグ: 整形済みテキストを表示する(ブロックレベル要素)
<code>タグ: プログラムコードやHTMLやCSSなどのコードを示す(インライン要素)

CSSカウンター

counter-reset プロパティ: カウンターに名前を設定し、値を初期化
counter-increment プロパティ: counter-resetで設定したカウンターの値に1を加算
content プロパティ: 要素を生成された値で置き換え
counter() 関数: 値を生成
::before 疑似要素: 選択した要素の最初の子要素として擬似要素を作成

ソースコード記述の為のCSS例

/* 全体を収めるブロック */
div.code-toolbar {
    position: relative;
}

/* 整数済み部分 */
pre {
    position: relative;
    padding: 1em 1em 1em 3.8em;
    overflow: auto;
    counter-reset: linenumber;
    border-left: 1px solid hsla(256, 97%, 27%, 0.71);
    font-size: 14px;
    box-shadow: 0 0.5px 0.5px rgba(0,0,0,0.1), 0 0.5px 0.5px rgba(0,0,0,0.1);
    border-top: .1px solid hsla(0, 0%, 84%, 0.1);
    border-right: .1px solid hsla(0, 0%, 84%, 0.1);
    background: #f5f2f0;
    display: block;
}

/* ソースコード記入部分 */
code {
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    position: relative;
}

/* 行数表示部分全体 */
.line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 各行数表示 */
.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

/* カウンター */
.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

ソースコード記述の為のHTML例

<div class="code-toolbar">
<pre><code>/* シュークリームが大好きです */
<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

ブラウザでの表示

/* シュークリームが大好きです */

【WordPress】テーマ

WordPressをインストールして設定を行ったら、まず初めにすることは、「テーマ」選びかと思います。
「テーマ」とは、ブログのテンプレートの様に、Webサイトの見た目の決めるデザインのようなものですが、全体の構成や枠組み、それぞれ独自の機能まで含まれています。

最新版(WordPress 5.2)では、「Twenty Nineteen」「Twenty Seventeen」「Twenty Sixteen」の3つがインストールされていますが、「外観」→「テーマ」→「新しいテンプレートを追加」をクリックすると、何千個ものテーマが表示されます。

「Twenty ~」という、開発された年数が名付けられたテーマは、全てWordPressのデフォルトのテーマで、利用者も大変多く、アレンジの仕方、扱い方など、たくさんの人が、サイトなどで、分析、解説していますね。分からない所があっても、ネット検索すると、大概、どなたかのサイトで答えが見つかります。私のこのサイトも「Twenty Seventeen」を利用しています。

その他のすごーくいっぱいあるテーマは、無料のもの、有料のもの、一部有料のもの、ある機能に特化したもの、デザインも様々で、迷ってしまいます。こちらもネット検索すると、オススメや特徴をまとめたWebサイトが多数あるので、そのようなものを参考にするのもよいかもしれません。

テーマを決めたら、カスタマイズを始めるのですが、その前に、テーマ内のファイルの関係をまとめてみました。ざっくりとした私の理解の範囲ですが。

「functions.php」は、テーマの中の王様のような存在です。各phpファイルを関係づけ、全体をまとめます。

それぞれのファイルの変更は、直接上書きするのではなく「子テーマ」を作成し、そこに変更点、追加点を記載していきます。(「子テーマ」については、また別に書きたいと思います)

【CSS】ボタンジェネレイター

CSSってスタイルの指定以外にも、結構色々な事ができるんですよね。jQueryやFlashの代わりとか、絵がかけるとか。

こんなドラえもんとか!→ CSSだけで描いたドラえもん

すごいですねー。

ウェブサイトに使われるボタンは、画像を利用するより、CSSのみで実装する方が軽量化を図れるし、SEOの観点からも優れていると言われています。CSS3の「border-radius(角丸)」や「linear-gradient(グラデーション)」を組み合わせると、画像と間違えるような美しいボタンが出来るのですが、少々面倒ですね。そんな時、CSSボタンジェネレーターを使うと、簡単にボタンのCSSを生成してくれます。

「CSSボタンジェネレーター」で検索すると、色々出てくると思いますが、私が利用しているのはこちらです。

www.bestcssbuttongenerator.com

左の部分から、基本のデザインを選び、右の部分で、細かな設定を調整します。
Text: ボタンの文字列、任意のクラス名、フォントスタイル、サイズ
Size: ボタンの高さ、幅
Border: ボタンの角丸、輪郭線幅
Box Shadow: 影の種類

スタイルが決まったら、出来上がったボタンをクリック。そうすると、右の部分に、HTMLとCSSが表示されます。あとはそれをコピペするだけ。
1行目はHTMLに、それ以外はCSSに。HTMLにリンク先を入れれば、それで完了です。

About Me

↑ 出来上がったボタン

便利ですね!