PCインストラクターの川上です。
今日は、
スクロールしても動かないボタンを右上端に設置する方法をお伝えしますね。
現在、試しに私のブログの右上に「最新お茶会情報」のボタンを表示しています。
（もう別のボタンに変更しています^^ゞ）
で、クリックするとそのページに飛んでいくようにしています。
（もう別のボタンとリンク先に変更しています^^ゞ）
まず、画像（ボタン）を作成しますね。
ここでは、Excelで作成します。
（エクセルでの画像の作り方は『エクセル（Excel）で背景画像を作成しよう！』をご覧いただけるとよいです^^）
長方形を高さ240px×幅60pxで作成し、ワードアートをのせます。
ワードアートは［ホーム］タブ内の「方向」で「縦書き」にして、
フォントを好きなのにします。
さらに、ボタンを立体的にします。
そして、画像化（PNGファイル）します。
（エクセルで作った図形を画像化する方法はこちらの記事『エクセル（Excel）でヘッダー画像を作るには』 か 『エクセル（Excel）で作ったヘッダーを画像として保存するには（ワードとの連携編）』 をご覧くださいませ^^）
この↑画像をアップロードして、画像urlを取得しておきます。
■画像urlの取得方法■
１．画像をアメブロ記事の「画像をアップロードする」でアップロード
いつもやっている通りに画像をアップロードします。
２．タイトルを「フリースペースのバナー」として記事を書く
あとで下書き保存するために、タイトルを入れておきます。「あああ」とか他のタイトルでもいいですよ。
３．アップロードした画像を記事に貼り付ける
４．［HTML表示］or［HTMLタグ］に切り替える
すると画像urlが表示されています
いつもやっている通りに画像をアップロードします。
２．タイトルを「フリースペースのバナー」として記事を書く
あとで下書き保存するために、タイトルを入れておきます。「あああ」とか他のタイトルでもいいですよ。
３．アップロードした画像を記事に貼り付ける
４．［HTML表示］or［HTMLタグ］に切り替える
すると画像urlが表示されています
そして（ココ重要！）･･･
「フリースペース編集」か「フリープラグイン」に次のコードをコピペします。
<div style="position:fixed;top:0;right:0;"><a href="リンク先url" target="_blank"><img src="画像url"></a></div>（※ココ↑では、上にピッタリとくっつけるために、fixed;top:0;としていますが、fixed;top:10px;といったように、pxで数値を指定してあげると自由に配置できます。）
その後、リンク先urlと画像urlをコピペしてあげます。
今回は、このような↓コードになっています。
<div style="position:fixed;top:0;right:0;"><a href="http://ameblo.jp/kyoro4614chie/entry-11750469804.html" target="_blank"><img src="http://stat.ameba.jp/user_images/20140219/16/sumitak1329/12/cf/p/o0062024312851438716.png"></a></div>（※ココ↑では、上にピッタリとくっつけるために、fixed;top:0;としていますが、fixed;top:10px;といったように、pxで数値を指定してあげると自由に配置できます。）
あとは、「保存」して、ブログを更新して、確認をしてみます。
といった感じでお知らせをすることができますよね^^
･･･ということで、これからキョロちゃんとマキセさん主催の大阪でのコラボランチ会に参加してきま～す（笑）
といっても、今札幌にいますから･･･、もちろん･･･、Skypeですよ～^^!
＜補足＞
アメブロの一番上に表示されている、Amebaロゴ（左）やアメブロ検索（右）などのこの部分を「アメーババー」と言いますが、ここの高さが21pxあります。
ですので、21px分画像を下に作るか、文字を下げておくか、するとピッタリ右上に配置できます。
右利きの人が多いから、右上はクリックしてもらうのに効果的ですね^^
＜設置例＞
晴れの国岡山県の倉敷市で生まれ育った氷共未（ひとみ）さんの
パソコン初心者のできると楽しい！アメブロ作り＆写真加工レッスン
で設置されていますので、ご参考になさってみてくださいませ^^!
以上、パソコンワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大