全ページ最上部に表示されるメッセージ枠を設置する | 「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい！」そんな方の思いにも答えられるサイトを目指しています

全ページ最上部に表示されるメッセージ枠を設置する

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

今回は、当ブログで新たに設置した全ページの最上部に表示されているメッセージ枠の設置方法をご紹介したいと思います。

jQueryを使っていますので、表示されるまでに少し時間はかかってしまいますが、強く告知したい内容が全ページに掲載できるので便利ですね。私の場合は、現在掲載されているサイトナビゲーションについての説明を入れてみました。

jQueryを使用してブロック挿入（移動）する

以前、「jQueryにお世話になってみる 」という記事で人気ブログランキングの投票枠を各記事の下に配置する方法を解説しましたが、やり方としては似ています。導入する際の注意点については、同記事をご参考ください。

その時にはinsertBefore(content)というAPIを使いましたが、今回はprependTo(content)を使います。フリープラグインエリアに書いたHTMLソースコードを、ページ最上部に追加するわけです。

jQueryについては「jQuery日本語リファレンス 」が参考になりますので、興味のある方はブックマークされておけばよいと思います。

手順1．jQueryを使える状態にする

まず、フリープラグインエリアにjQueryのライブラリを呼び出す記述がない場合は、以下のソースコードを追加します。

<script type="text/javascript" src="http://stat.ameba.jp/common_style/js/library/jquery/jquery-1.6.2.min.js"></script>

内容を保存して、フリープラグインがいずれかのサイドバーに配置されていることをご確認ください。

手順2．APIを使ってメッセージ枠をページ最上部に挿入する

その下に次のソースコードを追加します。

<script type="text/javascript">$(function(){$(".siteinfo").prependTo(".skinMainArea2");});</script>

黄色い文字の部分がメッセージ枠のクラス名です。そのまま使ってもいいですし、ご自分でHTMLを作成してご自分のつけたクラス名に変更されてもOKです。

これで準備は整いました。

手順3．フリーエリアにメッセージ枠を作成する

以下のHTMLが、クラス名siteinfoのメッセージ枠です。/* 自由に内容を記述してください */の部分に、メッセージをご記入ください。

「HTMLがわからない！」という方は、アメブロで記事を書く容量で編集した文書をHTML表示させ、そのソースコードを貼り付けられればよいと思います。

<div class="siteinfo">
/* ここに自由に内容を記述してください */
</div>

内容を編集したら、保存してフリープラグイン同様に、いずれかのサイドバーに配置してください。

手順4．CSS設定する

最後にCSS設定を行います。黄緑色の2重枠線で囲まれた当サイトのメッセージ枠は次のような設定になっています。

/* ■サイトinfoの設定■ */
.siteinfo {
	border: 3px double #b6f276;	/* ←黄緑色の2重枠線 */
	padding: 10px;	/* ←枠線からその内側の内容とのスペース */
	margin-bottom: 16px;	/* ←メッセージ枠下のスペース */
	font-size: 90%;	/* ←文字のサイズ */
	color: #666666;	/* ←文字の色 */
}

いずれもご自身のサイトに合わせてカスタマイズされればよいと思います。文字サイズ（font-size）については、当ブログは文字を少し大きくしていますので、それに対して小さい文字にするようにしましたが、CSS編集可能デザインでデフォルトの文字の大きさのままでしたら、同じ設定だと文字が小さくなりすぎると思いますので、この1行は削除してください。

borderについて簡単にに説明しますと、太さ、線の形式、線の色を半角スペースで区切って指定します。

太さは、ピクセル（px）で指定するのがいちばん分かりやすいでしょう。私の場合は3ピクセルにしています。

形式は、実線がsolid、破線がdashed、点線がdotted、二重線がdouble。ここまでが使用に耐える（笑）と思います。他にnone（表示しない）、groove（線が凹んで見える立体形状）、ridge（線がとんがって見える立体形状、inset（内側全体に凹んで見える形状）、outset（内側全体にでっぱってみえる形状）の指定ができます。

色の指定やその他の設定の参考には、よろしければ以下の記事もご参照ください。

当ブログの全ソースコード

HTML、CSSとも基本的なところだけをご紹介してきましたが、当ブログの全体設定を記しておきますので、ご自由に手を入れてご活用いただければと思います。

HTMLの全体設定

<div class="siteinfo">
<ul>
<li>グローバルナビゲーション（上のメニュー）からは、各テーマ記事一覧にリンクしています。</li>
<li>アメブロカスタマイズ講座は、「超入門」「やってみよう！カスタマイズ」「ちょっと難しいカスタマイズ」の3レベル。<br />
<a href="http://ameblo.jp/jalan2-net/entry-11137310780.html">難易度付き記事一覧ページはこちら</a>です。</li>
</ul>
</div>

CSSの全体設定

/* ■サイトinfoの設定■ */
.siteinfo {
	border: 3px double #b6f276;
	padding: 10px;
	margin-bottom: 16px;
	font-size: 90%;
	color: #666666;
}
.siteinfo ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.siteinfo ul li {
	padding: 0 0 0 15px;
	background: url('http://stat.ameba.jp/user_images/20120115/15/jalan2-net/4b/b2/g/o0009001111736252838.gif') left 3px no-repeat;
}