当ブログで行っている Cocoon 設定・カスタマイズ内容一覧

当ブログで行っている Cocoon に関する設定やカスタマイズ等の内容をまとめています。まだ完全ではありませんが、暇を見つけて追記している感じです。

(管理画面の「Cocoon 設定」についてはほぼ書いてある通り。あとは CSS になるかなと……)

CSS・jQuery カスタマイズ

「Cocoon 設定」メニューの「Cocoon 設定」

全体

キーカラー

サイトキーカラー ⇒ #68666c に設定。

サイトフォント

フォント ⇒ 游ゴシック体, ヒラギノ角ゴ を選択。

文字の太さ

500 に設定。

サイトアイコンフォント

Font Awesome 5 を選択。

ヘッダー

ヘッダーロゴ

ヘッダーロゴ用画像を選択。

ヘッダーロゴサイズ

幅を 300 に設定。

キャッチフレーズの配置

表示しない を選択。

ヘッダー色(ロゴ部)

ロゴ文字色 ⇒ #ee7d50 に設定。

タイトル

フロントページ設定

フロントページタイトル ⇒ サイト名 を選択。

投稿・固定ページ設定

メタキーワード ⇒ メタキーワードタグを出力する のチェックを外す。

カテゴリー・タグページ設定

メタキーワード ⇒ メタキーワードタグを出力する のチェックを外す。

アクセス解析・認証

アクセス解析設定

解析全般 ⇒ サイト管理者も含めてアクセス解析する のチェックを外す。

Google Analytics設定

Google Analytics トラッキングID 欄にトラッキングIDを入力。

カラム

メインカラム設定

コンテンツ幅 ⇒ 720 に設定。

コンテンツ余白幅 ⇒ 40 に設定。

コンテンツ枠線幅 ⇒ 0 に設定。

サイドバー設定

サイドバー幅 ⇒ 300 に設定。

サイドバー余白幅 ⇒ 20 に設定。

サイドバー枠線幅 ⇒ 0 に設定。

カラム間余白設定

カラム間の幅 ⇒ 30 に設定。

インデックス

リスト設定

カードタイプ ⇒ 縦型カード2列 を選択。
スマホ端末で縦型&タイル型のエントリーカードを1カラムにする にチェックを入れる。

投稿関連情報の表示 ⇒ スニペット(抜粋)の表示 のチェックを外す。

投稿

関連記事設定

表示タイプ ⇒ 縦型カード3列 を選択。

投稿関連情報の表示 ⇒ スニペット(抜粋)の表示 のチェックを外す。

ページ送りナビ設定

表示 ⇒ ページ送りナビを表示する のチェックを外す。

パンくずリスト設定

パンくずリストの配置 ⇒ フッター手前 を選択。

記事タイトル ⇒ パンくずリストに記事タイトルを含める にチェックを入れる。

固定ページ

パンくずリスト設定

パンくずリストの配置 ⇒ フッター手前 を選択。

記事タイトル ⇒ パンくずリストに記事タイトルを含める にチェックを入れる。

本文

本文行間設定

本文余白 ⇒ 行の余白を 2.4 に設定。

外部リンク設定

外部リンクの開き方 ⇒ 新しいタブで開く(_blank)を選択。

テーブル設定

レスポンシブテーブル ⇒ 横幅の広いテーブルは横スクロール にチェックを入れる。

目次

目次表示の深さ

H3見出しまで を選択。

目次ナンバーの表示

数字詳細 (ex: 1.1.1) を選択。

目次の中央表示

目次をメインカラムの中央に表示する のチェックを外す。

SNSシェア

トップシェアボタン

表示切替 ⇒ LINE@、LinkedIn、コメント 以外チェックを入れる。

ツイート設定

メンション ⇒ ツイートにメンションを含める にチェックを入れる。

Pinterest設定

Pinterest共有 ⇒ Pinterestで画像をシェアする にチェックを入れる。

画像

本文画像設定

アイキャッチの表示 ⇒ アイキャッチラベルを表示する のチェックを外す。

画像の囲み効果 ⇒ ボーダー(薄い枠線)を選択。

コード

ハイライト表示

ソースコードをハイライト表示 にチェックを入れる。

行番号表示 にチェックを入れる。

コメント

コメント入力欄表示

常に表示 を選択。

コメント入力欄見出し

任意のテキストに変更。

ウェブサイトの表示

ウェブサイト入力ボックスを表示する のチェックを外す。

送信ボタンラベル

任意のテキストに変更。

フッター

フッター表示タイプ

メニュー&クレジット(左右)を選択。

クレジット表記

著作権者表記:に ウェブ屋SATO と入力。

ボタン

ボタンのアイコンフォント

アイコンフォントを 上から2番目 に設定。

管理画面設定

管理者パネル

管理者パネルの表示 ⇒ 表示しない に設定。

PVの表示 ⇒ インデックスにPV数を表示 のチェックを外す。

エディター

ブロックエディター設定

拡張カラーパレット色 ⇒ 拡張色A #ee7d50、拡張色B #d2ddde、拡張色C 68666c に設定。

その他

JavaScriptライブラリ設定

jQuery ⇒ jQuery Core 3.3.1 を選択。

jQuery Migrate ⇒ jQuery Migrate 3.0.1 を選択。

「Cocoon 設定」メニューの「高速化」

ブラウザキャッシュ

ブラウザキャッシュ

ブラウザキャッシュの有効化 にチェックを入れる。

縮小化

HTML縮小化

HTMLを縮小化する にチェックを入れる。

CSS縮小化

CSSを縮小化する にチェックを入れる。

JavaScript縮小化

JavaScriptを縮小化する にチェックを入れる。

Lazy Load設定

遅延読み込み

Lazy Loadを有効にする にチェックを入れる。

Googleフォント

Googleフォントの非同期読み込みを有効にする にチェックを入れる。

WEBフォント(β版)

アイコンフォントの非同期読み込みを有効にする にチェックを入れる。

コメント

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