「Simplicity」記事ごとにナビやヘッダー、サイドバーなどを非表示にするカスタマイズ

記事ごとに表示項目を簡単に変えてみよう

特定のページだけ(投稿記事ごとに選んで

  • グローバルナビを消す
  • ヘッダーを消す
  • サイドバーを消す
  • フッターを消す

こんな事をしたいときに役立つカスタマイズです。

ポイントは、すべての投稿記事ではなく、投稿時に選択した投稿記事だけに適応できるという点です。

Simplicityの機能を応用することで、投稿ページごとに簡単に設定を変えられます。ぜひ応用編まで読んでみてください。

スポンサーリンク

Simplicityのページタイプ

もともと、Simplicityは基本機能として以下の様にページタイプを選ぶことができます。

  • デフォルト
  • 1カラム(狭い)
  • 1カラム(広い)
  • 本文のみ(狭い)
  • 本文のみ(広い)

デフォルト

何も選択しないとデフォルトが適用されます。

表示されるもの:ヘッダー、グローバルナビ、サイドバー、フッター
本文の幅:680px

1カラム(狭い)

サイドバーなしの1カラム構造です。ヘッダー幅は本文の幅と同じサイズになります。

表示されるもの:ヘッダー、グローバルナビ、フッター
表示されないもの:サイドバー
本文の幅:680px

1カラム(広い)

サイドバーなしの1カラム構造です。ヘッダー幅は本文の幅と同じサイズになります。

表示されるもの:ヘッダー、グローバルナビ、フッター
表示されないもの:サイドバー
本文の幅:1010px

本文のみ(狭い)

本文のみが表示されます。
表示されないもの:ヘッダー、グローバルナビ、サイドバー、フッター
本文の幅:680px

本文のみ(広い)

本文のみが表示されます。
表示されないもの:ヘッダー、グローバルナビ、サイドバー、フッター
本文の幅:1010px

その1:ページタイプをカスタマイズする

例えば、1カラム(狭い)では、ヘッダーやグローバルナビ、フッターが表示されます。

このとき、グローバルナビが非表示になるようにカスタマイズしてみます。

まずは、親テーマの中のcss-custom.phpを開きます。

222

この中にある以下の部分を探します。

2016y09m16d_120407101

ここに書いてあることは、

1カラム(singular)で狭い(narrow)を選択したときは、ヘッダー、グローバルナビ、本文、フッターの幅を740px(width:740px)にする

サイドバーとSNSフォローボタン(#sidebar.top-sns-follows)を非表示にする(Display none)

という内容です。

この部分をカスタマイズしていきます。

グローバルナビを非表示にしたいので、

123

#navi{ display: none; }

を追加します。

1234

このように、1カラム(狭い)を選んだときグローバルナビが消えました。

この例を応用すれば、各ページタイプでカスタマイズが可能です。

各ページタイプとカスタマイズ箇所

各ページタイプのCSSの場所はこのようになります。(親テーマの中のcss-custom.php内)

1カラム(狭い)

2016y09m16d_140614876

1カラム(広い)

2016y09m16d_140637900

本文のみ(狭い、広い)

2016y09m16d_140656148

カスタマイズ記述例

以下をコピペしてください。

ナビを消したい

#navi { display: none; }

ヘッダーを消したい

#header{ display: none; }

サイドバーを消したい

#sidebar{ display: none; }

フッターを消したい

#navi { display: none; }

#footer-post-meta, #under-entry-body, #footer, #footer-mobile-buttons{ display: none; }

これで、ページタイプごとの表示項目を変えられます。

応用編:記事ごとにオリジナルのカスタマイズを適応する

さて、ここからが今回の本題です。

例えば、「投稿記事はいつもデフォルトのページタイプを使っているけど、記事によってはグローバルナビを消したい」という時のカスタマイズです。

そんなときあるのか?と思うかもしれません。

例えば、普段はいろんなジャンルのブログ記事を書いているとします。

でもある時、美容に関する記事を書きました。1記事だけでなく、10記事くらい書いたとします。

もし同じジャンルの記事だけでサイドバーを埋めれば、いかにも専門性のあるサイトに見えてきます。これ自体はSimplicityの新着記事ウィジェットできます。

でも、グローバルナビはどうしますか?フッターはどうしますか?他のカテゴリ記事へのリンクが見えてしまっています。なんとなく専門的な感じが薄れますよね・・・?

そんなときに、このカスタマイズを利用してみてください。

カスタマイズ手順

まずはページタイプから、普段使わないものを1つ選んでください。中身を変えてしまうので、それでも構わないものを選んでください。(もし、もともとの機能として全部使いたいというときは、この記事の方法ではお役に立てません・・・ごめんなさい)

今回は、1カラム(広い)のページタイプをカスタマイズしてみます。

カスタマイズの内容としては、見た目はデフォルトのページタイプで、グローバルナビとフッターを非表示にするカスタマイズです。

つまり、投稿時にページタイプを1カラム(広い)を選ぶだけで、見た目はデフォルトでグローバルナビとフッターをが消えます。

すでに解説したように親テーマのCSS-Custom.phpの中のこの部分を探します。

%ef%bc%96%ef%bc%96%ef%bc%96

もともとの設定があるので、消してから書き加えます。

2016y09m16d_173431288

#navi { display: none; }

#footer-post-meta,

#under-entry-body,

#footer, #footer-mobile-buttons{ display: none; } 

その結果、見た目はデフォルトですが、グローバルナビとフッター部分が消えました。

555

このレイアウトで表示したい記事は、ページタイプで1カラム(広い)を選ぶだけです。

使い方次第で可能性が広がる!

いかがでしたか?

Simplicityにもともとついているページタイプの切り替え機能を使うことで、目的の記事の表示を簡単に変えることができます。

Content Aware Sidebarsと組み合わせてサイドバーの内容も切り替えれば、さまざまなコンテンツの見せ方ができます。ぜひお試しください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク