【WordPress】【Cocoon】ブログ「現場で使える! Excel/VBA実践ガイド」で実施したこと

前提

以下の記事に記載の内容以外で実施したことを、記載する。

ボックスメニューの作成

・Font Awesome5のアイコンを使用
・ウィジットとして「コンテンツの上部」にボックスメニューを表示

ヘッダーレイアウトを「トップメニュー 右寄せ」にする

[Cocoon設定]→[ヘッダー]の「ヘッダーレイアウト」で設定する

目次を「サイドバースクロール追従」に追加

[外観]→[ウィジット]で追加する

メニューにアイコンを付与する

Font AwesomeFont Awesome5でフリーのアイコンのコードを取得する。

取得したコードをメニューの「ナビゲーションラベル」に記載する。

ヘッダー下に画像を表示

「アピールエリア」を利用して表示する。

[Cocoon設定]→[アピールエリア]
┗アピールエリアの表示        :「全ページで設定」
┗エリア画像             :任意の画像を設定。サイズは
┗アピールエリア背景画像の固定    :チェックを外す
┗テキストメッセージエリアを表示する :チェックを外す

上記以外は未設定 or デフォルトのまま。

ヘッダーのカスタマイズ

[Cocoon設定]→[ヘッダー]
┗背景色:白
┗文字色:黒

フッターのカスタマイズ

①[Cocoon設定]→[フッター]
┗背景色:グレー(6c757d)
┗文字色:白

②[外観]→[ウィジット]
┗「アーカイブ」を「フッター左」に追加
┗「カテゴリー」を「フッター中」に追加

③スタイルシートを修正
・「フッターのロゴ」を非表示にする
・「フッターウィジット」の横幅を変更する
・「フッターウィジット」配下の「カテゴリとアーカイブのリストの文字サイズ」を変更する
・「フッターウィジット」配下の「カテゴリとアーカイブのリスト」を装飾
・「フッターウィジット」配下の「カテゴリとアーカイブのリスト」のオンマウス時の設定を変更

/*「フッターのロゴ」を非表示にする*/
.footer-bottom-logo .logo-image, .footer-bottom-logo .logo-text  {
    display: none;
}

/*「フッターウィジット」の横幅を変更する*/
.footer-left, .footer-center, .footer-right {
    width: 25.00%;
}

/*「フッターウィジット」配下の「カテゴリとアーカイブのリストの文字サイズ」を変更する*/
#footer .widget_categories ul li, #footer .widget_archive ul li {
    display: inline-block;
    margin: 2px;
    padding: 0;
    font-size: 13px;
    letter-spacing: 0;
}

/*「フッターウィジット」配下の「カテゴリとアーカイブのリスト」を装飾*/
#footer .widget_categories ul li a, #footer .widget_archive ul li a {
    background-color: #343a40;
    text-transform: uppercase;
    padding: 2px 4px;
    border-radius: 3px;
}

/*「フッターウィジット」配下の「カテゴリとアーカイブのリスト」のオンマウス時の設定を変更*/
#footer .widget_categories ul li a:hover, #footer .widget_archive ul li a:hover {
    background: #000000; /* 背景色 */
}

投稿ページや固定ページを作成したユーザー名を非表示にする

スタイルシートを修正する。

/*投稿ページや固定ページを作成したユーザー名を非表示*/
.author-info {
    display: none;
}

ヘッダーに検索ボックスを追加

以下を「functions.php」へ追記する。

//ヘッダーに検索ボックスを追加
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
	ob_start();
	get_search_form();
	$searchform = ob_get_contents();
	ob_end_clean();
	$items .= '<li>' . $searchform . '</li>';
	return $items;
}

//Cocoon設定のヘッダーのプレビューを無効化(検索ボックス対策)
add_filter('cocoon_setting_preview_header', '__return_false');

以下をスタイルシートへ追記する。

/*ヘッダーに追加した検索ボックスを微調整 */
#navi-in .search-box {
    margin: 0;
    position: relative;
}

/*ヘッダーに追加した検索ボックスの内部の文字サイズを変更 */
#navi-in .search-box .search-edit{
    font-size: 10px;
}

/* フッターメニューX番目検索窓の消す ※ここでは4番目としている。状況に応じて変更する。*/
.navi-footer-in>.menu-footer>li:nth-child(n+4) {
    display: none; 
}

モバイルスライドインメニューの作成

[外観]→[メニュー]でモバイルスライドインメニューの作成する。

ボックスメニューのオンマウス時の設定を変更。

以下をスタイルシートへ追記する。

/* ボックスメニューをカスタマイズ。オンマウス時の設定 */
.box-menu:hover{
    box-shadow: none; /* 枠線を消す */
    background: #E6E6FA; /* 背景色 */
}

ヘッダーメニュー(1つ目と2つ目のみ)のオンマウス時の設定を変更

ヘッダーメニューの1つ目と2つ目のオンマウス時の設定を変更。
以下をスタイルシートへ追記する。

/* ヘッダーメニュー(1つ目と2つ目のみ)のオンマウス時の設定を変更。 */
#navi-in ul li:nth-child(1):hover, #navi-in ul li:nth-child(2):hover{
    box-shadow: none; /* 枠線を消す */
    background: #E6E6FA; /* 背景色 */
}

サイトロゴを作成し設定

作成例)
①「B. ロゴタイプ」で「シンプルのやつ」を選択
②「日本語・英数字」にサイト名を入力
③「色」を任意で変更
④「フォント」を任意で変更
⑤「1.作成」をクリック
⑥「2.ダウンロード」をクリック
⑦[Cocoon設定]→[ヘッダー]の「ヘッダーロゴ」に設定する。

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