通常は、cocoon設定で変更可能なものが多いですが、そうでないものもあります。
やるのは簡単なのですが、該当箇所を見つけるのが面倒なのですね。
その中で、私がやったことについて、忘れないように書き留めておきたいと思います。
＊子テーマに追加することを前提に書いています。
いろいろなものを非表示
基本的に非表示にするには、該当箇所をcssで「display: none;」にすれば非表示に出来ます。
または、非表示ではなくそもそも消してしまえという方法もあります。その場合は、.phpファイルの該当箇所を削除またはコメントアウトします。
私の場合は、.phpファイルを弄るのは良くわからないので、「display: none;」を使いました。
モバイル表示で下に回り込むサイドバー
「cocoon」では、サイドバーの設定は、「モバイル」タブで3種類のレイアウト設定が出来ます。私はデフォルトの「スライドインボタン」にしています。
画面幅が768px以下になると、画面下部にメニューバーが表示されます。そこの一番右のメニューをタップすると、PCで言うサイドバーが右からスライドしてきます。
通常スマホでのサイドバーは、下に回り込む形で表示されますよね。つまり、この機能を使うと「従来の下に回り込むサイドバー」と「右からスライドしてくるサイドバー」という2つのサイドバーがあることになります。
ここでは「従来の下に回り込むサイドバー」は非表示にしてしまおうという事です。
特に個別投稿ページの場合、記事の文字数が多いとスクロールする量が多くなってしまうのですね。
・全ページ非表示の場合
「スライドインボタン時コンテンツ下のサイドバーを表示」のチェックを外します。
＊「スライドしてくるサイドバー」には影響が出ないみたいです。
・個別投稿ページのみ非表示の場合
「スライドインボタン時コンテンツ下のサイドバーを表示」にチェックを入れて、子テーマの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にも同じことを書き加えれば良いと思います。
