おしゃれにコクーン(cocoon)のデザインをカスタマイズ

現在、ebookbranではコクーン(cocoon)を利用しています。おしゃれにコクーン(cocoon)のデザインをカスタマイズしています(まだまだ道半ば)。

まだ整理中のところもありますけど、いろいろとCSSをのっけています。デザインは主に後半に記述しました。

コクーン(cocoon)のカスタマイズ【基本編】

まずは基本的な設定について覚書。

ヘッダー

キャッチフレーズはどちらかというと表示しない派です。

Cocoon 設定 > Cocoon 設定 > キャッチフレーズの配置 > 表示しない

コンテンツ幅の変更

Cocoon 設定 > Cocoon 設定 > カラム > コンテンツ幅

どうしようか迷ったのですが、700ピクセルのアイキャッチを使っていたため、とりあえず800から700に変更しました。もちろん、アイキャッチのサイズを変更する方法もあります。

グローバルメニューの調整

Cocoon 設定 > Cocoon 設定 > ヘッダー > グローバルメニュー幅の「メニュー幅をテキストに合わせる」

これは便利です。

ついでにグローバルナビの矢印を消します。

/* グローバルメニューを矢印を消す */
.navi-in .has-icon div::before{
  display: none;
}

/* グローバルメニュのフォントサイズの変更 */
.navi-in a {
  font-size: 12px;
}

フォントサイズは小さめにします。メニューに情報がたくさん入るようにするけど、読めるサイズにします。

昔は下記で消えたようですが、少し変わったようです。

/************************************
** グローバルメニュー
************************************/

/* グローバルメニューを矢印を消す */
.navi-in > ul > .menu-item-has-children > a::after{
  display: none;
}
/* グローバルメニュのフォントサイズの変更 */
.navi-in a {
	font-size: 12px;
}

グローバルメニューのマウスオーバー色を調整

.navi-in a:hover {
  color: #8fb0a9 !important;
  background: none !important;
}

優先度の関係でうまく反映できなかったため、!important;を使いました。コード的にはこちらがわかりやすいですけど、!importantを使わずごちゃごちゃ書く方法はありそうです。

シェア数の表示

デフォルトでなぜかシェア数が表示されていないようです。

Cocoon 設定 > Cocoon 設定 > SNSシェア > 本文上シェアボタンの「シェア数の表示」のチェックをオン

Cocoon 設定 > Cocoon 設定 > SNSシェア > 本文下シェアボタンの「シェア数の表示」のチェックをオン

本文上と本文下は別れているため、2ヵ所対応が必要です。

コピーライトの表示を変更

地味ですけど、フッターよりコピーライトの表示を変更できます。

Cocoon 設定 > Cocoon 設定 > フッター > クレジット表記

関連記事を非表示にする

このサイトは関連記事を表示していますが、サイトによってはいらないことがあるかもしれません。

Cocoon 設定 > Cocoon 設定 > 投稿 > 表示 > 「関連記事を表示する」のチェックを外す

関連記事下の前後ページを非表示にする

関連記事下の前後ページを非表示にします。順番に関連性の高い記事を投稿していることは皆無で、関連性の薄い記事が表示されることが多いため。

Cocoon 設定 > Cocoon 設定 > 投稿 > ページ送りナビ設定 > 「ページ送りナビを表示する」のチェックを外す

日付は更新日のみ表示

まず、ブログの記事に表示する日付を更新日のみにします。

忘れがちですが、インデックスの設定に日付があるようです。

Cocoon 設定 > Cocoon 設定 > インデックス > 投稿関連情報の表示

下記は記事やカテゴリなどの一覧に実際に表示される日付です。「投稿日の表示」のチェックを外し「更新日の表示」をチェックしました。

Cocoon 設定 > Cocoon 設定 > SEO > 表示する日付 の「更新日のみ表示」

ブログカードは更新日も表示できますが、ブログカードには日付は必要ないと判断して「なし」にしました。

Cocoon 設定 > Cocoon 設定 > ブログカード > 日付表示は「なし」

代わりにはてブを表示しました。カスタマイズ方法は以下で解説しています。

Cocoon(コクーン)のカスタマイズの方法(CSS/PHP) & 不要プラグイン集

ちまちまとCocoon(コクーン)のカスタマイズをやっています。cssやphpのコードをまとめていきます。Cocoon(コクーン)のカスタマイズの方法(1ページ目)基礎設定やCSSのデザインなどはこちらの記事にまとめました。こちらの記事はプ...

ebookbrain.net

スマホでフッターエリアを表示

スマホでフッターウィジエットを表示しました。情報は共通の方がいい派なので。

/************************************
** スマホでフッターエリアを表示
************************************/

@media screen and (max-width: 768px) {
  .footer-widgets {
    display: block;
  }
}

Google Analyticsの設定

公式サイトに書いてあったため、割愛。

Google Analyticsでアクセス解析する方法

Google AnalyticsのトラッキングIDをテーマに登録する方法です。

wp-cocoon.com

Google Search Consoleの設定

公式サイトに書いてあったため、割愛。

Google Search Consoleに登録する方法

Google Search Console用のサイト認証タグを表示させてサイト登録を行う方法です。

wp-cocoon.com

htmlタグの再取得が必要な場合は次のとおりです。

設定 > 所有権の確認 > htmlのタグ

Font Awesomeの切り替え

Font Awesome 4とFont Awesome 5の切り替えが可能です。

Cocoon設定 > 全体 > サイトアイコンフォント

指定方法は次のとおりです。font-familyとfont-weightの指定も必須です。

  font-family: 'Font Awesome 5 Free', sans-serif;
  content: '\f05a';
  font-weight: 900;

font-weight: 900;は塗りつぶしバージョンの場合はそうなります。他に400があります。

Font Awesome 5の検索はこちらです。

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

スマホメニューを固定にする

Cocoon設定 > モバイル > モバイルボタンの固定表示

また、以下のチェックをいれています。

[ヘッダー・フッターモバイルボタン]

[ サイトヘッダーロゴを表示する ]をオフ。もともとあるロゴが消去され、2重に表示される現状が改善されます。

公式の解説はこちらです。

フッターモバイルボタンの設定方法

スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。

wp-cocoon.com

ヘッダーモバイルボタンの設定方法

スマホ画面でヘッダーに操作ボタンを表示させる設定方法です。

wp-cocoon.com

ebookbrainではそれ以外にスマホメニューを固定するプラグインを使っています。

Wordpressでスマホのヘッダーメニューを固定するプラグインまとめ

Wordpressのテンプレートはいまだスマホの固定のヘッダーメニューに対応していないものが多いです。 そのため、jqueryのsliderなどが有名で個人的にも利用していましたが、 もっとお手軽にプラグインで実装できないのかを調べたところ...

ebookbrain.net

【おまけ】Gutenbergのテストをしたけどソース的に使いたくない?

Gutenbergをテストしました。

しかし、Gutenbergをやめて、テキストでソースをみると、wp:paragraphなどの記述があります。

wp:paragraphは段落の意味。他にもGutenbergで作った記事をみると意図しないところにbrタグなどが入っていて、やはり好きになれないです。

そして、問題なのは、wp:paragraphがあるとビジュアルとテキストを切り替えたとき、pタグが勝手につくようです。

このような仕様が嫌になり、Classic Editorを使うことにしました。cocoonはClassic Editorに対応しています。詳細はプラグインの記事をみてください。

Cocoon(コクーン)のカスタマイズの方法(CSS/PHP) & 不要プラグイン集

ちまちまとCocoon(コクーン)のカスタマイズをやっています。cssやphpのコードをまとめていきます。Cocoon(コクーン)のカスタマイズの方法(1ページ目)基礎設定やCSSのデザインなどはこちらの記事にまとめました。こちらの記事はプ...

ebookbrain.net

コクーン(cocoon)の設定を引っ越し・移行、Simplicityからの乗り換え時やること

Simplicityから乗り換えた場合の覚書です。

コクーンは設定ファイルの移行も簡単です。そのため、引っ越しやテストサーバーでのテストも簡単にできます。

cocoonの設定をエクスポート

Cocoon設定 > バックアップ > バックアップファイルの取得

バックアップはテキストファイルです。

cocoonの設定のインポート

Cocoon設定 > バックアップ > 「参照」でファイルの選択 > 設定の復元

ウィジェットが消えた

ウィジェットが外れているため、外観 > ウィジェットから修正すればいいだけ。

アイコンボックスの置換

Simplicityのアイコンボックスをコクーン用に置換しました。class名が変わったようです。置換しなくても問題なく表示できるよう対応されていましたが、コクーン用に統一しました。cssで装飾する際に2つで管理したくなかったからです。

<div class="information">

<div class="question">

<div class="alert">

置換後は以下のとおりです。

<div class="information-box">

<div class=”question-box”>

<div class="alert-box">

simplicityからcocoonにアクセス解析を移行する

アクセス解析は設定しなおさないといけません。simplicityの設定をメモ帳にめもるのが早いでしょう。

外観 > カスタマイズ > アクセス解析

target=”_blank”問題も対応

target=”_blank”の問題は一時期、話題になりましたよね。

クリックタグを導入するとき、target=”_blank”とrel=”noopener”をセットにしました。

テストしたところ再現はしませんでしたが、、Android+Chrome環境でリンク先を開けない環境があるみたいなので。

またセキュリティの問題は、こちらのデモをみるとわかりやすいです。自サイトが操作されていますよね。

そして、Googleの見解は次のとおりです。

一般的に、外部リンクを新しいウィンドウまたはタブで開く場合は、必ず rel=”noopener” を追加してください。

サイトで rel=”noopener” を使用して外部アンカーを開く  |  Tools for Web Developers  |  Google Developers

ちなみに、似たものとしてnoreferrerがあります。個人的にGutenbergは使っていないため問題ないのですが、Gutenbergは自動的につくようです。noreferrerはアフィリエイトリンクなどのリフィラーが参照できないなので消します。

この問題の対応方法はtarget=”_blank”はそもそもつけないか、つけるならGoogleのいうようにnoopenerとセットにしましょう。

現在、コクーンは対応されています。

よりセキュリティーを高くするのであれば、「target=”_blank”の際はnoreferrerを追加」も有効にしておいた方が良いかも。ただrelにnoreferrerを追加してしまうと、リファラが取れなくなる難点もあります。 pic.twitter.com/WKOkOkxIyD

— わいひら@寝ログ (@MrYhira) August 8, 2019

コクーンってやっぱすごい！

コクーンを使っていると、有料も含めてほかのテーマは使いたくなくなるのですよね…。

他のテーマは一括置換するか、プラグイン対応するしかありません。

External Links – nofollow, noopener & new window

Internal links & external links manager: open in new window or tab, control nofollow, ugc, sponsored & noopener. SEO friendly.

ja.wordpress.org

コクーン(cocoon)のカスタマイズ【デザイン・配色のカスタマイズ】

配色は面積が大きいところから決めていきますね。面積が多い背景色からですね。

Cocoon 設定 > Cocoon 設定 > 全体 > 背景色

背景パターンの指定

背景パターンの指定方法です。

Cocoon 設定 > Cocoon 設定 > 全体 > サイト背景画像

外観 > カスタマイズ > 背景画像 の方がより詳しいい設定ができるようです。こちらの方が優先度が高いです。繰り替えしパターンが使いたい場合は、外観のカスタマイズからやりましょう。

記事背景色の指定

記事背景色の変更は以下のとおりです。本文の背景色ですね。

.main{
  background-color: #f2f2f2; 	
}

サイドバーの透化

サイドバーを透化させる方法です。RGBの値、最後の値はアルファー値です。0にすると完全透明になります。

.sidebar {
  background-color: rgba(255, 255, 255, 0);
}

装飾

Cocoon Blocksの現在の対応状況

Cocoon Blocksが対応している旧ビジュアルエディタースタイルを紹介しています。

wp-cocoon.com

アイコンボックスの使い方

一部調べたためメモしておきます。マルバツもありますが、面積的に手のアイコンの方がシルエットがしっくりときたため、そちらを採用しました。

good-box

<div class="good-box common-icon-box">
メリットです。
</div>

bad-box

<div class="bad-box common-icon-box">
デメリットです。
</div>

使うものだけお好みでカスタマイズすればOKでしょう。

Cocoon Blocksの現在の対応状況

Cocoon Blocksが対応している旧ビジュアルエディタースタイルを紹介しています。

wp-cocoon.com

サムネイル画像は正方形にする

デザインが長方形だけだと統一感がでてしまうため、リズミカルにするため、 1:1（正方形）のサムネイル画像を採用しました。ちなみに、simplicityもこのサイズです。

Cocoon 設定 > Cocoon 設定 > 画像 > サムネイル画像 > 1:1（正方形）

設定は今後、この画像サイズを生成しますよ、という設定の変更です。実際に画像が生成されるわけではありません。

画像の再生成はRegenerate Thumbnailsというプラグインを使います。

【Wordpressサムネイル管理】登録・再生成・削除するメディアライブラリ管理プラグイン

ebookbrainのサムネイル管理方法をまとめておきます。 WordPressのプラグインが独自にサムネイルを生成してしまう場合もありますが、 できるだけ余計なサムネイルやゴミデータは作らず管理したいものです。 メディアのライブラリ...

ebookbrain.net

吹き出し

ねこにゃん

にゃんにゃん

猫パンチ

ワンコ

わんわん

わんこそば

吹き出し内の改行がうまくできませんでした。

 

を入れるしかないようです。

左右反転は簡単にできます。2つ登録するのが面倒な場合に。

sbp-l

sbp-r

考え事

sbs-think

スタンダード

sbs-stn

吹き出しの三角がない

sbs-flat

sbs-lineはine風にsbs-stnを色替えするようです。

c(circle)、s(square)、b(border)、n(none)の意味かと思います。なおborderはcssで指定すると、そちらの方が優先度が高いようです。

フォント変更

Cocoon 設定 > Cocoon 設定 > 全体 > フォント

メイリオが好きなので、メイリオにしました。

preloaderの設定

このサイトでは利用していません。preloaderのプラグインが必要です。最後に記載されているプラグインを利用してください。

PreloaderのWordPressプラグイン比較【おすすめは?】

PreloaderのWordPressプラグイン比較していきます。おすすめは?はどれでしょう? 実際にひとつひとつ調べたため覚書のめももかねています。 PreloaderのWordPressプラグイン比較【おすすめは?】 Preloa...

ebookbrain.net

その上でコクーンの場合は、tmp-user/body-top-insert.phpが子テーマにあります。

そこに

<div id="wptime-plugin-preloader"></div>

を挟みます。

トップページの作り方

トップページに固定記事を割り当てればOKです。その上で邪魔の要素を消します。

.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

全部消さなくてもOKです。

あとはカラムなどを使ってデザインしていくとよいでしょう。

固定ページ(特定記事)のアイキャッチの削除

xxxに記事noを入れます。

/* アイキャッチの削除 */
.page-id-xxx .eye-catch-wrap {
  display: none;
}

プロフィールボックス

サイドバーに表示するプロフィールボックスはSANGOのデザインがよい感じです。Cocoon用はうぇぶあしびさんで公開されていたため、そのまま借用して楽をさせてもらいました。ありがとうございます。

【Cocoon】プロフィールボックスをSANGO風にカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーと記事下のプロフィールボックスを人気のWordPressテーマ「SANGO」風にカスタマイズしてみました。サイドバーではこんな感じになります↓記事下のメインカ

web-ashibi.net

色を少し変えたぐらいですかね。

.sidebar .author-box {
    background-color: #eee9d3;
}
.sidebar .author-thumb img {
    border: 3px solid #eee9d3;
    background-color: #f1f1f1;
}

あと、インスタグラムのボタンをグラデにしたい場合はこちらいけますかね。

.author-box .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}

プロフィールボックスのリンク集はWordPressの管理画面から設定します。

ユーザー > プロフィール

少し不具合があって次の修正をしました。Twitterのアイコンが表示されない問題はコメントアウトで対応

/*
.author-box .icon-twitter-logo::before {
    font-family: FontAwesome;
    content: "\f099"
}
*/

noteの背景色が表示されない問題は次のコードを追加。

.author-box .note-button { background-color: #41C9B4 !important; }

複数のライターさんが参加している場合は記事下にプロフィールをのせたい気がしますが、ひとりで運営しているサイトはサイドバーがいいですかね。

人気記事を正方形にすると数字がはみだす

人気記事を正方形表示にした場合、数字が2桁(10位)になると2行になりはみだすようです。以下で修正できますね。

.widget-entry-cards.ranking-visible .card-thumb::before {
  width: auto;
  min-width: 18px;
}

人気記事のカスタマイズ

たとえば、円にしたい場合は以下のようになりますね。上記の不具合対応こみです。

.widget-entry-cards.ranking-visible .card-thumb::before {
  top: 6px;
  left: 6px;
  border-radius: 50%;
  width: auto;
  min-width: 18px;
}

サイドバーの見出しにアイコン

サイドバーの見出しにアイコンをつけます。Font Awesome 4用です。

/************************************
** サイドバーの見出しにアイコン
************************************/
.widget h3::before { font-family: FontAwesome; font-size: 80%; vertical-align: middle; font-weight: normal; margin-right: 5px; }
.widget_popular_entries h3::before { content: '\f135'; }
.widget_author_box h3::before { content: '\f135'; }
.widget_recent_comments h3::before { content: '\f0e6'; }
.widget_custom_html h3:first-child::before  { content: '\f135'; }

Font Awesome 5用です。

/************************************
** サイドバーの見出しにアイコン
************************************/
.widget h3::before {
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-weight: 900;
  font-size: 80%;
  vertical-align: middle;
  margin-right: 5px;
}
.widget_popular_entries h3::before { content: '\f5a2'; }
.widget_author_box h3::before { content: '\f2c1'; }
.widget_recent_comments h3::before { content: '\f086'; }
.widget_custom_html h3:first-child::before  { content: '\f0c8'; }

widget_custom_htmlは複数ある場合があるため、必要に応じて順番をつけないといけませんかね。

まだまだ道半ばですので、暇をみてカスタマイズしたら追記していきます。

グーテンベルクのテーブルで枠線が表示されない

少しまともになってきたため、1サイトだけ試験的にグーテンベルクを採用しています。テーブルでborderが効かない症状が発生しました。

/************************************
** テーブル
************************************/

table th, table td {
   font-size: 12px;
   border: 1px solid #ccc !important;
}

いったん、!importantで切り抜けちゃいました。

画像クリック時に拡大(画像の拡大効果)

Cocoon設定 > 画像> 画像の拡大効果

ライブラリを使っているようですが、サイズがでかい縦長の長い画像はいい塩梅になりませんでした。

• なし→ 2回クリックすると最大の画像サイズになる。スクロールもできる
• Spotlight（軽量・高機能ギャラリー） →拡大の最大値が決まっているため文字が読めない
• baguetteBox（軽量・スマホ向け）→縦長画像が画面サイズにおさまってしまう(小型ノートPCの場合読めない)。拡大できない
• Lity（軽量・1枚ずつ表示）→縦長画像が画面サイズにおさまってしまう(小型ノートPCの場合読めない)。拡大できない
• Lightbox →縦長画像が画面サイズにおさまってしまう(小型ノートPCの場合読めない)。拡大できない

なしにするのが１番よいです。時間があればプラグインを検討しようと思います。

なお画像は選択した上で[リンクアイコン]をクリックする設定が必要があります。設定がないと反応しません。

タイムライン

とりあえずborderの枠は入りませんかね。

.timeline-box {
  border: none;
}