どういうふうかわからないのですが?
@charset "UTF-8";
/*-- INDIVIDUAL CSS Document for goo blog modulized templates 080430 --*/
/*-- template name:CLアドバンス --*/
/*-- ■SECTION 010 全体設定 --*/
/*-----------------------------------------------------------------
ページ全体の背景色・背景画像の設定
------------------------------------------------------------------*/
body {
background:#d2e4b3; /*-- 背景色 --*/
color:#333333; /*-- 文字色 --*/
}
/*-----------------------------------------------------------------
リンク文字色の基本設定
------------------------------------------------------------------*/
/*-- 通常 --*/
a {
text-decoration:underline; /*-- 文字装飾 --*/
color:#378fd4; /*-- 文字色-- */
}
/*-- リンク先を訪れたことがある時 --*/
a:visited {
text-decoration:underline; /*-- 文字装飾 --*/
color:#9932cc; /*-- 文字色 --*/
}
/*-- マウスオーバー時 --*/
a:hover {
text-decoration:none; /*-- 文字装飾 --*/
color:#999999; /*-- 文字色 --*/
}
/*-- マウスクリック時 --*/
a:active {
color:#999999; /*-- 文字色 --*/
}
/*-----------------------------------------------------------------
不使用拡張部分
--使用したい部分をコメントアウトまたは削除します。
------------------------------------------------------------------*/
/*-- #title-banner-top, --*/
/*-- #title-banner-bottom, --*/
#main-top,
/*-- #main-bottom,--*/
/*-- .content-top,--*/
/*-- .content-bottom,--*/
#footer,
.mod-entry-set-top,
.mod-entry-set-bottom,
.mod-comments-top,
.mod-comments-bottom,
.comment-list-top,
.comment-list-bottom,
.comment-form-top,
.comment-form-bottom,
.mod-trackbacks-top,
.mod-trackbacks-bottom,
.trackback-list-top,
.trackback-list-bottom ,
.sidebar-top,
.sidebar-bottom,
.module-top,
.module-bottom {
display:none;
}
/*-- ■SECTION 020 レイアウト設定 --*/
/*-----------------------------------------------------------------
サイドバー+メイン全体の設定
------------------------------------------------------------------*/
#container {
width:90%;
margin:0 auto;
/*-- 全体的な枠線の設定 --*/
border-bottom:solid 1px #c8c8c8;
border-left:solid 1px #c8c8c8;
border-right:solid 1px #c8c8c8;
/*-- 全体的な枠線の設定ここまで --*/
}
#main {
/*-- コンテンツエリアの背景色:
-----サイドバー下の余白orメインエリア下の余白
-----ただしカラム数・レイアウトにより出現領域は異なる --*/
background:#eaeaea;
}
/*-- ■SECTION 030 #title-banner 設定 --*/
/*-----------------------------------------------------------------
タイトルバナーの設定
------------------------------------------------------------------*/
/*-- タイトルバナー外枠の設定 --*/
#title-banner {
border-top:solid 7px #6ca8d6;
border-bottom:solid 1px #c8c8c8;
background:#6ca8d6;
}
/*-- タイトルバナー上部の設定 --*/
#title-banner-top {
width:100%;
height:10px;
background:#1c75b8;
margin:0;
}
/*-- タイトルバナー内部の設定 --*/
#title-banner-body {
border-bottom:solid 2px #5ca1d6;
width:100%;
/*-- ↓タイトルバナーに画像を入れる場合は、下記のコメントをはずし、画像URLを指定する --*/
background-image:url(https://blogimg.goo.ne.jp/user_image/3f/44/329c8712ba2e9bab1eeda651362a571d.jpg);
background-position: center top;
background-repeat:no-repeat;
/*-- ↓タイトルバナーに画像を入れる場合は、画像に合わせて値を変更する --*/
height:300px;
}
/*-- ブログタイトルの開始位置の設定 --*/
#title-banner-body #title-banner-set {
padding-top:10px;
padding-left:15px;
}
/*-- タイトルバナー下部の設定 --*/
#title-banner-bottom {
width:100%;
border-top:solid 2px #4591cb;
height:2px;
background:#378fd4;
border-bottom:solid 2px #eaeaea;
}
/*-- ブログタイトル文字の基本設定 --*/
#title-banner-body #title-banner-set h1 {
font-size:139%;
color:#9932cc;
line-height:1.2;
text-align:left;
width:50%;
margin-bottom:5px;
}
/*-- ブログタイトル文字の設定(文字色、リンク時装飾) --*/
#title-banner-body #title-banner-set h1 a {
color:#9932cc;
text-decoration:none;
}
/*-- ブログタイトル文字の設定(マウスオーバー/マウスクリック時の文字色、リンク装飾) --*/
#title-banner-body #title-banner-set h1 a:hover,
#title-banner-body #title-banner-set h1 a:active {
color:#9932cc;
text-decoration:underline;
}
/*-- ブログ概要の設定 --*/
#title-banner-body #title-banner-set h2 {
color:#00008b;
/*-- color:#ffffff; 2020-02-20 --*/
font-size:92%;
line-height:1;
width:15%;
font-weight:normal;
/*-- background:#1c7568; 2020-02-20 --*/
background:#d2e4b3;
padding:5px;
}
/*-- ■SECTION 040 #main 設定 --*/
/*-----------------------------------------------------------------
サイドバー+メイン全体の下部の設定
------------------------------------------------------------------*/
#main-bottom {
background:transparent;
border-top:solid 2px #ffffff;
border-bottom:solid 10px #378fd4;
}
/*-- ■SECTION 050 #main 内レイアウト設定 --*/
/*-----------------------------------------------------------------
サイドバー全体、メイン全体の設定
------------------------------------------------------------------*/
/*-- メインの設定(2カラム時のみ) --*/
#center-2c {
}
/*-- メインの設定(3カラム時のみ) --*/
#center-3c {
}
/*-- メインの設定(外側・共通) --*/
#center {
}
/*-- メインの設定(内側・共通)--*/
#in-center {
/*-- メインコンテンツエリアの背景色 --*/
background:#eaeaea;
}
/*-- サイドバー全体の設定 --*/
#side-a,#side-b {
}
/*-- ■SECTION 060 #center-2c/3c 設定 --*/
/*-----------------------------------------------------------------
メインのレイアウトの設定
------------------------------------------------------------------*/
/*-- カラム間のマージン設定(2カラムの場合)--*/
.content-2c {
margin:0 5px;
}
/*-- カラム間のマージン設定(3カラムの場合)--*/
.content-3c {
margin:0 5px;
}
/*-- メイン上部の設定 --*/
.content-top {
height:5px;
}
.content-body {
}
/*-- メイン下部の設定 --*/
.content-bottom {
height:10px;
}
/*-- ■SECTION 070 エントリー設定 --*/
/*-----------------------------------------------------------------
記事の設定
------------------------------------------------------------------*/
/*-- 記事の設定(外側) --*/
.mod-entry-set {
}
.mod-entry-set-top {
}
.mod-entry-set-top div.lt {
}
.mod-entry-set-top div.rt {
}
.mod-entry-set-bottom {
}
.mod-entry-set-bottom div.lb {
}
.mod-entry-set-bottom div.rb {
}
/*-- 記事の設定(内側)--*/
.entry {
}
/*-- 記事上部の設定 --*/
/*-- ↓記事タイトル・投稿日時|カテゴリーの背景を共通で設定する場合はここを使用 --*/
.entry-top {
}
/*-- 記事タイトルの設定 --*/
.entry-top h3 {
font-size:135%;
color:#ffffff;
background:#378fd4;
line-height:1.2;
padding:5px;
border-bottom:solid 3px #86b8df;
border-top:solid 1px #2e77b1;
}
.entry-top h3 a {
color:#ffffff;
text-decoration:none;
}
.entry-top h3 a:visited {
color:#ffffff;
}
.entry-top h3 a:hover {
color:#000000;
text-decoration:underline;
}
/*-- 投稿日時|カテゴリーの設定 --*/
.entry-top-info {
text-align:right;
background:#ededed;
padding:0 2px;
color:#0066CC;
}
.entry-top-info a {
color:#0066CC;
text-decoration:underline;
}
.entry-top-info a:visited {
color:#666666;
}
.entry-top-info a:hover {
color:#666666;
text-decoration:none;
}
.entry-top-info span.entry-top-info-time {
}
.entry-top-info span.entry-top-info-category {
}
/*-- 記事上部の設定ここまで --*/
/*-- 記事部分の設定 --*/
.entry-body {
}
/*-- 記事貼り付け画像の設定 --*/
/*-- 画像の周りの間隔の設定(サムネイルになる部分) --*/
.entry-body-image {
margin:20px auto 10px;
}
/*-- 画像にリンクを貼った時の設定(通常時) --*/
.entry-body-image a img,.entry-body-text a img {
border-color:#666666;
}
/*-- 画像にリンクを貼った時の設定(リンク先を訪問したことがある時) --*/
.entry-body-image a:visited img,.entry-body-text a:visited img {
border-color:#666666;
}
/*-- 画像にリンクを貼った時の設定(カーソルをおいた時) --*/
.entry-body-image a:hover img,.entry-body-text a:hover img {
border-color:#666666;
}
/*-- 記事本文の設定 --*/
.entry-body-text {
padding:5px 2px;
border-bottom:solid 1px #cccccc;
}
/*-- 記事部分の設定ここまで --*/
/*-- 記事下部の設定 --*/
.entry-bottom {
padding:2px;
color:#0066CC;
text-align:right;
}
/*-- 記事下部コメント()・トラックバック()の設定 --*/
.entry-bottom-info {
}
.entry-bottom-info a {
color:#0066CC;
}
.entry-bottom-info a:visited {
color:#666666;
text-decoration:none;
}
.entry-bottom-info a:hover {
color:#666666;
text-decoration:none;
}
/*-- 記事下部の設定ここまで --*/
/*-----------------------------------------------------------------
コメント欄の設定
------------------------------------------------------------------*/
/*-- コメント欄全体の設定 --*/
#mod-comments {
margin-bottom:20px;
}
/*-- コメント欄タイトルの設定 --*/
#mod-comments h3{
font-size:135%;
color:#ffffff;
background:#378fd4;
line-height:1.2;
margin:10px 0;
padding:5px;
border-bottom:solid 3px #86b8df;
border-top:solid 1px #2e77b1;
}
/*-- 各コメントの設定 --*/
#mod-comments .comment-list-body{
margin-bottom:20px;
}
#mod-comments .comment-list-body dl {
padding:10px;
background:#ffffff;
border:solid 1px #6ca8d6;
margin-bottom:10px;
}
/*-- 各コメントタイトルの設定 --*/
span.comment-list-title {
font-weight:bold;
color:#378fd4;
}
/*-- 各コメント日付の設定 --*/
.comment-list-body dl dd.comment-list-date {
color:#86b8df;
}
.comment-input dl {
}
.comment-submit input {
}
/*-- gooIDを持っている人のみコメント可の場合の設定 --*/
.comment-gooid {
margin-bottom:20px;
padding:0 10px 10px 10px;
border-bottom:dashed 1px #86b8df;
}
.comment-gooid dl {
}
.comment-gooid dl dt {
font-weight:bold;
}
.comment-gooid dl dd {
}
.comment-login-link {
margin:10px 0;
}
/*-- gooIDを持っている人のみコメント可の場合の設定ここまで --*/
/*-- コメント欄注意文の設定 --*/
.comment-alert {
margin:10px 0;
text-align:center;
}
.comment-alert,.comment-gooid{
color:#333333;
}
.comment-alert .comment-list-none,.comment-alert .comment-precheck{
color:#86b8df;
font-weight:bold;
}
.comment-alert span.comment-login {
color:#CC3333;
}
.comment-alert span.comment-list-error {
color:#CC3333;
font-weight:bold;
padding:5px;
border:solid 1px #CC3333;
margin:10px 0;
}
/*-- コメント欄注意文の設定ここまで --*/
/*-----------------------------------------------------------------
トラックバック欄の設定
------------------------------------------------------------------*/
/*-- トラックバック欄全体の設定 --*/
#mod-trackbacks {
margin-bottom:20px;
}
/*-- トラックバック欄タイトルの設定 --*/
#mod-trackbacks h3 {
font-size:135%;
color:#ffffff;
background:#378fd4;
line-height:1.2;
margin:10px 0;
padding:5px;
border-bottom:solid 3px #86b8df;
border-top:solid 1px #2e77b1;
}
/*-- トラックバックURL欄設定 --*/
#mod-trackbacks .trackback-ping-url {
margin:20px;
color:#999999;
font-weight:bold;
text-align:center;
}
/*-- トラックバックURL文字設定 --*/
#mod-trackbacks .trackback-ping-url dd input {
color:#999999;
font-weight:bold;
text-align:center;
}
/*-- トラックバックを承認制にしている場合の注意書き設定 --*/
#mod-trackbacks .trackback-filter {
}
#mod-trackbacks .trackback-filter ul{
margin: 5px 20px 10px;
}
#mod-trackbacks .trackback-filter ul li {
list-style:disc;
list-style-position:outside;
line-height:1.25;
}
/*-- トラックバックを承認制にしている場合の注意書き設定ここまで --*/
/*-- 各トラックバックの設定 --*/
#mod-trackbacks .trackback-list-body dl {
padding:10px;
background:#ffffff;
border:solid 1px #6ca8d6;
margin-bottom:10px;
}
#mod-trackbacks .trackback-list-body dl dt {
color:#333333;
}
#mod-trackbacks .trackback-list-body dl dt.trackback-list-title {
color:#378fd4;
font-weight:bold;
}
#mod-trackbacks .trackback-list-body dl dt a {
font-weight:bold;
color:#378fd4;
text-decoration:underline;
}
#mod-trackbacks .trackback-list-body dl dt a:visited {
color:#666666;
text-decoration:underline;
}
#mod-trackbacks .trackback-list-body dl dt a:hover {
color:#999999;
text-decoration:none;
}
/*-- 各トラックバックの設定ここまで --*/
/*-- トラックバック注意文の設定 --*/
#mod-trackbacks .trackback-alert {
margin:10px 0;
text-align:center;
}
#mod-trackbacks .trackback-alert .trackback-precheck{
color:#86b8df;
font-weight:bold;
border-top:dashed 1px #86b8df;
padding-top:10px;
}
/*-- トラックバック注意文の設定ここまで --*/
/*-----------------------------------------------------------------
次へ・前へ 部分の設定
------------------------------------------------------------------*/
#mod-prev-next {
margin-bottom:20px;
padding:5px;
background:#fff;
font-weight:bold;
border:solid 1px #cccccc;
}
#mod-prev-next a {
color:#666666;
text-decoration:underline;
}
#mod-prev-next a:visited {
color:#666666;
text-decoration:underline;
}
#mod-prev-next a:hover {
color:#666666;
text-decoration:none;
}
/*-- ■SECTION 080 スポンサー誘導枠設定 --*/
/*-----------------------------------------------------------------
スポンサー誘導枠全体の設定
------------------------------------------------------------------*/
.mod-entry-set-goo-ad {
margin-top:20px;
margin-bottom:30px;
text-align:center;
}
/*-- 広告背景色 --*/
.gooAd {
margin:0;
background:#f4f8f9;
}
.gooAd td {
}
td.gooAd_sponsor_td {
}
td.gooAd_title_td {
}
td.gooAd_url_td {
}
td.gooAd_text_td {
}
.gooAd_text {
}
td.gooAd_btm_td {
}
/*-- スポンサーリンク文字 --*/
a.gooAd_sponsor {
}
/*-- タイトルリンク文字 --*/
a.gooAd_title {
color:#333333;
font-weight:bold;
}
a:visited.gooAd_title {
color:#999999;
font-weight:bold;
}
/*-- URLリンク文字 --*/
a.gooAd_url {
color:#666666;
}
a:visited.gooAd_url {
color:#666666;
}
/*-- テキストリンク文字 --*/
div.gooAd_text_td {
line-height:1.1;
}
a.gooAd_text {
color:#666666;
}
a:visited.gooAd_text {
color:#666666;
}
/*-- リンク範囲拡大 --*/
.gooAd_title_td A,
.gooAd_url_td A,
.gooAd_text_td A {
text-decoration:none;
}
/*-- ■SECTION 090 #sidebar 設定 --*/
/*-----------------------------------------------------------------
サイドバー全体の設定
------------------------------------------------------------------*/
.sidebar {
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
}
/*-- ■SECTION 100 サイドバーモジュール共通設定 --*/
/*-----------------------------------------------------------------
サイドバーモジュール共通設定
--.module共通設定はモジュールごとにデザインを変える場合でも、
--必ずセットしてください。
------------------------------------------------------------------*/
/*-- モジュール内の間隔の設定 --*/
.module-body {
padding:10px 5px;
}
/*-- モジュール内リスト文の設定 --*/
.module ul li {
text-align:left;
color:#333333;
border-bottom:dashed 1px #999999;
padding-bottom:5px;
}
/*-- モジュール内定義リストの設定 --*/
.module dl dt {
color:#378fd4;
font-weight:bold;
}
.module dl dd {
}
/*-- モジュール内定義リストの設定ここまで --*/
/*-- モジュール内区切り線の設定 --*/
.module-body hr {
height:1px;
background-color:#d5d5d5;
border:0px;
}
/*-- モジュール内リンク文字の設定 --*/
.module a {
color:#378fd4;
text-decoration:none;
}
.module a:visited {
color:#9932cc;
text-decoration:none;
}
.module a:link:hover {
color:#666666;
text-decoration:underline;
}
.module a:link:active {
color:#378fd4;
text-decoration:none;
}
/*-- モジュール内リンク文字の設定ここまで --*/
/*-- 2カラムのサイドバーor3カラムの左サイドバー共通設定 --*/
/*-- 全体の設定 --*/
#side-a {
background:#eaeaea;
}
/*-- 各モジュールの設定 --*/
#side-a .module {
border-top:solid 2px #ffffff;
border-bottom:solid 1px #c8c8c8;
}
/*-- 各モジュール上部の設定 --*/
#side-a .module .module-top {
border-left:solid 2px #ffffff;
}
/*-- 各モジュール内部の設定 --*/
#side-a .module .module-body {
background:#f3f3f3;
border-bottom:solid 1px #ffffff;
border-left:solid 2px #ffffff;
}
/*-- 各モジュール下部の設定 --*/
#side-a .module .module-bottom {
border-left:solid 2px #ffffff;
}
/*-- 各モジュールタイトルの設定 --*/
#side-a .module h4 {
padding:5px;
border-left:solid 2px #ffffff;
background:#86b8df;
text-align:center;
color:#000000;
font-weight:bold;
font-size:110%;
}
/*-- 3カラムの右サイドバー共通設定 --*/
/*-- 全体の設定 --*/
#side-b{
background:#ededed;
}
/*-- 各モジュールの設定 --*/
#side-b .module {
border-top:solid 2px #ffffff;
border-bottom:solid 1px #c8c8c8;
}
/*-- 各モジュール上部の設定 --*/
#side-b .module .module-top {
border-left:solid 2px #ffffff;
}
/*-- 各モジュール内部の設定 --*/
#side-b .module-body {
background:#ededed;
border-right:solid 1px #ffffff;
border-bottom:solid 1px #ffffff;
}
/*-- 各モジュールタイトルの設定 --*/
#side-b .module h4 {
padding:5px;
border-right:1px solid #ffffff;
background:#86b8df;
text-align:center;
color:#000000;
font-weight:bold;
font-size:110%;
}
/*-- ■SECTION 110 サイドバーモジュール個別設定 ■ --*/
/*-----------------------------------------------------------------
サイドバー/モジュールの各個別要素の設定
------------------------------------------------------------------*/
/*-- お知らせ【PR】 --*/
#mod-advertising {}
/*-- プロフィール --*/
#mod-profile{}
/*-- 携帯 --*/
#mod-mobile {
text-align:center;
}
#mod-mobile ul li{
text-align:center;
}
/*-- 最新記事 --*/
#mod-recent-entries{}
/*-- カテゴリー --*/
#mod-categories {}
/*-- ログイン --*/
#mod-login {}
#mod-login ul li {
border:none;
padding:0;
}
/*-- 最新コメント --*/
#mod-recent-comments {}
/*-- 最新トラックバック --*/
#mod-recent-trackbacks {}
/*-- カレンダー --*/
#mod-cal-table .mod-cal-caption {
color:#378fd4;
padding:4px;
font-weight:bold;
}
#mod-cal-table .mod-cal-week {
color:#378fd4;
}
#mod-cal-table td.mod-cal-day-lin-td {
background:#a8d0ef;
}
#mod-cal-table th,#mod-cal-table td {
padding:2px;
border-bottom:1px solid #cccccc;
font-size:90%;
text-align:center;
vertical-align:middle;
}
#mod-cal-table .mod_cal_day_linked {
color:#ffffff;
text-decoration:none;
}
/*-- バックナンバー --*/
#mod-back-numbers-scroll {}
/*-- スクロールあり --*/
#mod-back-numbers-scroll .module-body {
padding:10px 5px;
background:#ededed;
border:solid 1px #fff;
}
/*-- スクロールなし --*/
#mod-back-numbers-noscroll .module-body {
padding:15px 15px 20px
}
/*-- ブックマーク --*/
#mod-bookmarks .mod-boo-name {}
/*-- goo おすすめ --*/
#mod-goo-recommends li {
border:none;
}
/*-- RSS/gooブログ --*/
#mod-powered-by {
background:#eaeaea;
padding:10px;
}
/*-- フォントサイズ変更 --*/
#font-size-changer {}
#font-resizer ul li {
background:none;
padding:0;
text-align:center;
border:none;
}
/*-----------------------------------------------------------------
メインエリアにオリジナルモジュールを配置した時の設定
------------------------------------------------------------------*/
/*-- オリジナルモジュール全体の設定 --*/
#mod-freearea-main {
padding:10px;
margin:0 0 20px 0;
background-color:transparent;
border-left:solid 1px #86b8df;
border-right:solid 1px #86b8df;
border-top:solid 5px #86b8df;
border-bottom:solid 5px #86b8df;
}
#mod-freearea-main .mod-entry-set-top {
}
#mod-freearea-main .entry {
}
/*-- オリジナルモジュール上部の設定 --*/
#mod-freearea-main .entry .entry-top {
}
/*-- オリジナルモジュールタイトルの設定 --*/
#mod-freearea-main .entry .entry-top h3 {
font-size:100%;
background-color:transparent;
line-height:1.25;
text-align:center;
color:#666666;
border-bottom:solid 1px #cccccc;
border-top:none;
}
#mod-freearea-main .entry .entry-top h3 a {
color:#378fd4;
text-decoration:none;
}
#mod-freearea-main .entry .entry-top h3 a:visited {
color:#666;
}
#mod-freearea-main .entry .entry-top h3 a:hover {
color:#999;
text-decoration:underline;
}
/*-- オリジナルモジュール内部の設定 --*/
#mod-freearea-main .entry .entry-body {
word-break:break-all;
color:#333333;
line-height:1.25;
border:none;
}
/*-- オリジナルモジュール記事の設定 --*/
#mod-freearea-main .entry .entry-body-text {
padding:10px;
margin:0;
}
/*-- オリジナルモジュール下部の設定 --*/
#mod-freearea-main .entry .entry-bottom {
border:none;
}
/*-- End//INDIVIDUAL CSS Document for goo blog modulized templates 121010 --*/
アマゾンのアフィリエイトは表示できるか?
gooブログでは、活字表示でしたが、ワードプレスではキチンと表示してます。
ページネイション、ページ入力
<?php
if (isset($_GET['page'])) {
$page = (int)$_GET['page'];
} else {
$page = 1;
}
} catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
// スタートのポジションを計算する
if ($page > 1) {
// 例:2ページ目の場合は、『(2 × 10) - 10 = 10』
$start = ($page * 10) - 10;
} else {
$start = 0;
}
//meiboテーブルから10件のデータを取得する
$posts = $dbh->prepare("
SELECT id, namae, jyusyo
FROM meibo
LIMIT {$start}, 10
");
$posts->execute();
echo "<table>\n";
echo "\t<tr><th>id</th><th>namae</th><th>jyusyo</th></tr>\n";
while( $result = $posts->fetch( PDO::FETCH_ASSOC ) ){
echo "\t<tr>\n";
echo "\t\t<td>{$result['id']}</td>\n";
echo "\t\t<td>{$result['namae']}</td>\n";
echo "\t\t<td>{$result['jyusyo']}</td>\n";
echo "\t</tr>\n";
}
echo "</table>\n";
// 接続を使用する
$page_num = $dbh->prepare("
SELECT COUNT(*) id
FROM posts
");
$page_num->execute();
$page_num = $page_num->fetchColumn();
//ページネーションの数を取得する
$pagination = ceil($page_num / 10);
?>
<?php
for ($x=1; $x <= $pagination ; $x++) { ?>
<a href="$_SERVER[PHP_SELF]?page=<?php echo $page+1 ?>"><?php echo $page + 1; ?></a>
<?php }
print "$APPFOOTER";
?>
<p><a href="DBphpmenu.php">データベースメニューへ戻る</a></p>
</body>
</html>
何ページあるかをどうして知るか?という問題は残ります。
<?php
$totalPage = 10;
if (
isset($_GET["page"]) &&
$_GET["page"] > 0 &&
$_GET["page"] <= $totalPage
) {
$page = (int)$_GET["page"];
} else {
$page = 1;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 18.0.14.0 for Windows">
<title>サンプル</title>
</head>
<body>
<p>現在 <?php echo $page; ?> ページ目です。</p>
<p>
<?php if ($page > 1) : ?>
<a href="?page=<?php echo ($page - 1); ?>">前のページへ</a>
<?php endif; ?>
<?php if ($page < $totalPage) : ?>
<a href="?page=<?php echo ($page + 1); ?>">次のページへ</a>
<?php endif; ?>
</p>
</body>
</html>
一行表示onelinedisp.php
<?php
require_once("photolibini.php");
session_start();
$tcnt = $_SESSION['tcnt'];
$PAGESIZE=1;
$photoid = $_GET['photoid'];
//print $photoid;
$where = " WHERE tblphoto.photoid = $photoid";
//データベース接続
$dsn = "mysql:host=".$DBSERVER.";dbname=".$DBNAME;
$dbh = new PDO($dsn, $DBUSER, $DBPASSWORD);
//1ページ分だけ抽出するSQL文を組立てる
$sql = "SELECT tblphoto.*, categoryname
FROM tblphoto
RIGHT JOIN tblcategory
ON tblphoto.categoryid = tblcategory.categoryid" .
$where ;
$posts = $dbh->prepare($sql);
$posts->execute();
//ページ本文を組み立てます
$body = "<BR>";
$body .= "現在表示中のphotid:$photoid";
$showtype = 1;
if (!isset($showtype) or $showtype == 1) {
//一覧表示の場合
$body .= "<TABLE class='photolist'>
<TR>
<TH>写真<SPAN class='smallfont'> (クリックで拡大)</SPAN></TH>
<TH>カテゴリ</TH>
<TH>コメント</TH>
<TH>登録日</TH>
</TR>";
//結果セットからデータをループで読み込みます
while($col = $posts->fetch( PDO::FETCH_ASSOC )) {
//各レコード内容を表示する表を組み立てます
$body .= "<TR>
<TD width='130' align='center'>
<A href='$PHOTODIR$col[photofilename]' target='_blank'>
<IMG src='$PHOTODIR$col[photofilename]' width='120' height='90'></A>
</TD>
<TD width='130'>$col[categoryname]</TD>";
//キーワードが指定されているときはコメント内のキーワードを太字に置換します
$tmpcomment = $col['comment'];
/*
if ($searchtype == "kw") {
for ($i = 0; $i < sizeof($arykey); $i++) {
//$tmpcomment = preg_replace("/" . preg_quote($arykey[$i]) . "/", "", $tmpcomment);
}
}
*/
//改行コードをBRタグに置換します
$tmpcomment = nl2br($tmpcomment);
$body .= "<TD width='410'>$tmpcomment</TD>
<TD width='90' align='center'>$col[regdate]</TD>
</TR>";
}
$body .= "</TABLE>";
}
//ページのナビゲーションを追加します
$body .= "<DIV class='pagenavi'>";
if ($photoid > 1) {
//2ページ以降の場合は[前]を表示します
$body .= "<A href =$_SERVER[PHP_SELF]?photoid=" . ($photoid - 1) . "&tcnt=$tcnt'>" .
"<前の $PAGESIZE 件</A> ";
}
//if ($photoid = 1 and $tcnt > 1) {
// //2ページ以降の場合は[前]を表示します
// $body .= "<A href =$_SERVER[PHP_SELF]?photoid=" . ($photoid + 1) . "&tcnt=$tcnt'>" .
// "<次の $PAGESIZE 件</A> ";
//}
if (($photoid > 1 or $photoid == 1) and $photoid < $tcnt) {
//全部で2ページ以上あってかつ現在が最終ページより
//前のときは[次]を表示します
$body .= "<A href =$_SERVER[PHP_SELF]?photoid=" . ($photoid + 1) . "&tcnt=$tcnt'>" .
"次の $PAGESIZE 件></A>";
}
$body .= "</DIV>";
//ページヘッダを出力します
print htmlheader("検索結果");
//ページ本文を出力します
print $body;
//ページフッタを出力します
print htmlfooter();
?>
比較的簡単に出来ました。search.phpをそのままコピー出来ました。
クリック選択のpagenation.php
<?php
session_start();
require_once("photolibini.php");
//1ページ当りの表示件数を設定します
$PAGESIZE = 10;
//データベース接続
$dsn = "mysql:host=".$DBSERVER.";dbname=".$DBNAME;
$db = new PDO($dsn, $DBUSER, $DBPASSWORD);
// GETで現在のページ数を取得する(未入力の場合は1を挿入)
if (!isset($_GET['page'])) {
//初めて呼ばれたときは、総件数を取得
$sql = "SELECT Count(*) AS cnt FROM tblphoto";
$posts = $db->prepare($sql);
$posts->execute();
$tcnt = $posts->fetchColumn();
//件数を知る
$totalpage = ceil($tcnt / $PAGESIZE);
if ($totalpage == 0) {
$body = "該当する写真はみつかりませんでした!
<INPUT type='button' value='ホームへ戻る'
onclick='window.location=\"index.php\"'>";
print htmlheader("検索結果") . $body . htmlfooter();
exit();
}
$page = 1;
//ページ上部の表示組立て
$_SESSION['tcnt'] =$tcnt;
$body = "$tcnt 件の写真が見つかりました。";
$body .= "[" . ($PAGESIZE * ($page - 1) + 1) . "-";
if($page < $totalpage) {
//最終ページより前のページの時
$body .=($PAGESIZE * $page) . "]を表示";
} else{
//最終ページの時
$body .= "$tcnt]を表示";
}
}else{
$page =(int)$_GET['page'];
//$tcnt =(int)$_GET['tcnt'];
$tcnt =(int)$_SESSION['tcnt'];
$totalpage = ceil($tcnt / $PAGESIZE);
$body = "$tcnt 件の写真が見つかりました。";
//表示したいphotoidをクリックして下さい。
//<BR><BR>
//<UL type='circle'>";
$body .= "[" . ($PAGESIZE * ($page - 1) + 1) . "-";
if($page < $totalpage) {
//最終ページより前のページの時
$body .=($PAGESIZE * $page) . "]を表示";
} else{
//最終ページの時
$body .= "$tcnt]を表示";
}
}
// スタートのポジションを計算する
if ($page > 1) {
// 例:2ページ目の場合は、『(2 × 10) - 10 = 10』
$start = ($page * $PAGESIZE) - $PAGESIZE;
} else {
$start = 0;
}
// postsテーブルから10件のデータを取得する
$posts = $db->prepare("
SELECT categoryid, comment, photofilename,
photoid, regdate
FROM tblphoto
LIMIT {$start}, $PAGESIZE
");
$posts->execute();
$body .= "<BR>表示したいphotoidをクリックして下さい。
<BR>
<UL type='circle'>";
//$body .= "<table>\n";
$body .= "\t<tr><th>photoid </th><th>photofilename </th><th>categoryid </th>
<th>comment </th><th>regdate </th><tr>";
while($result = $posts->fetch(PDO::FETCH_ASSOC)){
$body .= "<LI><A href='onelinedisp.php?photoid=$result[photoid]'";
$body .= "\t<tr>\n";
$body .= "\t\t<td>{$result['photoid']}</td>\n";
$body .= "\t\t<td>{$result['photofilename']}</td>\n";
$body .= "\t\t<td>{$result['categoryid']}</td>\n";
$body .= "\t\t<td>{$result['comment']}</td>\n";
$body .= "\t\t<td>{$result['regdate']}</td>\n";
$body .= "\t<tr>\n";
}
//$body .= "</table>\n";
$body .= "</UL>";
// postsテーブルのデータ件数を取得する
$page_num = $db->prepare("
SELECT COUNT(*) categoryid
FROM tblphoto
");
$page_num->execute();
$page_num = $page_num->fetchColumn();
// ページネーションの数を取得する
$pagination = ceil($page_num / $PAGESIZE);
// $pagination = $totalpage;
//ページヘッダを出力します
print htmlheader("PHPテスト");
//ページ本文を出力します
print $body;
//ページフッタを出力します
print htmlfooter();
?>
<?php for ($x=1; $x <= $pagination ; $x++) { ?>
<a href="?page=<?php echo $x ?>&tcnt=$tcnt"><?php echo $x; ?></a>
<?php } // End of for
以前のものは、<TABLE>使って、表形式で表示してましたが、どうもクリック選択できないので、<TABLE>をしないように、コメントアウトしてます。それ以外は変わってないと思います。
photolib弄ってます。
<?php
session_start();
require_once("photolibini.php");
//1ページ当りの表示件数を設定します
$PAGESIZE = 10;
//データベース接続
$dsn = "mysql:host=".$DBSERVER.";dbname=".$DBNAME;
$db = new PDO($dsn, $DBUSER, $DBPASSWORD);
// GETで現在のページ数を取得する(未入力の場合は1を挿入)
if (!isset($_GET['page'])) {
//初めて呼ばれたときは、総件数を取得
$sql = "SELECT Count(*) AS cnt FROM tblphoto";
$posts = $db->prepare($sql);
$posts->execute();
$tcnt = $posts->fetchColumn();
//件数を知る
$totalpage = ceil($tcnt / $PAGESIZE);
if ($totalpage == 0) {
$body = "該当する写真はみつかりませんでした!
<INPUT type='button' value='ホームへ戻る'
onclick='window.location=\"index.php\"'>";
print htmlheader("検索結果") . $body . htmlfooter();
exit();
}
$page = 1;
//ページ上部の表示組立て
$_SESSION['tcnt'] =$tcnt;
$body = "$tcnt 件の写真が見つかりました。";
$body .= "[" . ($PAGESIZE * ($page - 1) + 1) . "-";
if($page < $totalpage) {
//最終ページより前のページの時
$body .=($PAGESIZE * $page) . "]を表示";
} else{
//最終ページの時
$body .= "$tcnt]を表示";
}
}else{
$page =(int)$_GET['page'];
//$tcnt =(int)$_GET['tcnt'];
$tcnt =(int)$_SESSION['tcnt'];
$totalpage = ceil($tcnt / $PAGESIZE);
$body = "$tcnt 件の写真が見つかりました。";
$body .= "[" . ($PAGESIZE * ($page - 1) + 1) . "-";
if($page < $totalpage) {
//最終ページより前のページの時
$body .=($PAGESIZE * $page) . "]を表示";
} else{
//最終ページの時
$body .= "$tcnt]を表示";
}
}
// スタートのポジションを計算する
if ($page > 1) {
// 例:2ページ目の場合は、『(2 × 10) - 10 = 10』
$start = ($page * $PAGESIZE) - $PAGESIZE;
} else {
$start = 0;
}
// postsテーブルから10件のデータを取得する
$posts = $db->prepare("
SELECT categoryid, comment, photofilename,
photoid, regdate
FROM tblphoto
LIMIT {$start}, $PAGESIZE
");
$posts->execute();
$body .= "<table>\n";
$body .= "\t<tr><th>photoid</th><th>photofilename</th><th>categoryid</th>
<th>comment</th><th>regdate</th><tr>";
while($result = $posts->fetch(PDO::FETCH_ASSOC)){
$body .= "\t<tr>\n";
$body .= "\t\t<td>{$result['photoid']}</td>\n";
$body .= "\t\t<td>{$result['photofilename']}</td>\n";
$body .= "\t\t<td>{$result['categoryid']}</td>\n";
$body .= "\t\t<td>{$result['comment']}</td>\n";
$body .= "\t\t<td>{$result['regdate']}</td>\n";
$body .= "\t<tr>\n";
}
$body .= "</table>\n";
// postsテーブルのデータ件数を取得する
$page_num = $db->prepare("
SELECT COUNT(*) categoryid
FROM tblphoto
");
$page_num->execute();
$page_num = $page_num->fetchColumn();
// ページネーションの数を取得する
$pagination = ceil($page_num / $PAGESIZE);
// $pagination = $totalpage;
//ページヘッダを出力します
print htmlheader("PHPテスト");
//ページ本文を出力します
print $body;
//ページフッタを出力します
print htmlfooter();
?>
<?php for ($x=1; $x <= $pagination ; $x++) { ?>
<a href="?page=<?php echo $x ?>&tcnt=$tcnt"><?php echo $x; ?></a>
<?php } // End of for
pegenation.php
<?php
require_once("photolibini.php");
//データベース接続
$dsn = "mysql:host=".$DBSERVER.";dbname=".$DBNAME;
$db = new PDO($dsn, $DBUSER, $DBPASSWORD);
// GETで現在のページ数を取得する(未入力の場合は1を挿入)
if (isset($_GET['page'])) {
$page = (int)$_GET['page'];
} else {
$page = 1;
}
// スタートのポジションを計算する
if ($page > 1) {
// 例:2ページ目の場合は、『(2 × 10) - 10 = 10』
$start = ($page * 10) - 10;
} else {
$start = 0;
}
// postsテーブルから10件のデータを取得する
$posts = $db->prepare("
SELECT categoryid, comment, photofilename,
photoid, regdate
FROM tblphoto
LIMIT {$start}, 10
");
$posts->execute();
$body = "<table>\n";
$body .= "\t<tr><th>photoid</th><th>photofilename</th><th>categoryid</th>
<th>comment</th><th>regdate</th><tr>";
while($result = $posts->fetch(PDO::FETCH_ASSOC)){
$body .= "\t<tr>\n";
$body .= "\t\t<td>{$result['photoid']}</td>\n";
$body .= "\t\t<td>{$result['photofilename']}</td>\n";
$body .= "\t\t<td>{$result['categoryid']}</td>\n";
$body .= "\t\t<td>{$result['comment']}</td>\n";
$body .= "\t\t<td>{$result['regdate']}</td>\n";
$body .= "\t<tr>\n";
}
$body .= "</table>\n";
// postsテーブルのデータ件数を取得する
$page_num = $db->prepare("
SELECT COUNT(*) categoryid
FROM tblphoto
");
$page_num->execute();
$page_num = $page_num->fetchColumn();
// ページネーションの数を取得する
$pagination = ceil($page_num / 10);
//ページヘッダを出力します
print htmlheader("PHPテスト");
//ページ本文を出力します
print $body;
//ページフッタを出力します
print htmlfooter();
?>
<?php for ($x=1; $x <= $pagination ; $x++) { ?>
<a href="?page=<?php echo $x ?>"><?php echo $x; ?></a>
<?php } // End of for
上の図で、比較的に長いくないので、どうやれば表示部分を変えていけるでしょうかね。ページネイションの本質はこれで行くとして。
PDO接続のデータベースのページイング
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 18.0.14.0 for Windows">
<title></title>
<style>
<!--
table,th,td{
border: 1px solid #000;
}
-->
</style>
</head>
<body background="y8b.gif">
<?php
require_once ("newpage8.php");
//自身の環境に合わせて書き換える
//接続に必要な$hostname、$dbname、$username、$passwordはnewpage8.phpへ移動
//newpage8.phpはサイト転送出来ないので、転送ツールでアップする
print $APPTITLE;
MyTitlePrint("実験開始!データベースのテーブル表示テスト");
//------
$dsn = "mysql:host=".$hostname.";dbname=".$dbname;
try {
$dbh = new PDO($dsn, $username, $password);
// GETで現在のページ数を取得する(未入力の場合は1を挿入)
?>
<form method="GET" >
<p> ページ: <input type="text" name="page" value=""><input type="submit" ></p>
</form>
<?php
if (isset($_GET['page'])) {
$page = (int)$_GET['page'];
} else {
$page = 1;
}
} catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
// スタートのポジションを計算する
if ($page > 1) {
// 例:2ページ目の場合は、『(2 × 10) - 10 = 10』
$start = ($page * 10) - 10;
} else {
$start = 0;
}
//meiboテーブルから10件のデータを取得する
$posts = $dbh->prepare("
SELECT id, namae, jyusyo
FROM meibo
LIMIT {$start}, 10
");
$posts->execute();
$posts = $posts->fetchAll(PDO::FETCH_ASSOC);
foreach ($posts as $meibo) {
echo $meibo['id'], ' : ';
echo $meibo['namae'], ' : ';
echo $meibo['jyusyo'], '<BR>';
}
// 接続を使用する
$page_num = $dbh->prepare("
SELECT COUNT(*) id
FROM posts
");
$page_num->execute();
$page_num = $page_num->fetchColumn();
//ページネーションの数を取得する
$pagination = ceil($page_num / 10);
?>
<?php
for ($x=1; $x <= $pagination ; $x++) { ?>
<a href="?page=<?php echo $x ?>"><?php echo $x; ?></a>
<?php }
print "$APPFOOTER";
?>
<p><a href="DBphpmenu.php">データベースメニューへ戻る</a></p>
</body>
</html>
ネットで見つけたコードそのままです。自分が今挑戦していて、半分挫折ですが、mysqliを使ったものですので、違うのが残念です。ほぼ最後の部分で、出力があります。でもここの部分がどうやって実行できているんでしょうか?なんか?リスト全部出力するんではないんですか?urlに?page=2とか書くと、2ページ目を出力する。そういうもんなんでしょうか?
またまたネット情報ですが、<FORM></FORM>でキーボードから入力を足してみました。するとurlのpageと連動して動きました。後はクリックと連動できれば、かなりいいかも。
「PHP5.0とMySQL5.0で構築する最速Webシステム」は古いせいもあるかもしれませんが、難しい。一度目は全データを読み込みます。件数を調べないといけないので。一ページの表示できる件数を決めれば、何ページ必要か分かります。何ページ目か指定していない一番最初は一ページ目を表示ます。次から出来ないところですが、実行しているphpファイル(自分自身)に対して、どうやら表示すべきpageと全体の件数を教えないといけないようなんです。
上の例では、ネットそのまま出できましたが、「ネタ本」では未だできません。((+_+))