【Cocoon】グローバルナビの上下に線を入れてみた

カサ子のつぶやき
この記事は約6分で読めます。
カサ子

またまた時間があったから、ブログの見た目をちょっと変えてみたよ~(^^)

カピ子

苦手意識はどっかいったの?

そうなんです!
web知識はゼロの私ですが、調べて少しずつ変化を加えていってると楽しくなってきてしまいました(^^♪

ってことで、今回はトップページにあるグローバルナビの上下に線を加えてみるということにチャレンジ!

スポンサーリンク

ロゴを作ってみたけれど・・・

ぼんやりと自分のサイトを見ながら『なんかメリハリがないな』と思ったのがキッカケでした。

でも、何をしたらメリハリがつくのかわからなくて、色んなホームページを参考にさせていただきながら、あれやこれやと考えました。

そしたら、皆さんオシャレにロゴを作られてるんですよね。

よしこれだ! 私もロゴを作ろう!

そう思ってロゴが作れるサイトを探し、あーでもないこーでもないとロゴを作ってみました。

カピ子

で、作れたの?

カサ子

いやぁもう聞かんとって(≧ヘ≦ )

ほんっと、自分のデザインセンスが情けない・・・。

トホホでした。

それでも、何とか2つほどまだマシかなと思えるロゴを作り上げたのです。

そしていよいよブログにアップしたんですが、どうもしっくりこず2日ほどで削除しました。

カピ子

そんなに気にいらなかったの?

カサ子

うん、なんかね・・・
せっかく、大切に育ててきてるブログだし、自分の気に入るようにしたいからね(^^)

ということで、今回はロゴ作成は見送ることにして、何かアイデアがあればそのときにもう一度作るということにしました。

スポンサーリンク

ところで、ここ何ていう名前?

で、ロゴ作成を見送ったのですが、メリハリのないことがどうも納得できていませんでした。

普段は諦めが早いのですが(笑)

そこで、今回の目的であるグローバルナビの上下に線を入れるということを思いついたのです。

キツ美

思いついたって、他の方も気づいておられるわよ( 一一)

カサ子

確かに(;^ω^) だから知識がない私でも他の方の記事を参考にして出来たんだもんね。

ただ、上下に線を入れたらいいだろうということは閃きましたけど、ここの部分が何という名前かわからず・・・(;・∀・)

だから検索しようにも言葉がパッと最初はわからなかったんですよね。

お恥ずかしい(* ̄∇ ̄*)

そうして調べていくうちにグローバルナビという名前であることがわかりました。

ワードプレスのCocoon設定画面にも、グローバルナビという名前が出てきます。

キツ美

あ、ちょっと! ここにグローバルナビに色がつけられるようにあるじゃない!

カサ子

ん~~それよりも線がいいんだよぉぉぉ

そうなんです。帯で全体に色をつけてしまうより、線をひいてみたいんです!

スポンサーリンク

スタイルシート(style.css)を変更する

先日、下記のようなブログを書いてそれほど経ってませんので、スタイルシート(style.css)の変更はまだ気楽にできました(^^♪

【Cocoon】初心者の私が目次コンテンツの色を変えてみた
web知識のない私がCocoonの目次コンテンツの色を変えることにチャレンジしてみました。

では、早速進めていきましょう!

左のメニューから、『外観⇒テーマエディター』と進みます。

表示された画面が、『Cocoon Child』『スタイルシート(style.css)』になっていることを確認してください。

私の場合は、いきなり『Cocoon Child』『スタイルシート(style.css)』でしたが、バージョン等によって違うことがあると思います。
くれぐれもお間違えの無いようになさってください。

上記を図に表すと、下記のようになります。
赤枠の4カ所をチェックしてくださいね☆

次に、画面真ん中辺りの/*必要ならばここにコードを書く*/という文章があるのを確認してください。

ここの下にいよいよ、グローバルナビの上下に線を引いてね、という指示を書きます。

具体的な場所は、下記画像の大きな赤矢印のところです。

で、ここに下記の内容を追記しましょう。

/* グローバルナビの上下に線を入れる */
#navi {
border-top:solid 5px #7d5a5a; /*上ラインの太さと色*/
border-bottom:solid 5px #7d5a5a; /*下ラインの太さと色*/
}

上記のように追記すると、このブログと同じようになります。

ここまでできたら左下にあるファイルを更新ボタンをクリックし、ファイルの編集に成功しました。となればOKです。

線ができているか確認

やってきましたドキドキの瞬間です。

線はあるのでしょうか~

じゃーーんっ

わーい(≧∇≦)

できてるできてる!

カピ子

やっぱり線があればキリッとして見えるよ。

カサ子

うんうん(^^)
こっちの方がいいね。でも、線はもう少し太い方がいいのかな・・・

キツ美

また贅沢な( 一一)

ということで、他のバリエーションもチャレンジ(#^^#)

色んなバリエーション

二重線

/* グローバルナビの上下に線を入れる */
#navi {
border-top:double 10px #7d5a5a; /*上ラインの太さと色*/
border-bottom:double 10px #7d5a5a; /*下ラインの太さと色*/
}

二重線を表すのは、doubleになります。

線が細いと二重線に見えないので、10pxにしました。

点線+青

/* グローバルナビの上下に線を入れる */
#navi {
border-top:dotted 5px blue; /*上ラインの太さと色*/
border-bottom:dotted 5px blue; /*下ラインの太さと色*/
}

点線を表すのは、dottedになります。
また青色はblueと書けばOKです。

カピ子

へぇーblueでいいんだね(^^)

上下でそれぞれに変えてみる

カピ子

? どういうこと(・・?

カサ子

深く考えずにとりあえずは見てちょーだい(^^)

キツ美

何してんのよ( 一一)

カサ子

少しわかるようになったら嬉しくて遊んでみた(笑)

/* グローバルナビの上下に線を入れる */
#navi {
border-top:dashed 10px red; /*上ラインの太さと色*/
border-bottom:solid 5px orange; /*下ラインの太さと色*/
}

なかなかこういうデザインはしないと思いますけど、色んなことができるということですね(^^♪

まとめ

グローバルナビの上下に線を入れる方法をご紹介しました。

ブログのオリジナルロゴを作りたいけど、デザインセンスのかけらもないので、何となくぼやけた印象を回避したくてチャレンジしてみました。

デザインセンスもありませんが、web知識もありません。
ですが、ネット上に情報はありますので、有難くそれらを参考にさせていただいて、どうにか思った通りに仕上げることができました。

デザインセンスがなくても、こういう方法でブログを彩っていくことができるんだなとわかりました~

どなたかのお役に立てれば嬉しいです(^_-)-☆

応援よろしくお願いしますm(__)m

にほんブログ村

コメント