お借りしています。
プラグインを貼り付けるだけアメリンクというサイトに
自分のアメブロの専用の紹介ページが作成されるようになっていて
アクセスアップにもいいとのことです。
ママンのサイトはあまり紹介してくれる人はそれほどいないのですが
たまーにリンク貼ってくれる人を見逃さないようにとつけてみました。
結構たくさんの人が紹介したり 利用している人もたくさんいます。
なので、ママンはひねくれているのでｗｗｗ
皆と同じなのはちょっとねーと色々カスタマイズしてみました。
わざめーばさんがそんなやり方まで説明してくれています。
↓↓↓
『「この記事を紹介してくれた人」を好みのデザインにカスタマイズするには』
こんな感じでヘッダー部分などの色を変えることができます。
自分なりの色にしたい人はわざめーばさんの↑のサイトを見て変えてみてくださいね。
(わざめーばさんの画像を拝借)
でも、ママンはそのヘッダー部分に画像を使ってみました。
画像にするやり方はわざめーばさんのところでは書いていないので
ちょっと、付け足しとして説明します。
わざめーばさんのサイトでデフォルト状態のCSSを編集します。
(CSSのコードはわざめーばさんのところからコピーしてくださいね。)
それにはカスタマイズできるデザインじゃないと無理なのでご了承くださいね。
そのデフォルトのCSSのヘッダー部分を画像に変えてみます。
この部分をこんな風に変えてみました。
赤い文字が画像のＵＲＬ(アドレス)です。
/* ヘッダー部 */
.amelinkHead {
position: relative;
padding: 5px 10px;
font-weight: bold;
font-size:12px;
color: #fff;
background-image: url(http://stat.ameba.jp/user_images/20140222/15/maman44/e1/bf/p/o0033002712854321304.png);
}
画像はこれです。
↓↓↓
そして、この画像に合うようにフッター部分の色も変えました。
画像は自分で好きなのを作ったりフリーサイトから借りて
アメブロでアップロードしてURLを取得してくださいね。
/* フッター部 */
.amelinkFoot {
padding: 5px;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 20px;
border-radius: 0 0 5px 5px;
border-top: 1px dotted;
background-color: #bbbbbb;
}
色のコードがわからないという人はこちらでも参考にしてみてください。
こんな具合にCSSを編集して自分なりのプラグインに変えることができます。
そして最後に忘れてはいけないのが
フリープラグインにもコードを追加しないとなりません。
そのコードもこちらのわざめーばさんのサイトからコピーして貼り付けてくださいね。
わざめーばさんのコードはほんと短く作ってあって
大助かりなんですが、文字制限いっぱいのママンはこのたった一行のコードすら
貼り付けることができずに、
オイコラ、文字が3800超えちゃってるぞーみたいなコメントが出て怒られましたﾟ(ﾟ´ω`ﾟ)ﾟ｡ﾋﾟｰ
なので、もうどうしようもなく、諦めるか？とも思ったのですが
この際なのでjavascriptファイルの外部化に挑戦。
なんとか苦労しながら(人に頼りながらwww)頑張りました。
その話は長くなるのでまた今度。
こんな具合に色だけを変えても
画像にしても使え、自分なりのカラーが出る
素敵なプラグインを作ってくださってありがとうございます。ペコリ(o_ _)o))
みんなも挑戦してみてね～♪