前回の記事では、
カテゴリーの追加方法とメニューバーについてお伝えいたしました。
今回の記事では、「固定ページ」に関するカスタマイズ方法をお伝えしたいと思います。
▼前回記事▼
▼りのんずにて利用しているレンタルサーバーはこちら▼
これまで色んなレンタルサーバーを使用してきましたが、
解説しているユーザー数も多く、求めている知りたい情報へたどり着きやすい為、
初心者にもおすすめのレンタルサーバーです♪
最終完成デザインはこちら
サイドバーを消す
固定ページを編集する前に、ビジュアルに影響を及ぼす為、サイドバーを削除します。
サイドバーとは初期設定でページの右側に表示されている、赤枠で囲ったメニューのことです。
私は全てのページからサイドバーを消去していますが、
お好みでサイドバーの表示・非表示を今からお伝えする方法で変更してください。
一括でサイドバーを消去する
「Cocoon設定」の「全体」タブの下方にある
「サイドバーの表示状態」までスクロールします。
私は全てのページにおいてサイドバーを表示させたくない為、
「全てのページで非表示」を選択しています。
選択したら「変更をまとめて保存」を押してください。
これで各種ページからサイドバーが消去されました。
固定ページを作成する
何か一つのことに特化しているブログの場合は、
トップに固定ページを設けなくても新着記事一覧だけで良いかもしれません。
今回作成しているブログは「雑記ブログ」の為、
カテゴリーごとの新着記事一覧などを設けて、訪問してくれた方が欲しい情報を見やすいようにカスタマイズしていきたいと思います。
トップページを作成
①
左メニュー「固定ページ」を開き、「新規固定ページを追加」を選択します。
②
このページでカスタマイズを施していきます。
ブロック機能をベースに編集する方は「ビジュアルエディタ」
HTMLなどのコードをベースに編集する方は「コードエディタ」がおすすめです。
私はHTMLの方が操作がしやすい為、コードエディタ―で主な作業を行い、
画像を追加したい時はビジュアルエディタを使用します。
一番簡単だなと思う方法でカスタマイズしていきましょう！
タイトルを非表示にする
通常、固定ページは固定ページの「タイトル」入力欄に入力したタイトルがページに表示されてしまいます。
このままではデザイン的に美しくないので、先ずはこの文字を削除します。
下記のHTMLを固定ページの「カスタムCSS」に入力します。
編集フォームのページを下の方までスクロールすると表示されます。
コードを入力して更新すると、ページからタイトルの文言が消えました。
これで次のステップへ進めます。
広告・目次を非表示にする
トップページに広告や目次が表示されているとコンテンツの妨げになってしまう可能性があります。
その為、トップページにおいては非表示設定にしておくことが望ましいです。
右のブロックの「投稿」タブに広告やページ設定について設定する箇所があるので、
設定しておきたい項目にチェックを入れておきましょう。
これでトップページに広告や目次が表示されないようになりました。
SNSボタンを非表示にする
トップページにSNSボタンが複数表示されているのは、
色味的にもちらちらして困りますよね。
その為下記コードをカスタムCSSに記入して非表示にします。
これでトップページがすっきりしました。
次回はこのトップページに、
新着記事一覧・カテゴリーごとの新着一覧を設定する方法をお伝えします。
コメント