無料EAはこちらから

Cocoonカスタマイズ備忘録【参考にしたBlog一覧など】

この記事は約9分で読めます。

このブログはCocoonで作成しました。
そのカスタマイズ備忘録として記事を書いています。
私自身が後々にブログデザインの変更をする際に役立つように・・・
どこをいじったのかを忘れないように・・・

https://yujiblog.org/(yuji blog.)の記事を参考にさせていただきました。

Cocoonスキン設定

【コピペでOK!】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル【WordPress】
WordPress/Cocoonを使ったブログでのオリジナルカスタマ...

こちらのBlog管理者さんのTwitter素敵な言葉と写真ばかりです。

スキン一覧の中から「ホワイトラーメン」を選択。
ホワイトラーメンの作者さんのサイトはこちら

ブログの全体のバランスを整える

「外観」→「テーマエディター」→「style.css」にコピペ

/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{/*すべてのイメージに影を*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}

https://yujiblog.org/cocoon-customization

ヘッダーロゴのカスタマイズ

【Cocoon】ブログ初心者でもできる『ヘッダーロゴ』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『ヘッダーロゴ』を...

「Cocoon設定」から「ヘッダー」タブを選択、各項目を変更

ヘッダーロゴ
・「選択」から表示する画像をアップロードします。(背景透過がおすすめです)
ヘッダーロゴサイズ
・横幅のみ入力します。ページを確認しつつ微調整します。
キャッチフレーズの配置
・表示しない
ヘッダー背景画像
・なし

ヘッダーレイアウト
・センターロゴ(デフォルト)
ヘッダーの固定
・チェックしない
高さ
・なし
高さ(モバイル)
・なし

「Cocoon設定」の「モバイル」タブを選択

モバイルメニュー
・ヘッダーモバイルボタン
モバイルボタン
・サイトヘッダーロゴを表示する
・モバイルボタン時コンテンツ下のサイドバーを表示

「外観」→「テーマエディター」→「style.css」にコピペ

/************************************
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){/*トップページモバイルボタンの真下にスペースを作る*/
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;
}
.logo {
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){/*835px以上で非表示にすると空白ができるので埋める*/
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{/*835px以上でモバイルヘッダーを非表示*/
display:none;
}
}
@media (max-width:834px){/*835px以上でヘッダーを非表示*/
.header-container {
display:none;
}
img.site-logo-image{/*モバイル表示ロゴ*/
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
}

https://yujiblog.org/cocoon-header-logo

ヘッダーメニュー(グローバルメニュー)を編集

【Cocoon】ブログ初心者でもできる『ヘッダーメニュー(グローバルメニュー)』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『ヘッダーメニュー...

ヘッダーメニューを選択

①「外観」→「メニュー」を開く
②メニュー名に【ヘッダーメニュー】と入力して「メニューを作成」をクリック
③「メニュー項目を追加」からメニューに並べたいコンテンツを複数選び、「メニューに追加」をクリック

※アイコンを付けたい場合は、FontAwesome4.7から選ぶ。
FontAwesomeでサイトマップのアイコンfa-sitemapを選んだ場合は

<i class="fa fa-sitemap" aria-hidden="true"></i>

がコード。

デザインを整える

「外観」→「テーマエディター」→「style.css」にコピペ

/************************************
** ヘッダーメニュー
************************************/
}
.navi-in > ul{
justify-content:flex-start;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{/*サブメニュー*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {/*サブメニューを仕切る点線*/
border-top: dotted #dddddd;
background:#fff;
padding:0 0 0 2em;
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important;
}
div#header-container {/*ヘッダー下の影を非表示*/
box-shadow: none;
}
div.item-label{
font-weight:bold;
}

https://yujiblog.org/menu

Cocoon設定で色と幅を変える

「ヘッダー」→「グローバルナビメニュー色/幅」

グローバルナビメニュー色
・グローバルナビ色…そのまま
・グローバルナビ文字色…#333333
グローバルナビメニュー幅
・メニュー幅をテキストに合わせる

モバイル表示版ヘッダーの設定

【Cocoon】初心者でもできる『モバイル表示版ヘッダーメニュー』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『モバイル表示版ヘ...

「外観」→「テーマエディター」→「style.css」にコピペ

/************************************
**モバイル表示 ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
color: #90C31F!important;
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fa.fa-search::before{
margin-left:1em;
color: #90C31F!important;
}
span.fa.fa-bars::before{
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

https://yujiblog.org/cocoon-menu-mobile

モバイル表示版ヘッダーメニュー(グローバルメニュー)の設定

「外観」→「テーマエディター」→「style.css」にコピペ

/************************************
**モバイル表示 ヘッダーメニュー
************************************/
span.fa.fa-close::before{/*戻るボタン*/
font-family: FontAwesome;
content: “\f060”;
}
.menu-content .menu-drawer {
padding: 0 1em;
margin:0;
}
ul.menu-drawer:before{
font-size:1.2em;
display: block;
font-weight: normal;
background: white;
color:#7b7b7b;
padding: .5em;
margin-bottom:1em;
font-family: sans-serif;
text-align: center;
border-bottom:3px dotted #90C31F;
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
background-color:#fff;
padding:0;
border-radius:20px;
}
.menu-drawer a{/*menuの文字色をグレー*/
font-size:1.5em;
background-color:#f7f7f7;
color:#afafb0!important;
margin: 6px 0;
padding: 4px 1em;
border-radius:20px;
}
.menu-drawer a:hover{
background-color:#90C31F!important;
color:#fffff4!important;
transition: 0.2s ;
}
.menu-drawer .sub-menu {
padding-left:30px;
margin-top:0;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none!important;
}
}

https://yujiblog.org/cocoon-menu-mobile

タイトルとURLをコピーしました