カテゴリー
アフィリエイト

A8の広告を入れてみます

どういうふうかわからないのですが?

カテゴリー
gooブログ CSS編集

gooブログ、アドバンスCSS編集

@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

ページネイション、ページ入力

<?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

ページの移り変わり

<?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>
カテゴリー
PHP

一行表示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'>" .
              "&lt;前の $PAGESIZE 件</A>&nbsp;&nbsp;&nbsp;";
    }
    //if ($photoid = 1 and $tcnt > 1) {
    //  //2ページ以降の場合は[前]を表示します
    //  $body .= "<A href =$_SERVER[PHP_SELF]?photoid=" . ($photoid + 1) . "&tcnt=$tcnt'>" .
    //          "&lt;次の $PAGESIZE 件</A>&nbsp;&nbsp;&nbsp;";
    //}
    if (($photoid > 1 or $photoid == 1) and $photoid < $tcnt) {
        //全部で2ページ以上あってかつ現在が最終ページより
        //前のときは[次]を表示します
        $body .= "<A href =$_SERVER[PHP_SELF]?photoid=" . ($photoid + 1) . "&tcnt=$tcnt'>" .
              "次の $PAGESIZE 件&gt;</A>";
    }
    
  $body .= "</DIV>";

  //ページヘッダを出力します
  print htmlheader("検索結果");
  //ページ本文を出力します
  print $body;
  //ページフッタを出力します
  print htmlfooter();

 ?>

比較的簡単に出来ました。search.phpをそのままコピー出来ました。

カテゴリー
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>をしないように、コメントアウトしてます。それ以外は変わってないと思います。

カテゴリー
PHP

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

カテゴリー
PHP

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

上の図で、比較的に長いくないので、どうやれば表示部分を変えていけるでしょうかね。ページネイションの本質はこれで行くとして。

カテゴリー
PHP

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と全体の件数を教えないといけないようなんです。

 上の例では、ネットそのまま出できましたが、「ネタ本」では未だできません。((+_+))

inserted by FC2 system