BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ メニューバーを設定する方法

このエントリーをはてなブックマークに追加

はてなブログカスタマイズ メニューバーを設定する方法

   投稿日: 2017/12/01    投稿者:webコラム

0bb76e77cbb5b4c79dfb9ab7045e82c3_m.jpg


こんにちは! ライターのモモタロウです。

今回は、はてなブログカスタマイズ メニューバーをタイトルの下に設定する方法をお伝えします。

20171028-2.jpgのサムネイル画像

今回は「caaglobleのブログ」タイトルの下に、メニューバーを設定します。


はてなブログにメニューバーを設定するには?


まず、はてなブログにログインします。

その後、「ダッシュボード」→「デザイン」の順にクリックしていきます。

20171028-1.jpg



「デザイン」画面で、左上のメニューバーにある「スパナ」ボタンをクリックします。


メニューにある「ヘッダー」のHTMLを編集します。

20171028-3.jpg



入力するコードは以下の通りです。

<!-- ナビゲーションバー -->
<div id="menubar">
<ul>
<li><a href="http://ホームページアドレスを入力します" title="ホーム" >ホーム</a></li>
<li><a href="http://ホームページアドレスを入力します/芸能" title="芸能ニュース">芸能ニュース</a></li>
<li><a href="http://ホームページアドレスを入力します/ニュース" title="一般ニュース">一般ニュース</a></li>
<li><a href="http://ホームページアドレスを入力します/IT" title="ITニュース">ITニュース</a></li>
</ul>
</div>


HTMLの編集が終わったら、次にメニューの下にある「{}デザインCSS」を編集します。

20171028-3-1.jpg


入力するコードは以下の通りです。

#menubar{
    width:100%; }
#menubar ul{
    display:table;
    width:100%;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF; }
#menubar li{
    display: table-cell;
    width:25%;
    padding:0;
    background-color: #000000; }
#menubar li a{
    display: block;
    margin:0 auto;
    padding:5px;
    border: 1px solid #FFFFFF;
    text-decoration: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 18px; }
#menubar li a:hover{
    background-color: #333333; }

入力が終わったら、「変更を保存する」ボタンをクリックします。

作成したブログを確認すると・・・

20171028-4-1.jpgのサムネイル画像

タイトルの下にメニューバーを設定することができました。

まとめ

如何でしたか? 

さまざまなリンク先を用意して、ブログに広がり持たせよう。

ぜひ試してみてくださいね。






カテゴリ:

TOPへ