本ブログでも使用しているBloggerテーマ「Viral Pro」の魅力の一つは、シンプルでスッキリとしたメニューバーです。

今回は、こちらのメニューバーのリンクを設定する方法を紹介します。

【Viral Pro】メニューバーのリンク設定方法

「レイアウト」画面を開き、「Menu Items」の編集ボタン(鉛筆マーク)をクリックします。

(C)Google

すると、別ウィンドウに編集画面が出てきます。

(C)Google

リンクを設定するには、「コンテンツ」内のHTMLコードを書き換える必要があります。

【コピペでOK】リンク設定用HTMLコード

HTMLコードの編集にはHTMLの知識が必要ですが、以下のコードをコピペし少し書き換えれば簡単に設定できると思います。

<ul>
<li><a expr:href='data:blog.homepageUrl'>ホーム</a></li>
<li><a href='リンク先のURL'>メニューの名前</a></li>
<li><a href='リンク先のURL'>メニューの名前</a></li>
<li><a href='リンク先のURL'>メニューの名前</a></li>
<li><a href='リンク先のURL'>メニューの名前</a></li>
</ul>

「リンク先のURL」にはリンクさせたいページのURLをそのまま貼り付けてください。
「メニューの名前」はお好みでメニュー名を入力してください。

メニューの数はこのコードを追加・削除して調整してください。

<li><a href='リンク先のURL'>メニューの名前</a></li>

コードの編集が終わったら、「保存」をクリックします。
ブログを確認し、正しくメニューバーのリンクが設定されているか確認してください。

以上で設定完了です。
不明な点がありましたら、こちらからお気軽にお尋ねください(´∀`)

※Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

【Blogger】メニューバーのリンクを設定する方法【Viral Pro】

本ブログでも使用しているBloggerテーマ「Viral Pro」の魅力の一つは、シンプルでスッキリとしたメニューバーです。

今回は、こちらのメニューバーのリンクを設定する方法を紹介します。

【Viral Pro】メニューバーのリンク設定方法

「レイアウト」画面を開き、「Menu Items」の編集ボタン(鉛筆マーク)をクリックします。

(C)Google

すると、別ウィンドウに編集画面が出てきます。

(C)Google

リンクを設定するには、「コンテンツ」内のHTMLコードを書き換える必要があります。

【コピペでOK】リンク設定用HTMLコード

HTMLコードの編集にはHTMLの知識が必要ですが、以下のコードをコピペし少し書き換えれば簡単に設定できると思います。

<ul>
<li><a expr:href='data:blog.homepageUrl'>ホーム</a></li>
<li><a href='リンク先のURL'>メニューの名前</a></li>
<li><a href='リンク先のURL'>メニューの名前</a></li>
<li><a href='リンク先のURL'>メニューの名前</a></li>
<li><a href='リンク先のURL'>メニューの名前</a></li>
</ul>

「リンク先のURL」にはリンクさせたいページのURLをそのまま貼り付けてください。
「メニューの名前」はお好みでメニュー名を入力してください。

メニューの数はこのコードを追加・削除して調整してください。

<li><a href='リンク先のURL'>メニューの名前</a></li>

コードの編集が終わったら、「保存」をクリックします。
ブログを確認し、正しくメニューバーのリンクが設定されているか確認してください。

以上で設定完了です。
不明な点がありましたら、こちらからお気軽にお尋ねください(´∀`)

※Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

次に読まれている記事