ネットビジネスで起業して稼ぐ!30代妻子持ちが脱サラ田舎暮らし

田舎ネットビジネス起業家みそごろうのブログ

STINGER5グローバルメニューの文字サイズや色、反転表示をカスタマイズする方法

   

web-401497_640

 

STINGER5テンプレートに変更して2日目。

 

ヘッダー直下のメニューが気になりましたので、

少しカスタマイズしてみました。

screenshot_20141011_234418

 

 

いきなり結論から

 

こうなりました。

screenshot_20141011_234740

 

マウスを乗せると反転するようにしました。

screenshot_20141011_234853

 

方法は、「テーマの編集」からスタイルシート (style.css)

の最後に追記します。追記したコードは以下の通りです。

 

やったことはこれだけです。

一応、それぞれ内容をご説明していきます。

 

 

見よう見まねでイジるポイントを確認

 

カスタマイズするにあたり、まずは

こちらのサイト様を参考にさせて頂きました。

STINGER5のメニューとアドセンス広告をカスタマイズ

 

どうやら、menuというクラスがあって、

それをカスタマイズすれば良いみたいです。

 

最初はコードをそのまま自分のサイトに適用してみました。

そこから、それぞれのパートの数値を極端にいじってみて、

どこの設定なのかを把握していきました。

 

プログラミングはほとんど分からないので、とりあえず

全コピーして、いらない部分を削って行けば、求める

機能だけ残るだろうと考えました。

 

色々試行錯誤して残ったものが、

「.menu li a 」と「.menu li:hover > a 」でした。

 

「.menu li a 」はメニュー自体。

「.menu li:hover > a 」はメニューに

カーソルが乗った時の動作のようです。

 

 

文字サイズと色を指定する

 

変更するポイントが分かれば、

後はごくごく簡単なコードを記載するだけです。

 

color: で色を選択。

font-size: で文字の大きさを。

font-weight:bolder; で強調文字に。

 

これらの書き方は、こちらのサイト様を参考にさせて頂きました。

子テーマのstyle.cssに入力したCSSが反映されない理由と対策

(解決策2を参考にしています。)

 

あまりプログラミングの知識や経験も無く、大したことは

やっていませんが、一応備忘録的に掲載させて頂きました。

 

何かのお役に立てたら幸いです。

 

みそごろうメルマガ

いいね!すると、ゆる~いつぶやきが届きます。
  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly

 - Wordpress

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

STINGER
PV数35倍の効果!STINGER5テーマ変更後のアクセス数とSEO対策全暴露

このブログのテーマをSTINGER5に変更してから2ヶ月余り。その間で見えてきた …

エラー画面
【WordPress】このウェブページにアクセスできません!DNSエラーか

昨日、いきなりこのブログが「このウェブページにアクセスできません」となり、全く表 …

designate-427537_640
「P3 Plugin Performance Profiler」でブログが重い原因を調査・特定する

  ブログが重い。。   WordPressは”プラグイン” …

pencils-447481_640
STINGER5サイドバートップにプロフィールを!並び順の変更方法

  WordPressテンプレート「STINGER5」を導入して、 ど …

ea38f20a57a623e9323df706063cf34a_s
「Broken Link Checker」はリンク切れエラーチェックプラグイン!ただし重いかも

  詳しくはこちらを見てください! →リンク リンクをクリックしてみる …

egg-timer-447203_640
GoogleAnalyticsが突然ゼロに!原因はテンプレート変更かも

  アクセス解析に「GoogleAnalytics」を利用していますが …

screenshot_20141010_184137
STINGER5ファビコンやヘッダー画像をカスタマイズする方法

  最近、WordPressテンプレートではデフォルトスタンダードに …

GoogleXMLSitemaps
「Google XML Sitemaps」でWordPressブログのサイトマップを設定する方法

ブログを作ったら必ずやっておきたいのが、XMLサイトマップの対応。 サイトマップ …

表示されない
「PS Auto Sitemap」が表示されない!原因・対策方法まとめ

「PS Auto Sitemap」の設定をしたのに表示されない。。 下の画像のよ …

screenshot_20140930_111048
BackWPupでWordPressブログを手動バックアップする方法

  万一に備える。 WordPressブログ運営者にも備えは必要です。 …

Topへ戻る