wp.Vicuna専用スキンのカスタマイズ


現在、テーマ「wp.Vicuna」、スキン「style-smartCanvas」を追加。少しカスタマイズしてみましょう。


テーマ: 「wp.Vicuna Ext」
スキン: 「style-smartCanvas」
レイアウト: 「Eye Catch Short」
投稿記事の表示: マルチ
ページ投稿表示: ダブル

フォントの指定、配色等のカスタマイズ・・・(style-smartCanvas)
”themes/wp.vicuna.ext/style-smartCanvas/module/mod_subSkin/1-subSkin.css

  • フォントの指定: //General//
  • リンクの配色: //Link Color//

レイアウト幅調整や画像の差し替えなどのカスタマイズ・・・(「style-smartCanvas」Eye Catch [Short])
”style-smartCanvas/module/mod_eyeCatch-short.css

  • レイアウト幅調整: //1-1.Style fo All// //1-2.Style for body.double// //1-2.Style for body.multi//
  • 画像の差し替え: //1-2.Style for body.double// //1-2.Style for body.multi//

リストマークに画像を使用・・・(「style-smartCanvas」)
”style-smartCanvas/1-element.css

リスト画像をアップロード
”style-smartCanvas/images/mark/***a.png
”style-smartCanvas/images/mark/***b.png
”style-smartCanvas/1-element.css

上記CSSファイルを以下のように修正
//1-7.List Module//

ul {
list-style-image:url(images/mark/***a.png);
}
ul ul{
list-style-image:url(images/mark/***b.png);
}

追記)
上記設定でIE7ではOK。しかしFire Fox 3.0.6にて確認したら、Global Navigation部分にリスト画像が表示されてしまう??しかたなく、以下のように修正
//1-7.List Module//

ul {
list-style-type: square;
}
ul ul{
list-style-image:url(images/mark/***b.png);
}

タイトルに画像を入れるには・・・(「style-smartCanvas」)

リスト画像をアップロード
”style-smartCanvas/images/***.png
”style-smartCanvas/3-context.css

上記CSSファイルを以下のように修正(こちらを参照
//3-1-1. Website Title//

div#header p.siteName a {
display: block;
width: 200px; /* 画像の幅 */
text-indent: -9999px; /* textを飛ばす */
outline: none; /* クリック時の枠線を消す */
background-image: url(images/<span style="color: #800000;">***.png</span>);
background-repeat: no-repeat;
background-position: 0px 0px; /* point 位置調整 */
border-bottom: none;
padding-bottom: 10px; /* 画像の高さに合わせて調整 */
}

追記)現在はマガジン・スタイルのテーマ「arthemia」

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*