Instagram：OGICO
クリエイティブ

当サイトに適用しているCocoonのカスタマイズ（改造）について

あてさん

Share

目次

    読了時間: 約34分

    ゆうて「興味の向くまま気の向くまま」の、テーマのない当サイトです。
    当記事でサイトの改造についてちょろーんと書いておこうという回でございます。

    CMSについて

    言わずもがなのワードプレスです。

    わりとパソコンの取り扱いには慣れているつもりでいましたが、何せいま働いている会社はWebサービス屋さん。少しくらいはHTMLやらCSSやら言う難しい言葉に触れてみる必要があると思い、2013年から自前でサーバーを借り、ドメインを取得し、ワードプレスをインストールして遊んでいる。と、そんな次第です。

    遊び半分でいじっているワードプレスですが、案の定仕事で触る機会も多く、何かと役にはたっています。もっとも、当サイトに関して言えば仕事で関わるお客さんが使っているワードプレスを直接いじる前に自分で触ってみて、どう扱えばいいのかを練習するために使ったりしていたので「ブログ」として記事をちゃんと入れるまでにホントに時間がかかりました。

    テーマについて

    こちらも見る人が見れば一発でわかるCocoonです。
    ブログとして記事を入れ始めたところで、無料の使い勝手がいいテーマを探したところ行きついたのが「わいひらさん」が提供されているテーマだったということですね。
    当時、SimplicityとLuxeritas、STINGERあたりが人気だったと記憶しています。もう覚えてはいませんが、どのテーマも使い勝手は悪くなかったと思います。

    ただ、Cocoonが良すぎたｗ
    Cocoonを実装して色々と触れているうちに、慣れてしまい、今に至ると言う感じです。
    なんとなくうやむやに慣れてしまっただけ感がある書き方をしましたが、仕事でホントに色んなテーマを触らせてもらうなかで、機能的にも性能的にもCocoonが一番好きです。

    2024年、当記事執筆時点ではSwellというテーマが国内シェア1位になっていて、次いで2位のテーマを使っているわけですが、個人的にはCocoonを推します（僕自身は当然ながらSwellについても管理画面側は見てますｗ）。参考：https://wp-search.org/ja/themes/

    どちらも素晴らしいテーマであることは間違いないのですが、なにせ僕がWebサービス屋さんであるところから申しますと「カスタマイズ（？）」というか変更余地のあるテーマの方が都合がいいとところがありまして・・・

    Swellに関しては、ちょっと軽い気持ちで触るにはなかなかにハードルが高そうでしたｗ
    逆に、デザイン変更や検索対策を人に頼らず「カスタムせずに素敵なデザインのサイトを運用したい人」には向いているはずです。

    少々話が逸れましたが、少なくとも私は「Cocoon最高！」って思ってるひとりです。

    当ブログの設定について

    僕はコーディングを勉強してきたわけでも、仕事でゴリゴリとマークアップをするわけでもないのでいろんなところでカスタムの参考を見つけてきて自分好みにちょこっと変更を加えてるだけです。色は赤と紺が好きなので、全体の色味としては赤と紺でまとめるようにしています。
    当ブログで適用している変更箇所は以下の通りです。

    • HOMEページのファーストビュー
    • 通知エリア（ほんのちょっと）
    • 見出し（H2・H3）の体裁
    • サイドバーの見出し（H2・H3）の体裁
    • オーサーボックス（記事の著者）
    • タグクラウド
    • フッター
    • 読込時のローダー

    書き出してみるとそんなに色々いじってませんｗ
    色々設定手順もありますが、とりあえず上記列挙した分のCSSを以下に置いておきます。唐突に載せられてもわからないかもしれませんが、めんどくさい手順を飛ばしたい方はCSSをまるっとコピーして、ワードプレスのテーマファイルエディターで、Cocoon Childのスタイルシートにベカッと貼り付けてみてください。（ちゃんと元に戻せるように元々書いてあった分はどこかにメモで残しておいてくださいね。）

    「ここいらない！」「ここ間違ってる！」「これ邪魔！」とかありましたらコメント残していただけるとありがたいです。
    （※ちなみにスマホで読み込んだ時にファーストビューがおかしな挙動をするので、そこは直したいと思っています。方法教えてくれる方がいたら本当にうれしい。）

    CSS

    @charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
*/

/************************************
** 子テーマ用のスタイル
************************************/
/*コードをは以下の部分に書く*/
/************************************
** ■サイト体裁の設定
************************************/
html {
    scroll-behavior: smooth;
}

.main {
    border: none;
}
.sidebar {
    border: none;
}
/* a link color nouse */
a,
.a-wrap {
    color: #333;
}
/* a-wrap hover back color */
.a-wrap:hover {
    color: #3366cc;
    background-color: rgba(245, 246, 247, .5);
}

/* a link hover color */
a:hover {
    color: rgba(153, 153, 153, .5);
}

/************************************
** ■HOME 全てをまとめて非表示
************************************/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info,
.home.page .header-in,
.home.page .notice-area {
    display: none!important;
}

/************************************
** ■ローダー
************************************/
.loader-bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader-bg.is-active {
    opacity: 0;
    visibility: hidden;
}
.loader {
    color: #c30e24;
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@-webkit-keyframes round {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
.loader.is-active {
    opacity: 1;
    visibility: visible;
}

/************************************
** ヘッダー
************************************/
.header-in {
    z-index: 20;
    margin-top: 60px;
}

.header-in .site-name-text {
    justify-content: center;
    display: flex;
    align-items: center;
    line-height: 1.5;
    width: 100%;
    transition: scale 0.3s, color 0.3s ease-in-out;
}

.header-in .site-name-text-link {
    padding: 0px;
}

/*480px以下*/
@media screen and (max-width: 480px){
    .header-in {
    margin-top: 24px;
    }
}

/************************************
** グローバルメニュー
************************************/
.navi {
    background-color: rgba(255,255,255,0.72);
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 30;
}

#navi-in {
    background-color: rgba(255,255,255,0.72);
    width: 100%;
}

.navi .item-label,
.navi .item-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navi-in .has-icon {
    position: absolute;
    right: 6px;
    top: 0;
    display: inline-block;
    opacity: 0.7;
    font-size: 11px;
}

.navi-in > ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

/* サブメニュー */
.navi-in > ul li {
    display: block;
    width: 176px;
    height: 60px;
    line-height: 60px;
    position: relative;
}

.navi-in > ul li:hover > ul {
    display: block;
}

.navi-in > ul .menu-item-has-description > a > .caption-wrap {
    line-height: 21.4285714286px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 60px;
}

.navi-in > ul .menu-item-has-description > a > .caption-wrap > div {
    width: 100%;
}

.navi-in > ul .sub-menu {
    display: none;
    position: absolute;
    margin: 0;
    width: 240px;
    list-style: none;
    padding: 0;
    background-color: rgba(255,255,255,0.72);
    text-align: left;
}

/************************************
** モバイルメニュー
************************************/
.navi-in > .menu-mobile {
    display: none;
}
.navi-in > .menu-mobile .sub-menu {
    display: none;
}

/************************************
** ■アピールエリアの設定
***********************************/
.appeal .appeal-in {
  min-height: unset;
}
.appeal {
    background-attachment: fixed;
    height: calc(100vh - 60px);
    width: 100%;
    background-size: cover;
    position: relative;
}
.appeal::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(250,250,250,.28);
    background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}
@media screen and (min-width: 768px){
    .appeal {
    height: calc(100vh - 60px);
    }
}
.appeal-in {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

/*コンテンツエリア*/
.appeal-content {
    background-color: initial;
    width: 100%;
    vertical-align: middle;
    padding: 2em 1em;
}
.top_logo{
    margin:50px
}
.appeal-message{
    font-size:0.8em;
    color:#fff;
}
.appeal-message p {
    color: #FFF; /* サブタイトルの色 */
    font-size: 1em; /* サブタイトルのフォントサイズ（スマホ） */
    margin-top: 2em;
}
@media screen and (min-width: 768px){
    .appeal-message p {
    font-size: 1.2em; /* サブタイトルのフォントサイズ（パソコン） */
    margin-top: 2em; /* タイトルとサブタイトルの余白（不要なら削除） */
    }
}
/*ボタン（アイコン部分）*/
.appeal-button{
    position: absolute;/*アイコンを配置する*/
    bottom:40px;/*下から40pxの位置*/
    background-color:initial; /*ボタンの背景色無効化*/
    font-size:.8em; /*文字を少し小さく*/
    color:#FFF;/*アイコンの色はここで設定*/
    left: 0;
    right: 0;
}
/*アイコンを追加*/
.appeal-button:before {
    display:block;
    font-family: "Font Awesome 5 Free";
    font-weight:bold;
    content: "f103"; /*アイコン指定（シングル矢印はf107にする）*/
    font-size: 1.5em; /*アイコンの大きさ*/
    animation: move 1s infinite alternate ease-in-out;
}

@keyframes move{
 from {
  transform: translateY(0);
 }
 to {
  transform: translateY(10px);
 }
}

/************************************
** ■通知エリア
************************************/
/*　おしらせ　*/
.notice-area:before {
   font-family: "Font Awesome 5 Brands" ;
   content: "f16d";
   vertical-align: middle;
   margin-right: 0.2em;
   font-weight: normal;
   font-size: 1.2em;
   line-height: .05em;
}
.notice-area {
   padding: 0.2em;
}
#notice-area-wrap a {
   transition: all 0.3s ease-in-out;
}

/************************************
** ■カルーセル
************************************/

/************************************
** ■見出しの設定
************************************/
.entry-content h2 {
   font-size: 120%;
   position: relative;
   padding: 0.4em 0.4em;
   border-bottom: 3px solid #F5F6F7;
}
.entry-content h2:first-letter {
   font-size: 1.8em;
   font-weight: bold;
   color: #c30e24;
}
.entry-content h2:after {
   position: absolute;
   content: " ";
   display: block;
   border-bottom: solid 3px #c30e24;
   bottom: -3px;
   width: 20%;
}
.entry-content h3 {
   font-size: 110%;
   padding: 0.4em 0.4em;
   color: #333;
   border-right: none;
   border-left: 5px solid #c30e24;
   border-top: none;/*上線*/ 
   border-bottom: 3px solid #F5F6F7;
}

/************************************
** ■ナビゲーション用見出しの設定
************************************/
.sidebar h3 {
  background: none;
  position: relative;
  margin-bottom: 0.2rem;
  padding: 0.2rem;
  border-bottom: 1px solid #333;
  color: #333;
  letter-spacing: 4px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.sidebar h3:before {
  position: absolute;
  content: '';
  width: 15%;
  left: 0;
  bottom: -1px;
  border-bottom: 5px solid #11114d;
}

/************************************
** ■タグクラウドの設定
************************************/
.tagcloud {
  padding: 0px 2px 0px 2px;
}
.tagcloud a {
  text-decoration: none;
  color: #333;
  font-size: 12px;
  font-weight:bold;
  display: inline-block;
  background-color

    順番前後しますが、設定は難しいこと一切してないと思います。
    Cocoon設定でできる範囲のことしかしてないような気がします。

    Cocoonの設定

    スキンの設定

    スキンの適用はなしです。
    色は基調をを白にして、締める色がちょっと強めの色で自分好みの色を設定しているので、特に見出しやヘッダーに色がついてる必要はなく「スキンなし」のままです。

    文字の設定

    文字の設定はヒラギノが好きなのでヒラギノメインのフォントを指定しています。
    文字サイズはやや大きめ？

    ヘッダー

    ヘッダーはセンターロゴ（トップメニュー）のかたちを使っています。
    色は文字色しか指定していません。（それすら必要なのかわからないですが・・・）

    アピールエリア

    ファーストビューにしている画像はここで登録しています。
    高さや背景色などの設定はいりません。
    テキストエリアは一言メッセージを入れるのに使っていますのでチェック有です。

    タイトル、設定してません。

    メッセージエリアにはHTMLが書けますので、サイトタイトルの画像を表示させるように書き込んでいます。
    ボタンメッセージはファーストビュー下部のスクロールボタンのテキストに利用しています。
    ボタンリンクは新着記事の見出しに付けたアンカーへリンクさせます。

    モバイル設定

    モバイルの設定はフッターモバイルボタンを利用しています。
    ヘッダーメニューを使うと色々ややこしかったのでモバイルはヘッダーにはロゴの表示だけです。

    固定ページのフロントページ設定

    いわゆるCocoon「TOPページのサイト化」の作業をそのまましています。

    1. 全記事一覧用の固定ページを作成
    2. フロントページ用の固定ページをひとつ作成
    3. ブロックメニューから新着記事一覧のブロックを配置
    4. 全記事一覧・各カテゴリの記事一覧ページへのリンクボタンを配置
    5. TOPページに不要な項目の消込（CSSに記述）

    フロントページ設定といいながらさらっと記事一覧ページを別途作っていることについては目をつぶってくださいｗ
    「サイト化」の改造をすると、TOPページで記事の一覧を並べる形ではなくなりますので、別途記事の一覧ページを作成する必要があります。作業を始める前に新規固定ページでショートコード（new_list ）を使って記事の一覧ページを作成しておけば、リンク先の設定で困りません。

    設定らしい設定として作業したのはこのくらいでしょうか。
    あとはごくごくふつーーーにワードプレスの投稿機能しか使いません。

    参考にさせていただいたブログ・サイトさんたちを以下にリンク貼らせていただきます。

    参考にさせていただいたサイトたち

    他にも参考にさせていただいたサイトはありますが、僕が「お世話になった」と感じるサイト４つです。
    「Cocoon ○○ 改造」とか検索すると、やりたいことに対する解決策は大概検索結果に出てくるような気がします。
    みなさん、アイデアをWebで公開してくださっているので、特にコーディングに対する知見がなくてもなんとなく改造できるはずです。
    自分のサイトの体裁を自ら作ってみたい方はぜひCocoonを検討してみていただきたいと思います。

    表示保存

    2026年4月 テーマ変更に伴う表示切替につき、かつての表示を保存する意味でTOPの画像だけ貼付します。
    データベースの接続が切れて、画像が表示されていない部分もありますが、おおむねかたちはお判りいただけるかと思います。

    Wayback capture-04-02-2026

    あてない日々

    DIY（クリエイティブ）・ペット・ホビーについて、気ままな雑記ブログです。自転車やガジェットが好きな中年オヤジ…

    web.archive.org

    Share

    この記事を書いた人
    あてさん

    新卒でイベント会社に就職。その後レストラン、不動産会社と転々として今はweb関連会社に在籍してます。二輪とダーツとお酒が好きな中年。週末は飼い犬のチワワとサイクリングに出かけます。

    関連記事

    コメントを残す

    は必須項目です。

    CAPTCHA