AdanKadan @ A

AdanKadan @ A 《f》「ブログ質問板」援護とAutopageカスタマイズ
当ブログは、インターネットの慣例に従い、どの記事もリンクOKです。
by 阿檀(アダン)

リンク集

→リンク集のページへ

検索

記事カテゴリ

フリーエリア

▽画像素材をお借りしております。

過去ログ

RSS取り込み1

カレンダー

2021年

September

Sun	Mon	Tue	Wed	Thu	Fri	Sat
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

ブログサービス

Powered by

« Autopageの画像URL　|　Main　|　ひさっしぶりにデザインリニューアル »

2007/12/18

「ブロックBlueをリキッド化」　　AutoPageカスタマイズ

お助け掲示板からのリクエストで、ブロックBlueを画面幅いっぱい使いたい、というカスタマイズ。スタイルシートを追記にて公開。どなたでもご自由にご使用ください。

■設定方法
管理画面→デザインの変更→[かんたんデザイン変更]→＜現在のテンプレートとレイアウト＞が「ブロックBlue」,左メニュー２カラムであることを確認。
[こだわりデザイン変更]→[スタイルシートの直接編集]→下記で全部置きかえ→[編集を保存する]→スタイルシートに名前をつけて、新たに追加保存する・スタイル名[ブロックBlue幅広]／コメント（なにかあったら質問に来られるように「http://green.ap.teacup.com/adan/76.html」をメモっといてください）・保存したデザインをすぐに設定する：チェックマーク入れる→[スタイルを追加する]
判らないことができたら聞きにいらしてください。

■使用するスタイルシート

/* ブロックblueをリキッド化 */
*{word-break:break-all;}

/* 全体のリンク色などの設定 */
A {
  text-decoration: none;
}

/* 未訪問リンク色の設定 */
a:link {
  color: #8080c0;
}

/* 訪問済みリンク色の設定 */
a:visited {
  color: #8080c0;
}

/* リンクを選択した瞬間の色の設定 */
a:active {
  color: #8080c0;
}

/* マウスをかざしたときのリンク色の設定 */
a:hover {
  color: #8080c0;
}

/* HTML全体 */
body,div{padding:0;margin:0;}

body {
  background: #fff;
  color: #525252;
  text-align: center;
}

/* ブログ本体 */
#tcpbody {width:95%;
  border: 1px solid #fff;
  margin: 0px auto;
  text-align: left;
  background-color: #fff;
}

/* 上部ブログタイトル部分 */
#tctoptitlelay {
  float: left;
width:100%;
  background-color: #4d8eff;
}

/* ブログタイトル文字 */
#tctoptitlelay h1 {
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  color: #fff;
  padding: 12px;
}

#tctoptitlelay A, #tctoptitlelay a:link {
  color: #fff;
}

/* ブログサブタイトル文字 */
#tctoptitlelay p {
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  color: #fff;
  margin: 0px;
  padding-left: 12px;
  padding-bottom: 5px;
}

/* 左サイドメニュー全体 */
#tcsidelay {
  float: left;
  width: 20%;overflow:hidden;
  background: #fff;
}

/* 左サイドメニュー内部 */
#sidemenu {
  color: #525252;
  font-size: 0.9em;
  font-weight: normal;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}
#sidemenu ul{margin:0;padding:0;}
#sidemenu li{margin:0.3em 1em;padding:0;line-height:120%;}

/* 汎用サイドメニューパーツ 全体 */
.blockone {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
}

/* 汎用サイドメニューパーツ タイトル文字 */
.blockone h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* 汎用サイドメニューパーツ リスト部分 */
.blockone ul {
  list-style: none;
}

/* サイドメニューカレンダーパーツ全体 */
.cal {
  color: #525252;
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニューカレンダーパーツ タイトル文字 */
.cal h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニューカレンダーテーブル */
.cal TABLE {
  border-collapse: collapse;
  width: 161px;
  margin-left: 10px;
}

/* サイドメニューカレンダー 年月 */
.cal .caption {
  font-weight: bold;
  font-size: x-small;
  color: #525252;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  letter-spacing: 0.3em;
  vertical-align: baseline;
  text-align: center;
}

/* サイドメニューカレンダー 曜日 */
.cal TH {
  font-size: x-small;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
  width: 23px;
}

/* サイドメニューカレンダー 日付 */
.cal TD {
  font-size: small;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  text-align: center;
  margin: 0px;
  padding: 0px;
  width: 23px;
}

/* サイドメニューカレンダー 日曜日 */
.cal .sun {
  color: #FF0000;
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

/* サイドメニュー「最近の投稿」パーツ 全体 */
.recentpost {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「最近の投稿」パーツ タイトル文字 */
.recentpost h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「最近の投稿」パーツ リスト部分 */
.recentpost ul {
  list-style: none;
}

/* サイドメニュー「過去ログ」パーツ 全体 */
.pastlog {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「過去ログ」パーツ タイトル文字 */
.pastlog h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「過去ログ」パーツ リスト部分 */
.pastlog ul {
  list-style: none;
}

/* サイドメニュー「記事カテゴリ」パーツ 全体 */
.cate {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「記事カテゴリ」パーツ タイトル文字 */
.cate h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「記事カテゴリ」パーツ リスト部分 */
.cate ul {
  list-style: none;
}

/* サイドメニュー「リンク集」パーツ 全体 */
.link {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「リンク集」パーツ タイトル文字 */
.link h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「リンク集」パーツ リスト部分 */
.link ul {
  list-style: none;
}

/* サイドメニュー「ページ内検索」パーツ 全体 */
.search {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「ページ内検索」パーツ タイトル文字 */
.search h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「ページ内検索」パーツ フォーム */
.searchbody {
  text-align: center;
}
.search form {
  width: 120px;
  margin: 0px auto;
  padding-top: 6px;
  text-align: left;
}

/* サイドメニュー「最近のコメント」パーツ 全体 */
.recentcomm {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「最近のコメント」パーツ タイトル文字 */
.recentcomm h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「最近のコメント」パーツ リスト部分 */
.recentcomm ul {
  list-style: none;
}

/* サイドメニュー「最近のトラックバック」パーツ 全体 */
.recenttb {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「最近のトラックバック」パーツ タイトル文字 */
.recenttb h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「最近のトラックバック」パーツ リスト部分 */
.recenttb ul {
  list-style: none;
}

/* サイドメニュー「最近の投稿画像」パーツ 全体 */
.recentimg {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「最近の投稿画像」パーツ タイトル文字 */
.recentimg h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「最近の投稿画像」パーツ リスト部分 */
.recentimg ul {
  list-style: none;
}

/* サイドメニュー「カウンター」パーツ 全体 */
.counter {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「カウンター」パーツ タイトル文字 */
.counter h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「カウンター」パーツ リスト部分 */
.counter ul {
  list-style: none;
}

/* サイドメニュー「サイドメニュー自由項目」パーツ 全体 */
.sidefree {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「サイドメニュー自由項目」パーツ タイトル文字 */
.sidefree h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「サイドメニュー自由項目」パーツ リスト部分 */
.sidefree ul {
  list-style: none;
}

/* サイドメニュー「サイドメニュー自由項目」パーツ 本体テキスト部分 */
.sidefreebody {
  word-break: break-all;
}

/* サイドメニュー「RSS取り込み1」パーツ 全体 */
.rssin01 {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「RSS取り込み1」パーツ タイトル文字 */
.rssin01 h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「RSS取り込み1」パーツ リスト部分 */
.rssin01 ul {
  list-style: none;
}

/* サイドメニュー「RSS取り込み2」パーツ 全体 */
.rssin02 {
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  font-size: small;
  list-style: none;
  margin: 5px 0;
}

/* サイドメニュー「RSS取り込み2」パーツ タイトル文字 */
.rssin02 h3 {
  background-color: #4d8eff;
  color: #fff;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 1px 1px 1px 1px;
  margin: 0em 0em 0em 0em;
  text-align: center;
}

/* サイドメニュー「RSS取り込み2」パーツ リスト部分 */
.rssin02 ul {
  list-style: none;
}

/* サイドメニューRSS出力用アイコン */
.rssout {
  padding-left: 0.5em;
  margin-left: 18px;
}

/* 記事本文が入るメインレイアウト全体 */
#tcmainlay {
  float: right;
  width: 78%;overflow:hidden;
  padding:0;
  margin:5px 0;
  background: #fff;
  word-break: break-all;
}

/* 投稿記事単位 */
.postdate {
  border: solid 1px #4d8eff;
  padding: 0px;
  margin-bottom: 5px;
}

/* 投稿記事の日付テキスト見栄え設定 */
.postdate h2 {
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: small;
  color: #525252;
  margin: 5px;
}

.postdate hr {
  border: 1px solid #525252;
  margin: 5px;
}

/* 投稿記事の題名テキスト見栄え設定 */
.posttitle {
  padding-top: 6px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 6px;
  margin: 0px;
  font-weight: bold;
  border-width: 0px 0px 1px 0px;
  border-color: #4d8eff;
  border-style: solid;
}

/* 投稿記事の記事カテゴリテキスト見栄え設定 */
.postcate {
  margin: 12px;
  color: #525252;
  font-weight: bold;
}

/* 投稿記事の本文 */
.postbody {
  padding-top: 12px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 12px;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: 96%;
  line-height: 160%;
}

/* コメント・トラックバックへのリンクテキスト */
.postcommtb {
  text-align: right;
  padding-right: 18px;
  border-width: 1px 0px 0px 0px;
  border-color: #4d8eff;
  border-style: solid;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: small;
}

/* 投稿者名テキスト */
.postname {
  text-align: right;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: small;
  padding-left: 5px;
  float:left;
}

/* ページ送りリンクテキスト */
.nextpage form {
  margin: 0px;
}
.nextpage {
  text-align: right;
  font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: small;
  margin: 2px;
}

/* トップページ自由項目 */
#tctopfreelay {
  background-color: #fff;
  clear: both;
}

/* コメントフォーム「投稿者名」 */
.commfrm1 {
}

/* コメントフォーム「メール」 */
.commfrm2 {
  float: left;
}

/* コメントフォーム「投稿する」SUBMITボタン */
.commfrm3 {
  float: right;
}

/* コメントフォーム「リンク」 */
.commfrm4 {
  clear: left;
}

/* コメントフォーム全体 */
.commfrmall {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: #414141;
  margin: 10px;
  padding-top: 15px;
  padding-left: 30px;
  padding-bottom: 10px;
  background-color: #f6f6f6;
  font-size: small;
  width: 450px;
}

/* コメント関連部品全体 */
#comm {
  color: #4c4c4c;
  margin: 5px;
  padding: 5px 5px 5px 5px;
  font-size: small;
}

/* コメントフォーム */
#comm form {
  width: 350px;
}

.commtxt {
  text-align: left;
}

/* コメント書き込みタイトル */
.commtitle {
  float: left;
  margin: 3px;
  color: #525252;
}

/* コメント書き込み日付 */
.comminfo {
  float: right;
  margin: 3px;
  color: #525252;
}

/* コメント書き込み本文 */
.commbody {
  clear: left;
  margin: 5px;
  padding: 5px 10px 5px 10px;
  color: #525252;
}

/* コメント書き込み全体 */
.commone {
  border-width: 0px 0px 2px 0px;
  border-style: dotted;
  border-color: #414141;
  margin: 7px;
}

/* トラックバック画面全体 */
#tb {
  color: #525252;
  margin: 5px;
  padding: 5px 5px 5px 5px;
  font-size: small;
}

/* トラックバック全体のタイトルテキスト */
.tbtxt {
  text-align: left;
}

/* トラックバックURL表示フォーム */
.tburl {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: #414141;
  padding-top: 15px;
  padding-bottom: 10px;
  padding-left: 9px;
  margin: 10px;
  background-color: #f6f6f6;
  font-size: small;
  width: 470px;
}

tbform input{
  width: 350px;
}

.tbbtn {
  margin-right: auto;
  margin-left: auto;
}

/* トラックバック解説文 */
.tbhelp {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: #414141;
  margin: 10px;
  padding: 5px;
  background-color: #fffaee;
  font-size: x-small;
  width: 470px;
}

/* トラックバック記事タイトル */
.tbtitle {
  float: left;
  margin: 3px;
  color: #525252;
}

/* トラックバック記事日時 */
.tbinfo {
  float: right;
  margin: 3px;
  color: #525252;
}

/* トラックバック記事本文 */
.tbbody {
  clear: left;
  margin: 5px;
  padding: 5px 10px 5px 10px;
  color: #525252;
}

/* トラックバック元サイト名 */
.tbfrom {
  text-align: right;
  margin: 3px;
  color: #525252;
}

/* トラックバック記事一つ分 */
.tbone {
  border-width: 0px 0px 2px 0px;
  border-style: dotted;
  border-color: #414141;
  margin: 7px;
}

/*  リンクバナー */
.linkbanner {
  margin: 8px;
}

/* 下部のログインボタンレイアウト全体 */
#tcloginlay {
  margin-left: 12px;
  padding: 0px;
}

/* 下部のログインボタンフォーム */
.loginfrm {
  float: left;
  padding-top: 12px;
}

/* パスワード保護時のブログタイトルテキスト */
.protecttitle {
  color: #fff;
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #4d8eff;
  background-color: #4d8eff;
}

/* パスワード保護時のブログ説明文 */
.protectbody {
  font-size: 9pt;
  padding: 12px;
  width: 460px;
  color: #525252;
  background-color: #fff;
}

/* サイドメニュー「プロフィール」パーツ全体 */
.sideprof {
  text-align: center;
  margin: auto;
  width: 120px;
}

#tcad2lay{width:100%;
  background-color: #4d8eff;margin:0 auto;
  text-align: center;}
#catenavi{width:100%;
  background-color: #4d8eff;margin:0 auto;
  text-align: center;}

タグ： AutoPage　カスタマイズ　 CSS

投稿者: Adan

詳細ページ - コメント(16)

トラックバック（この記事にリンクしている関連ページ）一覧

この記事へのトラックバックＵＲＬはありません

トラックバック一覧とは、この記事にリンクしている関連ページの一覧です。あなたの記事をここに掲載したいときは、「記事を投稿してこのページにお知らせする」ボタンを押して記事を投稿するか（AutoPageを持っている方のみ）、記事の投稿のときに上のトラックバックURLを送信して投稿してください。
→トラックバックのより詳しい説明へ

teacup.ブログ “AutoPage”