先日の有料記事が読めないバグにつきまして、当方の環境では修正されたことが確認できましたのでお知らせいたします。

まだ読めないよという方がいらっしゃいましたら、お手数ですがご一報いただけますと幸いです。

引き続き当ブログをよろしくお願い申し上げます。

なんで名前の一文字目を大文字にしなかったんだろうと今更ながら思いました。

さて、当ブログ執筆者の春眠は手相占いもやっていますが、先日お客様のお一人からあかつきちゃんのファンアートを頂きました！！(掲載許可済)

見てください、なんて可愛いんでしょう！

ほら！

ほら！！ 超絶キュートだね！！！！

あかつき

ふむ、まあまあですね（照）

このようなものを描いていただくのは初めてのことで大変驚きました。

心底励みになります。

しかも大変丁寧でお上手なのに、どうやら爆速で描いていただいたようで凄すぎます……

また、キャラクターデザイン時に想定していたあかつきちゃんのビジュアルが的確に表現されている点にも感心しきりでした。

作者冥利に尽きるとはこのことです。

これは当ブログの宝物になりますね。

本当にありがとうございました！

今後ともご贔屓のほど何卒よろしくお願い申し上げます。

他の皆様からのファンアートもお待ちしております。

現在、しゅんみんが執筆した過去記事のタイトルを変更する作業をしています。

と言っても一部ですけど。

これは検索で引っかける気ないだろとしか思えないものがいくつかあったので、そちらを少しだけマシなものにするべく、頭を捻っています。

例えばどんな感じ？

例えばこの記事。

人間万事塞翁が馬｜人生ドン底の時期をやり過ごすためのヒント

「人生ドン底だ！」なんて、不幸が続くとついつい思ってしまいますよね。何をやってもうまくいかない。むしろ行動するたびに悪い方向へ向かっていく。どう考えても抜け出せる未来が見えない。もう無理、死なせてほしい。実際、５年ほど前まで私が思っていたこ...

kokebutaikiru.com

元々は「人生のドン底はいつまで続くかも抜け出せるかも分からない」みたいな（ちょっと違ったかな）、ネガティブな筆者のネガティブな愚痴みたいなタイトルでした。

これを「人間万事塞翁が馬｜人生ドン底の時期をやり過ごすためのヒント」に変えてみました。

結構いいでしょ？

ちなみに、記事タイトル変更にあたって、しゅんみんには本文を少しだけ加筆してもらいました。

他にはこれ。

人生やり直すのは無理。もっと現実的に考えないと一生詰む

「人生をやり直したい」なんて、誰でも１度は思ったことがあると思います。私もありました。ネットでもよく「人生はやり直せます！」と声高に叫んではいますが……正直言って、人生をやり直すことはできません。失敗の足跡は消せない失敗したもののほとんどは...

kokebutaikiru.com

これなんかは一文目に言いたいことをギュッとまとめ、二文目でさらに煽り度を強化しています。

あかつき

トばしてんなー……つーか頭トんでる？

頭冷やせよ筆者ー

もう少し理論的に考えてくださいよ。こんな正論パンチみたいなタイトル、どう考えても避けられるに決まってます。

私はしゅんみんの意向を汲み取って新しいタイトルを考えただけですよ。

ま、正直あかつきちゃんの意見に賛成ですけどね……

こんな感じで他の記事タイトルもいくつか変更しています。

よかったら探してみてね！

今回は「これまでのサイト開発まとめ」シリーズの11回目です。前回はこちら、初回はこちら。

アピールエリアの矢印に動きを追加しました。

CSSアニメーション

CSSアニメーションとは、CSSのanimationプロパティを使用した記述によって、CSSで設定したスタイルを別のスタイルに変化させるものです。

同様の効果を持つプロパティに「transition」というものもありますが、こちらはもっと単純な動きを付けるときに使用します。

また、要素を動かすにはJavaScriptやjQueryを利用することも可能で、こちらの方がCSSアニメーションより複雑な動きを付けられますが、処理が重くなりやすいデメリットがあります。

animationプロパティと@keyframes

CSSアニメーションは、animationプロパティのみでは動きません。

animationプロパティは、主にCSSアニメーションの再生方法を指定するものです。

だとすれば、CSSアニメーションの中身を定義するものが必要になりますよね？

それを定義できるのが「@keyframes」です。

CSSアニメーションの最初、中間（複数可）、最後のスタイルをそれぞれ指定できます。

CSSアニメーションの設定方法

それでは、animationプロパティと@keyframesの実際の使い方を見ていきましょう。

簡単な例を使って説明していきます。

以下を見てください。「あいうえお」の文字がゆっくり点滅していますね。

See the Pen animation by sho (@sho_codepen) on CodePen.

まずは、「div p { animation: fadein 4s infinite; }」の部分です。

これは「<div><p>あいうえお</p></div>」という要素に「fadein」というアニメーションを適用し、それを4秒間かけて再生（4s）して、それを永遠に繰り返す（infinite）という指定になります。

「fadein」というアニメーション名は、特にCSSの文法で決まっているものではなく、こちらが分かりやすいと思う名前を任意に付与できます。このアニメーション名は、後ほど説明する@keyframesの記述で使用します。

さて、animationプロパティで指定できる項目は以下の8つです。

・animation-name → @keyframesで定義する任意のアニメーション名。初期値はnone。

・animation-duration → アニメーションの再生時間。初期値は0s。

・animation-timing-function → アニメーションの速度変化のスタイル。初期値はease（次項で説明）。

・animation-delay → アニメーションが開始するまでの時間。初期値は0s。

・animation-iteration-count → アニメーションの再生回数。初期値は1。無限ループはinfinite。

・animation-direction → アニメーションの再生方向。初期値はnormal（後ほど説明）。

・animation-fill-mode → アニメーションの再生前後に適用されるスタイル。初期値はnone（後ほど説明）。

・animation-play-state → アニメーションの再生（running）・一時停止（paused）の切り替え。初期値はrunning。

これらは単体のプロパティとして使用することもできますが（「animation-duration: 4s;」のように）、先程の例のようにまとめて記述（ショートハンド）すると、見た目を簡潔にできます。

また、各プロパティには初期値が設定されているため、必ずしも全ての項目を指定する必要はありません。何も書かなければ初期値として扱われます。

ただし、animationプロパティにおける時間指定は、1つ目の値がanimation-durationに、2つ目の値がanimation-delayに割り当てられる仕組みになっています。

そのため、ショートハンドで記述する場合は、① animation-durationを指定せずにanimation-delayのみ指定しても、CSSではanimation-durationとして判別されてしまうこと（秒数を1つだけ指定してある先程の例がそうですね）、② 必ずanimation-duration、animation-delayの順で記述すること、この2点に注意してください。

animation-timing-function

CSSアニメーションの速度変化のスタイルには、主に以下の7つがあります。

・ease → アニメーションの開始から中間に向けて変化量が増加し、中間から終了までは変化量が減少する。

・ease-in → アニメーション開始時はゆっくりの速度で、終了まで加速する。

・ease-out → アニメーション開始時は速い速度で、終了まで減速する。

・ease-in-out → アニメーションはゆっくり変化し、開始から中間までは速度が増加して、中間から終了までは速度が減少する。

・linear → アニメーションの開始から終了まで変化量が一定。

・steps → コマ送りのように指定したタイミングごとにアニメーションが変化する。

・cubic-bezier → アニメーションの変化を任意の三次ベジェ曲線で指定する。

実際にコードを書いてみたのが以下です。

See the Pen animation_exanple by sho (@sho_codepen) on CodePen.

animation-direction

CSSアニメーションの再生方向のスタイルには、以下の4つがあります。

・normal → アニメーションの開始から終了まで順方向に再生される。

・reverse → アニメーションの終了から開始まで、逆方向に再生される。

・alternate → アニメーションを順方向から逆方向へ、交互に途切れず再生し続ける。

・alternate-reverse → アニメーションを逆方向から順方向へ、交互に途切れず再生し続ける。「alternate」を逆方向にしたもの。

実際にコードを書いてみたのが以下です。

See the Pen animation-direction by sho (@sho_codepen) on CodePen.

animation-fill-mode

アニメーションの再生前後に適用されるスタイルには、以下の4つがあります。

・none → スタイルの指定なし。

・forwards → アニメーション終了時、そのスタイルを維持する。

・backwards → アニメーション終了時、再生前のスタイルに戻る。

・both → アニメーション開始時に「forwards」、終了時に「backwards」が適用される。

実際にコードを書いてみたのが以下です。

See the Pen animation-fill-mode by sho (@sho_codepen) on CodePen.

@keyframes

animationプロパティについて理解できたところで、もう一度先程の例です。

See the Pen animation by sho (@sho_codepen) on CodePen.

今度は、「@keyframes fadein { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }」の部分を見ていきましょう。

これは、animationプロパティで指定した「fadein」というアニメーションの内容を定義するものです。

この例の場合は、「アニメーション開始時（0%）の不透明度（opacity）が0、アニメーションが50%まで進行した時点での不透明度が1、アニメーション終了時（100%）の不透明度が0」、つまり「『あいうえお』という文字列について、アニメーション開始時は透明で、中間にかけて不透明になっていき、そこから終了時に向けて透明になっていく」というスタイルの変化になります。

もちろん、ここで指定できる内容は不透明度だけではないので、基本的にあらゆるスタイルについて盛り込むことが可能です。

ちなみに、@keyframes内でスタイルを指定する際、0%と100%しか定義しない場合は、以下のように、それぞれ「from」と「to」で表記することもできます。

@keyframes fadeout {
from { opacity: 1; } 
to { opacity: 0; }
 }

今回追加したCSS

改めて、今回設置する動く矢印のCSSアニメーションを定義する箇所を見てください。

.appeal-content::before {
	display: inline-block;
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	border-bottom: solid 4px #060E1C;
	border-left: solid 4px #060E1C;
	transform: rotate(-45deg);
	bottom: 7%;
	right: 0;
	left: 0;
	margin: auto;
	animation: scroll_1 4s 0s forwards,scroll_2 3.5s 2s infinite none
}

@keyframes scroll_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scroll_2 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

まずは擬似要素「::before」の箇所からです。

前回の記事の言葉をそのまま引用すると、幅と高さが40pxである空の「content」に対して、「solid 4px #060E1C」の「border-bottom」と「border-left」を適用し、左に45°回転させていることが分かります。

次に、animationプロパティの箇所です。

「animation: scroll_1 4s 0s forwards, scroll_2 3.5s 2s infinite none」となっており、アニメーションの名前が2つ（「scroll_1」と「scroll_2」）記述されていることが分かります。

animationプロパティでは、カンマで区切って記述することにより、一つの要素に対して、複数のアニメーションを適用させることができます。

この場合は、「scroll_1」の再生時間が4sなので、「scroll_2」の再生タイミングを同じだけ遅らせることにより、順番にアニメーションが再生されているかのように見せることができます。

そして、@keyframesの箇所です。

ここでは、「scroll_1」の内容と「scroll_2」の内容を、それぞれ分けて定義しています。

「scroll_1」の方は、アニメーション開始から終了に向けて不透明度が増すだけの簡単なものです。

「scroll_2」の方が複雑で、「transform」プロパティで「rotate（回転）」と「translate（平行移動）」の変化を定義しています。同プロパティでは、他に「scale（拡大縮小）」と「skew（傾斜変形）」の変化を定義できます。

rotateは、右方向への回転がプラス、左方向への回転がマイナスです。

translateはX軸とＹ軸から成り立っており、1つ目の値がX軸の変化量、2つ目の値がＹ軸の変化量になります。

ちなみに、原点（0, 0）は左上にあるため、X軸の変化量がプラスであれば左から右に、Ｙ軸の変化量がプラスであれば上から下に移動します。数学でよく使う直交座標系の第1象限ではなく、第4象限をイメージしていただくと良いでしょう。

ところで、「rotate(-45deg)」と「translate(-30px, 30px)」ですが、これらの順番を入れ替えて記述すると、矢印の動きが変わってしまいます。

次項で簡単な例を使って説明しましょう。

transformプロパティ内の書き順について

黒い四角形が「.origin」、青緑色の四角形が「.transform」です。

以下は、transformプロパティに対して、translate→rotateの順で指定した例です。

See the Pen transform_2 by sho (@sho_codepen) on CodePen.

次が、同じ値をrotate→translateの順で指定した例です。

See the Pen transform_1 by sho (@sho_codepen) on CodePen.

指定した値は同じなのに、出力結果は異なってしまいましたね。

これには先述の通り、rotateとtranslateの指定順序が関わっています。

CSSは書かれた順に一つずつ読み込まれ、処理されていきます。

上の例であれば、まず行われる処理は「『.transform』を右と下に50pxずつ動かすこと」ですね。

そして、次に行われる処理は「その場で（要素の中心を基準に）『.transform』を右に45°回転させること」です。

こちらは理解しやすいと思います。

それに対して、下の例の場合、まず行われる処理は「その場で（要素の中心を基準に）『.transform』を右に45°回転させること」です。

次に行われる処理は「『.transform』を右と下に50pxずつ動かすこと」ですが、このときのX軸とＹ軸は、「.origin」ではなく、「.transform」を基準としたものなのです。

どういうことかと言うと、最初に「.transform」を右に45°回転させているので、その時点で「.transform」のX軸とＹ軸も一緒に回転しています。

反対に、「.origin」に対しては何の変化も定義していないので、そのX軸とＹ軸も回転しません。

その結果、「.transform」と「.origin」では、X軸とＹ軸の角度がそれぞれ異なってきます。

そのため、初めに「.transform」を右に45°回転させたなら、次に我々も首を右に45°傾けてから、「.transform」を動かさなければならないわけです。

逆に言えば、上の例の場合、「.transform」のX軸とＹ軸は、「.origin」のものと同じ傾きだったので、結果的に難しく考える必要がなかったと分かりますね。

そういうわけで、下の例の場合、「.transform」をX軸とＹ軸に対して同じ距離だけ動かせば、「.origin（=我々から見た画面の向き）」から見て、結果的に上下に移動させたことになります。

ちなみに、当サイトのトップページにおける動く矢印の場合、左に45°回転させているので、X軸の移動距離をマイナス、Ｙ軸の移動距離をプラスにすることで「.origin」や画面から見て下に移動します。

逆にX軸の移動距離をプラス、Ｙ軸の移動距離をマイナスにすれば上に移動します。

そして、X軸とＹ軸の移動距離のプラスマイナスを揃えた場合は、横移動になりますね。

というわけで、動く矢印の「scroll_2」の中身は、要素の不透明度を変化させつつ、上下移動させているものになります。

今回は「これまでのサイト開発まとめ」シリーズの10回目です。前回はこちら、初回はこちら。

アピールエリアに動く矢印を設置しました。

動く矢印の設置

一般的なファーストビューって、メッセージ性のある文字や画像、動画が出てきて、その下部にスクロールダウンを促す要素があることが多いですよね。

特に当サイトのファーストビューは、スクロールダウンを促さないと、内容的に反射でブラウザバックされかねないため、スクロールダウンを促す要素の設置は必須です。

というわけで、動く矢印とリンクボタンを設置していきましょう。

まずは動く矢印のCSSコードです。子テーマのstyle.cssに追記します。

.appeal-content {
  padding-top: 70px;
  position: relative;
  text-align:center;
}

.appeal-content::before {
	display: inline-block;
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	border-bottom: solid 4px #060E1C;
	border-left: solid 4px #060E1C;
	transform: rotate(-45deg);
	bottom: 7%;
	right: 0;
	left: 0;
	margin: auto;
	animation: scroll_1 4s 0s forwards,scroll_2 3.5s 2s infinite none
}

@keyframes scroll_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scroll_2 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

ここでは、CSSの擬似要素とanimationプロパティを使用して、動く矢印を設置しています。

次項から一つずつ解説していきます。

CSSの擬似要素って？

CSSの擬似要素とは、セレクタに付加できるキーワードで、本来はHTMLである要素を、擬似的にCSSで作成するものです。

CSSで指定した特定のHTML要素に対し、何かしらのスタイルを指定する使い方をします。

具体例を見てみましょう。

例えば、以下のHTML要素（あいうえお）の最初の文字にだけCSSのスタイルを適用させたい場合です。

<div>
<p>あいうえお</p>
</div>

この場合は、以下の方法が考えられます。

See the Pen Untitled by sho (@sho_codepen) on CodePen.

これで「あいうえお」の「あ」だけ文字色を変更することができます。

しかし、変更したい部分を<span></span>で囲む方法は、コードが複雑で分かりづらくなり、非効率的と言わざるを得ません。

同じことを効率的に行えるのが、擬似要素を使った方法なのです。

ここでは「::first-letter」という擬似要素を使用します。これは、指定した要素の最初の文字にスタイルを適用するCSS擬似要素です。

「p」というセレクタ名の直後に擬似要素である「::first-letter」を付加します。

See the Pen 擬似要素2 by sho (@sho_codepen) on CodePen.

これによって、最初の方法と同様の結果が得られます。

CSSの擬似要素「::before」と「::after」

CSSの擬似要素には、「::before」と「::after」というものもあります。

これはそれぞれ、特定のHTML要素の直前と直後に別の要素を挿入できる擬似要素です。

例として、先程のHTML要素の直前に「わをん」という文字列を挿入してみます。

See the Pen Untitled by sho (@sho_codepen) on CodePen.

できましたね。

さて、矢印を描画するにはこの「::before」または「::after」を使用します。

擬似要素「::before」を使って矢印を描画する

今回は擬似要素「::before」を使って、矢印を描画していきます（「::after」でも構いません）。

改めて、擬似要素「::before」を使用した、矢印を描画するCSSを見てみましょう。

.appeal-content {
  padding-top: 70px;
  position: relative;
  text-align:center;
}

.appeal-content::before {
	display: inline-block;
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	border-bottom: solid 4px #060E1C;
	border-left: solid 4px #060E1C;
	transform: rotate(-45deg);
	bottom: 7%;
	right: 0;
	left: 0;
	margin: auto;
	animation: scroll_1 4s 0s forwards,scroll_2 3.5s 2s infinite none
}

「.appeal-content::before { }」の中に、「border-bottom」と「border-left」というプロパティがあるのがお分かりいただけるでしょうか。

これによって擬似的に矢印の線を描画しています。直接的に矢印を描画するプロパティが存在しないためです。

つまり幅と高さが40pxである空の「content」に対して、「solid 4px #060E1C」の「border-bottom」と「border-left」を適用し、「transform: rotate(-45deg);」によって左に45°回転させているわけです。

また、他のプロパティで矢印の位置等を調整しています。

その結果できあがった矢印がこちらです。

でもこれで完成ではありません。

実際に現在設定されている矢印は何やら出てきたり消えたりしながら動いていますし、当記事の前の方では、animationプロパティを使用していると述べましたよね。

というわけで、次回はそちらについて解説していきます。

今回は「これまでのサイト開発まとめ」シリーズの9回目です。前回はこちら、初回はこちら。

ヘッダー下のアピールエリアに背景画像を設置しました。

アピールエリアってどこ？

これです、これ。トップページからいらした皆様にとって、少なからず何か思うところがあったであろうこれです。

……改めて見てみても、かなりの煽りっぷりですね。

これでブラウザバックされる方、結構おいでになるんじゃないですか？ 大丈夫？

まぁ、しゅんみんが良いと言うのだから良いということにしておきましょう……

アピールエリアを設定した理由は？

これまで様々な改変をサイトに加えてきましたが、今回のはもはや魔改造ですよね。

なぜこのような魔改造に踏み切ったのかと言えば、デザイン的にどうにも一個人のブログ感が抜けなかったからです。

これまでの改変は、主に見やすさに関する部分について行った細かなものでした。

ですが、ブログではなくいわゆるWebサイト感を出すには、トップページの構成から大きく作り替える必要がありました。

そのため、各種サイト様（特にコーポレート系）で勉強させていただいたところ、ファーストビューを設定すれば一気にそれっぽくなるのではという結論を得ました。

その結果がこれなんですが。煽りすぎて、かえって読者数を減らす結果になっていませんか？

まぁ、内容はともかく、今後もデザインは研究し続けていきますので。

背景画像の設定

そんなわけで、ファーストビューをアピールエリアに設定していきます。

まずは背景画像です。

画像はCLIP STUDIO PAINTで作成しました。白地に文字を打ち込んで書き出しただけの簡単なものです。

WordPress管理画面内「Cocoon設定→アピールエリア」でも諸々設定できますが、これだとレイアウトが自由にできないため、今回は使用しません。

以下のコードを子テーマのstyle.cssに追記することで、設定を行なっていきます。

/* アピールエリア */
.appeal-content {
	height: 745px;
 	min-height: 745px;
	background-image: url("https://kokebutaikiru.com/wp-content/uploads/2023/03/20230323_pc_text.png");
	background-color: #ffffff;
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
	border-top: 2px solid #3cb8c1;
	border-bottom: 2px solid #3cb8c1;
}

これで背景画像が設定できました。

この後長くなりそうなので、続きは次回に回します。

今回は「これまでのサイト開発まとめ」シリーズの9回目です。前回はこちら、初回はこちら。

トップページのレイアウトを変更しました。

サイドバーの表示

モバイル版は問題ありませんでしたが、パソコン向けのレイアウトでは、本文が画面いっぱいに広がって見づらかったので、横幅を狭める設定をしました。

まずは本文の右側にサイドバーを表示させました。

WordPress管理画面内「Cocoon設定→全体」と進み、「サイドバーの表示状態」を「全てのページで表示」に変更します。

するとこうなりました。

記事本文の幅と背景変更

レイアウトは良くなりましたが、背景が全て白色なので、本文とサイドバーの境界がイマイチ分かりませんね。

それを解消するため、文字の周囲を白色で囲み、その外側はグレーにしてみましょう。

子テーマのstyle.cssに以下のコードを追記します。

html,body {
  background-color: #e6e9ed; /* 周囲の背景色 */
}
article {
	width: 100%;
	max-width: 1023px;
	background-color: #ffffff; /* 本文部分の背景色 */
}
#main {
 background-color: #ffffff;
	}

その結果がこちらです。

メリハリが利いてとても見やすくなりましたね！

今回は「これまでのサイト開発まとめ」シリーズの7回目です。前回はこちら、初回はこちら。

WordPressで使用しているテーマ「Cocoon」の子テーマ「Cocoon Child」をインストールしました。

なぜこのタイミングで子テーマ？

WordPressに慣れている方ならこう思われたでしょう。

「なぜ今になって子テーマをインストール？」「親テーマのデータをいじっていたわけ？」

もうお気づきでしょうが、筆者もしゅんみんもここに至るまで、子テーマという概念を知らなかったのです。いじっていたのはもちろん親テーマのデータでした。

この後説明しますが、これは大変まずいことです。

WordPressの仕組み

そもそも親テーマや子テーマって何なの？というところから始めます。ご存知の方は3つ後の項目までスキップしてください。

当サイトはWordPressというシステムを使って作成されています。

Webコンテンツを自力で作成するには、HTMLやサーバー等の知識が必須になりますが、そうでない人でも簡単にWebサイトやブログ作成を行えるようにしたシステムがWordPressです。

また、WordPress自体にはない機能を「プラグイン」というデータで追加でき、こちらの多くはサードパーティ製です。以前の記事で紹介した「SiteOrigin CSS」も数あるプラグインのうちの1つです。

そして、「テーマ」というデータを使うと、サイトのデザインを簡単にカスタマイズできます。スキンのようなものですね。こちらもプラグインのように多くのものが配布されています。

今回問題になったのは、この「テーマ」です。

親テーマ、子テーマって？

WordPressで使用するテーマには、親テーマと子テーマという概念が存在する場合があります。

親テーマというのは、スキンの本体となるテーマのことです。テーマの作者が記述しているコードは親テーマ内のデータに存在するので、基本的には、親テーマをインストールすれば、サイトデザインを変更することができます。

それに対して、子テーマというのは、親データの分身のようなものです。

通常は子テーマも一緒にインストールし、こちらを有効化して編集を行います。

それはなぜでしょうか？

親テーマを編集することの危険性

WordPressのシステムは時折アップデートが行われ、データが書き換えられます。これはプラグインやテーマに関しても同様です。

親テーマをアップデートすると、追加したデータ（CSSやJavaScript等）も含めて上書きされ、追加内容が消えてしまいます。

これは大変ですね。筆者やしゅんみんは親テーマのアップデートを怠っていたことで結果的にセーフでしたが……

そこで作られたのが、子テーマという存在なのです。

これは基本的にアップデートされませんし、親テーマのアップデートの影響も受けません。

もちろん、万全を期すのであれば、親データを含めたWordPressのバックアップを取っておくべきですが、それだけでは利便性に欠けてしまいます。

そのために子テーマ内のデータを編集する仕組みになっているのです。

Cocoon Childのインストール

お待たせしました。ここからが本題です。

こうして早急に子テーマ（当サイトでは「Cocoon」を使用しているので「Cocoon Child」）をインストールすることになりましたが、ここで面倒事が生じました。

というのも、既にCSSだけでなく、Cocoon自体の設定も多々いじっていたのです。

これを楽なやり方で子テーマに引き継ぐにはどうしたらいいのか？

と思ったら、そんなケースのための機能がちゃんとありました。

親テーマから子テーマへの引き継ぎ（1）

それでは実際に親テーマから子テーマへ、設定を引き継いでみましょう。

まずやることは、親テーマ設定のバックアップです。

WordPress管理画面内「Cocoon設定→バックアップ」に進み、「バックアップ」から「バックアップファイルの取得」を押します。

そうすると、「Cocoon_settings.txt」というデータがダウンロードされます。

次に、（あれば）追加したCSSやJavaScript等のデータをメモ帳等にコピペして保存しておきます。

親テーマで行う作業はここまでです。

親テーマから子テーマへの引き継ぎ（2）

次は子テーマのインストールです。

ダウンロードはこちら。インストール方法はこちら。Cocoonの公式ページに飛びます。

子テーマをインストールして有効化できたら、子テーマ内で親テーマの設定をリストア（復元）します。

WordPress管理画面内「Cocoon設定→バックアップ」と進み、「リストア」から先程の「Cocoon_settings.txt」というファイルを選択した後、「設定の復元」を押します。

親テーマでの設定が蘇ったか確認したら、最後に先程コピペしておいたCSSやJavaScript等の記述を、子テーマ内のstyle.cssやjavascript.jsに加えます。

これで完了です！

おまけ

筆者もCSS等をカスタマイズする際には様々なサイト様を参考にさせていただいていますが、何を見ても必ず「Cocoon Childが選択されているか確認しましょう」とあったんですよね。

あのときはバージョン違いかそもそもテーマ違いだろうから、（親テーマの）Cocoonに読み替えれば問題ないだろうと安易に考えていました。

やはり「あれ？」と思ったら、疑念が晴れるまで徹底的に調べないとダメですね。今まで何度もそう痛感してきたのに、またやらかしてしまった……

もし当記事を読んで、ハッとなった方がいらしたら、子テーマへの移行は最優先で行ってください。

今回は「これまでのサイト開発まとめ」シリーズの6回目です。前回はこちら、初回はこちら。

記事上部に、ナビゲーションメニュー「まずはこちら！」を追加しました。

WordPressのウィジェット機能

しゅんみんからの依頼で、まず読んでほしい記事を上部に掲示するために、第二のナビゲーションメニューを表示させようとしたのが事の経緯です。

WordPressのグローバルナビゲーションメニュー（当サイトの場合は、パソコンで見たとき、ヘッダーロゴの右側に表示されているメニュー）の追加は、基本的にWordPress管理画面内「外観→メニュー」から設定することで行えます。「Home、心理学関係、……」と表示されているメニューはそのようにして追加しました。

ところが、同じ方法で、それとは別内容のメニューをヘッダー下に追加しようとしてもできなかったんですよね。筆者がやり方を知らないだけなのかもしれませんが。

そこで、ウィジェット機能を使って「まずはこちら！」を追加しました。

ウィジェット機能の使い方

WordPress管理画面内「外観→ウィジェット」に進むと以下のような画面が現れます。

画面左側が使用できるウィジェット一覧、右側がウィジェットを表示する位置を管理するボックスです。

使い方は画像の通りで、画面左側から使用したいウィジェットを、右側のボックスにドラッグ&ドロップします。この場合であれば、「ナビゲーションメニュー」のウィジェットを、「コンテンツ上部」のボックスに持ってくることで、サイト上ではコンテンツ上部（アピールエリアの下）にナビゲーションメニューが表示されるようになります。

ナビゲーションメニューに表示させる内容は、ウィジェットを右側のボックスに入れた後に、「メニューを選択」の項目で設定します。ここで選択できるメニューは、WordPress管理画面内「外観→メニュー」で作成したものになります（詳しくはこちら）。

そうこうするうちに「まずはこちら！」ができあがりました。

文字や枠線のスタイルについては、以下のコードを子テーマのstyle.cssに追加しました。

文字と枠線の色及び配置はこちら。

#nav_menu-3.widget-odd.widget-last.widget-first.widget-1.widget.widget-content-top.widget_nav_menu {
  color: #3cb8c1;
	border-bottom: 2px solid #3cb8c1;
  padding: 5px 7px;
  display: block;
}

マウスオン時の変化はこちら。

.widget_nav_menu ul li a:hover {
	color: #3cb8c1;
	border-bottom: 2px solid #3cb8c1;
}

こうしてプラットフォームを作成したはいいものの、しゅんみんによれば、肝心のメニューに掲示する記事がまだ完成していないそうで……

執筆が終わり次第、掲示していくことになりそうです。

今回は「これまでのサイト開発まとめ」シリーズの5回目です。前回はこちら、初回はこちら。

ヘッダーロゴ用にあかつきちゃんの新しいイラストを描きました。

あかつきちゃんのイラスト2枚目を作成

こちらですね。しゅんみんから、ヘッダーロゴ用のあかつきちゃんを描いてほしいという依頼があったのでした。この記事執筆中もヘッダーロゴの端で眠っています。よだれを垂らしているのがポイントです。

前回のイラストの主線は鉛筆？クレヨン？調でしたが、今回は普通の線です。タオルケットのシワ等をきちんと描きたかったので。

話は変わりますが、あかつきちゃんのデザインイメージは羊なんですね。白っぽくてモコモコの羊です。「睡眠」から連想したところ、「羊」が出てきたので取り入れました。

モコモコ感を出すために髪型はフワッとさせ、髪色はグレーにしました。白色は全体のバランスがあまりよろしくなかったので不採用。

ちなみにさっき見たらしゅんみんのアイコンがこのあかつきちゃんに変わっていました。「もっとマシなアイコンにしなよ」と言っても頑なに変えようとしなかったのになぜ……

以前のアイコンは、謎センスの色彩とフォントで「ねむい」とだけ書いてある何とも不恰好なものだったはずです。余計なお世話ですが、しゅんみんは配置のセンスはあるのに、色彩センスが壊滅的だと個人的に感じます。そのため、筆者にWebデザインの依頼をしてきたのでしょうね……

以上、あかつきちゃんイラスト2枚目の裏話でした。