前回はCocoonさまの無料テーマをインストールし、外観を変更するところまで対応しました。
あとは自分好みにカスタマイズするのみとお話しましたね。
今回はそんなカスタマイズに関してほんの少しですがお話していきたいと思います。
当ブログも現在（2022年1月）の段階ではCocoon さまのテンプレートを使用しています。
当ブログを通してどんなカスタマイズが出来るかほんのちょっと見ていきましょう！
スキンの変更
簡単にサイトの概観を変更出来る機能で、ザインの着せ替えのようなものです。
Cocoonのスキンは、製作者の型以外にもいろいろな有志の方がスキンをデザインしていて、しかもそれを無料で利用できてしまいます。
種類も豊富でカッコいいものからシンプルなものと様々なデザインが用意されています。
しかもワンクリックでスキンの変更がいつでも可能ですので、自分の好みのスキンさえ見つけてしまえば他のカスタマイズはしなくても良い！と言っていいほどの性能を持っているので初心者の方にはおすすめです。
Cocoonのスキンの変更は簡単です。
Cocoonがインストールされており、かつ有効化されていれば、画面右側に「Cocoon設定」のリンクボタンが追加されていますので、そちらをクリック。
すると下記画像のようにカスタマイズ可能な項目がタブで表示されますので、「スキン」をクリック。
少しスクロールして「スキン一覧」より好きなスキンを選択（スキン名横の◯をクリック）して「変更をまとめて保存」をクリックすれば完了です。
スキンのサンプルはスキン名の横にあるアイコン（写真）にマウスが重なると表示されます。
スキンを変える前に
バックアップ
スキンを変える前に念の為現状のデータをバックアップしておきましょう。
すでにスキンを変えていたり、独自にカスタマイズしていたら元に戻すのが大変ですからね。
「Cocoon設定」 > 「バックアップ」 をクリック。
バックアップ画面から「バックアップファイルの取得」をクリックすると「cocoon_settings.txt」というテキストファイルがダウンロードされます。
そちらがバックアップファイルですので無くさないように自分の分かる場所に保管しましょう。
元に戻したい場合は「リストア」で このファイルをアップロード: 「ファイルを選択」をクリックし、先程ダンロードした「cocoon_settings.txt」を選択し「設定を復元」をクリック。
リセット
自分でカスタマイズしたものを初期状態に戻したい場合は「リセット」を行うといいでしょう。
多少ですが新規スキンにも影響が出る場合があるので、スキンを帰る場合は一度リセットすると良いかもしれません。もちろん念の為バックアップは忘れないでください！
「Cocoon設定」 > タブ「リセット」をクリック。
「全ての設定をリセットする」「リセット動作の確認」のチェックを入れてから「変更をまとめて保存」をクリック。
スキン変更
バックアップは取りましたか？ 念の為にリセットしましたか？
対応できていたら、スキンを変えてみましょう。
「Cocoon設定」 > タブ「スキン」をクリック
スキンを選択して
ページ下部にスクロールし「表示スキン」からどこのテーマまでを表示させたいか選択します。
- 全てのスキンを表示
- 親テーマのスキンのみ表示
- 子テーマのスキンのみ表示
問題なければ、下の「変更をまとめて保存」をクリックすれば完了になります！
これで万事OK…と思ったんですが何か参考画像と違いますね…それはスキンを変更しても、ヘッダーのロゴマーク周りだったりメニュー、その下のスライドショーだったりの見え方はスキンとは別でカスタムしなければいけませんので注意してください！
スキンを変更しても、一部の機能はカスタマイズしないと表示されません！
スライドショーだったりヘッダーメニューだったりはカスタマイズから追加・修正する必要があります！
ヘッダー周辺のカスタマイズ
と言うわけで、ヘッダー周りを少し修正していきたいと思います。
当ブログではメニューは今の所必要無いので、今回はヘッダーにロゴマークを入れ背景色をつけたり、スライドショーを追加していきたいと思います。
ロゴマークの追加と背景色の変更
まずはサイトの顔でもあるロゴマークを追加したいと思います。
ちなみに私が用意したロゴマークこちらになります。
それでは、ヘッダーにこのロゴを配置したいと思います。
まずは「Cocoon設定」をクリックします。
タブ「ヘッダー」をクリックし各設定を行っていきます。
結構な項目数がありますが、今回は私が対応した範囲のみご紹介させていただきたいと思います。
「ヘッダーロゴ」に先程紹介した画像を選択し、その下の「ヘッダーロゴサイズ」を80に設定。ここは跡からも変更可能ですので、大体の数値を入力しておきましょう。
「キャッチフレーズの配置」はロゴの下に移動してほしかったので「ヘッダーボトム」にチェック。
「ヘッダー色（ロゴ部分）」をイラストでも使っている黄色に設定。
うーん目に優しくないサイトですね。色を調整してみましょう
「色を選択」をクリックするとカラーパレットが表示されるので好きな色を選択するか、カラーコードが分かる場合は「#◯◯◯◯◯◯」と入力。
一通り終了したので、一度「変更をまとめて保存」をクリックしてプレビューで確認します。
背景は薄いブルーグレーを敷くことにしました。サムネイルのイラストに使っている背景色と同じですね。私個人としましては記事内容を見ていただきたいのでヘッダー部分は少し弱い感じで問題ありませんので。
スライドショーを追加する
次はヘッダー下にスライドショーを追加したいと思います。
スライドショーを設置するには「Cocoon設定」 > タブ「カルーセル」で設定をする必要があります。
まずは、カルーセルの表示をしなくてはいけませんので「カルーセルの表示」からどのページに表示させるか選択します。
- 表示しない
- 全ページで表示
- フロントページのみで表示
- 投稿・固定ページ以外で表示
- 投稿・固定ページのみで表示
- 投稿ページのみで表示
- 固定ページのみで表示
私は「フロントページのみで表示」を選択しスマートフォンでも表示したかったので「スマートフォンで表示」にチェックしました。
理由としましては、他のページに表示してしまうと訪問者が記事を読まずに別ページへ遷移してしまうかも？と思ってのことです。もちろんいろいろな記事、人気の記事を見てもらいたい場合は、他の表示設定でも問題ないかと思いますので、そこはお好みで設定してみてください！
表示内容
次の項目は表示内容に関してです。
ここでは期間を指定して人気の記事を表示させる設定になります。
- 本日
- 7日間
- 30日間
- 1年間
- 全期間
当ブログはまだ運営して日が浅いので、しばらくは「全期間」で設定し、アクセス数などが増えた場合は、別の期間に切り替えたいと思います。
カテゴリーはこちらも全期間と同じ理由になりますが、現在掲載しているweb関連のカテゴリーの全てにチェックを入れました。と言っても現在はwordpressと設置・設定しか無いんですが。
カルーセルの並び替え、最大表示数、その他
カルーセルの並び替え
カルーセルの並び替えは3つありますが、私は初期設定のランダムのままにしております。
- ランダム
- 投稿順（降順）
- 更新順（降順）
こちらに関しては完全に好みの問題になるかと思いますので、ご自分の運営スタイルに合わせてお選びください。
最大表示数
カルーセル（スライドショー）の表示数になります。個人的にはそんなに数があっても…と思っているので私は最小数の12のままにしておりますが、ここもお好みの数字を入力しましょう！（最大：120）
枠線の表示
こちらは各スライドショーのカードに罫線を表示させるかどうか？になります。
私はチェックを入れておりますが、お使いのスキンだったり背景色に合わせて選択してください。
その他にもオートプレイなどの設定がありますが、そちらに関しましてもお好みで設定してください。
私はまだ記事も揃っていないのでとりあえずはオートプレイはオフにしております。
さて、ここまでの設定が出来ましたらあとはいつもの「変更をまとめて保存」をクリックします。
無事保存されますと、プレビューにカルーセルが表示されます。
参考画像では3つしか出てませんが、これは他の記事がまだ読まれていないから表示されていないだけです。公開してませんしね。仕方ないです。
フロントページを見てみると無事にスライドショー（カルーセル）が表示されました！
私が使っているスキンは背景が白なので、カードに罫線はあった方がやはり見やすいですね！
最後に
これにてヘッダーとスライドショー（カルーセル）のカスタマイズは終了となります！
スキンやテンプレートですと後からでも背景色を変えたり、カルーセルの個数を変えたりと、追加や修正がしやすいから本当にいいですね！
さて、次回はそうですね・・・ サイドバーを少しカスタマイズしていきたいと思います。
スキンのサムネイルのように、紹介文がファーストビューに入るようにだけでもしましょうか。
それでは、お疲れさまでした！
ドメインである「kmnmc」はKeMoNoMiChiの頭文字になってます。
ケモノミチということで、木と鹿と狸が描かれてます。ササッと作ったのでとりあえず今回はこれで良いでしょう。時間があればしっかりと作りたいですね。