Webサイト構築サポート - 本サイトのカストマイズ記録メモ

本サイトのカストマイズ記録メモ

----------------------------------------------------------------------------------------------------------
2014年4月12日

画面右下に「PAGE TOP」を表示するようにしました。

＜HTML再定義欄に追加＞

＜追加CSS＞
#page-top {

position: fixed;

bottom: 20px;

right: 15px;

font-size: 100%;

}

#page-top a {

background: #000080;

text-decoration: none;

color: #fff;

width: 55px;

padding: 10px 0;

text-align: center;

display: block;

border-radius: 10px;

}

#page-top a:hover {

text-decoration: none;

background: #4169e1;

}

----------------------------------------------------------------------------------------------------------
2013年1月15日

リンクしている文字に、マウスポインターを位置づけた（マウスオーバー）時、文字の色が変わる様に、下記のタグを、CSSのHTML再定義欄に追加しました。

＜HTML再定義欄に追加＞
a{
color: #03c;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
a:hover {
color: #39f;　→　#f90
}

----------------------------------------------------------------------------------------------------------
2013年2月1日

CSSのの「ナビゲーション」欄のfont-sizeを11pxから12pxに変更しました。

＜ナビゲーション欄を変更＞
font-size: 11px;　→　font-size: 12px;

----------------------------------------------------------------------------------------------------------

2013年2月16日

XHTML の「ページ：お問い合わせ」欄のfont-sizeを、10px から 11px　に変更しました。

＜ページ：お問い合わせ欄＞
■ 個人情報の保護について
 →　

----------------------------------------------------------------------------------------------------------
2013年2月17日

★フリーページを見易くする為の変更

1.背景を暗くする為、下記タグを、CSSに追加・変更しました。

＜HTML再定義欄に追加＞
#container1 {
background: url(/img/bg/black_alpha_50.png);
margin: 0px 0px;
padding: 10px;
}

#container2 {
background: url(/img/bg/black_alpha_50.png);
margin: 0px 0px;
border: 1px solid #48ba15;
padding: 10px;
}

＜メイン欄を変更＞

#main h2.page_title {
font: 20px 'Georgia';
margin: 0 0 20px 0;
padding: 0 0 5px 0;
border-bottom: 1px solid #333333;
}

↓↓

#main h2.page_title {
font: 20px 'Georgia';
background: #008000;
margin: 0 0 0px 0;
padding: 4px 0px 1px 10px;
border-bottom: 1px solid #42ab14;
}

＜メイン欄に追加＞
p{
font-size:1.0em;
line-height:1.5em;
}

＜インフォメーション欄に追加＞
background: url(/img/bg/black_alpha_50.png);
padding: 10px;

----------------------------------------------------------------------------------------------------------
2013年2月19日

CSSのの「トップ」欄の.information_areaに背景を追加しました。

＜トップ欄に追加＞
.information_area {
}
↓↓
.information_area {
background: url(/img/bg/black_alpha_50.png);
padding: 10px;
}

＜テーマ別レイアウト欄を変更と追加＞

#header {
padding: 20px 0;
}
#header_inner{
margin: 0 10px;
}
↓↓
#header {
padding: 15px 0 10px 0;
}
#header_inner {
margin: 0 10px;
background: #008000;
}

＜ヘッダー欄を変更＞
.site_title {
float: left;
margin: 0 0 0 10px;
}
↓↓
.site_title {
float: left;
margin: 10px 0 0 10px;
}

----------------------------------------------------------------------------------------------------------
2013年2月20日

下記場所に、background: url(/img/bg/black_alpha_50.png);を追加。

・カレンダー（.calendar_area）（.schedule_area）（.schedule_detail ）
・メニュー（.menu_area）
・フォトギャラリー(.photo_area)
・クーポン（.coupon_area）
・店舗情報（.about_area)
・お問い合わせ(.contact_area)
・予約ページ（.reservation_area）
・トップ（.message）

トップ（.welcome_area）欄、background: #48ba15;に変更。
店舗情報（.map）に、background: #008000;追加。

Slideスライド欄の変更。
.jdSlideshow .slideInfoZone　に　background: #700070;
.jdSlideshow .slideInfoZone div　に　font-size: 12px;

----------------------------------------------------------------------------------------------------------
2013年2月25日

＜HTML再定義欄に追加＞

h3 {
background: #060;
padding-top:5px;
padding-bottom:3px;
font-size:1.3em;
color:#fc0;
border-left:solid 8px #fc0;
padding-left:5px;
margin-top:0em;
margin-bottom:1.5em;
}

/* --------------------------------------
フリー　ページ　（追加欄）
--------------------------------------- */

.free_area {
　　　　　　　　　　　 background: url(/img/bg/black_alpha_50.png);
}

その他、フリーページ用のサブMENUのCSSを追加しました。

----------------------------------------------------------------------------------------------------------
2013年3月24日

＜HTML再定義欄に追加＞

h4 {
font-size:1.15em;
font-weight:bold;
color:#42ab14;
padding-left:0px;
margin-top:0em;
margin-bottom:0.5em;
}

----------------------------------------------------------------------------------------------------------
2013年8月11日

画像にマウスオーバー時、半透明にするようにした。

＜HTML再定義欄に追加＞

/* ★追加20130811*/
a:hover img {
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}

----------------------------------------------------------------------------------------------------------

私は、実務知識ゼロでしたので、下記の書籍の中古本３冊を買って少し勉強しました。
本の発行年月が古いため、中古本といっても未使用の在庫品で新品の本でした。
1冊平均100円～300円ほどで購入できます。

最初の２冊を読んだ時点では、まだ漠然とした感じでありましたが、３冊目の具体例を見て、なんとかCSSの使い方が分かってきましたので、本サイトをカストマイズすることにしました。

Website構築Support　▲トップ

次へ　≫

このページの先頭へ