Home > WordPress関連 > WordPressのテーマをwp.Vicuna Extでカスタマイズするまでのいろいろ

WordPressのテーマをwp.Vicuna Extでカスタマイズするまでのいろいろ

2009-01-07 (Wed) 17:44
WordPress関連
vicuna wordperss

wp_top1

さてWordPressですが、ようやく納得のいくテーマに落ち着きました。クリーンなコーディングが特徴の人気テーマ、Vicunaをベースに改造したものを適用しました。

コードをいろいろ見ていたのですが、難解そうなCSSのハックがありつつも、とってもわかりやすかったです。素晴らしすぎます、ありがとうございます＞開発者の方々。

なお、ところどころ公式サイトでリンク切れを起こしている箇所があったのでまとめてお役立ちリンクなどを（自分用にも）。

Vicuna – WordPress テーマ

まずはここから。公式サイトですね。

WordPress テーマ Vicuna – Layout Pattern

組むのが可能なレイアウトの種類。

WordPress テーマ vicuna – スキン

スキンダウンロードサイト。

ma38su.org – wp.Vicuna Ext

ウィジェットにも対応したVicunaの拡張版。僕はこちらを使わせていただいています。

ma38su.org – Vicuna Adaptor

wp.Vicuna Ext用のプラグイン。はてブのカウントとか出てきて便利。こちらも使わせていただいております。

Vicuna :: Board Index

Vicunaのフォーラム。わからないことがあればこちらで。

Vicuna :: フォーラムを表示 – └ wp.Vicuna Ext

Vicunaの拡張版のフォーラム。こちらも参考になりました。

あと個人的にはまった点、カスタマイズの仕方などをばメモしておきます。

プレビューでCSSがあたらない？

テーマをダウンロードしてプレビューをしたはいいが、プレビュー画面がまっさらになってしまいました。フォーラムでも同様の問題を抱えている人がいましたが、これは設定がうまく読み込まれていないせいっぽいです（特に別サーバーから移行した場合）。いったん気にせず強引にテーマを適用し、各種オプションを再度設定すると元に戻りました。

WP Super Cacheに気をつけよう

カスタマイズしてさぁ確認、というときにキャッシュが利いていて「あれ、変わっていない？」なときがあります。おかしいな？と思ったときはキャッシュを外しましょう。

JSViewがおすすめ

Vicunaの拡張版は設定によってどのスタイルがあたるかが変わるので（PHPで動的に読み込み先を変えていますね）、Firefoxのアドオン「JSView」を入れておくといいですよ。

jsview

↑ 今読み込まれているJSがわかります。

jsview2

↑ 僕の場合、これが読み込まれているスタイルシート。

» JSView :: Firefox Add-ons

やっぱりFirebug最強

Firefox限定ですが、やっぱりあとはFirebug。「調査」しまくりで適宜カスタマイズしていきましょうね。

firebug

↑ やっぱりこれが最強。

frebug_2

↑ 指定した値を無効にしたり、変更してその場で反映させることもできますねぇ。

fire_3

↑ 画像にマウスオーバーするとそれが見えるのもポイント高い。色も同じ。

» Firebug :: Firefox Add-ons

配色で迷ったらCOLOURlovers

あとデザイン系で使えるサイトといったら定番のCOLORlovers。配色やパターンで悩んだらのぞいてみるといいですよ。

color

↑ 色から検索できるいろいろがあります。

ご利用はこちらからどうぞ。単に壁紙探すのでも楽しいですよ。

» COLOURlovers :: Color Trends + Palettes

まだまだカスタマイズしたいところはありますが、とりあえずこのテーマでいっときたいと思います。導入したいプラグインもたくさんありますし、時間が足りないなぁ、こりゃｗｗ。

こちらもあわせてどうぞ

Twitterもやっています！

Posted on January 7th, 2009

Comments:1

xxxx7 09-01-07 (Wed) 21:36

こんにちは。
僕も去年の秋ごろからwpを触り始めたので、
いろいろ参考になる記事ばっかりで助かります。

ただ、僕の方が少し早く始めたのに、
もうだいぶ置いていかれている感がありありで、
なんだか悲しい感じもしますが。。。

去年はwpを使ったサイトを２つ公開したのですが、
最近またもう１つ作っているところなので、
これからもwp関係の記事は特に注意してみていくことにします。

Trackbacks:6

Trackback URL for this entry: http://www.ideaxidea.com/archives/2009/01/wordpress_theme.html/trackback
Listed below are links to weblogs that reference: WordPressのテーマをwp.Vicuna Extでカスタマイズするまでのいろいろ from IDEA*IDEA ～百式管理人のライフハックブログ

pingback from Web Creator Blog - WordPress 人気上昇中？ 09-01-07 (Wed) 22:07: [...] 採用したテーマはこのブログで利用しているものと同じです。 WordPressのテーマをwp.Vicuna Extでカスタマイズするまでのいろいろ（IDEA*IDEA） wp.Vicunaはカスタマイズ性がよく、使いやすいテーマですからねぇ。 [...]
pingback from t3box_memo - ブログはじめます。 09-01-10 (Sat) 14:02: [...] デザインにあたって参考にしたサイト WordPressのテーマをwp.Vicuna Extでカスタマイズするまでのいろいろここで紹介されていたma38su.org – wp.Vicuna Extを利用してます。 [...]
pingback from sylvan-l.net - wordpressのナビゲーションの色を変えてみた『COLOURlovers』 09-01-11 (Sun) 3:32: [...] 参考 WordPressのテーマをwp.Vicuna Extでカスタマイズするまでのいろいろ – IDEA*IDEA ～百式管理人のライフハックブログ～ [...]
pingback from WordPressを使ってみて　その１ - 寿 09-01-15 (Thu) 1:28: [...] とは言っても、いじりつつのBlog開始。書きながら体裁は整えていこうと思う。そこでデザインスキンというか、テーマに決定したのは、Idea*ideaのエントリでも、本質思考道場のエントリでも採用されていたwp.Vicuna_Ext。こいつを導入してみた。 [...]
pingback from CUTPLAZA DIARY » WordPressでアクセスアップする為にした事とこれからする事 09-01-17 (Sat) 15:55: [...] WordPressでこれからする事テンプレートのカスタマイズ【WordPressのテーマをwp.Vicuna Extでカスタマイズするまでのいろいろ】【Vicuna – CMS】【Vicuna – WordPress Theme】 [...]
pingback from CafeDawn - wp.Vicuna Ext.でブログのデザイン変えました。 09-02-12 (Thu) 0:36: [...] 今回はデザイン変更にあたり、idea×ideaさんのエントリーを参考に、wp.Vicuna.Extというテーマプラグインを利用することにしました。 [...]