カスタムテーマ/CSS - Janetter wiki - atwiki（アットウィキ）

ファイル構造
参考サイト
編集例

執筆者を募集しています。

よく使う編集例を載せています。

ファイル構造

■Silverテーマでの例
Theme
　├─Common
　│　　├─css
　│　　│　　├─style.css　【F】
　│　　│　　├─base.css　【E】
　│　　│　　└─list.css　【D】
　│　　├─template
　│　　│　　└─tweet.css　【B】
　│　　├…
　│
　└─Items 
　　　　├──Silver
　　　　├…　　　├───css
　　　　　　　　　　├…　　　├─main.css　【C】
　　　　　　　　　　├…　　　└─silver.css　【A】
　　　　　　　　　　├index.htm
　　　　　　　　　　└theme.ini

%APPDATA%\Jane\Janetter2\UserStyleSheets\Custom.css　【優先】

ユーザースタイルシートの内容が最も優先され、以下、A>B>C>D>……の順番に優先順位が決まる。

■スタイルの優先順位
よりタグに近い、より後から読み込まれたスタイルが優先される
http://www.htmq.com/csskihon/007.shtml

参考サイト

CSSの基本
スタイルシートリファレンス（目的別）
RGBAカラーモデルで色を指定する
RGB-to-Hex Conversion
Hex-to-RGB Conversion

編集例

アイコンサイズ

ネガティブマージン

/* アイコンサイズ */
.main-profile img, .main-profile canvas {
-webkit-box-shadow: none;/* 影なし */
-webkit-border-radius: 0px;/* 丸みなし */
width: 48px; height: 48px; }
/* サブ */
.sub-profile img, .sub-profile canvas { width: 20px; height: 20px; }
.profile-box .icon-rt { top: 53px;}
 
/* アイコンサイズに応じて変更 */
.profile-box{ width: 50px; }
.tweet-box {padding: 0 0 0 56px;}
.tweet-box-wrapper { margin: 0 0 0 -54px; }

文字色など

/* フォント  *******************************************/
/* 全称セレクタやbody以下のタグ・classに対してフォントを指定すると、
 * 設定画面からのフォント変更に対応できない場合があります。
 */
body { font-family: "MS UI Gothic": MS UI Gothic;  }
 
/* 文字色 ********************************************/
/* リンク色 */
a {color: #1BA1E2;}
a:visited{color: #A200FF;}
a:hover{color: #1BA1E2;}
a:active{color: #E51400;}
/* ハッシュタグ */
a.hashtag {color: #339933;}
a.hashtag:visited{color: #339933;}
a.hashtag:hover{color: #8CBF26;}
a.hashtag:active{color: #8CBF26;}
/* @user */
a.user {color: #F09609;}
a.user:visited{color: #F09609;}
a.user:hover{color: #E51400;}
a.user:active{color: #E51400;}
 
/* 全般(ツイート本文など) */
.tweet-container {color:#fff }
 
/* ユーザー名、投稿日時 */
.tweet-header a.no-link { color: #ccc;}
.tweet-header .time {     color: #ccc;}
.displayname > .name {    color: #ccc;}
.displayname > .subname { color: #ccc;}
 
/* フッター、via */
.tweet-footer {           color: #aaa;}
.tweet-footer a {         color: #aaa;}
 
/* 返信先 */
div.tweet-reply {         color: #999;}
div.tweet-reply-box a {   color: #888;}
div.tweet-reply .displayname > .name {    color: #888;}
div.tweet-reply .displayname > .subname { color: #888;}
 
/* プロフィール画面のTL（本文、ユーザー名、投稿日時など） */
.prof-main .tweet-container {color:#000 }
.prof-main .tweet-header a.no-link { color: #000;}
.prof-main .tweet-header .time {     color: #000;}
.prof-main .displayname > .name {    color: #000;}
.prof-main .displayname > .subname { color: #000;}
/*****************************************************/
/* タイムラインラベル（上部） */
.timeline-title-text {font-weight: normal;font-size: 16px;}
 
/* タブバー（下部） */
span.timeline-tab-text { color: #333; }

背景

/* 背景 ***********************************************************
 * 見た目上、一番背面に表示される。
 * 「Silver」テーマのindex.htmの<style>～</style>で指定されているものや、
 * 設定->デザインから任意に選択できる背景画像よりは優先度は低い
 */
/*background-size:
auto 自動的に算出される（初期値）
contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する */
body {
	background: #111;
	background-size: cover;
	background-position:center;
}
 
/* その他の背景色  *******************************************/
/* メニューバー */
#menu {background:#000;}
/* 書き込み欄、検索ボックス（右上） */
#tweet-edit-container input, .searchBox input {background-color: white;}
 
/* タイムライン（ラベル・上部） */
.timeline-title { background:none; background-color: #000;}
/* 区切り */
.timeline-title { border: 0px;border-right-width: 0px;}
 
/* タイムライン（内部） */
.timeline-main {  background-color: #000 }
.tweet-background{ background:none;}
/* ツイート下部の飾り */
.tweet-shadow{     background:none; border-bottom: 0px}
/* リプライ、自分のツイート */
.reply .tweet-background{   background:none;}
.mytweet .tweet-background{ background:none;}
 
/* フォーカスのあるツイート */
.tweet-container.focus .tweet-focus-frame{ -webkit-border-radius: 5px; border: 2px solid rgba(255,200,50,0.2);}
li:focus .tweet-container.focus .tweet-focus-frame{border-color: rgba(255,200,50,0.8);}
/* マウスオーバー時 */
/* 通常、リプライ、自分のツイートにマウスを乗せたりフォーカスを合わせたときの変化
 * ここでは変化させないように記述 */
.tweet-background:hover,
li:focus .tweet-container.focus .tweet-background,
.tweet-container.reply .tweet-background:hover,
li:focus .tweet-container.reply.focus .tweet-background,
.tweet-container.mytweet .tweet-background:hover,
li:focus .tweet-container.mytweet.focus .tweet-background{ background:none;}
 
/* タブバー(画面下部) */
#timeline-tabs-bar { background-color: #000;}
 
/*****************************************************/

メニューアイコンの差し替え

url(～)に記述する画像までのパスは、編集中のCSSから見た相対パスを指定します。
絶対パスと相対パス

/* Main menu icon */
.menu-icon-home{   background-image: url(../../../Common/images/simple_silver/home.png);}
.menu-icon-mention{background-image: url(../../../Common/images/simple_silver/mention.png);}
.menu-icon-direct{ background-image: url(../../../Common/images/simple_silver/direct.png);}
.menu-icon-list{   background-image: url(../../../Common/images/simple_silver/list.png);}
.menu-icon-search{ background-image: url(../../../Common/images/simple_silver/search.png);}
.menu-icon-gear{   background-image: url(../../../Common/images/simple_silver/gear_off.png);}
.menu-icon-gear:hover{background-image: url(../../../Common/images/simple_silver/gear_on.png);}

各種のアイコン

/* Tweet icon */
.icon-dm{  background-image: url(../images/dm.png);}
.icon-rt{  background-image: url(../images/rt.gif);}
.icon-geo{ background-image: url(../images/geopin.png);}
/* 4連アイコン */
.tl-icon-gear{ background-image: url(../images/gear.png);}
.tl-icon-reply{ background-image: url(../images/everything-spritev2_white.png);}
.tl-icon-fav{ background-image: url(../images/everything-spritev2_white.png);}
.tl-icon-rt{ background-image: url(../images/everything-spritev2_white.png);}
/* プロフィール画面 Tweet icon */
.prof-content .icon-dm{  background-image: url(../../../Common/images/timeLine/dm.png);}
.prof-content .icon-rt{  background-image: url(../../../Common/images/timeLine/rt.gif);}
.prof-content .icon-geo{ background-image: url(../../../Common/images/timeLine/geopin.png);}
/* 4連アイコン */
.prof-content .tl-icon-gear{ background-image: url(../../../Common/images/timeLine/gear.png);}
.prof-content .tl-icon-reply{ background-image: url(../../../Common/images/twitter/everything-spritev2.png);}
.prof-content .tl-icon-fav{ background-image: url(../../../Common/images/twitter/everything-spritev2.png);}
.prof-content .tl-icon-rt{ background-image: url(../../../Common/images/twitter/everything-spritev2.png);}

鍵アイコン、未読マーク、ジオピン

span.protected{
	width: 9px;	height: 11px;
	background-image: url(../../Common/images/timeLine/key2.png);
}
span.unread{
	width: 9px;	height: 9px;
	background-image: url(../../Common/images/timeLine/unread.png);
}
span.geopin{
	width: 9px;	height: 11px;
	background-image: url(../../Common/images/timeLine/geopin2.png);
}

スクロールバー

参考：スクロールバーをデザインする

/* スクロールバー **************************************/
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar { background: none; }
::-webkit-scrollbar-thumb {background-color: #1BA1E2;}

書き込み欄をセンタリング

#tweet-edit-container { margin: 0 auto;}

「ツイート送信中」

#tweet-edit-container > .expanded > .wait {
	position: absolute;
	opacity: 0.6;
	background-color: #333;
	background-image: url(../../Common/images/main/wait3.gif);
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 21;
}

ハッシュタグ一覧

.ui-autocomplete { background-color: red;}

フォントサイズ

設定画面から6段階指定するフォントサイズです。あまり書き換えることをおすすめしません。

/* Font Size */
.font-tiny .tweet-header,
.font-tiny .tweet-body,
.font-tiny .tweet-reply-box{ font-size: 10.5px;}
.font-small .tweet-header,
.font-small .tweet-body,
.font-small .tweet-reply-box{ font-size: 11.5px; }
.font-normal .tweet-header,
.font-normal .tweet-body,
.font-normal .tweet-reply-box{ font-size: 12.5px; }
.font-big .tweet-header,
.font-big .tweet-body,
.font-big .tweet-reply-box{ font-size: 14px; }
.font-giant .tweet-header,
.font-giant .tweet-body,
.font-giant .tweet-reply-box{ font-size: 16px; }
.font-ultragiant .tweet-header,
.font-ultragiant .tweet-body,
.font-ultragiant .tweet-reply-box{ font-size: 24px; }

書き込み欄

.font-tiny .expanded textarea{   font-size: 10px; }
.font-small .expanded textarea{  font-size: 11px; }
.font-normal .expanded textarea{ font-size: 12px; }
.font-big .expanded textarea{    font-size: 14px; }
.font-giant .expanded textarea{  font-size: 16px; }
.font-ultragiant .expanded textarea{ font-size: 18px; }

タグ：

+ タグ編集

「CSS」をウィキ内検索

最終更新：2012年02月11日 21:11

[Amazon商品]

添付ファイル