レス数が1スレッドの最大レス数(1000件)を超えています。残念ながら投稿することができません。
Janetterのテーマを弄るスレ
-
Janetterは「Twitter」(http://twitter.com/)を
軽快に見るためのクライアントソフトウェアです。
このスレッドは、Janetterのテーマ作成に関して、
開発チームに質問したり、テーマ作成者同士で情報交換を行ったりするスレッドです。
■お願い
HTMLやCSS、JavaScriptそのものについての質問には答えられない場合があります。
Webには情報がたくさんありますので、まずは検索しましょう。
■Twitterクライアント「Janetter」
http://janetter.net/jp/
■関連スレ
Janetter Part2
http://jbbs.livedoor.jp/bbs/read.cgi/internet/8173/1289910911/
ジェーンBBSの閲覧には、
■2ちゃんねる専用ブラウザ 「Jane Style」
http://janesoft.net/janestyle/
をお勧めします。
-
[1/4]
＜テーマ作成にあたって基本的なこと＞
■テーマフォルダについて
テーマフォルダは、「%APPDATA%Jane\Janetter\Theme」にあります。
Common以外の各フォルダがテーマフォルダで、
ひとつのテーマフォルダがひとつのテーマに対応しています。
※
「%APPDATA%\Jane\Janetter\Theme」にはファイル名を指定して実行から該当フォルダに移動できます。
※
\Program Files\Janetter\Themeにも同じものがありますが、
これはアップデート時にAPPDATAへのコピーに使用するためのものです。
これらのファイルは弄らないでください。
なお編集したテーマを元に戻したい場合はここからコピーしてください。
■テーマを構成するファイル
・setting.xml
テーマの情報を記述したXMLファイルです。
テーマの名称や概要、アプリケーションの外観、
メニューアイコンやタイムラインの最小幅など、
タイムライン内部以外のすべての設定の記述はここで行います。
・index.htm
Janetterが新しいタイムラインを開くと、このHTMLファイルを読み込みます。
<div id=#timeline>内にツイートが追加されます。
・sample.jpg
Janetterの設定画面で表示されるサムネイル画像です。
高さ300px以内のスクリーンショットをご用意ください。
・css
タイムラインはHTMLで描画されます。
そのHTMLのスタイルを指定するスタイルシートを格納するディレクトリです。
デフォルトではmain.cssを使用します。
※
色違いに対応するため、実態はCommon\cssのmain.css もしくは simple.cssを
使っていることがほとんどです。
・js
HTMLの生成や、動作の制御など、
Janetterのタイムライン処理を定義した
JavaScriptファイルが格納されます。
※
基本的な処理は変わらないので、実態はCommon\jsにあります。
main.jsではそれらをインクルードしているだけです。
・images
オリジナルの画像を使う場合はここに置いてください。
-
[2/4]
＜テーマ作成簡単チュートリアル＞
■チュートリアル
・まずは既存のテーマフォルダを丸々コピーしてリネームします
・setting.xmlで、<Themeinfo><infomation>内の情報を自分の情報に書き換えます
・背景を変更する場合は、<Themeinfo><infomation>を適宜変更します。
・システムアイコンを変更する場合は、<ThemeInfo><SystemMenu><IconInfo>を適宜変更します。
・その他、setting.xmlを変更します。
・別途使いたい画像があれば、imagesフォルダに入れておきます
・CSSを修正したい場合、Common\css\main.css（シンプルテーマをもとにする場合はsimple.css）
をcssフォルダに別名でコピーし、適宜スタイルを設定します。
・main.cssで、先ほど設定したCSSファイルをimportしましょう
（DOM構成については後ほど説明します）
・Janetterを起動し、設定のデザインタブから追加テーマを選んで反映されるか確認しましょう
※
コピーしたテーマを編集しないと、自動アップデート時にテーマが上書きされることがあります。
ご注意ください。
なお公式テーマは不具合修正や改善等で随時更新されます。
作成したテーマに改善点を適用するために、アップデートの度に公式テーマの更新内容を確認することをお勧めします。
■テーマの公開の仕方
テーマフォルダをzipで固めて、拡張子を.janethemeに変えてください。
このファイルをどこかにアップしてTwitterやこのスレッドで告知しましょう。
■Tips
Janetterの特定のタイムラインで、「Ctrl+Alt+Shift+P」を押して、
ブラウザのアドレスバーに貼り付けて移動してみてください。
Janetterのタイムラインと同じものが表示されます。
こうすると、ブラウザのDOMインスペクタなどを使用できるので、
CSS修正が楽になります。
Janetterと同じWebKitを利用したGoogle Chrome
http://www.google.co.jp/chrome/
を用いてデバッグすることをお勧めします。
-
[3/4]
＜DOM構成＞
■吹き出しテーマについて
自分のツイートの場合、tweet-containerと同じ要素に"mytweet"というクラスが追加され、
bubbleクラスがbubble-meクラスになります。
自分へのin_reply_toがついたツイートの場合は、
tweet-containerと同じ要素に"reply"というクラスが追加されます
<div class="tweet-container" id="00000000000000">
<div class="profile-box">
<p class="main-profile"><a href="#"><img src=""></a></p>
<p class="sub-profile"><a href="#"><img src=""></a></p>
<img class="rt" src="../Common/images/ico_rt.gif">
</div>
<div class="bubble"></div>
<div class="tweet-box-wraper">
<div class="tweet-box">
<div class="tweet-content">
<div class="tweet-header">
<span class="name">名前</span></div>
<div class="tweet-body">
<p class="text">text</p></div>
<div class="tweet-footer">
<p class="from">
<span class="screen_name"><a href="#">screen_name</a></span>
<span class="source"> via web</span></p>
<p class="retweetedBy">
Retweeted by <span class="retweeted_screen_name"><a href="#">retweeted_screen_name</a></span></p>
<p class="time">
<a href="#">2010/12/15 14:00:00</a></p>
</div>
<div class="tweet-button">
<ul><li class="do_gear"><a href="#"><img src="../Common/images/gear_tl_off.png"></a></li>
<li class="do_mention"><a href="#"><img src="../Common/images/mention_tl_off.png"></a></li>
<li class="do_retweet"><a href="#"><img src="../Common/images/rt_tl_off.png"></a></li>
<li class="do_favorite"><a href="#"><img src="../Common/images/fav_tl_off.png"></a></li></ul>
</div>
</div>
<div class="tweet-reply-box">
<div class="tweet-reply">
<div class="tweet-reply-header"><a href="#"><img src="#"></a><span class="reply-screen-name">screen_name</span></div>
<div class="tweet-reply-body"><p class="text">reply</p></div>
</div>
</div>
<div class="tweet-thumb">
<a href="#"><img src=""></a>
<a href="#"><img src=""></a>
<a href="#"><img src=""></a>
</div>
</div>
</div>
</div>
-
[4/4]
＜DOM構成＞
■シンプルテーマについて
自分のツイートの場合、tweet-containerと同じ要素に"mytweet"というクラスが追加されます。
自分へのin_reply_toがついたツイートの場合は、
tweet-containerと同じ要素に"reply"というクラスが追加されます
<div class="tweet-container" id="1111111111111111">
<div class="profile-box">
<p class="main-profile"><a href="#"><img src=""></a></p>
<p class="sub-profile"><a href="#"><img src=""></a></p>
<img class="rt" src="../Common/images/ico_rt.gif">
</div>
<div class="bubble"></div>
<div class="tweet-box-wraper">
<div class="tweet-box">
<div class="tweet-content">
<div class="tweet-header">
<span class="name">screen_name</span><a href="#" class="created_at">11:26</a>
</div>
<div class="tweet-body">
<p class="text">text</p>
</div>
<div class="tweet-footer">
<p class="retweetedBy">Retweeted by <span class="retweeted_screen_name"><a href="#">retweeted_screen_name</a></span></p>
</div>
<div class="tweet-button">
<ul>
<li class="do_gear"><a href="#"><img src="../Common/images/gear_tl_off.png"></a></li>
<li class="do_mention"><a href="#"><img src="../Common/images/mention_tl_off.png"></a></li>
<li class="do_retweet"><a href="#"><img src="../Common/images/rt_tl_off.png"></a></li>
<li class="do_favorite"><a href="#"><img src="../Common/images/fav_tl_off.png"></a></li>
</ul>
</div>
<div class="tweet-reply-box">
<div class="tweet-reply">
<div class="tweet-reply-header">
<a href="#"><img src=""></a>
<span class="reply-screen-name">name</span>
</div>
<div class="tweet-reply-body">
<p class="text">text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
-
■フォントを変更したいときは...
・タイムライン内のフォント
例えば、「Simple White」テーマのフォントを 「たぬき油性マジック」にしたい場合
%APPDATA%\Jane\Janetter\Theme\02_Simple\css\main.css を以下のように書き換えます。
@import "../../Common/css/main.css";
@charset "utf-8";
html,body {font-family: "たぬき油性マジック", "Meiryo", "MS PGothic"!important;}
文字コードは UTF-8 で保存してください。
・タイムライン以外のフォント
とにかく、「たぬき油性マジック」にしたい場合
まずJanetter終了して、次のファイルを変更
%APPDATA%\Jane\Janetter\Temp\janetter.xml
Janetter > TempTheme > FontName に たぬき油性マジック と書きます。
こんな感じ
<FontName>たぬき油性マジック</FontName>
これも UTF-8 で保存で
-
シンプルスキンでヘッダーにID、フッターに名前 via クライアント名を表示させたい場合は
やっぱりまたjs弄らないとダメですかね…
-
シンプルwith viaが公式にマージされたので、いつものは終了ですｗ
ありがとうありがとう
Retweeted byフッタは、via sourceフッタの上にしてほしいけど・・
-
ツイート欄を半透過にするにはどうすればいいですかね？
あと、シンプル系テーマで自分の発言を右側表示して、色を変更する機能削除するには？
-
おおお、index.html弄るだけで名前の表示とか変えられるのか
これはいい
-
user_name_styleのところか…
折角ならフッターも同じ方法で変えられたらいいね
-
>>8
相対時間の表示バージョンェ…
-
simple black2でIDとクライアント名が出るようになったのは嬉しいのだが場所を移動したい。
右上の時刻の左側に表示させたいのだけど、何処をどういじれば良いかのヒントを貰えませんか。
-
index.htmlのstyle:のあとをSimpleFullからBaloonに変えてみたり？
-
simple2を使ってるんだが、
「名前(ID)viaクライアント」みたいな表示にするにはどうしたらいんだ？
要はpostの下の行を全部一番上の行に突っ込みたい。
-
オリジナルのひとってオレのこと・・か
弊害がおおきいから、みんな結局使ってないんだと思ってたよ
とある時間表示のカスタマイズ v0.8.0.0b対応
http://www1.axfc.net/uploader/File/so/55388.zip
ヨーグルト食べながら眺めただけだけど、統合されたおまけで
どのスキンでも使えるようになったｗ
-
>>15
http://twitter.com/wamprobo/status/12897662210678784
-
いつもJanetterタグの方で配布してたのですがこちらが出来たのでこちらへ
少しは需要あるみたいなので…
背景に合わせられるようにメニューアイコンの色違い版2種類入り(まぁいつもの黒改です)
ただ この編集の仕方で合ってるのかどうかちょっと不安です 自分が使ってる分には不具合ないですが
取り敢えず使ってみるかって方だけよろしくおねがいします
同梱fileを読んでからお使いください 使用にあたっては自己責任でお願いします
http://www1.axfc.net/uploader/Sc/so/182007.zip
-
>>18です
うpしてから気がついたのですがcommonの中に別にCSS入れなくても出来ましたね
2度手間なインストールのやり方ですみません
-
連投大変申し訳ないです。
一応二度手間なインストールじゃなくしました。上のfileは削除しておきます
http://www1.axfc.net/uploader/Sc/so/182018.zip
-
◆ファイルを差し替えているので、ソフトウェアアップデートにより動作しなくなるおそれがあります。
http://sos3.sakura.ne.jp/SpryAssets/000.jpg
ttp://sos3.sakura.ne.jp/SpryAssets/40.janetheme
http://sos3.sakura.ne.jp/SpryAssets/001.jpg
ttp://sos3.sakura.ne.jp/SpryAssets/41.janetheme
-
◆よくある質問にこたえてみる
%APPDATA%\Jane\Janetter\Theme\HogeHoge\css\main.css にいろいろ追加したらできますよ。
自分ツイートの色指定
.bubble-me{border-left: 7px solid #FFF!important;}
div.mytweet div.tweet-box{background-color: #FFF!important;}
返信ツイートの色指定
div.reply .bubble{border-right: 7px solid #FFF!important;}
div.reply div.tweet-box{background-color: #FFF!important;}
特になんでもないツイートの色指定
.bubble{border-right: 7px solid #FFF!important;}
div.tweet-box{background-color: #FFF!important;}
自分ツイートの透過率変更
.bubble-me,div.mytweet div.tweet-box{opacity:0.75!important;}
返信ツイートの透過率変更
div.reply .bubble,div.reply div.tweet-box{opacity:0.75!important;}
特になんでもないツイートの透過率変更
.bubble,div.tweet-box{opacity:0.75!important;}
>>21 いいね！
-
>>17みたいのはどうやるんだろう
-
>>20
乙です。
カラム幅を広げるとツイート本文が右側に残っていたので、
幅が自動で広がる対処法を以下に示します。
main.cssの、169行目から以下に修正してください。
/* ここは新規追加 */
div.tweet-box-wrapper {
width: 100%;
float: right;
margin-left: -60px;
margin-bottom: 1px;
}
/* ここは既存のを置き換え */
div.tweet-box, div.tweet-box-me {
margin: 0 0 0 40px;
font-size: 100%;
word-break: break-word;
}
|
|
掲示板管理者へ連絡
無料レンタル掲示板
