ウェブサイト型に

Zaitsu Tomomi

2021年6月17日 18:05

基本：https://yujiblog.org/cocoon-customization#toc1

ヘッダー

ヘッダーロゴ作成：サイズは適当でOK。イラレは基本背景が無いのでそのままロゴとして使える。

cocoon設定/ヘッダー：ヘッダーレイアウト：センターロゴ　キャッチフレーズの配置：表示しない　他の項目は記入なし

cocoon設定/モバイル：モバイルメニュー：ヘッダーモバイルボタン　モバイルボタン：モバイルボタンの固定表示　他の項目は記入なし

外観/メニュー：メニュー構造/メニュー名：ヘッダーメニュー　カテゴリー：（カテゴリー選ぶ）　ホームのURLはトップぺージのURLを入れる

https://yujiblog.org/menu

メイン

cocoon設定/カラム：コンテンツ幅：650 コンテンツ余白幅：10 コンテンツ枠戦幅：0 サイドバー幅300 サイドバー余白幅19 サイドバー枠線幅：0 カラム間の幅：20

cocoon設定/投稿：カテゴリ・タグ設定：カテゴリのみ　カテゴリ・タグ表示位置：本文下　表示：関連記事を表示する　関連性：カテゴリー　関連記事見出し：関連記事　表示数：6 取得期間：全期間　投稿関連情報の表示：巣にペットの表示、スマホ端末で巣にペットを表示（480px以下）　表示：ページ送りナビを表示する　表示タイプ：デフォルト　表示位置：関連記事上　カテゴリー：同一カテゴリーのものを表示する　表示：コメントを表示する　パンクズリストの配置：メインカラム手前　記事タイトル：パンくずリストに記事タイトルを含む　

cocoon設定/固定ページ：パンクズリストの配置：メインカラム手前　記事タイトル：パンくずリストに記事タイトルを含める

cocoon設定/本文：追加rel属性：noopenerを追加、target="blank"の際にはnoopenerを追加します　⇦noreferrerはアフィリエイト報酬が計算できないことがあるため追加しない（安全性的には追加したほうが）

cocoon設定/画像：アイキャッチの表示：本文上にアイキャッチを表示する、アイキャッチラベルを表示する、アイキャッチにキャプションがある場合は表示する　画像の拡大効果：baguetteBox（軽量・スマホ向け）　サムネイル画像：デフォルト　Retinaディスプレイ：サムネイルをRetinaディスプレイ対応にする

cocoon設定/ブログカード：ブログカード表示：ブログカード表示を有効にする　サムネイルスタイル：左側　日付表示：更新日　リンクの開き方：新しいタブで開く　キャッシュの保存期間：365

Meta slider:最新記事（＃1158）

cocoon設定/カルーセル:カルーセルの表示：フロントページのみで表示、スマホで表示　表示内容：（カテゴリーにチェック）　カルーセルの並び替え：投稿日（降順）　最大表示数：12⇦3ぐらいにしたい　オートプレイ：オートプレイを実行　オートプレイインターバル：５秒
⇨×

Smart Slider：ショートコード：[smartslider3 slider="2"]
⇨×（高さがメイン要素と合わない）

wp responsive recent post slider/carousel：ショートコード：[recent_post_slider limit="3" design="design-3" show_date="false" show_content=”false” show_author=”false”]
⇨×（デザインが嫌）

サイドバー

外観/ウィジェット：サイドバー：人気記事

フッター

ハンバーガーメニュー

https://design-formom.com/cocoon-hamburger-menu/

cocoon設定/モバイル：モバイルメニュー：ヘッダーモバイルボタン　モバイルボタン：モバイルボタンの固定表示

外観/メニュー：表示オプション：CSSクラス　メニュー構造/メニュー名：モバイルヘッダーボタン　カスタムリンク/URL：＃menu,メニュー #logo ,ロゴ　 #search ,検索　メニュー設定/メニューの位置：ヘッダーモバイルボタン

お問い合わせフォーム

Contact Form7で作成
https://yujiblog.org/wordpress-contact-form

プライバシーポリシー

固定ページ/新規追加　外観/メニュー/新しいメニューを作成：メニュー名：フッターメニュー　メニューの位置：フッターメニュー　固定ページ：プライバシーポリシー

固定ページのカスタマイズ

/*タイトルを中央揃え*/
.page .article h1{
	color:  #f39800 ;
	text-align: center;
}
/*シェアボタンやフォローボタン,日付を表示しない*/
.page .date-tags,
.page .sns-buttons,
.page .sns-share-message,
.page .sns-follow-message,
.page .sns-follow .bc-brand-color-white .fbc-hide .sf-bottom {
   display: none;
}

この記事が気に入ったらサポートをしてみませんか？