【WPカスタマイズ】メニューにボーダーを表示させる

【WPカスタマイズ シリーズ】

WP→wordpressの略です。

今日はwordpressのカスタマイズについての紹介します。

カスタマイズするためにはコードを書き換える必要があります。皆さんご存知の黒くて長くて先端に2本の角の様な金属がついているやつです!

このコードを分解して、カクカクシカジカすると、、、

ごめんなさい、、間違えました、、

こっちのコードでした!

ということで、この記事で上の画像のような、よくわからない暗号のようなコードをイジり、ブログのテーマを編集する方法について紹介していきます!

よろしく!

 

 

前提

僕がこのブログで使っているwordpressのテーマを前提に、コードの編集について紹介しています。なので、他のテーマを使っている人にはあまり参考にならない可能性があります。その点はご了承下さい。

僕が使っているテーマ

「write」というテーマを使っています。

このテーマは なななな なんと! 無料なのです!

シンプルなテーマをお探しの方は、是非ダウンロードしてみて下さい!

下記のURLからダウンロードできます。

http://themehaus.net/ja/themes/write/

↓↓wordpressのサイト↓↓

最近作ったwordpressのサイトです。

最終的には、はてなブログからこの下のリンクのブログに全面的に移行する予定です!

仕事にITを!

 

今回のカスタマイズ

メニューの上下にボーダーを表示させました!

ボーダーがないと、メニューと記事のタイトルとの境界が分かりにくいと感じたので表示させました。

僕が使っているwordpressのテーマでは、敢えてボーダーを表示させないよう命令されていました。なので、そのコードを「/* */」で無効化しました。

ビフォー

メニュー部分の上下に、ボーダーがないです!

アフター

メニュー部分の上下に、ボーダーを表示させました!

印象の変化

メニュー部分の上下にボーダーを表示させたことで、どこがメニューでどこが記事なのかの視認性が向上したと思います。

メニューを過度に目立たせるのはあまり好きではないのですが、適度に目立たせた方がサイト全体にメリハリが付きます。

コードの編集について

メニューの上下にボーダーを追加した方法について説明します。
<script>

3行目を下記の様に編集しました。

「border: none;」に「/*  */」を追加。

「/* border: none; */」の様に編集しました。

<script>

border: none とは

border: none とは、ボーダーを表示させないようにするコードです。

他にもボーダースタイルの値を知りたい方は、下のリンク先のサイトを参考にして下さい。

http://www.htmq.com/style/border-style.shtml

次の予定

次は、メニューを上部に固定する方法について紹介します!

画面を下にスクロールした時、メニューが隠れると別のページに行きたいとき不便です。それに、常にメニューが表示されることで、回遊率もアップすると思います。

wordpressのテーマのカスタマイズを、週に1つやっていく予定です!

コードが間違っているやその他なにかご意見ございましたら、コメントを頂ければ対応いたします!

最後まで読んで頂き、ありがとうございました!