WordPressの勉強-04「Vicunaテーマのスキンを変更」

March 14, 2010
skin_main.jpg

Vicunaテーマの中に標準で入っている「style-vega」をローカルにダウンロードして、ディレクトリ名を変更後(style-kysとした)、中身のcssを修正しました。

cssの構造を理解するのに少し時間はかかりましたが、慣れればとてもカスタマイズしやすいですね。

■カスタマイズしたところ

元々シンプルでよく出来たテーマですが、ちょっぴり窮屈な感じがしたので、少し余白を入れて落ち着いた佇まいにしてみました。

sample

「Vicunaテーマのスキンをカスタマイズ(09.12.05現在)

KYS-WP*(カスタマイズしたページ)

●主なカスタマイズ

  • リキッドデザインをやめて固定幅に
  • トップページ(HOME)にイメージ画像追加
  • サイドバーに余白
  • フッターの変更
  • 投稿日やカテゴリー一覧にアイコン追加

アイコンは、「DOTS DESIGN」さんのアイコンを使用させていただきました。ありがとうございます。

フリーWEB素材サイト「DOTS DESIGN(ドッツ・デザイン)」

●Vicuna Adaptor

「Vicuna Adaptor」プラグインも入れたので、「はてな」と「del.icio.us.」のボタンを追加。

あと、「Fontsize Switcher」もアクティブにしましたが、cssが効いてなかったので、下記のページを参考にしてcssを追加しました。

Vicuna :: トピックを表示 - wp.Vicuna Excで Vicuna Adaptor fontsizeswicherを使いたい

■WordPressのテンプレートタグ

MT同様、WordPressにも独自の「テンプレートタグ」があります。

たとえば、ブログのアドレスは

<?php bloginfo('home'); ?>

となります。MTでは「<$mt:BlogURL$>」ですね。

テンプレート内の画像を参照させるには

<?php bloginfo('template_url') ?>/画像のパス/画像名.jpg

です。

と、偉そうに書いてますが、まだこの二つぐらいしか覚えてませんw

テンプレートタグは、触っていくうちに少しずつ覚えていければと思います。

■WordPressのテンプレート

phpに関しては、ほぼ初心者っていうのもあるけど、テンプレートの修正が非常にやりづらい。

WordPressのテンプレート設定画面

「WordPressのテーマ編集画面」

WordPressのテンプレート設定画面

「WordPressのテンプレート」

テキストも色分けされてないので、どれがテンプレートタグなのかhtmlなのか、一目でわかりにくいし、ダッシュボード内で、テンプレートタグの検索ができないので、どこで使用しているのか探すのが大変。

また、よく使用するものは、もっとモジュール化しておいてほしい気がしました。自分ですればいいのですが。

Movable Type5のテンプレート設定画面

「Movable Type5のテンプレート編集画面」

Movable Type5のテンプレート設定画面

「Movable Type5のテンプレート」

その点、MTは、テキストもタグごとに色分けされおり、テンプレートも整理されているので、やはりわかりやすいなぁ。その分、重たいけど。

■WordPressのウィジェット

MT同様、WordPressのウィジェットもサイドバーの項目をドラッグアンドドロップで簡単に変更することができます。

WordPressのウィジェット設定画面

「WordPressのウィジェット設定画面」

「テキスト」ウィジェットは、HTMLも自由に書き込むことができるので、プロフィールやバナーなども簡単に追加できて便利ですね。

■WordPressの練習用ページ

KYS-WP*(WordPressの練習用ページ)

だいたいのカタチができたので、プラグインも一つ一つ理解していこう。

関連記事

トラックバック(0)

コメントする


画像の中に見える文字を入力してください。

PageTop