ママブロ「起業」でも投稿中＾＾
こんにちは。高橋好美です＾＾
アメブロを紹介してもらったとき、教えてもらえたらすぐわかるのですが、なかなか気づかないってことも多いですよね。
アメブロガーをつなげるこんな素敵なツールを使って見るのはいかがでしょう！？
今回は、ブログ紹介者を表示してくれる「アメリンク」を設置しつつ、自分の好きな色にカスタマイズする方法をご紹介します。
アメリンクの設置の仕方はこちらの配布ページからご確認くださいね
カスタマイズの参考にしたのは、こちらの記事です＾＾
「この記事を紹介してくれた人」を好みのデザインにカスタマイズするには
プラグインにも１行追加する必要がありますので、ご確認ください。
そのあとにＣＳＳをペタっと貼るだけです。
かなり細かい変更も出来そうですが、１番やりたいのは色の変更ですよね！
ということで、どこを変えればいいのかを太字にしていますので参考にしてくださいね。
/* アメリンクのCSSカスタマイズ */
.amelinkArea {
margin: 5px 0;
border: 1px solid #FF9999;/* 外枠色 */
border-radius: 5px;
}
.amelinkHead {
position: relative;
padding: 5px 10px;
font-weight: bold;
color: #fff;
background-color: #ff9999;/* ヘッダー色 */
}
.amelinkTitle {
display: block;
}
/* ▼アメリンクのアイコン(ここから)▼ */
.amelinkLink {
position: absolute;
z-index: 999;
display: block;
right: 5px;
top: 4px;
width: 20px;
height: 20px;
}
.amelinkArea:hover .amelinkLink {
width: 32px;
height: 32px;
}
.amelinkLink a {
display: block;
width: 100%;
height: 100%;
color: #ffffff;
}
.amelinkLink img {
margin: 0;
width: 100%;
height: auto;
}
/* ▲アメリンクのアイコン(ここまで)▲ */
.amelinkBody {
padding: 0px 5px;
background-color: #ffffff;/* 本体領域色 */
}
.amelinkBody ul {
margin: 0px 5px;
padding: 0px;
list-style-type:none;
}
.amelinkBody li {
position: relative;
margin-left: 0px;
padding: 5px 0;
height: 40px;
list-style-type:none;
border-top: 1px dotted #cccccc;
}
.amelinkBody li:first-child {
border-top: 0px none;
}
.amelinkBody li:after {
display: block;
clear: both;
content: ".";
height: 0px;
overflow: hidden;
visibility: hidden;
}
.amelinkMessage {
display: block;
text-align: center;
font-size: 12px;
color: #999;
}
.amelinkProfileImage {
position: absolute;
z-index: 100;
}
.amelinkProfileImage img {
width: auto;
height: auto;
max-width: 40px;
max-height: 40px;
}
.amelinkProfileName {
display: block;
padding: 0 0 0 50px;
margin: 3px 0 0 0;
font-size: 12px;
line-height: 16px;
overflow: hidden;
white-space: nowrap;
}
.amelinkBlogEntry {
display: block;
padding: 0 0 0 50px;
margin: 3px 0 0 0;
font-size: 12px;
line-height: 16px;
overflow: hidden;
white-space: nowrap;
}
.amelinkBlog {
border-top: 1px solid #fff;
}
.amelinkBlogHead {
padding: 5px 10px;
font-weight: bold;
color: #fff;
background-color: #
}
.amelinkBlogTitle, .amelinkBlogTitle:visited, .amelinkBlogTitle:focus {
display: block;
color: #fff;
text-decoration: none;
}
.amelinkBlogBody {
padding: 0px;
text-align: center;
background-color: #ffffff;
}
.amelinkBlogProfImg img {
width: 36px;
height: 36px;
margin: 1px 1px 0 0;
padding: 0;
border: 1px solid #dddddd;
}
.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 #FF9999;/* フッター点線色 */
background-color:
div.amelink_top .amelinkProfileName {
white-space: normal;
line-height: 12px;
font-size: 11px;
}
.amelinkArea {
margin: 5px 0;
border: 1px solid #FF9999;/* 外枠色 */
border-radius: 5px;
}
.amelinkHead {
position: relative;
padding: 5px 10px;
font-weight: bold;
color: #fff;
background-color: #ff9999;/* ヘッダー色 */
}
.amelinkTitle {
display: block;
}
/* ▼アメリンクのアイコン(ここから)▼ */
.amelinkLink {
position: absolute;
z-index: 999;
display: block;
right: 5px;
top: 4px;
width: 20px;
height: 20px;
}
.amelinkArea:hover .amelinkLink {
width: 32px;
height: 32px;
}
.amelinkLink a {
display: block;
width: 100%;
height: 100%;
color: #ffffff;
}
.amelinkLink img {
margin: 0;
width: 100%;
height: auto;
}
/* ▲アメリンクのアイコン(ここまで)▲ */
.amelinkBody {
padding: 0px 5px;
background-color: #ffffff;/* 本体領域色 */
}
.amelinkBody ul {
margin: 0px 5px;
padding: 0px;
list-style-type:none;
}
.amelinkBody li {
position: relative;
margin-left: 0px;
padding: 5px 0;
height: 40px;
list-style-type:none;
border-top: 1px dotted #cccccc;
}
.amelinkBody li:first-child {
border-top: 0px none;
}
.amelinkBody li:after {
display: block;
clear: both;
content: ".";
height: 0px;
overflow: hidden;
visibility: hidden;
}
.amelinkMessage {
display: block;
text-align: center;
font-size: 12px;
color: #999;
}
.amelinkProfileImage {
position: absolute;
z-index: 100;
}
.amelinkProfileImage img {
width: auto;
height: auto;
max-width: 40px;
max-height: 40px;
}
.amelinkProfileName {
display: block;
padding: 0 0 0 50px;
margin: 3px 0 0 0;
font-size: 12px;
line-height: 16px;
overflow: hidden;
white-space: nowrap;
}
.amelinkBlogEntry {
display: block;
padding: 0 0 0 50px;
margin: 3px 0 0 0;
font-size: 12px;
line-height: 16px;
overflow: hidden;
white-space: nowrap;
}
.amelinkBlog {
border-top: 1px solid #fff;
}
.amelinkBlogHead {
padding: 5px 10px;
font-weight: bold;
color: #fff;
background-color: #
}
.amelinkBlogTitle, .amelinkBlogTitle:visited, .amelinkBlogTitle:focus {
display: block;
color: #fff;
text-decoration: none;
}
.amelinkBlogBody {
padding: 0px;
text-align: center;
background-color: #ffffff;
}
.amelinkBlogProfImg img {
width: 36px;
height: 36px;
margin: 1px 1px 0 0;
padding: 0;
border: 1px solid #dddddd;
}
.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 #FF9999;/* フッター点線色 */
background-color:
div.amelink_top .amelinkProfileName {
white-space: normal;
line-height: 12px;
font-size: 11px;
}
ブログにはテーマカラーを持たせると、こういう時に役に立ちます。
私のブログはサーモンピンク、#ff9999で統一しています。
変更するのは３か所です。
ぜひお試しあれ＾＾
アメブロ講座や個人レッスンの詳細はこちらからご覧ください。
阪急西院駅徒歩７分のアメブロカスタマイズ講座
貴女のためのパソコン教室：高橋好美
受付時間
１０：００～１７：００（月～金）
京都市右京区西院西今田町１０
080-8333-6539
・無料メルマガ／メール講座
・ヘッダーカスタマイズ依頼
・アメブロ講座案内
・教室アクセス
・お客様の声／ヘッダー作成事例
・お問い合わせフォーム
・電話予約 080-8333-6539
貴女のためのパソコン教室：高橋好美
受付時間
１０：００～１７：００（月～金）
京都市右京区西院西今田町１０
080-8333-6539
・無料メルマガ／メール講座
・ヘッダーカスタマイズ依頼
・アメブロ講座案内
・教室アクセス
・お客様の声／ヘッダー作成事例
・お問い合わせフォーム
・電話予約 080-8333-6539
☆京都市西院、西京極、大宮、烏丸御池、伏見、長岡京、国際会館、大阪市内、枚方、兵庫、愛媛、岡山などからお越しいただいております。
☆アメーバブログ初心者向けの講座・ヘッダー画像を作成するブログカスタマイズ講座。初心者にもわかりやすい内容で、自分のビジネスが魅力的に伝わるブログスキルが身に付きます。