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

こんにちは。マリ(@damarino_oheya)です!

 

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

マリ

ブログ村はドメインパワーが強く、SEO対策の被リンク効果があるらしいです♩

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

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

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

マリ

えっ・・・・種類これだけ????しかもこのデザインは一体????

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

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

 

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

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

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

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

  1. 画像ファイルを準備する(jpg・gif・png)
  2. 埋め込むバナーを指定する
  3. バナーを埋め込む位置を指定する

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

マリ

使用する画像ファイルは細長いサイズの方が見栄えがいい気がします♩

 

自分のブログでやること①|ブログ村のバナーリンクを貼る(HTML)

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

という感じです。

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

マリ

私はサイドバーのプロフィール欄に追加しました♩

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

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

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

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

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

 

自分のブログでやること②|バナーデザインを変える(CSS)

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

ビフォー

アフター

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

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;
}
POINT
  • 画像に影をつける
  • 画像の角を丸くする
  • テキストリンクの装飾を変える

 

おわりに

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

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

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

 

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

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

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

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

という感じ。

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

マリ

ブログ村は検索順位以外の違った指標ができて面白そうです♩

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

SANGOのスマホ版デザインでカスタマイズしたことひとりSlackでブログのタスク管理がいい感じ【無印良品|入れたまま使えるパソコンケース】MacBook Airを入れるのに購入しました

コメントを残す

メールアドレスが公開されることはありません。

two × four =