りんろぐ。

女子でも分かるぷちまにあっく話。

Wordpress テーマカスタマイズ

Stinger2カスタマイズ初心者編!ナビゲーションを自分好みにしよう!

2013/08/31

Happy Canada Day
photo credit: DaPuglet via photopin cc

何やらセキュリティの話題で盛り上がっておりますが、ちょっと疲れてきた凛(@rin_wan)です。

こんな時は気分転換!だんだんシリーズ化してきたStinger2のカスタマイズ。今回はナビゲーション周りのお話ですよ!



Stinger2カスタマイズ!

気がつくとシリーズ化してきましたWordpressの無料テーマ「Stinger2」のカスタマイズ記事。

私があまり難しい事が苦手なので、初心者さんがちょっと自分なりに変更するレベルを想定してます。

他の人と全く同じ!よりは自分なりの色をつけてみたいのがブロガー心♪ちょっとしたカスタマイズに挑戦しましょ!

意外と検索して来て下さる方が増えてきたので、過去記事が一気に見れるようにまとめてみました。ちょっと気になる方は下記のバナーから一覧をどうぞー♪

Stinger2

今回カスタマイズするナビゲーションバーにも「Stinger2」を追加したのでそこからも飛べますヾ(o´∀`o)ノ

りんろぐ。は”らぶりーなStinger2″を目指してカスタマイズ中です(*´ω`*)

※ご利用の環境によっては内容が一部異なる可能性があるのでご注意下さいませ。

ナビゲーション周りってどこ?

私がナビゲーション周りと呼んでいるのはタイトル&ヘッダー画像の下に出ている所のことです。

Stinger2をカスタマイズ初心者編!ナビゲーションを自分好みにしよう! | りんろぐ。 2013-08-31 16-38-51

テーマによってはメニューバーなどと呼ぶこともあるかもですねー。

デフォルトの状態

何も触っていなければ多分登録している固定ページの名前が並んでいると思われます。違ってたらごめんなさいー!

固定ページっていうのは毎日書いてるBlog記事じゃなくて、Aboutとかお問い合わせとか個別に作ったページです。

ダッシュボードの「固定ページ」一覧に表示されているページのことですよー。実はこの内容、好きなものに変更が出来ます!!

メニューのカスタマイズ

それではいよいよ変更しますよー!

同じくダッシュボードの外観>メニューにて編集が出来るのでこのページを開いて下さいね。

今まで特にメニューを作ったことがなければ「新規メニュー作成」を選択しますよ!過去に作ったものを編集する時はメニュー名を選択です。

メニュー名は自分が後で区別がつけば問題ないです。

このメニューの中には「固定ページ」「カテゴリ」「リンク」を追加する事が可能です。

固定ページを表示する

Aboutに書かれているBlogの説明、中の人のプロフィール、サイトの規約等は大事なので個人的に表示して欲しいですね。

あとはお問い合わせのページも必要になるケースも。

固定ページをメニューに追加するには「固定ページ」の欄の中から表示させたい固定ページにチェックを入れて「メニューに追加」ボタンを押せばOKです!

カテゴリを表示する

個人的にこれがイチオシのメニューですよ。

自分が大好きなカテゴリや最近力を入れているカテゴリがあればそれをメニューに置いてみましょう!

キーワードで検索してきてくれた人が記事を気に入ってくれたら同じカテゴリの記事を探してくれるかも♪

私も他のBlogへお邪魔した時はよくそうやって他の記事を検索してます!

カテゴリをメニューに追加するには「カテゴリ」の欄の中から表示させたいカテゴリにチェックを入れて「メニューに追加」ボタンを押せばOKです!

カテゴリが階層化していても問題ないですよー!

リンクを表示

URLが存在するページであればリンクを貼る事が可能です。

例えばiPhoneが大好きなのでApple社のHPをメニューに入れたい!という事も可能ですよー。

「リンク」の欄にURLと表示させたいタイトルを記入して「メニューに追加」を押せばOKです♪

ちなみにリンクであれば何でもいけるので、既に存在しているタグのURLも使えるのがポイントです!

並び替え

メニューに追加したモノたちは右側にずらりと並びます。

ドラッグすれば好きな位置に並び替えが可能なので、好きな順番に変更してみて下さい♪

ちなみにカテゴリをメニューにいれたけど表記は変えたい!!という悩ましい時は該当のメニューの右端▼をクリック。

「ナビゲーションラベル」の欄に表示させたいタイトルを書けばOKですヾ(o´∀`o)ノ

ナビゲーションをちょっと飾る

無事に内容は変更できましたか?次はバー全体の装飾を変更していきますよー!!

毎度毎度のことですが、カスタマイズ前は必ずバックアップを!!!また変更する際は文字入力は英字入力モードに!

装飾を変更すると、下手をするとBlog全体のデザイン崩れるのでご注意くださーい。

文字の大きさを変更する

デフォルトだとナビゲーションバー少し文字が小さいんです。

大人な考え方で小さくしている可能性もあるんですがwとりあえず自分でメニューをクリックし損なうのにイラっと来たので大きくしました。

このナビゲーションバーを管理しているのは、デフォルトだと「navi-in」という名前です。

style.cssを開いて「navi-in」を検索しましょ。どこかに「ナビゲーション」とまとまっている所があるはず。

その中のこんな感じの表記を探します。

※テーマのバージョンによっては若干異なる可能性があります。

#navi-in li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
}

今回重要なのはフォントサイズ!!「font-size」と書いてある所です。この数字を大きくしますよ!!数字「13」を「15〜20」ぐらいの好きな数字に変更します。

20pxにするとりんろぐ。と同じぐらいの文字の大きさに変身します!デカすぎるだろ!!と思ったら少し小さめで。

区切りバーのスタイルを変える

メニュー同士の間にある縦の線の色や形状も変更が可能です。

こちらがサンプル。

#navi-in li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
}

色を変更するなら「border-left-color」の後ろの「#CCC」をお好きな色に変更を。

点線じゃなくするなら「border-left-style」の後ろの「dotted」を好きな形に変更します。「solid」なら実線1本。「double」なら2重線。

あら簡単v(*´∀`*)v

応用編:広告を入れる

りんろぐ。のStinger2カスタマイズをしていて、実はナビゲーション周りでよく聞かれるのがナビゲーションの下に入っている広告の入れ方です。

これは私も四苦八苦して無理やりいれたのでw正しいやり方ではありません。恥ずかしいのでヒントだけ。これが分かる人のみ入れて下さい!

広告の準備

自分が契約している広告主の所から横長のサイズの広告タグを取得してきて下さい。このサイズも何が正しいのか私は分からないのでお好きなもので。

メニューバーのまとまりに入れ込む

ここがどうしても私が悩んだ所。最初はどうやっても広告がページ左端によってしまってどうしようもなかったです。

それで編み出したのがちゃんと入っているメニューバーに無理やり入れ込んでしまう力技。

ヒント:「div id=”navi-in”」というdivの中に広告タグを丸ごと入れ込んでしまう

後はソースを確認してみてくださーい!!

※もっとこうやれば綺麗だよー!という先輩方のアドバイスもお待ちしておりますー♪

凛的まとめ

・ナビゲーションの内容は変更可能!
・オススメカテゴリも追加しましょ!!
・色もスタイルもご自由に!!!

WordPressのカスタマイズっていうと恐ろしいイメージがありますが、まずは簡単な所から触って自分でカスタマイズできたー!って喜びを♪

万が一失敗した時もすぐ元に戻せるように、カスタマイズ前のバックアップはお忘れなく!!!

次の記事もお楽しみに〜(*`・ω・)ゞ

スポンサードリンク

スポンサードリンク

CATEGORIES & TAGS

Wordpress, テーマカスタマイズ,

Author:

iPhoneアプリ/語学学習/間取り図/ガジェットが大好きです!手帳と宇宙画像が最近の癒しです。WorkFlowyが好きでスマホから操作ができるアプリHandyFlowyとMemoFlowy絶賛オススメ中♡