Top / スキンとアイコン2

スキンとアイコン2

Last-modified: 2015-03-31 (火) 20:59:09

 
 

スキン †

↑

前準備 †

  • このページではスキンとアイコン1でダウンロードした紅葉が綺麗な「sj7_240」スキンをもとに説明していきます
     
  • まず「sj7_240」スキンをコピーして「sj7_240 - コピー」ファイルを作ります
    スキンファイルコピー.png
 
↑

スキンフォルダの内訳 †

  • それではコピーしたフォルダの中を見てみましょう
    スキンファイル中身.png
    HTMLファイルとPINGファイルでワンセットです
    背景には背景のPINGファイルと背景のHTML Documentが
    ブックマークにはブックマークのPINGファイルとブックマークのHTML Documentがそれぞれ用意されています
    (インターネットエクスプローラーを使用している人はHTMLファイルにはインターネットエクスプローラーのアイコンが表示されます)
 
  • ファイルの何もない所で右クリックして「表示(V)」-「大アイコン(R)」でアイコンを大きくすると分かり易いです
    大アイコン.png
  • 背景画像はPINGファイルの「bg4」とHTMLファイルの「Header」
    ブックマーク画像はPINGファイルの「bm3」とHTMLファイルの「BookMark」
    レス番号からIDまでを囲むバーの画像はPINGファイルの「top」とHTMLファイルの「Res」
    新レス用のレス番号からIDまでを囲むバーの画像はPINGファイルの「top_new」とHTMLファイルの「NewRes」
    「PopupRes」はポップアップレスの装飾らしいです、良く分かりません(画像が指定できるわけではないので放置します)
    • この中で「bg3」ファイルと「bm」の画像ファイルは使われていない画像ファイルなので削除しておきます
       
  • そういうわけでつまり「bg4」の画像を差し替えれば背景が、「bm3」の画像を差し替えればブックマークが
    「top」を差し替えればレスのバーが、「top_new」を差し替えれば新レスのバーが改造できるわけです
 
↑

画像の差し替え †

  • 背景はPINGファイルで「bg4」という名前にすれば機能します
    自分で作ってもいいしフリー素材などをダウンロードしてくるのもいいです
    ただしレスが読み易い色や模様の画像を選ぶのが大原則です
    「テクスチャ　フリー素材」や「背景　画像」などのキーワードでグーグルで検索してみましょう
    こちらのサイトもおすすめです→コリス[外部リンク](「テクスチャ」や「パターン」でサイト内検索してみましょう)
     
  • ブックマークはPINGファイルで「bm3」という名前にすれば機能します
    フリー素材の透過PNG画像を使うと綺麗です
    「フリー素材」でグーグルで検索してみましょう
    個人的なオススメはフリー素材*ヒバナ * *[外部リンク]さんのアイコンやライン素材の透過PNG画像と
    罫線 FREE LINE DESIGN[外部リンク]さんの罫線の透過PNG画像です
     
  • レスのバー、新レスのバー
    自作するか他のスキンから気に入った画像を持ってくるかのどちらかになります
    必要ない場合は「Res」「NewRes」「PopupRes」「top」「top_new」の5つのファイルを削除してしまいましょう
 
↑

アイコン †

↑

前準備 †

ここではツールバーのアイコンについて説明していきます

 
  • まずは元になるアイコン画像を用意しましょう
    ゼノフォルダの中の「Option」-「listimage」にゼノのデフォルトのツールバーのアイコンが入っています
    「listimg」と「mtoolimg」と「ttoolimg」です
     
  • 「設定」-「基本」-「パス」-「スキンのフォルダ(次回起動時から有効)」で指定しているスキンのフォルダに
    コピーしたツールバーの画像を置きます
    「sj7_240」スキンを使っているなら「sj7_240」フォルダの中です
     
  • スキンを指定していなければJane2ch.exeの置いてあるフォルダに置きます
     
  • ファイルの種類はビットマップイメージ(拡張子は「.bmp」)です
  • この画像に任意のアイコン画像を切り貼りしてアイコン画像を作ります
  • あと三つ画像が足りないので「listimg」でも「mtoolimg」でも「ttoolimg」でも構いませんのでコピペして
    名前を「go」と「searchimg」と「memoimg」に書き換えておきましょう
 
 
  • 次に使いたいアイコンの画像を用意しましょう
    Jane2chのアイコンと違ってアイコン専用画像である必要はありません(PNG画像でも何でもいいです)
    「フリー アイコン 16×16」でグーグルで画像検索するのが確実です
    Jane2chのアイコンの時のようにGigazine[外部リンク]で探すのも手です
 
↑

アイコンの並び †

  • 「listimg」
    板ツリーとスレ欄に使われるアイコンです
    listimg二倍.png
    左から
    • 板ツリーのフォルダ
    • 板ツリーの板
       
    • 板ツリー及びスレ欄のDAT未取得のスレ
    • 板ツリー及びスレ欄のDAT取得済みのスレ
       
    • スレ欄の未取得の新着レスのあるスレ
    • スレ欄の取得済みのレスが全て既読状態のスレ
    • スレ欄の未取得の新着レスのある印付きスレ
    • スレ欄の取得済みのレスが全て既読状態の印付きスレ
    • スレ欄のDAT落ちしたスレ--DAT落ちした印付きスレ
    • スレ欄の取得済みのレスに未読レスがあるスレ
    • スレ欄の取得済みのレスに未読レスがある印付きスレ
    • スレ欄の～時間以内に建ったスレ
      • 「設定」-「外観」-「スレ欄項目」の「●●時間以内の新スレを！でチェック」で指定された時間内に
        建てられたスレ
    • スレ欄の新着スレ
      • 直前のスレ覧更新以前には存在しなかったスレ
 
  • 「mtoolimg」
    メインツールバーのアイコンです
    mtoolimg二倍.png
    左から
    • 縦⇔横分割切り替え
    • 縦⇔横分割切り替え(戻す)
    • 2⇔3ペイン切り替え
    • 板ツリー表示
    • 右側切り替え
       
    • 設定
    • 更新
    • スレッド新規作成
    • スレ絞込み検索
    • ログから検索
    • ヘルプ
    • オンライン
    • オフライン
    • 更新チェック
    • 更新チェック(中止)
 
  • 「ttoolimg」
    スレッドツールバーのアイコンです
    ttoolimg二倍.png
    左から
    • 新着までスクロール
    • 新着チェック/すべてのタブの新着チェック
    • レス
    • お気に入りに追加
    • ログを削除
    • タブを閉じる
    • 中止
    • レス抽出
    • 表示レス数
    • オートリロード・スクロール
    • 次スレ候補検索
    • 人気レス
    • 画像
    • リンク
 
  • 「go」
    アドレスバーの移動ボタンのアイコンです
    go二倍.png
    • 移動
 
  • 「searchimg」
    検索バーのアイコンです(本物が用意できませんでしたので、間に合わせの偽物画像です)
    偽searchimg二倍改.png
    左から
    • 通常検索
    • migemo検索
      • 「設定」-「検索・更新」-「検索方法」で「migemo検索」が選べます
    • 正規検索
    • ？？？(見たことないです一度も)
    • 抽出
    • 隠す
    • ？？？(見たことないです一度も)
    • ？？？(見たことないです一度も)
 
  • 「memoimg」
    メモ欄のアイコンです(AAのアイコンは書き込み欄でも使用されています)
    memoimg二倍改.png
    左から
    • 名前を付けて保存
    • ファイルを開く
    • メモをクリア
    • AA入力支援
    • 次のタブへ
    • 前のタブへ
 
↑

アイコン画像を編集するその前に †

  • 注意点です
    • アイコンの背景がピンクになっていますが
      このピンクの部分は実際には表示されない部分、つまり透過されて見えなくなる部分です
      これと同じピンク色を使って塗った箇所は全て透過されます
    • 「go」と「searchimg」と「memoimg」についてですが
      編集し易いように下敷きになる画像を用意しました(必要なければ次の項目に進んでください)
      こちらを右クリックして「名前を付けて保存」で画像を一旦保存して
      「go」と「searchimg」と「memoimg」にそれぞれ貼り付けて、その上で改めてアイコン画像を編集します
       
      go
      やっつけgo.png
       
      searchimg
      やっつけsearchimg.png
       
      memoimg
      やっつけmemoimg.png
       
    • 自分にとって使い易い、分かり易いと思うアイコン画像を使いましょう
      自分にさえアイコンの意味が通じればいいので、無理して同じ形のアイコンを探す必要はありません
 
↑

アイコン画像を編集する †

  • それでは元になるアイコン画像をペイントで編集しましょう
    アイコン画像をダブルクリックして「開く」-「ペイント」です
    開くペイント.png
     
    貼り付けたいアイコン画像を「貼り付け」-「ファイルから貼り付け」で呼び出します(編集し易いように画像を拡大しています)
    ファイルから貼り付け.png
     
    呼び出した画像を貼り付けます
    ファイル画像貼り付け.png
    この繰り返しです
     
    透過したい部分をピンクで塗ることを忘れずに
    ツールの「色の選択」で透過部分に使われているピンクの色をコピーして使ってください
    (ちょっとでも違う色を使うと透過されません)
    スポイト.png
 

色々カスタマイズしていくと、最終的にこんなのが出来上がったり

スキン青色.png

こんなのが出来たりします

スキンかくしか.png