CSSでブログの操作性を向上！戻るボタン・横スクロールの書き方

WordPress初心者がよく遭遇する操作性向上のためのCSSカスタマイズ

この記事では、私が実際にCSSカスタマイズの設定で躓いた箇所や苦労した経験を基にし、初心者が同じ罠にハマらないための解決策をまとめています。今回は特に、本サイトでも実装済みのCSSについて詳しく解説します。

関連記事表示（縦→横スクロール）方法（Cocoonメニュー）

カスタマイズの前にはバックアップを必ず取得するようにしましょう。

ブログを開設した初期は記事数が少ないため、関連記事が縦並びでも気になりません。しかし、記事数が増えてくるとスマホ画面での見づらさが課題になります。

Cocoonの標準機能を使うと関連記事を簡単に4列並列にできますが、記事数が増えるとスマホ画面では縦に長く伸びてしまい、見づらくなってしまいます。そこで、画面のスペースを節約しつつスマートに見せるために、CSSを使った「横スクロール化」が非常に効果的です。（詳しくは「【プラグイン不要】Cocoonの標準機能で関連記事を4列並列にする方法」参照ください。）

結果：横1列にスクロール表示でき、解決できました。

とりあえず横スクロールはうまくいきましたが、全記事の横スクロールなので記事をあらかじめ指定しておくことができればなおいいと感じました。

【プラグイン不要】Cocoonの標準機能で関連記事を4列並列にする方法

ここでは、CSSカスタマイズする前にCocoonのメニューで表示の改善ができないか試行した際の内容を、参考として記載します。（詳しくは下記参照ください。）

記事下の「関連記事」の表示がデフォルトでは縦に並んでいますが、Cocoonのメニュー操作で枠付きの4列表示に簡単にできましたので下記に記載します。

操作方法：Cocoonの設定⇒「投稿」⇒「表示・タイプ、表示数・枠線の表示」を下図（メニュー操作画面）のようにし⇒「変更をまとめて保存」をクリックすると完了です。

最初の縦表示よりは、改善されたが列幅固定の為、記事数が増えると1列が4列になっただけで、画面の画面の占有面積は記事数に比例し増加すると思いました。（最大列幅は4列：下図参照）

【スマホ対応】CSSを使って関連記事を横スクロールにする手順

ここではCSSカスタマイズすることで、記事下の「関連記事」を1行1列の横並びスクロールにしました。

カスタム変更前は、必ずバックアップをしておきましょう。

関連記事を横スクロールにするCSSコード
以下のコードをコピーして、「外観」＞「テーマファイルエディター」に貼り付けてください。
詳細は上図（CSSカスタマイズの挿入の画面）を参照ください。
※必ずCocoon Child（子テーマ）が選択されていることを確認して貼り付けてください。

/************************************
  Cocoon関連記事を横スクロール化（Rev5）
************************************/

/* 親コンテナ（関連記事全体） */
.related-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 15px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

/* カード本体（1記事分） */
.related-entry-card-wrap {
    flex: 0 0 250px !important; /* 横幅固定 */
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Cocoon の関連記事レイアウトを完全無効化 */
.related-list .related-entry-card,
.related-list .e-card,
.related-list .cf,
.related-list .related-entry-card-thumb,
.related-list .related-entry-card-content,
.related-list .related-entry-card-snippet,
.related-list .related-entry-card-meta,
.related-list .column {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box;
}

/* スクロールバーのデザイン */
.related-list::-webkit-scrollbar {
    height: 8px;
}
.related-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

ここでのCSSコードはCocoonメニューで「関連記事」の設定をどの設定（例：デフォルトや4列など）にしておいても強制的に横並びにします。

スマホでYouTube動画を横スクロールさせる（Cocoonメニュー）

ここでは、私の場合記事にYouTubeを埋め込みスマホで縦にスクロールしないと画面が見れず操作性が悪かったため、横スクロールで表示されるように改善しました。

結果｜3画面のYouTube動画を横スクロールできました。

私の場合、YouTubeを埋め込み動画でも2つまでは、カラムブロックの利用でもスマホも問題なく表示されました。しかし3つの動画表示よりカラムブロックでは画面も小さく動画が正常に正常に再生されなくなるため、CSSを追加し対応しました。（詳細は下記を参照ください。）

操作：WordPress管理画面⇒記事の編集⇒対象の「ブログカード」を選択⇒右側の「ブロック」タブ⇒「モバイルでは縦に並べる」をOFFにする。

横スクロール（CSSカスタマイズ）

上記では、固定で横表示となっただけなので埋め込みの画面数によって画面が小さくなります。

そこで同じ表示で横にスクロールすることはできないかと調べ下記のCSSカスタマイズを作成し解決できました。

ここではCSSカスタマイズすることで、記事下のYouTube動画を一部横並びスクロールにしました。

Step1：カラムブロックはやめ通常のYouTube埋め込みブロックで埋め込み縦に表示させた。

●注意
追加CSSでCSSを記載する場合、（縦）表示にしておかないとテーマ側のCSSコードと記載したCSSでの打ち消しあいでうまく動作しなかった。

Step2：横表示させたい動画（3つ）をグループ化した。（CSSクラスをブロックに対応させるため）

Step3：追加CSSクラスを記入しCSSカスタマイズしましたが、下図のように縦幅が違っていたので併せて表示するようにした。

Step4：縦幅調整後（CSSに記載）再度「追加CSSクラス」を確認と同時にCSSカスタマイズも確認した。

Step5：下図のように横スクロールバーが表示された。

YouTube動画を横スクロールにするCSSコード
以下のコードをコピーして、「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けてください。

/* 横スクロール全体 Rev1 */
.scroll-box {
    display: flex !important;
    flex-direction: row !important; /* 強制的に横並びにする */
    flex-wrap: nowrap !important;   /* 絶対に折り返さない */
    overflow-x: auto !important;    /* 横スクロールを自動表示 */
    overflow-y: hidden !important;  /* 【最重要】縦スクロールバーを絶対に消す */
    -webkit-overflow-scrolling: touch;
    gap: 15px;
    padding-bottom: 15px;           /* バーと動画の間の余白 */
}

/* 各動画カード（figure）を横並びにする */
.scroll-box figure.wp-block-embed {
    flex-shrink: 0 !important;
    min-width: 260px;
    max-width: 80%;
    margin: 0 !important;           /* 無駄な縦マージンを消す */
    box-sizing: border-box;
}

/* WordPress のアスペクト比構造は壊さない */
.scroll-box .wp-block-embed__wrapper {
    width: 100%;
    height: 100%;
}

/* iframe の設定（高さを固定したい場合の安全な書き方） */
.scroll-box iframe {
    width: 100%;
    display: block;
    /* 高さを固定したい場合は、外側ではなくここで縦バーを抑制します */
    height: 170px !important;       /* 縦バーが出ない安全な高さ（170px〜180px前後がおすすめ） */
}

戻るボタンの上に文字を表示｜カスタマイズ（追加CSS）

私の場合、Cocoonのメニューで「サイトの戻るボタン」の設置はできました。
利用している途中にマウスをホバー（アイコンにマウスを重ねる）すると文字（TOP）等表示できると利便性が向上するのではと思い、「CSSカスタマイズ」し戻るボタンの上に文字を表示する設定を実施しましたので下記に記載します。

注意

• カスタマイズ前には、バックアップの取得を必ず実施することをお勧めします。
• カスタマイズ後は、動作確認もお願いします。

戻るボタンの上に「TOP」の文字を表示するCSSコード
以下のコードをコピーして、「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けてください。

/* 戻るボタンにマウスを乗せると文字を表示させる */
/* PC：TOP文字を表示 */
#go-to-top .go-to-top-button::after {
  content: "TOP"; /* 表示したい文字 */
  position: absolute;
  top: -15px; /* ボタンの上に表示 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #333;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#go-to-top .go-to-top-button:hover::after {
  opacity: 1; /* ホバー時に文字を表示 */
}

/* スマホ：TOP文字を非表示 */
@media (max-width: 768px) {
  #go-to-top .go-to-top-button::after {
    content: "";
    opacity: 0 !important;
  }
}

上記コードはスマホでは文字表示を非表示とします。（実装画面は上図赤枠文字です。）

CSSカスタマイズ（続きを読む｜Cocoon）

念のため、カスタム変更する前は、バックアップは取っておいてください。

テーマファイルエディター

「外観」⇒「テーマファイルエディター」

※　「管理画面」⇒「外観」⇒「カスタマイズ」⇒「追加ＣＳＳ」では内部リンクのブログカードしか「続きを読む」が表示されませんでした。
そこで、外部リンクにも反映させるために、ファイルエディターにCSSを記載しました。

内部・外部のブログカードの右下に「続きを読む」を表示するCSSコード
以下のコードをコピーして、「外観」＞「テーマファイルエディター」に貼り付けてください。

/* 内部リンクカード・外部リンクカードの右下に「続きを読む」を表示 */
.internal-blogcard,
.blogcard {
  position: relative; /* 疑似要素の基準を作る */
}

.internal-blogcard::after,
.blogcard::after {
  content: '続きを読む \00bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #6495ED;
  padding: .4em 3em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  z-index: 2;
}

「続きを読む」を実装図は上図の赤枠を参照ください。

●「追加CSS」と「テーマファイルエディター」の使い分けの理由
※外部リンク用のブログカードのクラス（.blogcard）は、追加CSSからでは上書きできない仕様になっているため、テーマファイルエディターに記載します。

PCのみフッターを固定にし「戻るボタン」を表示させる場合

コード設置の理由

PC画面でフッターメニューを固定すると、Cocoonの標準の「戻るボタン」がフッターの裏に隠れてクリックできなくなる問題が発生します。この問題を解決するために、CSSで戻るボタンの表示位置をフッターの上に引き上げるカスタマイズ手順を解説します。

解決方法

下記コードを設定する事により解決できました。

操作：上記参照ください。

PCのみフッターを固定にし「戻るボタン」を表示するCSSコード
以下のコードをコピーして、「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けてください。

/* PCでのみ、フッターを固定にし且つ戻るボタンの位置をフッターに被らない高さに引き上げる */
@media screen and (min-width: 1024px) {
body .go-to-top-button,
body #go-to-top {
bottom: 135px !important; /* フッターに被らない高さ */
right: 30px !important; /* 右側の余白 */
z-index: 10000 !important; /* フッター(9999)より前面に出す */
}

#footer { /* PC画面でフッターを最下部に常時固定する */
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
}
#container { /* フッターが記事に被らないように余白を作る */
padding-bottom: 120px;
}
}

まとめ

最後まで記事を見ていただきありがとうございました。各章で設定は完結しますので必要な場面に遭遇しましたらご活用いただけると幸いです。
また、本記事では私自身が初期の段階で設定・困った場合等に対応したことを記載しています。
今後このサイト内でも記事を拡大していきますのでご参考いただければと思います。

注意点・免責事項

本サイト内でのCSSコード及び設定などは、本サイトでも実装済みですが、個人の環境に依存します。あくまで情報提供が目的です。よって動作を保証するものではありませんので自己責任でお願いします。

あわせて読みたい関連記事

ここでは本記事との、親子記事のリンクをまとめて下記に記載します。

全体の流れを詳しく知りたい方は、まず「【Cocoon】初心者が最初に設定すべき基本機能と重要項目まとめ」からご覧ください。