【アメブロカスタム】「ページ送り」を目立たせる方法 | サロン・スクール専門のアメブロカスタマイズ・ホームページ制作のウィズデザイン

サロン・スクール専門のアメブロカスタマイズ・ホームページ制作のウィズデザイン

アメブロカスタマイズで選ばれるサロン・スクールになる方法のウィズデザイン横山です。ブログはWeb上のあなたのお店です。そのブログを魅力的にする方法、そして選ばれるお店になる方法を書いています。

アメブロの「ページ送り」ってちょっと目立ちませんよね。

ページ送りは↓これの事です。
応援しあうWeb活用術~アメブロカスタム・集客術~-1

デフォルトのままだと、ちょっと小さくて、あまりに目立ちません。

でも、このページ送り、かなり重要なんです。

それは、あなたの記事を見てくれた人が他の記事も見たいと思った時、別のページに飛ぶ重要なリンクだからです。

なので、ちょっと目立たせる工夫をしてみたいと思います。

今回は、こんな風にカスタマイズしてみたいと思います。

応援しあうWeb活用術~アメブロカスタム・集客術~-2


まず、【アメブロカスタム】CSSの編集方法 を参考にして、CSSの編集画面に行って下さい。

そして、下の記述をCSSの一番下にコピペして下さい。

説明もコメントで書いてあるので、それを参考に色々とカスタムしてみて下さい。

一つだけ注意点。

通常はページ送りの間に  の区切り文字が入っています。

今回は箱型にしたので、この区切り文字は必要ありません。

なので、区切り文字の色を背景と同様にしています。

さらに、その区切り文字の大きさで、箱の間隔を調整する事ができます。

.page の font-size が「箱の間隔」になっているのはそういう意味です。


/* ページ送りの設定 */
.page{ /* 区切り | の設定 */
font-size:4px; /* 箱の間隔 */
color:#ffffff; /* 区切り文字の色 */
}
.page a{ /* 現在以外のページの設定 */
color:#ffffff; /* 文字の色 */
font-size:13px; /* 文字の大きさ */
background:#a1d0a1; /* 背景の色 */
border:1px solid; /* 枠の形 */
border-color:#ffffff; /* 枠の色 */
text-decoration: none; /* リンクの下線 */
padding:5px; /* 四角の大きさ */
}
.page .now{ /* 現在のページの設定 */
color:#000000;
font-size:13px;
background:#ffffff;
border:1px solid;
border-color:#000000;
text-decoration: none;
padding:5px;
}
.page a:hover{ /* マウスがのった時の設定 */
color:#000000;
font-size:13px;
background:#ffffff;
border:1px solid;
border-color:#000000;
text-decoration: none;
padding:5px;
}