やり方は三つしかない。正しいやり方。間違ったやり方。俺のやり方だ。

「やり方は三つしかない。正しいやり方。間違ったやり方。俺のやり方だ。」

映画「カジノ」より



カジノ [DVD]

固定ボタンを配置する（アメブロ編）

スクロールしても動かないボタンを表示する方法をご紹介します。

よくソーシャルネットワークのボタンが左右に配置されてたりしますよね。
あれをトップページや読者登録のリンクとしてやろうという話です。

��．画像を準備する。
トップページのリンクなら無料素材できっといいものが見つかると思います。

例えば、kettyさんが運営されてるblue-greenというサイト

自作するなら６０×６０ｐｘぐらいの大きさがいいでしょう。
それより大きいとブログに侵入してきます（笑）

��．アップロード
「ブログを書く」ページからアップロードしましょう。「画像」ボタンをクリックです。

ファイルを選択して、タイトルつけて、「アップロード」ボタンをクリック。

画像フォルダを新しく開いて、使いたい画像を右クリックしましょう。「画像ＵＲＬをコピー」をクリックです。

��．フリープラグインを編集
サイドバー→ブラグインの追加をクリック

フリープラグインのタブをクリック

以下の記述を加えましょう。

<div style="position:fixed;top40px;left:15px;">
<a href="ボタンのリンク先となるＵＲＬ" target="_blanK">
<img src"画像のＵＲＬ">
</a>
</div>

誤字脱字はございませんか？できた保存です

��．プラグインの設置
サイドバー→配置設定をクリックしましょう。

使用する機能の中に「フリープラグイン」が入っていることを確認してください。

もし、使用しない機能の中にあったら、ドラッグして使用する機能の中に入れましょう。

保存をわすれずに！

��．ブログを確認
イメージ通りにできたか確認しましょう。

過去の記事ページにメッセージボードを表示させる（アメブロカスタマイズ）

二回にわたりご説明したメッセージボードのアレンジでしたが、メッセージボードには欠点があります。

それは過去の記事ページには表示されないということです。トップページにしか表示されません。

すべてのページに表示させてアピールする方法をご紹介します。メッセージボードは使わずに、フリープラグインとＣＳＳを使います。

��１．）メッセージボードをコピーする
すでにメッセージボードを使っている人は、その内容をそのまま移します。
各種設定→メッセージボードの順でクリックし、編集画面を呼び出します。
下の方にある「ＨＴＭＬタグを表示」というボタンを押します。
窓にある内容をすべてコピーしましょう。

コピーできたらメッセージボードの内容を削除します。

��．フリースペースに記述
サイドバー→フリースペース編集の順でクリックします。

��１．）の手順を踏んできた方は、ここにコピーした内容を貼り付けます。
また、今までメッセージボードを使ってなかった方や新しい内容を書きたい方は、ここにすべての記事ページの上に表示させたい内容を記述します。

表示内容を

<div class="AllMessageSpace">
</div>

で挟んでください。表示内容の前に<div class="AllMessageSpace">を置きます。メッセージの最後に</div>を追加します。

��．ＣＳＳを編集
ブログデザイン→デザインの変更→ＣＳＳの編集の順でクリックします。

��ＳＳの最後に以下の記述を追加しましょう

/* 記事上に余白 */
.skinMainArea2{
margin-top:200px; /* メッセージボードの縦幅＋余白 */
}

/* メッセージボードを配置 */
.AllMessageSpace{
width:448px; /* メッセージボードの横幅 */
height:100px; /* メッセージボードのの縦幅 */
border:1px solid #d3d3d3; /* 外枠線 */
background-color:#ffffff; /* 背景色 */
padding:10px;
position:absolute;
top:0px; /* 上から下に移動 */
left:195px; /* 左から右へ移動 */
}

marginやpositionの値を調整してベストの位置を見つけましょう。
��ＳＳの編集画面の「表示を確認する」で見た場合と実際にブログを確認した場合でメッセージの位置が異なる場合もあります。よって、編集後は必ずブログを開いて位置を確認しましょう。