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

Cocoonカスタマイズ~グローバルナビ篇


どうも。とうきび。(@10kibi_)です。

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

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

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



希望は、以下の4点!


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

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


ちなみにとうきび。のカスタマイズスキルは、
  • 大学生のときにHTML手打ちでホームページ作ってた
  • CSSの基礎知識はゼロ
です。

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


Cocoon(コクーン)とは


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

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

https://wp-cocoon.com/


ビフォーアフター

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

Cocoonグローバルナビ(カスタマイズ前)


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

Cocoonグローバルナビ(スクロールすると消える)

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


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


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

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

↓こんなイメージですね。
Cocoonグローバルナビ(設定後のイメージ)

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

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

Cocoonグローバルナビ(カスタマイズ後)


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

・・・イメージどおり!
カ・ン・ペ・キ☆
(できたのはわかったから、具体的なやり方を知りたいにゃあ・・・。)


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を入れてもらえればOKです。

③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をコピペする

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

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

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

感謝

2 件のコメント :

  1. こんにちは。
    こちらの記事を参考に「固定ヘッダー」をカスタマイズしています。
    固定ヘッダーは、モバイルに反映させるにはどのようにすればよろしいでしょうか?

    返信削除
  2. 初米ですさん、コメントありがとうございます!
    申し訳ないのですが、わたしはモバイル端末では固定ヘッダーにしていないため、やり方がわかりません。

    返信削除

関連記事