2009年　7月　21日

WordPress 自作テーマ monochrome の紹介

今日は、わたしが作成したWordPress用テーマ【monochrome (モノクロ)】を紹介します。

対応しているWordPressのバージョンは2.6以上になります。
（2.6以下は未検証）

このテーマは、サイドバーウィジェットやWordPress2.7から導入された入れ子コメント機能に対応しています。

上部メニュー（グローバルメニュー）はドロップダウン式になっており、
カテゴリーまたは、ページのどちらかを管理画面から選択できるようにしました。
階層はひ孫カテゴリー（ページ）までは表示できます。
（ひ孫以降はCSSを修正する必要があります。）

管理画面からは、右サイドに表示されるインフォメーション部分の編集や、
様々な部分の表示・非表示が設定できるようにしてあります。

設定項目

タグを表示する
投稿者名を表示する
検索の下に、折りたたみ式タグリストを表示する
右下の「return top」を表示する
などいろいろ

また、サイドバー（サイドコンテンツ）を表示しないページをページ作成画面から簡単に
作成できるようにしました。

jqueryを使用していますので、若干他のプラグインと競合する可能性がありますが、
もし不具合があった場合はご報告ください。

デモページを用意しましたので、動作をご確認ください。
一つ目の記事の「read more」をクリックしたら様々なHTMLタグの表示具合が確認できます。
デモサイトは英語で表示されていますが、このテーマは当然日本語化してあります。

デモサイトを見る

ダウンロードはWordPress本家公式サイトからダウンロードしてください。

ダウンロードページへ進む

バグや不具合、ご意見、ご要望などがございましたらコメント欄へ書き込んでください。

追記です。（7月25日）

上部に表示する親カテゴリーや親ページの数が多いと、
以下のようにメニュー部分がはみ出してレイアウトが崩れてしまいます。

大変もうしわけないのですが、回避策としては親メニューや親ページの数を
減らしていただくしか方法はありません。

North Wind さま、情報と画像を提供していただきありがとうございました！

- acd
- 2009年　8月　16日
- 返信
- 引用
Beautiful theme. Thanks. I can’t get Smilies Themer to work, though, where the smilies show up in the Comments section for people to click on and add in comment box. Any idea how to get it to work?
- - mono-lab
  - 2009年　8月　16日
  - 返信
  - 引用
  Hi acd!
  
  I made a custom file for smilies on commment.
  
  Download “smilies on comment” files
  
  This custom comment file use Custom Smilies plugin so don’t forget to download the plugin and activate before using this custom comment file.
- Nurlea
- 2009年　8月　18日
- 返信
- 引用
Very lovely theme. I recently downloaded your theme and wanting to activate it. But after doing so, found out that my images, when clicked, doesn’t open like it used to, meaning in overlay NGallery style like it used to. What went wrong? Could u help me please? Thanks!
- - mono-lab
  - 2009年　8月　18日
  - 返信
  - 引用
  Hi Nurlea.
  
  I’m using “Highslide JS” for image popup.
  
  There is a good plugin to use Highslide in WordPress.
  
  Download “Auto Highslide” plugin and just activate it.
  
  Thank you for downloading my theme!
- Nurlea
- 2009年　8月　18日
- 返信
- 引用
Ahhh i see! Appreciate the tips! Domo arigato!!!
- van
- 2009年　8月　19日
- 返信
- 引用
SORRY , It is ‘http://www.mono-lab.net/co1/’ not ‘’http://www.mono-lab.net/co1/?page_id=3′
- - mono-lab
  - 2009年　8月　19日
  - 返信
  - 引用
  Hi van.
  
  I’m sorry but the theme your talking about is not available.
  
  I made this site for my client work.
- Chop
- 2009年　8月　24日
- 返信
- 引用
はじめまして、「KMC」というブログをやってるChopと申します。
ブログのデザインの変更をしようと思い立ち、この度、このような素敵なテーマを見つける事ができ、非常に嬉しく思っております。
ありがとうございます。
一つ質問をさせてください。自分はブログの中でいわゆる「もっと読む」「read more」というような機能を使っておりません。
そうすると、タグやカテゴリーを選択して関連記事を見ようとする際に、全体にリンクが貼られた本文全体がズラッと並んでしまい、関連記事を見難い状態になってしまいます。（言葉では説明しづらいので、もしお時間があったら実際にブログご覧いただき、何らかのタグかカテゴリーをクリックしていただけたらと思います）。
タグやカテゴリーを選択した時に、本文ではなく記事のタイトルを一覧表示させるような方法・設定等があればご教授願いたくコメントを送らせていただきました。
素敵なテーマを使わせていただいている上、いきなりの質問申し訳ありません。可能でしたらご返答いただけたらと思います。
よろしくお願いいたします。
- - mono-lab
  - 2009年　8月　24日
  - 返信
  - 引用
  はじめまして。
  
  長くなりそうなので、メールにてお返事します。
- perchristian
- 2009年　8月　25日
- 返信
- 引用
Hi! I’m using a remix of this theme, amazing boys! check it out.. the only problem i got is with the reply sistem, it dosnt work properly, it just puts this code in the comment area -> @admin . So its not working to do chain of divs.. why?

Thanks in advance
- - mono-lab
  - 2009年　8月　25日
  - 返信
  - 引用
  Hi perchristian.
  
  To work reply button like the one in my demo site,go to WordPress dashboard > Discussion Settings.
  
  Be sure to check “Enable threaded comment”.(Threaded comment funcition is able to use from WP2.7)
  - - perchristian
    - 2009年　8月　25日
    - 返信
    - 引用
    Very good, nice and clean, fast and polite. I’m very proud of you guys. Thanks for everything! love from spain
- Laurent
- 2009年　8月　25日
- 返信
- 引用
hi,
i love your theme !
do you thing it is possible to change the color of the menu on top ? (categoris or pages)

thx for your job !
- - mono-lab
  - 2009年　8月　25日
  - 返信
  - 引用
  Hi Laurent.
  
  You can change color from “style.css” file.
  
  In line 224,229,232,236 there is a code
  
  color:#e2415b;
  
  This code is for the header menu font color(default is red color).So change number to whatever you wan’t.
  
  Thanks for your comment!
- perchristian
- 2009年　8月　29日
- 返信
- 引用
Hi again guys, well am still modifing your theme for a personal purpose, you can check it in the url. I was wondering how to show “the normal post way” when you go to a category, not the minimal one like the search one. Any help?

Thanks in advance!
- - mono-lab
  - 2009年　8月　29日
  - 返信
  - 引用
  Hi perchristian.
  
  Try this custom archive and search file.
  
  DOWNLOAD custom archive and search file
  
  Don’t forget to make backup of your original file before using this custome files.
  - - perchristian
    - 2009年　8月　29日
    - 返信
    - 引用
    Omg, it works! thanks!, I asked this way because normaly you remember the post by the photo in case, so when you where searching that post it was hard to find
    
    Thanks again, you rock!
- Taufiq Hasan
- 2009年　9月　1日
- 返信
- 引用
I’m using it.. Very cool, i like top menu, comment, and colors combination. I hope you keep develop this theme.
- x-demon
- 2009年　9月　2日
- 返信
- 引用
ru_RU translation
http://businessinformatics.ru/wp-content/themes/monochrome/languages/ru_RU.mo
http://businessinformatics.ru/wp-content/themes/monochrome/languages/ru_RU.po
- - mono-lab
  - 2009年　9月　4日
  - 返信
  - 引用
  Hi x-demon.
  
  Thank you for the RU language file!
  
  I will put it into the next version.
- PoomK
- 2009年　9月　4日
- 返信
- 引用
Really love this theme
But the date format is a bit confusing. I changed it to the_time(‘M’) instead.

Thx
- - mono-lab
  - 2009年　9月　4日
  - 返信
  - 引用
  Hi PoomK.
  
  The date format is very difficult problem for me.
  
  Because the date format is quite diffrent in each country.
  
  In Japan we use like the one in “monochrome”.
  
  I have to study more about the date format of other country.
  
  Thank you for your advice!
- gotheek
- 2009年　9月　4日
- 返信
- 引用
Really impressed with the theme — thankyou very much for designing and making it available!
- Marc
- 2009年　9月　4日
- 返信
- 引用
Hi!

Really nice theme, I love it!

I found a little mistake really easy to solve: on the second post (or forth, or sixth… I’m talking about those post which have color green), links on post meta (left sidebar) are blue instead of green when hover.

To fix it, you just have to put .post_even .post_meta a:hover { color:#75e730; }

Thanks for your work!
- - mono-lab
  - 2009年　9月　4日
  - 返信
  - 引用
  Hi Marc.
  
  >I found a little mistake
  Thank you for finding that mistake.
  
  I will fix it at the next version.
- Michael
- 2009年　9月　4日
- 返信
- 引用
Konishiwa

I managed to adjust the width of the textfield in your fantastic theme monochrome, by tweaking the style.css and some gifs. But I can’t figure out how to adjust the position of the comment fields (and possibly some other fields). They are too far to the right now, when I open an article. I’d be glad if you give me some hints.

Domo arigato

Micha

momentmal.green-web.de
- - mono-lab
  - 2009年　9月　4日
  - 返信
  - 引用
  Hi Michael.
  
  To customize the comment area you have to adjust comment-style.css file.
  
  Thank you for using my theme!
- Marc
- 2009年　9月　7日
- 返信
- 引用
Hi! I’ve translated your theme into Catalan.

You can download the files here:
http://nuvolsgratis.cat/wp-content/themes/monochrome/languages/ca.mo
http://nuvolsgratis.cat/wp-content/themes/monochrome/languages/ca.po

Again, thanks for your work
- - Marc
  - 2009年　9月　7日
  - 返信
  - 引用
  Sorry for the duble comment.
  
  I don’t know if that’s called “error”, but I think smileys look much better if yu add this on your stylesheet:
  
  .post img.wp-smiley {border:0px; padding:0px; margin:0px; }
  
  Adding this, smileys will look like in the white theme you use in your blog, instead of having the border…
  
  At least, I prefere them without border!
  - - mono-lab
    - 2009年　9月　7日
    - 返信
    - 引用
    Hi Marc.
    
    Thank you for language file!
    Also about smiley too.
    
    I don’t use smiley basically so I didn’t know about that.
    I will change my stylesheet.
    
    Thank you very much for your advice!