Home > 2010年09月

2010年09月 Archive

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

Eye catch tool - Hard type

  • Posted by: Black vicuna
  • 2010-09-11 Sat 20:18:27
  • Customize

Vicuna Skin Hard type(Bazooka,Future,)はスキンとアイキャッチが繋がっています。
このスキンにアイキャッチを付けるには画像編集ソフトやアイキャッチ画像作成ツールが便利です。

アイキャッチ画像自動作成ツールのようなもの


Hard type アイキャッチ適用手順

1. 画像をツールへアップロード
2. リサイズされた画像をダウンロード
3. Fc2ブログへ画像をアップロードしてurlを取得
4. スタイルシート編集 > eye-u の画像url を変更
5. HTML編集 > bodyクラス名を eye-u に変更

リサイズ後、左の画像のように枠が付きます。

注意:直リンクでの使用はご遠慮ください
(データの定期削除時に一緒に消えてしまいます)

Author
輝竜司さん
web site
citrocube
tool
アイキャッチ画像自動作成ツールのようなもの
Link
Vicunaのアイキャッチ画像作成ツール

Hard type.psd

画像編集に詳しい人はもしかしたら下記ページが何か参考になるかも知れません。

style-bazooka
http://vicuna.jp/storage/document/skin/bazooka/
style-future
http://vicuna.jp/storage/document/skin/futura/
style-warship
http://vicuna.jp/storage/document/skin/warship/
  • Comments (Close): -
  • TrackBack (Close): -

Archives

  • Posted by: Black vicuna
  • 2010-09-11 Sat 20:16:01
  • Archives

このブログのその他、全記事です。
タイトルと内容を書いておきました。

Template & Skin Archive

XHTML Template List
Fc2.Vicunaのテンプレートをバージョンごとに保存してます。ちょっとした解説付きです。
Fc2.Vicuna Skin Archive
すべてのスキンをバージョンごとに区分して、利用可能な状態で保存しています。
Vicuna2.0 Preveiw + CSS
2008-2010頃のスキンを利用可能な状態で保存しています。ちょっとした解説付きです。

Customize

Eye catch tool - Hard type
Hard typeに活用できるアイキャッチツールとpsdファイルの紹介です。
GlobalNavi Current Customize
グローバルナビのカレント対応のカスタマイズ方法です。
Fc2 Vicuna Plugin
Vicunaのプラグインを分解してXHTMLソースにしました。
サイドバープラグインエリア内で上下移動や個別で表示・非表示を選択することができるようになります。
3.5ping.org + Vicuna tagcloud
wuさんのブログからタグクラウドCSSをお借りしました。
Fc2.Vicunaでも利用出来るように分解してCSSソースにしました。

Tips

Column Layout 2.0
2008-2010頃のスキンのレイアウト変更方法について解説しています。
Eye catch Layout 2.0
2008-2010頃のスキンのアイキャッチ変更方法について解説しています。
  • Comments (Close): -
  • TrackBack (Close): -

Customize - Layout

  • Posted by: Black vicuna
  • 2010-09-11 Sat 20:11:57
  • Customize

レイアウトの確認

レイアウトの変更手順

  1. Fc2の管理画面 > テンプレートの設定から、テンプレート編集を開きます。
  2. HTML編集のソース中、bodyタグに注目します。(6~8箇所)
  3. bodyのclass属性の値には、ページの種類を識別する値とレイアウトを決定する値が設定されています。例: <body class="テンプレート識別名 double">
  4. このページで紹介するレイアウトに対応したclassの値を指定し。更新すれば適用されます。

すべてのクラスは複数組み合わせて指定することができます。

Column Layout

Single column

  • Single column
class
single
Example
<body class="mainIndex single">

Double column - Menu on right

  • Single column
class
double
Example
<body class="mainIndex double">

Double column - Menu on left

  • Single column
class
double-l
Example
<body class="mainIndex double-l">

Multi column - Wing menu

  • Single column
class
multi
Example
<body class="mainIndex multi">

Multi column - Double menu

  • Single column
class
multi2
Example
<body class="mainIndex multi2">

Multi column - Double menu on left

  • Single column
class
multi2-l
Example
<body class="mainIndex multi2-l">

Eye Catch Image

Eye catch - Header area

  • Single column
class
eye-h
Example
<body class="mainIndex double eye-h">

Eye catch - Header area (Banner type)

  • Single column
class
eye-hb
Example
<body class="mainIndex double eye-hb">

Eye catch - Contents area

  • Single column
class
eye-c
Example
<body class="mainIndex double eye-c">

Eye catch - Main area

  • Single column
class
eye-m
Example
<body class="mainIndex double eye-m">

Combination

すべてのクラスは半角スペースで区切って組み合わせて指定できます。

ここでは実用的なレイアウトの組み合わせを一部のみ紹介いたします。

Multi column + Eye catch Header

  • Single column
Example
<body class="mainIndex multi eye-h">

Double column + Eye catch Header (Banner Type)

  • Single column
Example
<body class="mainIndex double eye-hb">

Multi column + Eye catch Content

  • Single column
Example
<body class="mainIndex multi eye-c">

Single column + Eye catch Header

  • Single column
Example
<body class="mainIndex single eye-h">

Multi column + Eye catch Main

  • Single column
Example
<body class="mainIndex multi eye-m">

Multi column - Double menu + Eye catch Main

  • Single column
Example
<body class="mainIndex multi2 eye-m">

Special Layout Sets

以下の3つのクラスの組み合わせにより、特別に設計したレイアウトを使用できます。

Special layout 1

  • Single column
Example
<body class="mainIndex multi eye-c set1">

Special layout 2

  • Single column
Example
<body class="mainIndex multi2 eye-c set2">

Others

Hard Type + Eye catch

Hard type (bazooka,future) テンプレート左上に、スキンと一体化されたアイキャッチが付きます。

class
eye-u
Example
<body class="mainIndex double eye-u">
Link
Eye catch tool - Hard type

Navigation on top

グローバルナビゲーションをページ最上部に移動します。

class
gt
Example
<body class="mainIndex double gt">

Left align

中央寄せを解除して全体を左寄せにします。

class
al
Example
<body class="mainIndex double al">

Fixid width

全体を固定幅にします。800px~1000pxまでの設定が50px刻みで用意してあります。

class
f800, f850, f900, f950, f1000
Example
<body class="mainIndex double f850">
Memo
layout.cssの冒頭にある幅の指定を直接編集したほうが細かい設定が可能です。
  • Comments (Close): -
  • TrackBack (Close): -

How to use

  • Posted by: Black vicuna
  • 2010-09-11 Sat 20:06:52
  • Customize
  1. このブログのお好きなテンプレート・スキンのソースをコピー。
  2. テンプレートソースをFc2管理画面 > HTML編集にペースト。
  3. スキンソースをFc2管理画面 > スタイルシート編集にペースト。
  4. 後は更新ボタンを押して完了。
  • Comments (Close): -
  • TrackBack (Close): -

Fc2.Vicuna Skin Archive

  • Posted by: Black vicuna
  • 2010-09-11 Sat 20:02:40
  • Archives
how to use
  1. Fc2 blog 管理画面 > 「テンプレートの設定」から既存のVicuna Skin編集画面に進みます。
  2. スタイルシートの編集欄のCSSソースコードを全て消して下さい。(消す前に複製してバックアップしておくと安心です。)
  3. このページのお好きなSkinのCSSソースコードをコピーし、スタイルシートの編集欄に貼り付けて更新ボタンを押せば完了です。
Download
xxxx.css を、クリックするとCSSソースコードがテキストファイルで表示されます。コピーペーストしてご利用ください。
Skin Ver.
同名バージョン違いのスキンが多数存在するために、バージョンを表記しています。
  • 2007年頃、Fc2共有テンプレート からリリースされたものをVicuna1.0
  • 2008年頃、Fc2共有テンプレート または、Black VicunaからリリースさたものをVicuna2.0
  • 2010年頃、Black VicunaからリリースさたものVicuna3.0
  • 2010年頃、Fc2共有テンプレート または、WikunaからリリースされたものをWikuna3.0
XHTML Template
XHTMLのDownloadはこちらをご利用下さい。XHTML Template List

Continue reading

  • Comments (Close): -
  • TrackBack (Close): -

Template

  • Posted by: Black vicuna
  • 2010-09-06 Mon 09:32:25
  • Archives

IE系ブラウザの方はXHTMLソースを右クリックし 対象をファイルに保存 → 拡張子を 任意の文字列.txt にしてダウンロード後にコピペしてご利用下さい。

Vicuna template 詳細ページ

  • Comments (Close): -
  • TrackBack (Close): -

Index of all entries

Home > 2010年09月

Tag Cloud
Vicuna

Vicuna CMS

Return to page top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。