Home > Customize Archive

Customize Archive

スポンサーサイト

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

Optimization

  • Posted by: Black vicuna
  • 2015-12-09 Wed 14:13:16
  • Customize

Black VicunaはVicuna CMSがリリースしたテンプレートとスキンをFc2ブログへ最適化し配布しています。  Wikunaで配布していたスキン・テンプレートも再配布しています。

vicuna template

主な特徴

  • Web標準に則った無駄の無いシンプルなHTML
  • SEOを高めるサイト内リンク構造
  • 簡単にカスタマイズ可能な専用CSSスキン
  • シンプルだから表示が早い
  • 個人・商用サイトともに利用可能
  • 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): -

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): -

Black Vicuna

  • Posted by: Black vicuna
  • 2010-08-23 Mon 22:57:06
  • Customize

Black VicunaはVicuna Skinをアーカイブし再利用可能な状態にする個人の実験サイトです。公開してるVicuna Skinは、FC2ブログの利用規約の範囲内で個人・商用問わず利用が可能です。

このブログについてはAbout Siteを、スキンはFc2.Vicuna Skin Archiveをご覧下さい。


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

GlobalNavi Current Customize

  • Posted by: Black vicuna
  • 2010-04-22 Thu 20:11:24
  • Customize

gnavi2

Fc2.Vicunaで個別エントリーページをグローバルナビゲーションのカレント表示に対応させます。このエントリーでは、実際にBlack Vicunaのグローバルナビ、About, Skinのカレントを画像のように有効化させます。 基本的なグローバルナビゲーションの追加方法が理解出来ている前提で説明します。グローバルナビゲーションについて知りたい方はWikuna - グローバルナビの編集を参考にして下さい。

Continue reading

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

Index of all entries

Home > Customize Archive

Tag Cloud
Vicuna

Vicuna CMS

Return to page top

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