haradaFacebookTwitterはてブPocketFeedly新しいビジネスを創造するコミュニティ作成システム『Cyfons』-新世界スクールシステム-『Cyfons』だけで会員制サイトとメルマガ発行ができる表の作成は今でもおっくうですWordPressで記事を書いている時に、これは表にしたほうがわかりやすいと思えば、表(テーブル)を作成することも良くありますが、私自身、何年経っても表作成は苦手というか、あまり好きになれません。WordPressを始めた頃によくあった話だけど、表を作成する時に、セルに色を付けるとか、行や列を増やすとかという時に、どうしても表の上でマウスを右クリックしてしまうんです。会社勤めが長かったので、Excelの操作が体に沁みついてて、どうしても抜けきらない。Excelなどを頻繁に使っていた経験のある人は、一度や、二度は私と同じことを思ったのではないでしょうか?私の経験ですが、WardPressを始めた初心者が、最初につまづくひとつとして、表(テーブル)作成があります。頑張って表はできたけれど、罫線を消したいとか、セルに色を付けたいとか、セルを結合したいとかで、四苦八苦します。何時間か格闘した末に思い通りの表が仕上がり、いざ、スマホで確認してみると、表が大きすぎて画面からはみ出てしまってる、ってなこともしばしばです。しかたがないから、表作成をあきらめて、Excelで作った表をハードコピーとかで画像にして、WordPressに画像として貼り付ける。その方法だと、スマホで見るには表が小さくなり過ぎて、全然読めないとか、読めても表の文字とかがジワーっと滲んだ感じにボケちゃって読みにくいとかで、満足のいく結果が得られない。こんな経験は私だけじゃないと思うので、今日は、表作成の小技を二つほど、お伝えしたいと思います。スポンサーリンクスマホで表示した時に、表が画面からはみ出さないようにするまず、2列3行の表を作る場合を例にとって、ご説明します。出来上がりはこんな感じです。言えば、PCの方が行間が広くなりますが、どちらも変わりませんね。スマホの時も、はみ出さずにちゃんと全体を表示します。この方法だと、表の列が多い場合などは、スマホに表示された表がとても小さくなってしまい、ユーザーが見辛くなってしまいますから、列数が2~3列の表くらいにしか使えないと思って下さい。PCで表示した場合スマホで表示した場合スマホの小さな画面に対応したレスポンシブな表を作る表の幅を100%表示にすることで、スマホでも画面から表がはみ出さずにちゃんと表示されることをお伝えしましたが、文字が長く、かつ列が多い表であったりすると、表自体がとても見にくくなります。そこで、スマホの小さな画面で表示する場合は、その小さな画面に合わせた見やすいレイアウトで表示させたいものです。そこで、PCで表示される場合と、スマホで表示される場合のレイアウトが自動で変わる方法をお伝えします。表(テーブル)作成で一番使われてるといってもいいTablePressというプラグインをはじめ、プラグインは一切使いません。動画でご説明したかったのですが、間に合わなかったので、後で動画に置き換えることにして、とりあえず文章と画像でご説明します。こちらも、2列3行の表を作る場合を例にとって、ご説明します。こんな表をイメージして下さい。下記の囲み枠に記載されているCSSを、ダッシュ―ボードのメニューから、「外観」→「カスタマイズ」→「追加CSS」を選択して、追加CSSの欄に貼り付けし、公開ボタンをクリックします。追加CSSへの貼り付けられたCSSは、WordPressのテーマに更新があっても書き換わるなどの影響を受けませんから、ここを利用します。none;}}※「pc」と「iphone」は、自分が覚えやすい任意の文字に変えてOKです。pcとiphoneの前の「.」を誤って消さないように。専門的なことはご説明はしませんが、わかりやすく言うと、要素(ここで言う要素とは「表」のことです。)の幅が、650pxより大きくならないならPC用の表は表示しない、要素の幅が、651pxより小さくならないならiphoneの表は表示しないと記述しているだけです。このまま使えますので、テンプレートのつもりくらいで、コピペして使ってみて下さい。ひとことで言えば、画面の横幅に応じて、表示する表を変えているということです。PC用とスマホ用の表を作る記事投稿画面のビジュアルモードで、PC用とスマホ用の二つの表を作ります。このイメージでは、PC用が2列3行の表、スマホ用が、1列4行の表です。テキストモードで、編集する記事投稿画面をテキストモードの表示に切り替えて、PC用のテーブルと、iPhone用のテーブルの記述(<table>で始まり、</table>で終わる記述の部分)の前後に、赤字の記述を追加する。※iphone用のテーブルの記述</div>まとめスマホなどの小さなデバイスは、本来、表を見ることには適していませんので、できるなら列数の多い表は避けたいものです。他にも、プラグインを使う、あるいはタブ表示にするなどの、レスポンシブに対応させる方法はありますが、列数の少ない表であれば、このようにプラグインを使わなくても簡単にできます。この方法は表だけではなく、スマホの時だけ表示させたいとか、PCの場合とスマホ場合に表示させるものを変えたいとかという時に役立ちます。レスポンシブな表を作るためのおさらいです。追加CSSにテンプレートのCSSをコピペする。※一度設定すれば、以降の表作成は2から作業すれば良い。記事入力の画面を「ビジュアルモード」で、PC用とスマホ用の表、二つを作る。表の作成にあたっては、表の横幅をpx(ピクセル)ではなくて、「100%」で指定する。セルの横幅も指定するなら%指定で。記事入力の画面を「テキストモード」に変更する。class="pc">と</div>で囲む。class="iphone">と</div>で囲む。編集画面に同じような表が二つ表示されて、煩わしいと思うかたもいらっしゃるかも知れませんが、あくまで編集画面は編集のため。記事の閲覧者には、デバイスに応じた一つの表しか表示されません。多くのかたはご存知だと思いますが、アフィリエイトで商品がたくさん売れるのは、一般的にテキスト広告である...PPCアフィリPPCアフィリエイト向けサイトの作り方2019年6月3日から、Yahoo!プロモーション広告は、アフィリエイトサイトの広告出稿が禁止となりました。WordPressでテーブル(表)の作成をする場合、多くある質問の一つに、罫線を消したいということです。普通、2列...Blog・Siteアフィリブログ記事が検索結果の上位に表示されるためのキーワード設定ブログ記事が検索結果で上位表示されるためは、検索キーワードをどのように設定すればいいかを、アフィリエイト初心者にわかりやすくお伝えします。この動画をご欄下さい。したことを理屈で説明せず、わかりやすく簡単にご説明します。して、大手企業に25年以上も長く勤め、50歳代で起業。会社を辞める時に、「お前にそんな(起業の)才能があったのか?」と常務に言われつつも自由を求めて退職。ウェブサイト制作、映像制作、ウェブマーケティングコンサル等をするかたわらで、モデルプロダクション「コスモリリィ」を運営。