Home > Customize
Customize Archive
Optimization
- 2015-12-09 (Wed)
- Customize
Black VicunaはVicuna CMSがリリースしたテンプレートとスキンをFc2ブログへ最適化し配布しています。 Wikunaで配布していたスキン・テンプレートも再配布しています。
主な特徴
- Web標準に則った無駄の無いシンプルなHTML
- SEOを高めるサイト内リンク構造
- 簡単にカスタマイズ可能な専用CSSスキン
- シンプルだから表示が早い
- 個人・商用サイトともに利用可能
- Comments (Close): -
- TrackBack (Close): -
Eye catch tool - Hard type
- 2010-09-11 (Sat)
- 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): -
Customize - Layout
- 2010-09-11 (Sat)
- Customize
レイアウトの確認
レイアウトの変更手順
- Fc2の管理画面 > テンプレートの設定から、テンプレート編集を開きます。
- HTML編集のソース中、bodyタグに注目します。(6~8箇所)
- bodyのclass属性の値には、ページの種類を識別する値とレイアウトを決定する値が設定されています。例: <body class="テンプレート識別名 double">
- このページで紹介するレイアウトに対応したclassの値を指定し。更新すれば適用されます。
すべてのクラスは複数組み合わせて指定することができます。
Column Layout
Single column
- class
- single
- Example
- <body class="mainIndex single">
Double column - Menu on right
- class
- double
- Example
- <body class="mainIndex double">
Double column - Menu on left
- class
- double-l
- Example
- <body class="mainIndex double-l">
Multi column - Wing menu
- class
- multi
- Example
- <body class="mainIndex multi">
Multi column - Double menu
- class
- multi2
- Example
- <body class="mainIndex multi2">
Multi column - Double menu on left
- class
- multi2-l
- Example
- <body class="mainIndex multi2-l">
Eye Catch Image
Eye catch - Header area
- class
- eye-h
- Example
- <body class="mainIndex double eye-h">
Eye catch - Header area (Banner type)
- class
- eye-hb
- Example
- <body class="mainIndex double eye-hb">
Eye catch - Contents area
- class
- eye-c
- Example
- <body class="mainIndex double eye-c">
Eye catch - Main area
- class
- eye-m
- Example
- <body class="mainIndex double eye-m">
Combination
すべてのクラスは半角スペースで区切って組み合わせて指定できます。
ここでは実用的なレイアウトの組み合わせを一部のみ紹介いたします。
Multi column + Eye catch Header
- Example
- <body class="mainIndex multi eye-h">
Double column + Eye catch Header (Banner Type)
- Example
- <body class="mainIndex double eye-hb">
Multi column + Eye catch Content
- Example
- <body class="mainIndex multi eye-c">
Single column + Eye catch Header
- Example
- <body class="mainIndex single eye-h">
Multi column + Eye catch Main
- Example
- <body class="mainIndex multi eye-m">
Multi column - Double menu + Eye catch Main
- Example
- <body class="mainIndex multi2 eye-m">
Special Layout Sets
以下の3つのクラスの組み合わせにより、特別に設計したレイアウトを使用できます。
Special layout 1
- Example
- <body class="mainIndex multi eye-c set1">
Special layout 2
- 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
- 2010-09-11 (Sat)
- Customize
- このブログのお好きなテンプレート・スキンのソースをコピー。
- テンプレートソースをFc2管理画面 > HTML編集にペースト。
- スキンソースをFc2管理画面 > スタイルシート編集にペースト。
- 後は更新ボタンを押して完了。
- Comments (Close): -
- TrackBack (Close): -
Black Vicuna
- 2010-08-23 (Mon)
- Customize
Black VicunaはVicuna Skinをアーカイブし再利用可能な状態にする個人の実験サイトです。公開してるVicuna Skinは、FC2ブログの利用規約の範囲内で個人・商用問わず利用が可能です。
このブログについてはAbout Siteを、スキンはFc2.Vicuna Skin Archiveをご覧下さい。
- Comments (Close): -
- TrackBack (Close): -
GlobalNavi Current Customize
- 2010-04-22 (Thu)
- Customize
Fc2.Vicunaで個別エントリーページをグローバルナビゲーションのカレント表示に対応させます。このエントリーでは、実際にBlack Vicunaのグローバルナビ、About, Skinのカレントを画像のように有効化させます。 基本的なグローバルナビゲーションの追加方法が理解出来ている前提で説明します。グローバルナビゲーションについて知りたい方はWikuna - グローバルナビの編集を参考にして下さい。
- Comments (Close): -
- TrackBack (Close): -
Home > Customize
- Recent Comments
-
- Recent Trackback
-
- Search
- Meta
- Links
- Feeds