BLOG FORUM SITEMAP FAQ CONTACT Affiliate Field Affiliate Field by:Nucleus
• HOME » XOOPSモジュール導入解説 » Weblinks1.10β へのバージョンアップ(5)…CSS解説
Welcome Back. Time is now: 08/11/23 - 09:24 PM
 Welcome Guest ( Login | Register )
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
アフィリエイト関連
XOOPS関連
他ブログ・サイト作成
デビュー！MY携帯サイト 宣伝中♪

【Erotic,Cool&Cute! mobile】
http://kodamobile
.purpleweb.info/


6/5(月)カテゴリ掲載決定！
Yahoo!モバイルカテゴリ
｢アーティスト−倖田來未｣
です♪

当サイトは、
Prox System Designの
専用サーバー【E-server】
を利用しています


アクセスランキング


*** Weblinks1.10β へのバージョンアップ(5) ***
…CSS解説

｢weblinks/weblinks.css｣の中身は↓このようになっています。

/* $Id: weblinks.css,v 1.1 2006/05/24 01:14:31 ohwada Exp $ */

/* 2006-05-15 K.OHWADA */
/* this is new file    */

/* common */
div.weblinks_powered
{
	font-size: 80%; 
	text-align: right;
}

.weblinks_title　…モジュールのタイトル
{
	font-size: 150%; …130％に変更
	font-weight: bold; 
}

.weblinks_subtitle　…モジュールのサブタイトル
{
	font-size: 130%; …110％に変更
	font-weight: bold; 
}

.weblinks_bold
{
	font-size: 100%; 
	font-weight: bold; 
}

.weblinks_error
{
  color: #ff0000;
}

/* header */
.weblinks_logo
{
	text-align: center;
}

.weblinks_modulename
{
	text-align: center;
	font-size: 130%; …110％に変更
	font-weight: bold; 
}

.weblinks_guidance
{
	background-color: #dde1de;	/* near gray */
	　　　　　　　…↑メイン｜登録する 等にかかっている色
	color: #000000;	/* black */
	　　　　　　　…↑フォント色(全部黒になってる 12箇所)
	width: 100%;
	margin:  0px;
	padding: 3px;
	text-align: left;
}

/* index */
table.weblinks_index_frame_category
{
	width: 98%;
	margin:  0px;
	padding: 3px;
	border-width: 0px;
	border-style: none;
}

div.weblinks_index_frame_feed
{
	margin:  3px;
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
	　　　　…↑全部にかかっている外枠の線(全部(16箇所)この色)
}

/* viewcat */
table.weblinks_viewcat_frame_subcat
{
	width: 98%;
	margin:  0px;
	padding: 3px;
	border-width: 0px;
	border-style: none;
}

div.weblinks_viewcat_frame
{
	width: 100%;
	margin:  0px;
	padding: 2px;
	border-width: 0px;
	border-style: none;
}

.weblinks_subcategories
{
	font-size: 90%; 
}

.weblinks_pagenavi
{
	text-align: center;
}

/* singlelink */
div.weblinks_singlelink_frame
{
	width: 100%;
	margin:  0px;
	padding: 2px;
	border-width: 0px;
	border-style: none;
}

div.weblinks_singlelink_frame_feed
{
	margin:  3px;
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_comment_navi
{
	margin:  3px;
	padding: 3px;
	text-align: center;
}

div.weblinks_frame_comment
{
	margin:  3px;
	padding: 3px;
}

/* topten */
div.weblinks_topten_frame
{
	background-color: #191970;	/* midnight blue */
	　　　　…↑TOP10表示の際の紺色(この部分のみの色)
	color: #ffffff;	/* white */
	margin:  3px;
	padding: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
	font-size: 130%; …110％に変更
	font-weight: bold; 
}

/* brokenlink */
div.weblinks_brokenlink_frame
{
	margin:  5px;
	padding: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_brokenlink_form
{
	margin:  0px;
	padding: 3px;
	text-align: center;
}

/* ratelink */
div.weblinks_ratelink_frame
{
	margin:  5px;
	padding: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_ratelink_form
{
	margin:  0px;
	padding: 3px;
	text-align: center;
}

/* password */
div.weblinks_password_frame
{
	margin:   5px;
	padding: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

/* catlist */
div.weblinks_catlist_frame
{
	width: 100%;
	margin:  3px;
	padding: 3px;
	border-width: 0px;
	border-style: none;
	line-height: 150%;
}

/* viewfeed */
div.weblinks_viewfeed_frame_feed
{
	margin:  3px;
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}
<!-- リンクのシングル表示Start(ここを基準に変えるとGood！) -->
/* link_single */
div.weblinks_link_single_frame
{
	margin:  3px;
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
	　　　　…↑全部にかかっている外枠の線(全部(16箇所)この色)
}

div.weblinks_link_single_frame_title
{
	background-color: #e2dbd3;	/* near gray */
	　　　　　　…タイトル色とフッタ色
	color: #000000;	/* black */ 
	　　　　　　…↑フォント色(全部黒になってる 12箇所)
	margin:  1px;
	padding: 3px;
	text-align: left;
}

div.weblinks_link_single_frame_category
{
	background-color: #dde1de;	/* near gray */
	　　　　　　…カテゴリ色とヒット色(3箇所)
	color: #000000;	/* black */ 
	margin:  1px;
	padding: 3px;
	line-height: 150%;
	text-align: left;
}

div.weblinks_link_single_frame_description
{
	background-color: #eeeeee;	/* near gray */
	　　　　　　…本文の背景色(4箇所)
	color: #000000;	/* black */
	margin:  1px;
	padding: 3px;
	text-align: left;
}

div.weblinks_link_single_frame_hits
{
	background-color: #dde1de;	/* near gray */
	　　　　　　…カテゴリ色とヒット色
	color: #000000;	/* black */
	margin:  1px;
	padding: 3px;
	text-align: center;
}

div.weblinks_link_single_frame_footer
{
	background-color: #e2dbd3;	/* near gray */
	　　　　　　…タイトル色とフッタ色(4箇所)
	color: #000000;	/* black */ 
	margin:  1px;
	padding: 3px;
	text-align: center;
}
<!-- リンクのシングル表示End(ここを基準に変えるとGood！) -->

img.weblinks_link_image
{
	margin:  5px;
	padding: 1px;
	border-width: 0px;
	border-style: none;
	float: right;
}

.weblinks_link_title
{
	text-align: center;
	font-size: 150%; …130％に変更
	font-weight: bold; 
}

.weblinks_link_description
{
	font-size: 100%; 
}

.weblinks_link_admincomment
{
	font-size: 90%; 
}

/* links_list */
div.weblinks_links_list_frame
{
	margin:  3px;
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_links_list_frame_title
{
	background-color: #e2dbd3;	/* near gray */
	color: #000000;	/* black */ 
	margin:  1px;
	padding: 3px;
	text-align: left;
}

div.weblinks_links_list_frame_description
{
	background-color: #eeeeee;	/* near gray */
	color: #000000;	/* black */ 
	margin:  1px;
	padding: 3px;
	line-height: 150%;
	text-align: left;
}

img.weblinks_list_image
{
	margin:  0px;
	padding: 1px 3px 1px 1px;
	border-width: 0px;
	border-style: none;
	float: left;
}

.weblinks_list_title
{
	text-align: center;
	font-size: 150%; …130％に変更
	font-weight: bold; 
}

.weblinks_linst_description
{
	font-size: 100%; 
}

/* feed */
div.weblinks_feed_frame_title
{
	background-color: #e2dbd3;	/* near gray */
	color: #000000;	/* black */
	padding: 3px;
}

div.weblinks_feed_frame_content
{
	background-color: #eeeeee;	/* near gray */
	color: #000000;	/* black */
	padding: 3px;
}

div.weblinks_feed_frame_summary
{
	background-color: #eeeeee;	/* near gray */
	color: #000000;	/* black */
	padding: 3px;
}

.weblinks_feed_title
{
	font-size: 110%; 
	font-weight: bold; 
}

/* print (プリント表示の際のCSS) */
body.weblinks_print
{
	background-color: #ffffff;
	color: #000000;
}

div.weblinks_print_sitename
{
	margin:  0px;
	padding: 5px;
	text-align: center;
	font-size: 150%; …130％に変更
	font-weight: bold; 
}

div.weblinks_print_modulename
{
	margin:  0px;
	padding: 5px;
	text-align: center;
	font-size: 130%; …110％に変更
	font-weight: bold; 
}

div.weblinks_print_singlelink
{
	margin:  0px;
	padding: 5px;
	text-align: center;
}

div.weblinks_print_frame
{
	width: 650px;
	padding: 10px;
}

div.weblinks_print_frame_link
{
	margin:  0px;
	padding: 1px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_print_frame_link_title
{
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_print_frame_link_category
{
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
	line-height: 150%;
}

div.weblinks_print_frame_link_description
{
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_print_frame_link_hits
{
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_print_frame_feed_all
{
	margin:  1px;
	padding: 1px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_print_frame_feed_each
{
	padding: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #808080;	/* gray */
}

div.weblinks_print_frame_comment
{
	margin:  3px;
	padding: 3px;
}

img.weblinks_print_link_image
{
	margin:  5px;
	padding: 1px;
	border-width: 0px;
	border-style: none;
	float: right;
}

.weblinks_print_link_title
{
	text-align: center;
	font-size: 130%; …110％に変更
	font-weight: bold; 
}

.weblinks_print_link_url
{
	text-align: center;
	font-size: 100%; 
	font-weight: normal; 
}

.weblinks_print_link_description
{
	font-size: 100%; 
}

.weblinks_print_link_admincomment
{
	font-size: 90%; 
}

.weblinks_print_feed_title
{
	font-size: 110%; 
	font-weight: bold; 
}

色は、置き換え機能があるエディタとかで一気に置き換えたほうが楽なんじゃないかと思います。
一番多いのだと、｢border-color: #808080;｣の16箇所というのもありますので。
同じ色は全部同じように変えたほうがキレイに仕上がると思います。

私は普段サクラエディタというのを使っていますが、置き換え機能があるので、一括変換でき、結構便利です。

上のコード上にも書いていますが、ベースは｢リンクの個別表示部分｣で考えて配色等を構成すれば、他もキレイに揃ってくれます。

今回は、『テーマセットに合わせた配色方法』のご紹介でしたが、この｢Weblinks1.10β｣は、デザイン部分はCSSで独立しているんで、ご自身でお好きな配色をいろいろとやってみてくださいね〜♪



最終更新日:2006-06-15

プリンタ出力用画面 友達に伝える
前のページ
Weblinks1.10β へのバージョンアップ(4)…CSS変更方法のポイント 		コンテンツのトップ
お気に入り・RSSに追加


My Yahoo!に追加

現在調査中♪
紫 実は｢3｣でした(涙)
同じ人いるのかな？
ご協力お願いします！
携帯サイトを使いこなせていますか？
はい！いっぱい見まくってます！
存在は知ってるけどあんまり見ないです…。
ぶっちゃけ！｢公式サイト｣しか知らなかった。。。(涙)
XOOPS体験サイト♪

現在｢モジュール体験用｣に、XOOPSテストサイトを、置いています♪
(※まだ構築途中です〜！
且つ、現在メンテナンス中
ゴメンなさい！！)

↓こちらです！
【mytestXOOPS】

サブメニュー
サイト内検索

検索オプション
オンライン状況
8 人のユーザが現在オンラインです。 (1 人のユーザが XOOPSモジュール導入解説 を参照しています。)

 登録ユーザ: 0
 ゲスト: 8

もっと...
アクセスカウンタ
今日 : 458
昨日 : 516
総計 : 648734
 
当サイト内の掲載記事・コンテンツ・画像等の無断転載は禁止させていただきます
Copyright (C) 2005-2008 Affiliate Field All Rights Reserved.

Powered by XOOPS 2.0 (C) 2005-2008 The XOOPS Cube Project :: Designed By Theme4u.Net