ブログ村のバナーをCSSでカスタマイズしました

こんにちは。マリ（＠damarino_oheya）です！

先日、このブログににほんブログ村のバナーリンクを貼ることにしました。

[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]ブログ村はドメインパワーが強く、SEO対策の被リンク効果があるらしいです♩[/say]

ブログ村は登録しているだけではランキングに参加できず、ブログにブログ村のバナーリンクを貼る必要があります。

このブログを開設したのは2016年で、その時に登録していましたが、途中で面倒になってきたのでここ2年くらいはバナーを貼っていませんでした。

以前はいろんなバージョンのバナーがあった気がするのですが、現在のバナーリンクは4種類だけ。

[center]

[yoko2][cell]
にほんブログ村[/cell][cell]
にほんブログ村[/cell][/yoko2]

[yoko2][cell]
にほんブログ村[/cell][cell]にほんブログ村[/cell][/yoko2]

[/center]

[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6013.jpg "]えっ・・・・種類これだけ？？？？しかもこのデザインは一体？？？？[/say]

デフォルトのバナーを貼るのはちょっと・・・という感じだったので、オリジナルバナーを作成して貼ることにしました。

サイドバーのプロフィール欄にブログ村で作成したオリジナルバナーリンクを貼りました。

この記事では、ブログ村のオリジナルバナーのCSSカスタマイズを公開しています。

にほんブログ村でオリジナルバナーを作る

まずブログ村にログインし「マイページ→バナー管理→オリジナルバナー作成」から作成します。

バナー作成画面はこちら。

画像ファイルを準備する（jpg・gif・png）
埋め込むバナーを指定する
バナーを埋め込む位置を指定する

そのあとは「バナーを表示」をクリックするとバナー画像とHTMLが表示されるので、HTMLをコピペで自分のブログに貼るだけです。

[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]使用する画像ファイルは細長いサイズの方が見栄えがいい気がします♩[/say]

自分のブログでやること①｜ブログ村のバナーリンクを貼る（HTML）

作成したオリジナルバナーをそのまま貼ると、

[center]
にほんブログ村[/center]

という感じです。

このHTMLを自分の好きなところに貼ります。

[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]私はサイドバーのプロフィール欄に追加しました♩[/say]

このブログはワードプレスのテーマ「SANGO」を利用しています。

サイドバーのプロフィールはウィジェットのサイドバーに「HTML」で作っているので、

[codebox title="HTML"]

[center]<div class="blogmura">ブログ村で作ったオリジナルバナーのHTML</div>[/center]

[/codebox]

というコードを追加しました。

[box class="box27" title="POINT"]

HTMLを貼る
div class="blogmuraタグで囲む

[/box]

自分のブログでやること②｜バナーデザインを変える（CSS）

あとはCSSでカスタマイズするだけです。

[yoko2][cell]

ビフォー[/cell][cell]

アフター[/cell][/yoko2]

CSSにはこちらを追加しました。

[codebox title="CSS"]

/*ブログ村*/
div.blogmura{
    padding:1em;
    background: #fff;
}
div.blogmura img{
        border-radius:5px;/*画像の角を丸くする*/
        box-shadow: 2px 2px 4px #999;/*画像に影をつける*/
    filter: brightness(120%);/*画像を明るくする*/
}
div.blogmura a{
        color:#333;
    font-size:60%;
    font-weight:bold;
    letter-spacing:0.3em;/*リンク文字の文字間*/
    text-decoration:none;/*リンク下線を消す*/
}
div.blogmura:hover{
        opacity: 0.7;/*薄くする*/
    background:#fff!important;
}

[/codebox]

[box class="box27" title="POINT"]

画像に影をつける
画像の角を丸くする
テキストリンクの装飾を変える

[/box]

おわりに

というわけで、ブログ村で作ったオリジナルバナーのカスタマイズ記事でした。

[box class="box27" title="POINT"]

ブログ村でオリジナルバナーを作成
HTMLを貼る
CSSでカスタマイズ

[/box]

自分のブログに合った画像でオリジナルバナーを作ることで、ブログに馴染むバナーになりますね。

このブログ「Migaru-Days」にブログ村へのリンクバナーを貼ったのは数日前。

今、ブログ村のマイページを見てみると、早速ランキングの結果が出ていました。

参加しているランキングを見てみると、

ライフスタイルブログ（65,809サイト中2,292位）
シンプルライフ（5,678サイト中266位）
賃貸暮らし（84サイト中5位）

という感じ。

ライフスタイルブログとシンプルライフはかなりの激戦区なので「賃貸暮らし」で1位を目指しますね。

[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]ブログ村は検索順位以外の違った指標ができて面白そうです♩[/say]

このような記事もあります

[kanren id="5783,1851,7339"]

migaru-days

身軽なシンプル生活

ブログ村のバナーをCSSでカスタマイズしました

にほんブログ村でオリジナルバナーを作る

自分のブログでやること①｜ブログ村のバナーリンクを貼る（HTML）

自分のブログでやること②｜バナーデザインを変える（CSS）

おわりに