STINGER 8:PREV, NEXT(前のページ、次のページ) の表示を横並びにしてみた。

投稿日:2020/01/21 更新日:

STINGER 8:PREV, NEXT テーブルタグ追加後の状態
STINGER 8:PREV, NEXT テーブルタグ追加後の状態


さて、前回は気になっていた「PREV、NEXT」の表示位置を執筆者とコメントの間に移動したところまで進めてみたわけだが・・・・・。

表示自体はこれまでどおり「PREV」と「NEXT」は上下に配置された縦並びのまま。

STINGER 8:PREV, NEXT 前回までの表示状態

これでは某の目指す「ページを捲る」という感覚には程遠いものがある。

というわけで、今回はこの縦並びの「PREV、NEXT」を左右に並べて表示するまでをやってみようと思う。

やり方はいろいろあるとは思うが、某の考えた一番確実で手っ取り早い方法は 「テーブル」を利用すること。


テーブルとは

↓要するにコレの事。

1行1列目の要素 1行2列目の要素 1行3列目の要素
2行1列目の要素 2行2列目の要素 2行3列目の要素
3行1列目の要素 3行2列目の要素 3行3列目の要素

これをHTMLタグで記述するとこうなります。


<table>
  <tr>
    <td>1行1列目の要素</td>
    <td>1行2列目の要素</td>
    <td>1行3列目の要素</td>
  </tr>
  <tr>
    <td>2行1列目の要素</td>
    <td>2行2列目の要素</td>
    <td>2行3列目の要素</td>
  </tr>
  <tr>
    <td>3行1列目の要素</td>
    <td>3行2列目の要素</td>
    <td>3行3列目の要素</td>
  </tr>
</table>

ここで例として 挙げたのは3行x3列のテーブルですが、要はこんな感じに 左側に「PREV」右側に「NEXT」 が来るように1行2列 のテーブルで囲ってやればよい・・・という単純な発想なのである。

まあ「テーブルをレイアウト目的に使用するべきではない」とどこかで明言されていたような気もするが、あまりいろいろ試している時間もないのでとりあえず赦されたし。


> 続きを読む 

-ブログいじり, 雑記
-, , ,

執筆者:


comment

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

関連記事

ページナビをページ上部に移動

STINGER8:PREV, NEXT(前のページ、次のページ) の表示をページ上部に移動してみた。

PREV,NEXTの移動手順 まずはテーマエディターを開く。 編集するテーマに「STINGER8 Child」を選択。「個別投稿(single.php)」をクリック。 下方にスクロールして「<! …

寄り添う心

男と女の間には・・・・・

そんなタイトルの歌謡曲もあるのだが、今回それとは無関係。 内容が少々アダルトなので、よい子はここから回れ右! そしてアダルトな皆様におかれましては、内容について過剰に期待されるのも、某・・・・・非常に …

PUSH7:アプリケーション画面(てててのて)

プッシュ通知を追加してみた(その2)・・・Push7:アプリケーション作成手順

PUSH7:アプリケーション画面(てててのて) 前回、会員登録まで終えたので、今回はアプリケーション作成に進みます。 まずはトップページからログインして、前回のダッシュボード画面を表示。  ↓  ↓

虫眼鏡の世界

虫眼鏡の世界・・・スマホ用マクロレンズ・・・

虫眼鏡の世界 Introduction マクロ撮影。 日常で目にする、ごくありふれたものたちがあるものは奇妙に、あるものは魅力的に、そしてあるものはおどろおどろしくまったく別のものに姿を変える。 これ …

Push7 Docs:Webプッシュ通知を送信

プッシュ通知を追加してみた(その4)・・・Push7:Webプッシュ通知を送信

Push7 Docs:Webプッシュ通知を送信 前回でプッシュ通知に必要な「SDK導入」までは完了した・・・・・はず。 今回は本当にプッシュ通知が配信されるのかを確認してみる事にする。 プッシュ通知送 …