今回は、WordPressテーマ『BlogPress』のカスタムについて書きます!

 

と、言うのもカスタムに関するお問い合わせも多数いただくのでネットで調べてみるのですが思ったほど情報がないんですよね。

 

まぁ、カスタムでお金を取るスタイルが多いと思うのでもっともだと思います。

 

 

そこで、あえて公開してみようかなという儲けられない記事を書いてみることにしました。

 

 

因みに、今回カスタムするのはこのテーマ・・・
WordPressテーマ「BlogPress (TCD010)」

 

TCDという会社が取り扱っているWordPressテーマ【BlogPress】ですっ!

 

 

スポンサーリンク

BlogPressってそんなに良いテーマなの??

 

何を隠そう・・・

 

実は

 

お問い合わせくださる方が使っているテーマで一番多いんです。

 

 

ダントツで多いです。

 

 

これには僕もびっくりしました。

 

 

導入された方に理由を聞くと、

 

  • シンプルでスッキリしたレイアウト
  • コンテンツを流し込むだけで、デザインがまとまる
  • アフィリエイトやアドセンス広告が簡単に導入できる
  • スマホからの閲覧時に自動で表示方法を変えてくれるレスポンシブ対応
  • 価格もお手頃

 

ということを皆さん口をそろえて仰っていました。

 

稼ぎたいブロガーにめちゃ人気なんです

 

実は有名な方も愛用されていて

ネットビジネスでいうと、アフィリエイトで1億円以上稼がれている

かの有名なだいぽんさんも

最近このテーマに変更されたことで有名です。

 

つまりは

 

ブログで稼いでいる方も愛用されている

 

という事です。

 

迷ったらこのテーマからでまず間違いないと思います!

WordPressテーマ「BlogPress (TCD010)」

そんな大人気のテーマでよくいただく

お悩みを簡単に解決させるためのお手軽カスタム

今回は一つ公開しちゃいます!

 

注意!

カスタムは、自己責任でお願いいたします。

操作後にエラーなどが発生した場合

こちらは一切の責任を負いかねますので、

テーマファイルを操作する前に、必ずバックアップをとっておいてくださいね!

 

また、書いてある内容が理解できない場合は

カスタムをお勧めしません。

 

そんな時は、無理をせずに文末のサポート依頼のフォームから

お気軽にご相談ください^^

 

これでメニューの文字詰まりを解消できる!簡単カスタム法!

ユーザビリティー向上にも繋がり

PV数の向上にも繋がるグローバルメニューですが、

アクセスしてほしいコンテンツを配置したら・・・

 

blogpress01

 

こんなガッカリな改行がされたこと有りませんか?

「スッキリ1列に抑えたいのに・・・」

 

まず、カスタム前のお話として

コンテンツが多すぎる場合は、5~6個くらいが限度と考えて絞ってください。

また、タイトルは要点が分かる程度に簡略化させた方が良いです。

 

 

 

以上2点を行っても

「どうしてもこれ以上は削れませんっ!」

「何とか文字サイズを調整したいんです!!」

と言う場合は、これからお教えする方法を行えば

簡単なのに、一瞬で問題解決できますので

お試しください^^

 

 

では早速、ちょこっとテーマの編集をしてしまいましょう!

 

 

①テーマ編集画面へアクセスしましょう

【ダッシュボード】⇒【外観】⇒【テーマの編集】の順でアクセスします。

blogpress02

 

②次に【スタイルシート (style.css)】を開きます。

 

316行目から【 /* global menu */】グローバルメニューの項目がありますが

その中の320行目font-size:○○px;の箇所内の数字を変更して

blogpress_buttonをクリックして上書き保存してください。

これで、グローバルメニューの文字サイズが変わります。

 

 /* global menu */
#global_menu { width:980px; height:63px; z-index:30; position:absolute; bottom:7px; left:0px; background:url(img/header/menu_line.gif) no-repeat left; }
#global_menu ul ul { display:none; position:absolute; top:66px; left:0px; margin:0 0 0 -1px; padding:0; }
#global_menu ul ul ul { left:100%; top:0; }
#global_menu ul li { font-size:○○px; font-weight:bold; float:left; margin:0; padding:0; position:relative; display:block; }
#global_menu ul ul li { float:none; height:auto; line-height:26px; padding:0; margin:0; text-align:left; }
#global_menu ul li a { color:#333; text-shadow: 1px 1px 0px #fff; display:block; text-decoration:none; text-align:center; background:url(img/header/menu_line.gif) no-repeat right; height:45px; padding:18px 0 0 0; }
#global_menu ul li a strong { display:block; color:#333; }
#global_menu ul li a span { display:block; font-size:9px; color:#888; }
#global_menu ul li a:hover { color:#333; text-shadow:none; }
#global_menu ul ul a { position:relative; padding:11px 10px 0px 10px; height:26px; line-height:140%; margin:0 0 -1px 0; text-align:left; background:#fff url(img/common/arrow3.png) no-repeat 14px 14px; border:1px solid #ccc; font-size:1px; }
#global_menu ul ul a:hover { border:1px solid #ccc; color:#fff; background:#444 url(img/common/arrow3.png) no-repeat 14px 14px; }
#global_menu ul ul .parent_menu > a, #global_menu ul li.active_menu_first ul .parent_menu > a, #global_menu ul li.active_menu_last ul .parent_menu > a
{ }
#global_menu ul ul .parent_menu > a:hover, #global_menu ul li.active_menu_first ul .parent_menu > a:hover, #global_menu ul li.active_menu_last ul .parent_menu > a:hover
{ }

blogpress02

どうでしょうか?

スッキリ1列に収まりましたか?

 

 

ドロップダウンメニューの文字詰まりもこれでスッキリ!簡単カスタム法!

グローバルメニューでサブコンテンツとして

ドロップダウンメニューを使う場合もあると思います。

しかし、こちらも同じく文字がギチギチに詰まり

改行されてみっともなくなってしまうと嫌ですよね。

 

ご安心ください!ドロップダウンメニューの文字サイズを変更する方法もあります。

blogpress04

 

【スタイルシート (style.css)】を開き、【 /* global menu */】内の数値を変更するところまで

作業内容は同じです。

今回は、その中の326行目の末尾にある、font-size:○○px; の箇所内の数字を変更して

blogpress_buttonをクリックして上書き保存してください。

これで、ドロップダウンメニューの文字サイズが変わります。

 

/* global menu */
#global_menu { width:980px; height:63px; z-index:30; position:absolute; bottom:7px; left:0px; background:url(img/header/menu_line.gif) no-repeat left; }
#global_menu ul ul { display:none; position:absolute; top:66px; left:0px; margin:0 0 0 -1px; padding:0; }
#global_menu ul ul ul { left:100%; top:0; }
#global_menu ul li { font-size:○○px; font-weight:bold; float:left; margin:0; padding:0; position:relative; display:block; }
#global_menu ul ul li { float:none; height:auto; line-height:26px; padding:0; margin:0; text-align:left; }
#global_menu ul li a { color:#333; text-shadow: 1px 1px 0px #fff; display:block; text-decoration:none; text-align:center; background:url(img/header/menu_line.gif) no-repeat right; height:45px; padding:18px 0 0 0; }
#global_menu ul li a strong { display:block; color:#333; }
#global_menu ul li a span { display:block; font-size:9px; color:#888; }
#global_menu ul li a:hover { color:#333; text-shadow:none; }
#global_menu ul ul a { position:relative; padding:11px 10px 0px 10px; height:26px; line-height:140%; margin:0 0 -1px 0; text-align:left; background:#fff url(img/common/arrow3.png) no-repeat 14px 14px; border:1px solid #ccc; font-size:○○px; }
#global_menu ul ul a:hover { border:1px solid #ccc; color:#fff; background:#444 url(img/common/arrow3.png) no-repeat 14px 14px; }
#global_menu ul ul .parent_menu > a, #global_menu ul li.active_menu_first ul .parent_menu > a, #global_menu ul li.active_menu_last ul .parent_menu > a
{ }
#global_menu ul ul .parent_menu > a:hover, #global_menu ul li.active_menu_first ul .parent_menu > a:hover, #global_menu ul li.active_menu_last ul .parent_menu > a:hover
{ }

 

*上書き更新しても、ブログ上ですぐに反映が確認でき場合がりますが

何回か再読み込みを行えば反映が確認できるはずです。

 

これで、グローバルメニューがスッキリとして見栄えが良くなりましたね!!

 

この様に、ちょこっとしたカスタムもしやすく

シンプルにまとまって使い勝手の良いテーマBlogPressを

是非使い倒しちゃってくださいね!

WordPressテーマ「BlogPress (TCD010)」