【超初心者】ワードプレスで表の右側が見切れる時にスクロールさせる方法

ブログ初心者
ワードプレスでやっと表を作れるようになった!でも…なんどやっても右側が切れちゃうんだよ~どうしたらいいの?!
パソコン不慣れ
ワードプレスでブログ書くのも一苦労…。せっかく頑張って作った表の右側が切れちゃって困る…。いろんな人の解説ブログ見るけど初心者すぎていまいちわからない!

ぷぅたん
そんな悩みを持つ初心者向けに、画像を使って丁寧に解説します♪




ワードプレスの表の右側が見切れた時にスクロールさせる方法

すでに表の挿入は出来ていることを前提に説明していきます。

 

今回は、表を右にスクロールさせるためのCSSを追加する方法です。

 

CSSコードは仁科俊晴さんのこちらのブログを参照させていただきました♪

 

仁科さん、ありがとうございます。おかげでスクロール表示ができました♪

 

さて、今回は自分で設定してみて、「おそらく私よりも初心者の方では自力で設定するのは難しいかもしれない」と思ったので、

 

初心者に毛が生えた程度の私なら、初心者の方の気持ちがわかるだろうということで、解説してみようと思い立ちました。

 

ぷぅたん

作業は2つです。

  1. ベースとなるCSSコードを『テーマの編集』に記述する。
  2. 表を使用する記事の表(table)コードに ”あるコード” を記述させていく。

この2つです。

 

どういうことかというと、

 

①の作業は今回設定したらそれっきり。一度設定すれば完了です。

 

でも②の作業は表を作成する都度、”あるコード”を記述させる必要があります。

 

以下で順を追って説明します。

1.ベースとなるCSSを記述する

記述するCSSは以下のコードです。

上記のコードをコピーしたら、

 

下の画像のようにワードプレス管理画面から、外観>テーマの編集(もしくはテーマエディター)へ進みます。

表を右にスクロールさせるためのCSS

表を右にスクロールさせるためのCSS

 

次に、スタイルシート(style.css)をクリックし、スタイルシートを表示します。
そして、さきほどコピーしたCSSをここに貼り付けます

表を右にスクロールさせるためのCSS

表を右にスクロールさせるためのCSS

 

補足説明

すでに何か記述されている場合は、/*のすぐあとの行から貼り付けしてください。

 

貼り付けが終わったら、ファイルを更新をクリックします。

 

ぷぅたん
これで、ベースとなるCSSの記述は以上です。簡単ですね♪

2.記事の表(table)コードに ”あるコード” を付け足す

まずは、表(テーブル)を作成した記事の編集画面で、テキストモードにします。

 

 

テキストモードの中の、tableと記述されているコード部分を見つけます。

 

F検索(ctrlキー + F)でtableと入力すると簡単に見つけることができます♪

 

すると、<table から始まる文字列が見つかると思います。

 

この<table から始まる行の1つ上の行に、<div class=”table-scroll”>と記述します。

 

tableタグの上に<div class="table-scroll">を記述する

tableタグの上にを<div class=”table-scroll”>と記述する

 

ぷぅたん
<div class=”table-scroll”>をコピーして貼り付けちゃうと間違いがなくて簡単ですよ♪

 

続いて、tableタグの終わりを意味する</table>を見つけます。

 

F検索(ctrlキー + F)でtableと入力すると簡単に見つけることができます♪

 

すると、</table> という文字列が見つかると思います。

 

この、</table> という文字列の1こ下の行に、</div>と記述します。

 

tableタグの上にを</div>と記述する

tableタグの上にをと記述する

 

 

要するに、tableタグを<div class=”table-scroll”></div>で挟み込む形です。

 

以上です。

 

ここまでやってみて、もし「うまくスクロールできてない!」と思ったら、キャッシュのクリアをしてみてください。

 

もしくはブラウザを変えてみてください。きちんと反映しているはずです。

 

Googleクロームのキャッシュクリア方法

Googleクロームの右上にある『縦に3つ・が並んでいるところをクリックし、出てきたメニューの『設定』をクリック。

下までスクロールし、『詳細設定』をクリック。

下の方に、『閲覧履歴データを消去する 閲覧履歴、cookie、キャッシュなどをクリアします』という項目があるのでクリック。

すると、『閲覧履歴データを消去する』の画面が開くので、

cookieと他のサイトデータのチェックを外し、『データを消去』をクリックします。

以上です。

cookieを削除するのは、我々アフィリエイターにとっては「して欲しくない行為」なので、チェックは必ず外しておきましょう。

 

Googleクロームのキャッシュクリア方法1

Googleクロームのキャッシュクリア方法1

 

Googleクロームのキャッシュクリア方法2

Googleクロームのキャッシュクリア方法2

 

Googleクロームのキャッシュクリア方法3

Googleクロームのキャッシュクリア方法3

 

以上です。

まとめ

ワードプレスで表が見切れてしまう時に、表を右にスクロールさせる方法を初心者向けにちょびっと詳しく説明してみました。

 

もし不明点あれば、コメントいただければ頑張ります♪

 

でも私も初心者に毛が生えた程度の実力なので分からないかもしれませんが…(*_*;

 

できる限りお力になりたいと思ってます。

 

ぷぅたん
お互いブログ頑張っていきましょうね♪

【初心者向け】ワードプレスgiraffeでカエレバのボタンのカスタマイズをする方法

2018年12月9日

【初心者向け】カエレバの使い方。商品リンクの作成方法を画像つきで分かりやすく説明します

2018年12月8日

【初心者向け】カエレバ+もしもアフィリエイトの設定を分かりやすく画像付きで説明します

2018年12月3日

WPテーマgiraffeで記事に自分のtwitterアカウントと連動させる方法

2018年8月25日

WordPressテーマGiraffe(キリン)の日付表示を消す方法!

2018年4月11日

↓↓↓この記事が少しでもあなたのお役に立てたなら、ポチっとしていただけるとうれしいです
にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村

スポンサーリンク














コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください