• TOP
• ブログ

コピペでＯＫ！ワードプレステーマ「Cocoon」のカスタマイズ【グローバルナビ篇】

2018-07-24T00:00:00+09:00 2020-02-01T09:18:45Z Cocoon（コクーン） カスタマイズ ブログ

どうも。とうきび。（@10kibi_）です。

ワードプレス初心者です。

ようやく自分好みのサイトデザインが完成しつつあるので、未来の自分に備忘録を残すシリーズ第一弾。

今回は、【グローバルナビ篇】です。

希望は、以下の４点！

1. 画面をスクロールしても、グローバルナビが上部に残ってて欲しい
2. グローバルナビの左端にファビコン（サイトアイコン）、ナビは右寄せ
3. ヘッダー画像とサイトタイトルはそのまま使いたい
4. ヘッダー画像→グローバルナビの順で表示させたい

え、、、
とうきび。にゃん初心者なのに、大きく出たにゃ・・・

ちなみにとうきび。のカスタマイズスキルは、

• 大学生のときにHTML手打ちでホームページ作ってた
• CSSの基礎知識はゼロ

です。

まあ、やってみましょう！レッツトライ！！

Cocoon（コクーン）とは

『寝ログ』でおなじみのわいひらさんが作成した、ワードプレスの無料テーマ。
SEO・高速化・モバイルフレンドリーに最適化してる全部のせなのに、無料。

ここからダウンロードできます。

⇒https://wp-cocoon.com/

ビフォーアフター

ビフォー：スクロールすると画面から消えてしまう

この画面からスクロールすると・・・
こうなります↓

赤い四角の部分に、グローバルナビが残るようにしたいです。

希望：スクロールするとヘッダー画像とタイトルは画面外に消えるが、グローバルナビだけ上部に固定される

グローバルナビの上部固定に加えて、とうきび。の希望は以下のとおりです。

• ファビコンを、グローバルナビの左端に表示
• ナビ自体は、右寄せ

↓こんなイメージですね。

アフター：スクロールするとグローバルナビだけ上部に残る

こんな風になりました。
スクロールしても、グローバルナビが上に残ってますね。

また、「キビログ。（当時のサイト名）」のファビコン（サイトアイコン）が左端に、ナビ自体は右端に寄っています。

・・・イメージどおり！
カ・ン・ペ・キ☆

（できたのはわかったから、具体的なやり方を知りたいにゃあ・・・。）

CSSとJavaScriptでグローバルナビを固定する方法

CSSの設定

では具体的な設定のやり方を記していきます。

①スタイルシートをひらく

まず、ワードプレスのダッシュボードから

外観　＞　テーマの編集　＞　Cocoonchildの「スタイルシート（style.css）」

を開きます。

②以下のコードをコピペする

/*ヘッダー固定*/

.navifixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
/* グローバルナビの設定 */
@media screen and (min-width: 768px) {
.navi-in{
float: none;
background: url(●使いたい画像のURL●) no-repeat; /* カバー画像を指定 */
background-size: contain;
z-index: 999;
display: flex;
justify-content: flex-end;
}
}

タブレット～スマホの表示のときには、グローバルナビ自体を表示させないような想定で作成しています。
＠のところの「min-width: 768px」で調整してください。

あとは、●のところに使いたい画像のURLを入れてもらえればＯＫです。

③CSSファイルを更新する

［ファイルを更新］を押します。

エラーが出なければ次にいきます。

JavaScriptの設定

①JavaScriptをひらく

同じページから、「javascript.js」をひらきます。

②以下のコードをコピペする

jQuery(function($) {
var nav = $('#navi'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('navifixed');
} else {
nav.removeClass('navifixed');
}
});
});

③JavaScriptを更新する

［ファイルを更新］を押します。

「Cocoonでグローバルナビを上部固定する方法」まとめ

1.  画像（ファビコン等）を用意する
2. CSSをコピペする
3. JavaScriptをコピペする

以上の手順で、少なくともこの『キビログ。（旧サイト名）』はイメージどおりにできました。

もっと美しいコードがあれば、是非教えてください。
この記事が、どなたかの参考になれば幸いです。

望みどおりのカスタマイズができますように。