トップ画像
- 管理人のWEB技術向上を目指すと共に,IT系・プロ野球・身の回りに起こったことなど綴っているサイトです -

【WP】ヘッダーのナビゲーションバーを弄った際のまとめ

WordPressでヘッダーのナビゲーションバーを弄ったんですが、覚えているうちにメモ。

結局今のものになった。

準備するもの

手 順

◆Multi-level Navigationをインストール

◆ダッシュボードの設定からMulti-level Navigationを選択

◆Menu contentsからナビゲーションバーに表示したい項目を選択

  •     Menu Itemのプルダウンで「pages」を選択すると固定ページが表示されます
  •     ちなみに当サイトは、Menu Item #1→home,Menu Item #2→pages,Menu Item #3→Custom 1としています
  •     Customには自由にコードを入力することが出来、ページ最下部の欄に入力することで表示できる

◆検索フォームを設置

  •     ページ最下部のCustom code 1に以下のソースを入力
  •     ここではデフォルトテーマ「Twenty Eleven」の検索フォームのコードを入れることで、ヘッダーに検索フォームを挿入している
<form method=”get” id=”searchform” action=”u r l を 入 力” style=”float :right; margin: 0;”>
<label for=”s” class=”assistive-text”></label>
<input type=”text” class=”field” name=”s” id=”s” placeholder=”Put word !” />
<input type=”submit” class=”submit” name=”submit” id=”searchsubmit” value=”Search” />
<input type=”reset” value=”Reset”> <!–リセットボタン。削除可–>
</form>

◆Appearanceを設定

  •     大まかなことはPixoPoint CSS generatorで。
  •     細かい所は手動で変えていきます。
◇文字
#suckerfishnav {
background:black repeat-x;
font-size:15px;
font-family:Times New Roman;
font-weight:normal;
width:100%;
}

 

◇高さ
#suckerfishnav, #suckerfishnav ul {
~省略~line-height:34px;~省略~
}

 

◇横幅、仕切り棒
#suckerfishnav li {
float:left;
padding:0;
width:110px;
border-right: 1px solid #dcdcdc;
}

他にも弄る要素はたくさんあると思います。

◆ナビゲーションバーを横いっぱいに見せるために

  •     仕組みは簡単です。背景画像として適用すれば良いです。
    実はココ、最も悩みました。CSS弄りましたが結局このほうがいいような気がします。
  •     用意するサイズは幅1800px。高さはご自身のヘッダー画像に合わせてください。
  •     背景適用する際、次の点にご注意下さい。
  •     繰り返しなし
  •     スクロールの有無→スクロール

と、長ったらしく書きましたが、本当に忘れそうなのでまとめました。
ソースを弄ってて思いましたが、やっぱりCSSは奥が深いですね~
この他にももう少しブログデザイン変更していく予定です。

ではこのへんで ノシ

コメント / トラックバック 5 件

shobon2012/03/31 23:23

php面白そうですねぇ
htmlにも組み込めるみたいですし javascriptも使えたら万々歳ですねw

そういえばhtml5の普及状況はまだ全然みたいですが、
zeroさんはこの先触ったりするのでしょうか?

自分はphp学んだ後に触っていこうと考えていますが

:junaszero| 2012/04/02 11:22

コメントありがとうございます(^O^

そうですね。
言語の扱い次第でWebの自由度も違ってきますから。

実は、私も僅かながらhtml5への対策はしているつもりです。
これまで使えていたタグが使えなくなったりと、SEO的にも良くないのかと思って。
各種ブラウザも対応しているようですし正式勧告には間に合うんじゃないでしょうかw

php学んだあとでも全然遅くないと思いますよ。
基本的にhtmlは簡単ですので。

shobon2012/04/02 23:47

なるほど 既に対策済みですかw

html5の正式勧告2014年なんですね
中々時間あるぜぇ・・・w

htmlならまだいいですが、html5となると勝手が違うような気がしましたのでw

そうですか簡単なら嬉しいですねぇ(´・ω・)

お答え感謝です(∩´∀`)∩

Walter2013/08/07 21:18

That really caeutrps the spirit of it. Thanks for posting.

Peggy2014/03/07 03:28

The likelihood that a loss will occur. The higher the probability that an incident will occur that will create a loss your insurance Quotes Chimp will have to pay for, the greater the risk to the company and, thus, the higher the premium. (Higher risk equals higher premiums.) For example, if you have three drunk-driving convictions in the last four months, your auto insurer will believe, with justification, that your likelihood of getting into an accident and in�curring a loss is very high. As a result of their in�creased risk of loss, you will incur higher premiums. Conversely, if your driving record is spotless, your premiums should go down with the insurance com�pany’s reduced risk.

コメント書いてみる?

*コメント本文

  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。

Connect

Tag cloud

Sponser



Counter

▲ Page top

  プロフィール  PR:無料HP  湯沢自動車学校  アニメクリエイター 専門学校  新品タイヤを購入したい  中古ホイール 栃木  タイヤ マーチ 新品  Webデザイナー 専門学校  20インチ アルミホイール  数珠  幼稚園教諭 大学  TMJ投資顧問 詐欺  エルグランド 中古  名簿販売