2011/12/04 Blogger 上部のヘッダーにリンクを挿入する

 

Blogger 初心者講座。

今回は、ブログの上部にリンクヘッダーを簡単に挿入する方法の紹介。

 

リンクヘッダーとは、当サイトでも導入している↓

こんな感じの上部メニューです。

 

本来は css で定義する方がベターなのですが、今回は１回のコピペで済むように単純な

方法での紹介。

 

まずはこちらから旧 UI でホーム画面にアクセスしましょう。

 

http://www.blogger.com/opt-in-new-ui.g?useNewUi=false

 

そしてデザインをクリックし、次の画面に進みます。

 

赤い○で囲っているデザイン画面の上部にて「ガジェットを追加」を行います。

 

 

挿入した場所から、後でドラッグアンドドロップでガジェットを移動する事もできます。

 

続いて「HTML/Javascript」を選択し、追加を行います。

 

画面が切り替わった後、以下のコードを丸ごとコピー&ペーストします。

<div style='text-align:center; font-size: 14px'>
<span style='margin-right: 20px'><a href="http://mfsocket.blogspot.com/" title="TOPに戻ります">TOP</a></span>
<span style='margin-right: 20px'><a href="http://mfsocket.blogspot.com/" title="リンク２です">リンク２</a></span>
<span style='margin-right: 20px'><a href="http://mfsocket.blogspot.com/" title="リンク３です">リンク３</a></span>
</div>

 

赤い色はリンク先、緑色はマウスカーソルを合わせたときのメッセージ、オレンジは

リンク名になります。それぞれ自分のサイトに合わせて変更する事ができます。

 

そして保存を実行すれば、ヘッダー追加は完了となります！

 

   

 

場所を変えたいときは「デザイン画面」にて、今回追加した「HTML/Javascript」を

ドラッグ＆ドロップで調整を行ってください。

 

同じ方法で、ブログの下部に「フッター」を追加する事も可能です。

  

 

以下、カスタマイズ情報。

 

 

◆文字を大きくしたいとき

・font-size: 14px となっている箇所の数字を大きくしてください。

 

◆間隔を狭くしたい、または広げたいとき

・margin-right: 20px となっている箇所の数字を、小さく・または大きくしてください。

 

◆文字の色を変えたい

・オレンジのリンク名の前後に <font color=''red"></font> を追加してください。

red となっている箇所が色名になります。名前ではなく#数値 で指定するときは

こちらのサイト等が参考になります。