
本ブログでも使用している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. の登録商標であり、同社の許可を得て使用しています。