「cocoon」でいろいろなものを非表示とか左寄せとかにした

blog

通常は、cocoon設定で変更可能なものが多いですが、そうでないものもあります。

やるのは簡単なのですが、該当箇所を見つけるのが面倒なのですね。

その中で、私がやったことについて、忘れないように書き留めておきたいと思います。

*子テーマに追加することを前提に書いています。

 

いろいろなものを非表示

基本的に非表示にするには、該当箇所をcssで「display: none;」にすれば非表示に出来ます。

または、非表示ではなくそもそも消してしまえという方法もあります。その場合は、.phpファイルの該当箇所を削除またはコメントアウトします。

私の場合は、.phpファイルを弄るのは良くわからないので、「display: none;」を使いました。

 

モバイル表示で下に回り込むサイドバー

「cocoon」では、サイドバーの設定は、「モバイル」タブで3種類のレイアウト設定が出来ます。私はデフォルトの「スライドインボタン」にしています。

画面幅が768px以下になると、画面下部にメニューバーが表示されます。そこの一番右のメニューをタップすると、PCで言うサイドバーが右からスライドしてきます。

menubar

sidebar

 

通常スマホでのサイドバーは、下に回り込む形で表示されますよね。つまり、この機能を使うと「従来の下に回り込むサイドバー」と「右からスライドしてくるサイドバー」という2つのサイドバーがあることになります。

ここでは「従来の下に回り込むサイドバー」は非表示にしてしまおうという事です。

特に個別投稿ページの場合、記事の文字数が多いとスクロールする量が多くなってしまうのですね。

 

・全ページ非表示の場合

こちらは、COCOONのアップデートで標準装備されました。

「スライドインボタン時コンテンツ下のサイドバーを表示」のチェックを外します。

*「スライドしてくるサイドバー」には影響が出ないみたいです。

 

・個別投稿ページのみ非表示の場合

「スライドインボタン時コンテンツ下のサイドバーを表示」にチェックを入れて、子テーマのcssのメディアクエリ「768px以下」の部分に、以下を書き加えました。

.single #sidebar {
display: none;
}

 

ページ送りのサムネイル

これは、「投稿」タブで、サムネイルの形状は変更できるのですが非表示にはできません。画像がなくてもいい場合はcssに以下を加えます。

.pager-post-navi a figure {
display: none;
}

 

固定ページでのシェア・フォローボタン

cssに以下を付け加えます。

.page .sns-share,
.page .sns-follow{
display: none;
}

 

いろいろなものを左寄せ

私の趣味の問題もありますが、ブログを見るときは大体、左から右へと目を動かしていきます。そこで、めぼしいところは左寄せにしています。

大体のものは「text-align: left;」にすれば、左に寄ります。

 

ブログタイトル、キャッチフレーズ

上下の位置関係を考えて、このようにしました。

.logo {
text-align: left;margin-bottom: -20px;
}
.tagline{
text-align: left;margin-bottom: 20px;
}

 

個別ページの日付

ついでなのでこれも。

.date-tags{
text-align: left;
}

 

シェア・フォローボタン

このブログの様にフォローボタンが2つしかない場合は、かなりボタンの横幅が長く表示されます。もう少し短くして左に寄せようという事で以下のようにしました。

.sns-follow-buttons {
width: 120px;
}

「text-align: left;」を書かなくても左に寄るみたいです。

 

ボタン3つの場合は、このようにしました。

.sns-follow-buttons {
width: 180px;flex-wrap: nowrap;
}
.sns-follow-buttons a {
width: 60px;margin-right: 8px;
}

 

加えて、シェア・フォローメッセージの方も左に寄せ、文字も小さくしました。

.sns-share-message,
.sns-follow-message{
text-align: left;font-size: 14px;
}

 

広告も左に寄せようかと思いましたが、レスポンシブのコードを使ってるので、大体の広告はカラム幅いっぱいに表示されます。

ということで、左寄せにする必要もないのかな、と思ってそのままにしてあります。

 

*AMPページを生成してしている場合、amp.cssにも同じことを書き加えれば良いと思います。