【ページナビをオリジナル画像にしてみる】 の巻 | もももももきゅーーーーん!!

ここをカスタマイズ!


今回はページナビをカスタムしていきます♡

ページナビとはここ!





わかりにくいですね;すみません;

記事の上や下、コメント欄の上下にある

<<前ページ     次ページ>>


のことです。




編集個所


今回のカスタマイズはCSSを変更します。





画像の準備



まず今回も画像の準備が必要です!

おおよそのサイズは
横75~100、縦20~30くらい

前ページと次ページ、

通常表示時のものとマウスオーバー時のもの

計4枚の画像が必要です。

サンプルとして
サイズ横100×縦25で画像を作成しました。


通常用

マウスオーバー用


次ページ分も含めて計4枚







CSSの編集



このカスタマイズにはリアナさんのタグをお借りしまし た。


直接タグを貼るのは著作権の問題や、


「間違いが広まる可能性がある」

とのことで推奨されていませんので、

該当記事へのリンクをご紹介します。



画像の準備ができたら、


下記をタブルクリックするとテキストエリアに変わります。

という部分のタグをすべてコピペ!

画像のURLに作成した画像のURLをコピペし、

width:75px;/* 幅(調整要) */の赤字部分
作成した画像の幅に合わせて変更してください。
作成した画像の幅が100pxなら100pxに変更。


すると
シンプルだったページナビが

こうなります!


たかがページナビ、されどページナビです。


リアナさんのブログには、

ブログ内のあちこちにあるページナビを

「ここはあった方がいいけど、ここはいらない…」という

わがままを叶えてくれちゃうカスタムも紹介されてます!


ページナビの表示制御

(こちらはフリープラグインの変更もあります)

記事のページナビのCSS、HTMLの変更
(アメーバ側のCSS改編に伴った変更です。ページナビを画像にしている方は必読です。)


注意点


・コピペする際は
などを取りこぼさないよう に!

・コピペしたタグは必ず一番下に貼りつけること!             

・保存したあとの画面で

「リクエストは既に処理中であるか無効です」

と表示されていないか確認!




この表示がでた時は保存に失敗しています!


なのでもう一度「保存」してください。


今回お世話になったのは…


リアナさん





STRIDER20150415233638
もきゅんのサンプルブログはコチラ。
(サンプル用なので何にもありません)