Develop and Download Open Source Software

ギコナビ

edit | PDF | Title Index |  Recent Changes  | 

最近の更新

2012-02-17
2012-01-07
2011-07-18
2011-04-03

Wikiガイド

サイドバー

Up: Tips

スキン改造

ギコナビ用スキンの改造について紹介するページです。

  • 旧Wikiで2005年7月24日に作成された内容をそのまま移行しました。改めて動作確認はしていません。
  • skin30-2G_IE7/skin30-3G_IE7に適用可能かどうかも検証していません。
  • 「レスのURLをコピー」については、ﾊﾞﾀ60から本体の機能としてレス番号左クリックメニューに追加されています。
  • インストール時に付属しているスキンやCSSのファイルをそのまま編集した場合、ギコナビのアップデート時に上書きされてしまいます。スキンの場合は別名でフォルダごとコピーを作成し、そちらを編集したほうがいいでしょう。
  • 文中の「○行目」は物理行を指しています。当ページ閲覧時、Webブラウザのウィンドウサイズ等により折り返しが発生する場合がありますが、コード引用部(背景色グレー)の内部をマウスドラッグで選択→コピーし、テキストエディタ等に貼り付ければ表示改行の影響を受けることはありません。
Outline

skin30-xG　～２ちゃんねる風カスタマイズ

skin30-2G/3Gの見た目を、IEで２ちゃんねるを見たときとほぼ同じに見えるように変更します。
skin30-xGのレスタイトル行の色分けは見やすいと思うので生かして、これ以外の全体の見た目を２ちゃんねる標準に近く、目に優しく（リンクの色とかを若干調整してます）シンプルに・・・といったコンセプトです。
（ID・レス番号の色分け機能のために、当初より多少派手な見た目になってしまいましたが・・・汗）

　

日時・IDやレス番号に色が付いているのは、ギコナビ ﾊﾞﾀ50同梱のskin30-xGで追加された新機能です。
書き込みが複数あるIDや、レスの付いているレス番号が色分けされます。通常のIDやレス番号は標準色の黒です。
このカスタマイズ説明ではギコナビ ﾊﾞﾀ50同梱のskin30-xGを使用していますが、これ以前のskin30-xGでも同様にカスタマイズ可能です。

ギコナビのオプション内のフォントと背景色の指定は不要なのでチェックを外して下さい。

  • chie_mail.js（追加ファイル）
    同じskin30-2作者さんが作られたchie_mail.jsを追加して使用しています。
    http://chiefan.at.infoseek.co.jp/skin/ のダウンロードページから、「2ch風味＋age,sageチェック」2ch.zipをダウンロードして解凍し、その中のchie_mail.jsをギコナビのskin30-2G or skin30-3Gのフォルダに入れて下さい。
    また、skin30-2作者さんがchie_mail.jsのみを直接ダウンロードできるようにして下さったので、そちらからも入手可能です。
    　http://chiefan.at.infoseek.co.jp/skin/chie_mail.js
  • Bookmark.html
    <dt style="text-align:center;"><a name="koko"></a>ココまで読んだ</dt><dd></dd>
    「"text-align:center;"」の後に、 「 class="koko"」 を挿入
    　　↓変更結果 
    <dt style="text-align:center;" class="koko"><a name="koko"></a>ココまで読んだ</dt><dd></dd>
  • chie_base.css
    /* ふち無し */
body   {margin:0px;padding:0px;}
    の「margin:0px;」の前に、 「background-color:#EFEFEF;」 を挿入
    　　↓変更結果 
    /* ふち無し */
body   {background-color:#EFEFEF;margin:0px;padding:0px;}
    ※全体の背景色の指定。ギコナビのオプション内で背景色を指定すると、そちらが優先されます。 
    /* リンク */
dt a{text-decoration:none;}
    の次に、以下の行を挿入 
    dt span a{text-decoration:underline;}
    　　↓変更結果 
    /* リンク */
dt a{text-decoration:none;}
dt span a{text-decoration:underline;}
    ※Beのプロフィールへのリンクに下線を付加。ﾊﾞﾀ50より前のギコナビにはこの機能は無いので、変更の必要なし。 
    /* dt */
dt{
 padding:0.3em;
 border-width:1px 0px;
 border-color:#999;
 border-style:solid;
    の下３行それぞれの前後に、 「/*」「*/」 を挿入
    　　↓変更結果 
    /* dt */
dt{
 padding:0.3em;
/* border-width:1px 0px;*/
/* border-color:#999;*/
/* border-style:solid;*/

    /* ID */
dt span{
 float:right;
/* margin-left:1em;*/
 margin-top:-23px;
 margin-right:0.5em;
 font-family:"ＭＳ ゴシック";
 font-size:95%;
    の３行目と５～８行目それぞれの前後に 「/*」「*/」 を挿入、４行目の前後の 「/*」「*/」 を削除
    　　↓変更結果 
    /* ID */
dt span{
/* float:right;*/
 margin-left:1em;
/* margin-top:-23px;*/
/* margin-right:0.5em;*/
/* font-family:"ＭＳ ゴシック";*/
/* font-size:95%;*/
    さらにその３行下に以下の行があれば（ﾊﾞﾀ50より前のskin30-xGにはこの行は無し）、 
    dt span a{font-family:"ＭＳ ゴシック";}
    この行の前後に、 「/*」「*/」 を挿入
    　　↓変更結果 
    /*dt span a{font-family:"ＭＳ ゴシック";}*/
  • chie_blue.css
    dt a        {border:1px solid #EEE;}
    　　↓以下へ変更 
    dt a        {border:1px solid #E0E0E0;}

    dt a:hover  {color:#F00; background-color:#FDD; border-color:#F44;}
    の次に、以下の２行を挿入 
    dt span a:link   {color:#0000CD;}
dt span a:visited{color:#800080;}
    　　↓変更結果 
    dt a:hover  {color:#F00; background-color:#FDD; border-color:#F44;}
dt span a:link   {color:#0000CD;}
dt span a:visited{color:#800080;}
    ※Beのプロフィールへのリンクの色を変更。ﾊﾞﾀ50より前のギコナビにはこの機能は無いので、変更の必要なし。
    　 私の好みで色を若干調整しています。
    　 ２ちゃんねる標準と同一にしたい場合は、以下のように変更します。 
    dt a:hover  {color:#F00; background-color:#FDD; border-color:#F44;}
dt span a:link   {color:#0000FF;}
dt span a:visited{color:#660099;}

    dd a:link   {color:#06559B;}
dd a:visited{color:#669;}
dd a:active {color:#F55; background-color:#FDD;}
dd a:hover  {color:#F55; background-color:#FDD;}
    　　↓以下へ変更 
    dd a:link   {color:#0000CD;}
dd a:visited{color:#800080;}
dd a:active {color:#F22; background-color:#FDD;}
dd a:hover  {color:#F22; background-color:#FDD;}
    ※私の好みで色を若干調整しています。
    　 ２ちゃんねる標準と同一にしたい場合は、以下のように変更します。 
    dd a:link   {color:#0000FF;}
dd a:visited{color:#660099;}
dd a:active {color:#F00; background-color:#EFEFEF;}
dd a:hover  {color:#F00; background-color:#EFEFEF;}

    dt      {background-color: #EEE;}
dt.new  {background-color:#DCEAF5;}
    の１行目の 「 #EEE」 を 「#E0E0E0」 に変更し、２行目の次に以下の行を挿入 
    dt.koko {background-color:#C0FAC0;}
    　　↓変更結果 
    dt      {background-color:#E0E0E0;}
dt.new  {background-color:#DCEAF5;}
dt.koko {background-color:#C0FAC0;}
  • chie_search.js
    threshold1=[2,"#0000FF"]; // 書き込みが複数あるID のしきい値と色
threshold2=[5,"#FF0000"]; // 書き込みが多数あるID のしきい値と色
threshold3=[1,"#0000FF"]; // 書き込みがある    レス のしきい値とレス番号の色
threshold4=[4,"#FF0000"]; // 書き込みが多数あるレス のしきい値とレス番号の色
    　　↓以下へ変更 
    threshold1=[2,"#0011CC"]; // 書き込みが複数あるID のしきい値と色
threshold2=[5,"#CC0099"]; // 書き込みが多数あるID のしきい値と色
threshold3=[1,"#0011CC"]; // 書き込みがある    レス のしきい値とレス番号の色
threshold4=[4,"#CC0099"]; // 書き込みが多数あるレス のしきい値とレス番号の色
    ※ﾊﾞﾀ50より前のskin30-xGには上の部分は無いので、変更の必要なし。
    　 私の好みで色を調整しています。初期設定の原色の青と赤でよければ、変更の必要なし。
    　 ID・レス番号の色分け機能自体を無効にしたい場合は、ファイル２行目の「coloring=1;」を「coloring=0;」に変更します。
  • Footer.html
    ファイルの１行目 
    <dt id="sizeinfo">　<span><SIZEKB/>KB (<SIZE/>Byte) <script type="text/javascript">
    の「<span」の後に 「 style="color:red"><b」 を、「<SIZEKB/>KB」の後に 「</b>」 を挿入
    　　↓変更結果 
    <dt id="sizeinfo">　<span style="color:red"><b><SIZEKB/>KB</b> (<SIZE/>Byte) <script type="text/javascript">
  • Header.html
    ファイルの１行目 
    <html lang="ja">
    の 「 lang="ja"」 を削除
    　　↓変更結果 
    <html>
    ファイルの１３行目（skin30-2Gでは１４行目） 
    <!--script type="text/javascript" charset="Shift_JIS" src="<SKINPATH/>chie_mail.js"></script-->
    の前後の 「!--」「--」 を削除
    　　↓変更結果 
    <script type="text/javascript" charset="Shift_JIS" src="<SKINPATH/>chie_mail.js"></script>
    ファイルの最後の２行（skin30-2Gでは、２行目は <dl id="dl"> ） 
    <body>
<dl>
    の間に、以下の行を挿入 
    <h1 style="color:red;font-weight:normal;font-size:120%;margin:15px 0px;padding-left:10px"><THREADNAME/></h1>
    　　↓変更結果 
    <body>
<h1 style="color:red;font-weight:normal;font-size:120%;margin:15px 0px;padding-left:10px"><THREADNAME/></h1>
<dl>

skin30-xG　～レスのURLをコピー

元ネタはこちら↓
　ギコナビに対する要望を書き殴るスレッド
　http://flounder.s27.xrea.com/bbs/test/read.cgi/giko/1090079053/79-95
skin30-2G/3Gでレス番号を長押しして出るメニューに、「URLをコピー」及び「スレッド名とURLをコピー」を追加します。
レス番を含むスレッドURLをコピペしたいときにちょっと便利・・・かも。
２ちゃんねると非公式ギコナビ板、したらばJBBSのスレッドURL形式に対応。

  • chie_event.js
    //コピーメニュー→colorChange(),search::copyText()
function copyMenu(){
 clickCancel=true; clearTimeout(clickTimer);
 if(document.getElementById("context")){document.getElementById("context").removeNode(true);}
 var nHTML='<div id="context"（～中略～）"colorChange()">IDをコピー</div></div>';
    の最下行の「IDをコピー</div>」の後に、 「<div onclick="copyText(\'resurl\')" onmouseover="colorChange()" onmouseout="colorChange()">URLをコピー</div><div onclick="copyText(\'titresurl\')" onmouseover="colorChange()" onmouseout="colorChange()">スレッド名とURLをコピー</div>」 を挿入
    　　↓変更結果 
    //コピーメニュー→colorChange(),search::copyText()
function copyMenu(){
 clickCancel=true; clearTimeout(clickTimer);
 if(document.getElementById("context")){document.getElementById("context").removeNode(true);}
 var nHTML='<div id="context" name="'+e.innerText+'"><div onclick="copyText(\'res\')" onmouseover="colorChange()" onmouseout="colorChange()">レスをコピー</div><div onclick="copyText(\'name\')" onmouseover="colorChange()" onmouseout="colorChange()">名前をコピー</div><div onclick="copyText(\'id\')" onmouseover="colorChange()" onmouseout="colorChange()">IDをコピー</div><div onclick="copyText(\'resurl\')" onmouseover="colorChange()" onmouseout="colorChange()">URLをコピー</div><div onclick="copyText(\'titresurl\')" onmouseover="colorChange()" onmouseout="colorChange()">スレッド名とURLをコピー</div></div>';
  • chie_search.js
    //==========クリップボードにコピー
function copyText(target){
 var num=event.srcElement.parentElement.name;
 var obj=getDTfromAnc(num);
 var textarea=document.createElement("TEXTAREA");
 var message=obj.nextSibling.innerText.replace(/\s(\r\n|$)/g,"\n");
    の次に、以下の２行を挿入 
     var url=document.getElementsByName("ThreadURL")[0].content;
 var t_title=document.title;
    さらにその下の 
     if     (target=="res") {textarea.value=obj.firstChild.innerText+" ："+obj.childNodes[1].innerText+" ："+obj.lastChild.innerText+"\n"+message;}
 else if(target=="name"){textarea.value=obj.childNodes[1].innerText+"\n";}
 else if(target=="id")  {textarea.value="ID:"+(obj.lastChild.innerText.split(/ID:/))[1]+"\n";}
    の次に、以下の１０行を挿入 
     else if(target=="resurl"){
  if     (url.search("l50")!=-1)  {textarea.value=url.replace("l50","")+obj.firstChild.innerText+"\n";}
  else if(url.search("l100")!=-1) {textarea.value=url.replace("l100","")+obj.firstChild.innerText+"\n";}
  else if(url.search("ls=50")!=-1){textarea.value=url.replace("ls=50","")+"st="+obj.firstChild.innerText+"&to="+obj.firstChild.innerText+"\n";}
 }
 else if(target=="titresurl"){
  if     (url.search("l50")!=-1)  {textarea.value=t_title+"\n"+url.replace("l50","")+obj.firstChild.innerText+"\n";}
  else if(url.search("l100")!=-1) {textarea.value=t_title+"\n"+url.replace("l100","")+obj.firstChild.innerText+"\n";}
  else if(url.search("ls=50")!=-1){textarea.value=t_title+"\n"+url.replace("ls=50","")+"st="+obj.firstChild.innerText+"&to="+obj.firstChild.innerText+"\n";}
 }

skin30-xG　～ID・レス番号の色分けの数を増やす

ギコナビ ﾊﾞﾀ50同梱のskin30-2G/3Gで追加されたID・レス番号の色分け機能の、色数を増やします。
例として、書き込みが10以上のID、レスが7以上付いたレス番号を、それぞれ緑色に変えてみます。

  • chie_search.js
    threshold1=[2,"#0000FF"]; // 書き込みが複数あるID のしきい値と色
threshold2=[5,"#FF0000"]; // 書き込みが多数あるID のしきい値と色
threshold3=[1,"#0000FF"]; // 書き込みがある    レス のしきい値とレス番号の色
threshold4=[4,"#FF0000"]; // 書き込みが多数あるレス のしきい値とレス番号の色
    　　↓２行を挿入して、以下へ変更 
    threshold1=[2,"#0000FF"]; // 書き込みが複数あるID のしきい値と色
threshold2=[5,"#FF0000"]; // 書き込みが多数あるID のしきい値と色
threshold5=[10,"#00FF00"];// 書き込みが非常に多数あるID のしきい値と色
threshold3=[1,"#0000FF"]; // 書き込みがある    レス のしきい値とレス番号の色
threshold4=[4,"#FF0000"]; // 書き込みが多数あるレス のしきい値とレス番号の色
threshold6=[7,"#00FF00"]; // 書き込みが非常に多数あるレス のしきい値とレス番号の色
    ※上は、初期設定の原色の青と赤に、原色の緑を追加する場合。
    　 「skin30-xG　～２ちゃんねる風カスタマイズ」で紹介している色合いにする場合は、以下の通り。 
    threshold1=[2,"#0011CC"]; // 書き込みが複数あるID のしきい値と色
threshold2=[5,"#CC0099"]; // 書き込みが多数あるID のしきい値と色
threshold5=[10,"#008000"];// 書き込みが非常に多数あるID のしきい値と色
threshold3=[1,"#0011CC"]; // 書き込みがある    レス のしきい値とレス番号の色
threshold4=[4,"#CC0099"]; // 書き込みが多数あるレス のしきい値とレス番号の色
threshold6=[7,"#008000"]; // 書き込みが非常に多数あるレス のしきい値とレス番号の色

        if     (idResult.length>=threshold2[0]){span.style.color=threshold2[1];span.title="同一ID ("+idResult.length+"回)\n"+idHash[t]}
    else if(idResult.length>=threshold1[0]){span.style.color=threshold1[1];span.title="同一ID ("+idResult.length+"回)\n"+idHash[t]}
    else if(idResult.length==1){span.title="同一IDは\nありません"}
    １行目の「if」の前に 「else 」 を挿入し、さらにその行の前に以下の行を挿入 
        if     (idResult.length>=threshold5[0]){span.style.color=threshold5[1];span.title="同一ID ("+idResult.length+"回)\n"+idHash[t]}
    　　↓変更結果 
        if     (idResult.length>=threshold5[0]){span.style.color=threshold5[1];span.title="同一ID ("+idResult.length+"回)\n"+idHash[t]}
    else if(idResult.length>=threshold2[0]){span.style.color=threshold2[1];span.title="同一ID ("+idResult.length+"回)\n"+idHash[t]}
    else if(idResult.length>=threshold1[0]){span.style.color=threshold1[1];span.title="同一ID ("+idResult.length+"回)\n"+idHash[t]}
    else if(idResult.length==1){span.title="同一IDは\nありません"}

       if     (refResult.length>=threshold4[0]){numA.style.color=threshold4[1];dts[i].title="これへのレス ("+refResult.length+"個)\n"+refHash[num];}
   else if(refResult.length>=threshold3[0]){numA.style.color=threshold3[1];dts[i].title="これへのレス ("+refResult.length+"個)\n"+refHash[num];}
   else{numA.title="これへのレスはない模様"}
    １行目の「if」の前に 「else 」 を挿入し、さらにその行の前に以下の行を挿入 
       if     (refResult.length>=threshold6[0]){numA.style.color=threshold6[1];dts[i].title="これへのレス ("+refResult.length+"個)\n"+refHash[num];}
    　　↓変更結果 
       if     (refResult.length>=threshold6[0]){numA.style.color=threshold6[1];dts[i].title="これへのレス ("+refResult.length+"個)\n"+refHash[num];}
   else if(refResult.length>=threshold4[0]){numA.style.color=threshold4[1];dts[i].title="これへのレス ("+refResult.length+"個)\n"+refHash[num];}
   else if(refResult.length>=threshold3[0]){numA.style.color=threshold3[1];dts[i].title="これへのレス ("+refResult.length+"個)\n"+refHash[num];}
   else{numA.title="これへのレスはない模様"}

[PageInfo]  LastUpdate: 2009-06-20 20:54:27, ModifiedBy: concertogrosso
[Permissions]  view:all, edit:all, delete/config:project members
[IRI]  http://sourceforge.jp/projects/gikonavi/wiki/Tips/CustomizeSkins

About SourceForge.JP
Find Software
Develop Software
Community
Help
SourceForge.JP is a Japanese version of SourceForge.net. For developments that are not related to Japan, we recommend you to use SourceForge.net.