All-in-One WP Migration (WordPress プラグイン)

WordPressサイトのサーバー移転って、普通にするとなると、結構、時間も手間もかかるんですよね。FTPで転送して(これが時間掛かります!)・・・データベース動かして・・・.htaccessとかファイル書き替えて・・・内部リンク直して(とても面倒臭い)・・・
私も一度やってみましたが、うんざりしましたよ。

今回、またお引越ししなくちゃいけなくなって、なんか簡単な方法はないかなってプラグイン検索してみたら、サーバー移転&バックアップ機能のあるプラグインって、いくつもあるんですね。「All-in-One WP Migration」を試してみましたが、すごーーーく簡単です!あの手動で移転の大変さが嘘みたいに、スムーズに移転ができました。
簡単 & 速い & 内部リンク自動書き換え と、本当素晴らしいです。

All-in-One WP Migrationでサーバ移転の手順

(前提として、引っ越し先サーバにもWordPressがインストールされている必要があります)
1. All-in-One WP Migration をインストール
2. 引っ越し元からデータ・エクスポート
3. 引っ越し先へデータ・インポート

All-in-One WP Migrationをインストール

引越し元、引っ越し先、両方のWordPress管理画面より、それぞれ、「プラグイン」>「新規追加」で「All-in-One WP Migration」を検索し、インストールします。有効化すると、左の欄に、「All-in-One WP Migration」と表示されます。

引っ越し元からデータ・エクスポート

引越し元のWordPress管理画面より、「All-in-One WP Migration」>「エクスポート」をクリック。

「検索(文字列)置換(別の文字列)データベース内」→ 書き換えたい文字列があれば、ここに入力
「高度なオプション」→ エクスポートしたくないファイルがあれば、ここで選択
「エクスポート先」→ 無料版では「ファイル」しか選べません。使用中のディバイスにダウンロードされます。

緑の枠に囲まれた「~をダウンロード」というのが出てきたら、そこをクリックします。

引っ越し先へデータインポート

引越し先のWordPress管理画面より、「All-in-One WP Migration」>「インポート」をクリック。

「インポート元(先ほどダウンロードしたファイル)」を選んで、「PROCEED」をクリックすれば完了なんですが、ここで、私はちょっと問題がありました。
ダウンロードしたファイルのサイズは28MB。だけど、「最大アップロードファイルサイズ」が、5MBとなっています。どうやらこれは、利用しているサーバの方で、初期設定がそのようになっているらしく、それを変更する必要がありました。

いくつか方法があるようですが、私はその下のところの「最大アップロードファイルサイズをあげる方法」と書かれたリンク先の1番目に書かれていた、「.htaccessファイルをアップデートする」というのをしました。

php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

WordPressディレクトリ直下にある.htaccessファイルに、</IfModule>の直前、このように書き込みます。これで、最大アップロードファイルサイズが128MBに広がりました。

「インポート元(先ほどダウンロードしたファイル)」を選んで、「PROCEED」をクリックして完了です!
あっという間にお引越しできました!

List Category Posts (WordPressプラグイン)

WordPressのプラグイン(拡張機能)って、本当に豊富で、こんなのないかな、って検索すると、必ずあるっていうぐらい、何でもありますね。本当に便利です。

投稿記事をカテゴリー毎、タグ毎に、一覧を表示させるプラグイン、ないかな、って思って、検索して見つけた「List Category Posts」。簡単なショートコードで一覧を作れます。

プラグイン有効化後、投稿記事や固定ページに書き込むショートコードをまとめます。

投稿タイトルの一覧表示

新着記事一覧を表示する、一番単純なショートコード。

ショートコード: [catlist]

投稿日を表示

新着記事一覧と投稿日を表示するショートコード。

ショートコード: [catlist date=”yes”]

「date_modified=”yes”」を使うと、投稿日ではなく、更新日が表示されます。

抜粋を表示

新着記事一覧と抜粋を表示するショートコード。

ショートコード: [catlist excerpt=”yes”]

カテゴリーを指定

カテゴリーを指定して、そのカテゴリーの一覧を表示するショートコード。

ショートコード-01: [catlist name=”カテゴリー名”]
ショートコード-02: [catlist id=カテゴリーID]

カテゴリーIDについて⇒ WordPress 記事やカテゴリーのIDの調べ方

タグを指定

タグを指定して、そのタグの一覧を表示するショートコード。

ショートコード-01: [catlist tags=”タグ名”]
ショートコード-02: [catlist id=タグID]

タグIDについて⇒ WordPress 記事やカテゴリーのIDの調べ方

AND指定

複数のカテゴリーまたはタグをAND指定して、その一覧を表示するショートコード。「+(プラス)」を挟み、複数指定できる。

ショートコード: [catlist id=カテゴリーID+カテゴリーID]
例: [catlist id=4+5]

(「+」の前後にスペースを挟まない)

OR指定

複数のカテゴリーまたはタグをOR指定して、その一覧を表示するショートコード。「,(コンマ)」を挟み複数指定できる。

ショートコード: [catlist id=カテゴリーID,カテゴリーID]
例: [catlist id=4,5]

(「,」の前後にスペースを挟まない)

除外指定

あるカテゴリーまたはタグから、別のカテゴリーを除外指定して、その一覧を表示するショートコード。「-(マイナス)」を挟み複数指定できる。

ショートコード: [catlist id=カテゴリーID-カテゴリーID]
例: [catlist id=5-4]

(「-」の前後にスペースを挟まない)

現在のカテゴリーを指定

現在のカテゴリーを指定して、記事の一覧を表示。関連記事として機能として利用。

ショートコード: [catlist categorypage=”yes”]

表示件数指定

記事の一覧に表示される件数を指定します。

ショートコード: [catlist numberposts=記事数]

(記事数は半角数字です)

「numberposts」を指定しない場合、「設定」で指定したページ数になります。
(「設定」>「List Category Posts」>「Number of Posts」に入力されている数字です。)

ページナビゲーションの表示

記事の一覧の下に、ページナビゲーションが表示されます。

ショートコード: [catlist pagination=”yes”]

「pagination」を指定しない場合、「設定」での指定に応じます。
(「設定」>「List Category Posts」>「Pagination」が「true」だと、ページナビゲーションは表示されます。)

アイキャッチ画像の表示

アイキャッチ画像をサムネイルとして、記事の一覧と共に表示。

ショートコード: [catlist thumbnail=”yes”]

アイキャッチ画像のサイズ

アイキャッチ画像のサイズを指定するショートコード。

ショートコード: [catlist thumbnail=”yes” thumbnail_size=”値”]

指定可能な値は以下の通りです。
・ small ⇒ 小サイズ
・ medium ⇒ 中サイズ
・ large ⇒ 大サイズ
・ full ⇒ フルサイズ
・ 任意の幅と高さ ⇒ 数字,数字 (例: thumbnail_size=50,40)

その他、並び順の変更、カスタム投稿の表示、カスタムタクソノミーの表示など、たくさん機能があるみたいですね。とっても使い勝手のいいプラグインです!

WordPress 記事やカテゴリーのIDの調べ方

WordPressでは、投稿記事、固定ページ、カテゴリー、タグに、それぞれIDが振られています。プラグインを利用する時や、PHPで所定の記事だけを処理したい場合など、このIDを利用することになります。

それぞれのIDの調べ方をまとめます。

投稿記事IDの確認方法


「投稿」>「投稿一覧」で一覧を表示し、IDを知りたい記事にカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post=番号」の番号の部分が、記事IDとなります。

もしくは、「投稿」>「投稿一覧」>(記事を選び)「編集」で、各記事の編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/post.php?post=556&action=edit
記事IDは、「556」となります。

カテゴリーIDの確認方法

「投稿」>「カテゴリー」で一覧を表示し、IDを知りたいカテゴリーにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「category&tag_ID=番号」の番号が記事IDとなります。

もしくは、「投稿」>「カテゴリー」>「編集」で、各カテゴリーの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「category&tag_ID=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/term.php?taxonomy=category&tag_ID=5&post_type=post
カテゴリーIDは、「5」となります。

タグIDの確認方法

「投稿」>「タグ」で一覧を表示し、IDを知りたいタグにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post_tag&tag_ID=番号」の番号が、記事IDとなります。

もしくは、「投稿」>「タグ」>「編集」で、各タグの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post_tag&tag_ID=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/term.php?taxonomy=post_tag&tag_ID=9&post_type=post

タグIDは、「9」となります。

固定ページIDの確認方法


「固定ページ」>「固定ページ一覧」で一覧を表示し、IDを知りたい固定ページにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post=番号」の番号の部分が、固定ページIDとなります。

もしくは、「投稿」>「固定ページ」>(ページを選び)「編集」で、各固定ページの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post=番号」の番号の部分が、固定ページIDとなります。

例)https://web.hazu.jp/wp-admin/post.php?post=51&action=edit
固定ページIDは、「51」となります。

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として認識させるということです。キャッシュに残っているのと別のバージョンなら、改めて読み込まれます。