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

Wordpress

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

デザインは主に後半に記述しました。

目次

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

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

ヘッダー

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

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

コンテンツ幅の変更

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

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

なお、chromeでズームがかかっているとカラム落ちしてしまう場合がありますので、注意してください
10インチのタブレットやipadでも2カラムになるため、使いやすいですね。ネットサーフィンする際もサイドバーが表示されたサイトの方が使いやすいです。

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

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;
}

シェア数の表示

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

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(コクーン)のブログカードではてブを表示(内部リンクの完成版) 第一弾としては、現在、Cocoon(コク...

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

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

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

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

Google Analyticsの設定

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

Google Analyticsでアクセス解析する方法
Google AnalyticsのトラッキングIDをテーマに登録する方法です。

Google Search Consoleの設定

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

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

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

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

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

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

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

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

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

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

フッターモバイルボタンの設定方法
スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。
ヘッダーモバイルボタンの設定方法
スマホ画面でヘッダーに操作ボタンを表示させる設定方法です。

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

Gutenbergをテストしました。

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

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

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

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

Cocoon(コクーン)のCSS/PHPカスタマイズ & 不要プラグイン集
ちまちまとCocoon(コクーン)のカスタマイズをやっています。cssやphpのコードをまとめていきます。 Cocoon(コクーン)のブログカードではてブを表示(内部リンクの完成版) 第一弾としては、現在、Cocoon(コク...
スポンサーリンク

電子書籍のおすすめ比較

コクーン(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とセットにしましょう。

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

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

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

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

External Links – nofollow, noopener & new window
Manage internal & external links: open in new window or tab, control nofollow, ugc, sponsored & noopener. SEO friendly.
スポンサーリンク

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

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

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

背景パターンの指定

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

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

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

記事背景色の指定

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

.main{
  background-color: #f2f2f2; 	
}

サイドバーの透化

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

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

装飾

cssでデフォルトのものををカスタマイズしています。
色は統一して枠で囲わないすっきりとしたデザインにしました。
まだ完成していないため、今後手をいれたいですね。
Cocoon Blocksの現在の対応状況
Cocoon Blocksが対応している旧ビジュアルエディタースタイルを紹介しています。

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

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

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が対応している旧ビジュアルエディタースタイルを紹介しています。

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

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

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

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

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

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

吹き出し

ねこにゃん
ねこにゃん

にゃんにゃん

 

猫パンチ

ワンコ
ワンコ

わんわん

 

わんこそば

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

&nbsp;

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

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

sbp-l
sbp-r

考え事

sbs-think

スタンダード

sbs-stn

吹き出しの三角がない

sbs-flat

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

sbis-cb 丸枠の枠あり
sbis-sb 四角枠の枠あり
sbis-cn 丸枠の枠なし
sbis-sn 四角枠の枠なし

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

フォント変更

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

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

preloaderの設定

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

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

その上でコクーンの場合は、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です。

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

プロフィールボックス

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

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

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

.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;}

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

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

人気記事を正方形表示にした場合、数字が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;
}

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

サイドバーの見出しにアイコンをつけます。

/************************************
** サイドバーの見出しにアイコン
************************************/
.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'; }

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

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

コメント

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