アダルトブログの画像と記事のレイアウト WordPress編

WordPressマニュアル for アダルト

好評光速アダルト動画アフィリエイト ー 点穴で稼げないなら、これ

AVレビューを書くときは、いつも通りの書き方(書き方の自分ルール)を決めておくと便利です。

この記事はレスポンシブデザインについて解説しています。パソコン、スマホの両方でこの記事がどう表示されるか確認してください。レスポンシブですので、ブラウザの横幅を徐々に狭めると画像やテキストの配置や大きさが変化します。記事を書くときの参考にしてください。

パソコンとスマホでの表示を意識してレイアウトする

画像と文章をどう配置したら見やすいのかを考えながら記事をレイアウトしていきます

例として当ブログの「単品アダルト動画レビュー記事の書き方」という記事を取り上げます。AV作品紹介部分のスクリーンショットですが、パソコンとスマホでは見え方が違います。

画面の大きなパソコンでは、スカスカに見えないように記事をレイアウトしています。スマホは画面が狭いので、画像の右横に配置した文章(テキスト)を画像の下にレイアウトしています

これは意図的にやっています。記事の編集に慣れると、パソコン画面で編集していてもスマホではどう見えるのかが具体的にイメージできるようになります。

パソコンでの表示 (スナップショットです)

スマホでの表示 (スナップショットです)

レイアウトの基本
  • パソコン
    1. 広い画面を使って華やかに
  • スマホ
    1. 読みやすく

パソコンでもスマホのように、画像をブログの幅一杯に表示してもいいのですが、文章の可読性が落ちます。パソコンでは適度な大きさの画像の右横にテキストを配置した方が、画像と対比しながら読んでもらえるのです。

アダルト画像なので大きい方がいいだろうと思いがちですが、情報を提供するという点からみるとマイナスポイントになります。

ブロックを「上から下、左から右」に並べていく

ブロックを並べて記事を組み立てていく

ワードプレスではパソコンとスマホの両方で記事を見る方法として、ブロック要素を並べる仕組みが取られています。大きな画面のパソコンでは多くのブロックを並べ、画面の小さなスマホでは縦一列にブロックを並べます

下の箱3つは、パソコンでは横に並んでいますがスマホでは縦一列に並びます

下の箱2つは、パソコンでは横に並んでいますがスマホでは縦一列に並びます

同じ構成の記事(画像と文章)

アイドルよりかわいくて天使のような松本いちかが、可憐な女子校生になって中年男と援交デート。

出会ってから30分近くが動物園でのおしゃべりシーンだけど、泣くほどかわいい松本いちかの自然体と、それに続く変態セックスとのギャップが半端ない、お得感満載の4時間作品。

ここで段落が挿入されています

スマホでの見え方は、Firefoxのレスポンシブデザインモードやスマホで確認してください。

このように、横に並べたボックス要素をスマホで縦に並べるには、フレックスボックスというブロック要素を使います。フレックスボックスは、普通はカラムブロックといいます。

パソコンとスマホの両方を意識した記事を書くには、こうしたブロック要素を積み木のように画面に並べるというイメージで、画像と文章をレイアウトしていきます。

画像とテキストの組み合わせも、「画像のブロック要素」「テキストのブロック要素」という「ブロック」として考えます。考えますというか、それが正式な要素名です。

画像のブロック要素

テキストのブロック要素

画像の説明を書いたりします。

同じ構成の記事(画像と文章)

ド変態のクソおやじに~

というように、このシーンを解説します。

画像のブロック要素

テキストのブロック要素

画像の説明を書いたりします。

画像のブロック要素

テキストのブロック要素

画像の説明を書いたりします。

同じように、リストを配置するにはリストブロック、ボックスを配置するにはボックスブロック、見出しを配置するには見出しブロックを配置します。

このようにWordPressでは、積み木のようにブロックを並べて記事を組み立てていきます

そうしたブロックは、ブラウザの高さと幅に合わせて、上にあるブロックから下にあるブロック、左にあるブロックから右にあるブロックの順にブラウザに配置されていきます。

以上のことが分かると、いちいちレスポンシブ画面で確認しなくてもスマホでどう見えるかがイメージできますから、短時間でパソコンとスマホの両方で見栄えのいい記事を書くことができるようになります。

カラムブロックで並び順を指定する

このブロックの並び順を制御するためには、カラムブロックというブロック要素を使います。制御といっても、ブロックをひとかたまりの要素として扱うだけです。

箱3つがひとかたまりのブロック要素

箱2つがひとかたまりのブロック要素

同じ構成の記事(画像と文章でひとかたまり)

アイドルよりかわいくて天使のような松本いちかが、可憐な女子校生になって中年男と援交デート。

出会ってから30分近くが動物園でのおしゃべりシーンだけど、泣くほどかわいい松本いちかの自然体と、それに続く変態セックスとのギャップが半端ない、お得感満載の4時間作品。

箱1つがひとかたまりのブロック要素

「箱1つとテキスト1つの組」がひとかたまりのブロック要素

テキストのブロック要素

画像の説明を書いたりします。

ブロック要素の組み合わせは用途に応じて考えますが、「パソコンで横に並べた要素」を「スマホでは縦に表示する」ことを基本にすると、きれいにレイアウトできるできます。

カラムブロック要素に箱を設定する手順

ブロック挿入ツールからカラムを選びます

カラムブロック要素が記事中に挿入されます。

箱を3つ配置するので、ブロック要素を3つ設定できる「33/33/33」を選びます。数字はパーセンテージです。

左端のカラムに「ミカン箱の画像」を入れます。

「ミカン箱を左のカラムに、開いた箱を真ん中のカラムに」と、ブロック要素をカラムに入れていきます。

画像を小さくするとスマホで大きく表示されないので、普通はそのままの大きさで使います。大きすぎるときは、適度に小さくしましょう。

「段落のブロック要素」をカラムに配置して文章を書きます。

リストブロックや見出しブロックなども入ります。

アダルト動画レビューでの記事レイアウト例

ここまでの解説が理解できると、記事のレイアウトが思い通りにできるようになります

どのブロックをカラムでまとめているのかを確認してください。

アイドルよりかわいくて天使のような松本いちかが、可憐な女子校生になって中年男と援交デート。

出会ってから30分近くが動物園でのおしゃべりシーンだけど、泣くほどかわいい松本いちかの自然体と、それに続く変態セックスとのギャップが半端ない、お得感満載の4時間作品。

J○お散歩3「おじさん、私に本当のSEXを教えてください」のここがエッチ

ド変態のクソおやじに~

というように、このシーンを解説します。

どうして窓を開けるのか。~

というように、このシーンを解説します。

首輪をつけられて虐められるいちか。~

というように、このシーンを解説します。

赤いヒモで手首を縛られて、~

というように、このシーンを解説します。

説明や解説の仕方はいろいろある

画像のブロック要素

テキストのブロック要素

画像の説明を書いたりします。

画像のブロック要素

テキストのブロック要素

画像の説明を書いたりします。

タイトルとURLをコピーしました