WordPressテーマ mono-labのNeutralをカスタマイズ



以前は無料だったmono-labのWordPressテーマ、neutralですが、現在は有料になっています。

有料ではありますが、デザインの良さとレスポンシブの快適さ、設定のしやすさから購入することにしました。

こちらがデフォルトの状態での見た目です。
neutralデフォルト外観
ここから色々といじっていきたいと思います。

タイトルロゴの設定

タイトルの設定

外観→テーマオプション→サイトタイトル
下記を設定できます。

  • サイトタイトルのフォント(英字のみ選択可能)
  • サイトタイトルの大きさ
  • サイトタイトルの位置
  • キャッチフレーズ表示の有無

ロゴの位置はマウス移動で決定できるので、とても楽で感動です。

ロゴ画像の設定

外観→テーマオプション→サイトタイトルに画像を使う
下記を変更できます。

  • ロゴの画像
  • ロゴのサイズ
  • ロゴの位置

デフォルトの設定項目でロゴとサイトタイトルを混在させる事はできないので、ロゴ画像をサイトタイトルとは別に入れたい場合は、直接phpファイルをいじります。

外観→テーマ編集→header-logo.php
下記の部分を変更します。

/**
 * フロントページにロゴを表示する
 */
function the_ml_logo(){
  $logo = ml_logo_to_display();
  $options = get_ml_neutral_option();
  $title = get_bloginfo('name');
  $tagline = get_bloginfo('description');
  $url = home_url();
  if($logo){
    echo '<div id="logo_image">' ."\n";
    echo '<h1 id="logo"><a href="' . $url . '/" title="' .  $title . '"><img src="' .  $logo['url'] . '?' .  time() . '" alt="' . $title . '" title="' . $title .'" /></a></h1>' ."\n";
    echo '</div>' ."\n";
  } else {
    echo '<div id="logo_text">' ."\n";
    echo ' <h1 id="logo"><a href="' . $url . '/">' . $title . "</a></h1>\n";
    if($options['show_description']) {
    echo ' <h2 id="tagline">'. $tagline ."</h2>\n";
    };
    echo '</div>' ."\n";
  }
}

/**
 * フロントページにロゴを表示する
 */
function the_ml_logo(){
  $logo = ml_logo_to_display();
  $options = get_ml_neutral_option();
  $title = get_bloginfo('name');
  $tagline = get_bloginfo('description');
  $url = home_url();
    echo '<div id="logo_image">' ."\n";
    echo '<a href="' . $url . '/" title="' .  $title . '"><img src="' .  $logo['url'] . '?' .  time() . '" alt="' . $title . '" title="' . $title .'" /></a>';
    echo '</div>' ."\n";
    echo '<div id="logo_text">' ."\n";
    echo ' <h1 id="logo"><a href="' . $url . '/">' . $title . "</a></h1>\n";
    if($options['show_description']) {
    echo ' <h2 id="tagline">'. $tagline ."</h2>\n";
    };
    echo '</div>' ."\n";
}

このソースですとタイトル文字の位置変更が無効となってしまうので、文字位置は別途、CSSを変更します。
外観→テーマ編集→style.css

/* ----------------------------------------------------------------------
 header
---------------------------------------------------------------------- */
/* logo */
#logo_text { position:absolute; top:52px; left:0px; }

/* ----------------------------------------------------------------------
 header
---------------------------------------------------------------------- */
/* logo */
#logo_text { position:absolute; top:52px; left:130px; }

以上の変更を行い、このようになりました。
ロゴ画像とタイトルの併記

サイトデザインの設定

背景

外観→背景
背景画像や背景色を設定できるページです。

デフォルト
背景画像設定:なし
色:#E3E3E3

外枠の色

外観→テーマオプション→その他のスタイル
外枠の色を設定できるページです。

デフォルト
外枠の色:B7C1C5
外枠の線の色:CCE5ED

上記3つを変更して、色々なパターンを作ってみました。
背景画像や色を変えるだけでかなり雰囲気が変わります。

neutralカスタム コンクリート打ちっぱなし
背景:Concrete-Wall-Large-p
外枠の色:000000
外枠の線の色:ffffff

neutralカスタム ウッドデッキ風
背景:wood-deck-01
外枠の色:7A786C
外枠の線の色:EDAE51

neutralカスタム 芝生
背景:grass01
外枠の色:1F2B1F
外枠の線の色:CAFFC4

neutralカスタム 柔らかキャンバス
背景:canvas01
外枠の色:706252
外枠の線の色:000000

neutralカスタム ナチュラルウッド
背景:Walnut05-p
外枠の色:F0D2AF
外枠の線の色:FFFFFF

neutralカスタム レザー調
背景:vintage-lerther-bk
外枠の色:B7C1C5
外枠の線の色:CCE5ED

neutralカスタム ビビッドカラー
背景:D41E45
外枠の色:1B1521
外枠の線の色:ECBA09

背景素材は全て、フリーテクスチャ素材館様からお借りしました。

メニューの色

メニューは
外観→メニュー
から設定できます。

メニューの色は
外観→テーマ編集→responsive.css
から変更できました。

/* global menu */と/* search form */の部分のカラーコードを変更します。
デフォルトで#8e979bとなっている部分を好きなカラーコードに変更すればOKです。

ハイライト部分やマウスオーバー部分の色もこの近辺に設定されているので、それも変えたい場合は探してみてください。

#8e979b→#81227dとして、下図のようになりました。

neutralカスタム デフォルトメニュー

neutralカスタム 紫色のメニュー

記事の投稿設定

記事投稿の際に下記の設定を行うことができます。

  • フォーマット選択(標準・音声・チャット・ギャラリー等)
  • カテゴリー設定
  • タグ設定
  • おすすめ記事設定
  • コメント表示設定
  • アイキャッチ画像設定
  • SEO設定

特にSEO設定が便利です。
metaタグを記事ごとに設定できます。
これがあるので、SEO用のプラグインを別途導入する必要はありません。

表示設定

外観→テーマオプション→基本設定
下記の項目について、表示の有無を設定することができます。

  • 日付を表示する
  • 投稿者名を表示する
  • カテゴリーを表示する
  • タグを表示する
  • 投稿者情報を記事ページに表示する
  • コメントを表示する
  • コメントに日付を表示する
  • コメントの日付に時間を表示する
  • トラックバックを表示する
  • サムネイルを表示する
  • 大きなサムネイルを記事タイトルの下に表示する
  • 次の記事、前の記事リンクを記事ページに表示する
  • 関連記事を記事ページに表示する
  • パンくずリンクを記事ページに表示する
  • meta descriptionタグを<head>内に表示する
  • mono-labの著作権をフッターに表示する

SNSボタンの設定

外観→テーマオプション→基本設定
下記のSNSについて、記事下のシェアボタンの有無を設定することができます。

  • Twitter
  • Facebook
  • Google Plus
  • Pocket
  • はてなブックマーク
  • Line

表示例
neutralシェアボタンの表示

ヘッダーに表示する自分のSNSへのソーシャルメディアボタンは、下記の種類が設定できます。

  • twitter URL
  • facebook URL
  • Google plus URL
  • Tumblr URL
  • Flickr URL
  • Picassa URL
  • Pinterest URL
  • お問い合わせページのURL
  • RSSボタン
  • 検索フォーム

表示例
neutralソーシャルメディアボタンの表示

その他

  • Googleカスタム検索とファビコンの設定が外観→テーマオプション→基本設定で設定できます。
  • ウィジェット(サイドバー設定)は他のテーマと同様、外観→ウィジェットで自由にカスタムすることができます。
  • メニュー構造は外観→メニューで順序づけする事ができます。
  • トップページのメタタグは、外観→テーマオプション→トップページの設定から設定できます。
  • javascriptやGoogle Analytics、Google Adsenseのコード等は、外観→テーマオプション→フリースペースのところで挿入することができます。

どれも簡単に設定できるので、サイトデザインの設定や基本設定がとても早く終わりました。
これからもちょっとずつ改変を加えて、オリジナリティのあるサイトに仕上げていきたいと思います。

シェアする

  • このエントリーをはてなブックマークに追加

関連記事

  1. fotorで年賀状、テキスト入力
  2. 光るうさぎのキーホルダー、SoldOutの様子
  3. BASE独自ドメイン
  4. ブログ収益報告_見積もり収益額グラフ
  5. googleanalytics設定画面
  6. RGB値の記載箇所を図示
  1. rinnko3 2015.09.16 2:10pm

    こんにちは~
    本当にコチラのサイトに出会えた事を幸せに思ってます。
    先般からアチコチ触り過ぎて、結果、今メンテナンス中でクローズしています。
    シルバーウィーク等を利用してじっくりカスタマイズして、再度公開しようと思ってます。
    これからも宜しくお願いします。

    • 電気女子
      電気女子 2015.09.16 9:41pm

      rinnkoさん、こんばんは!
      私こそ、rinnkoさんと出会えてとても嬉しいです♪

      現在メンテナンス中なのですね。
      1回いじりだすと、止まらなくなってしまいますよね。
      やりすぎてデザインが滅茶苦茶になって…って、ことをよくやってしまっています。笑

      再公開楽しみにしています!

Rippoutai管理人


モノづくり起業を応援するRippoutai管理人、電気女子の顔写真です


電気女子(はまこ)

ワーキングマザーをしながら、サイドビジネスで小型電子モジュールの製造・販売をしています。
クラウドファンディングで1000%支援達成の実績あり。

モノづくり副業応援!
山梨起業応援!

アーカイブ