iiie@diy

by syttg

【はてなブログ向け】動きのあるアイコンボタンの付け方

f:id:gorislog:20181128190722j:plain

 

当ブログで使用している、マウスオーバー時に動きのあるボタンの取付方法を紹介します。

当ブログではページ下部のメニューボタンに使用しており、マウスオーバー時に”背景が変色しながら上下に別れる”モーションをします。

 

f:id:gorislog:20181128190435p:plain

※こちらは画像ですので、動きません

 

動作を確認したい場合は、一番したまでスクロールして、メニューの部分にマウスオーバーをしてください。

 

 

もともとのボタンコードは以下のサイトで紹介されているモノです。

 

www.nxworld.net

 

マウスオーバー時のモーションが違うボタンも紹介されており、下記で紹介しているボタンアイコンのサイズやカラー指定、htmlでのアイコン表示のやり方を使えば違うモーションボタンも使えると思いますので、違うモーションをお探しの方は合わせて読むと良いと思います。

 

【CSS】

 

まず、はてなブログの『デザイン』→『カスタマイズ』→『デザインCSS』に 貼り付けるコードです。

 

.button {
display: inline-block;
width: 54px;  /*ボタンサイズ(横)*/
height: 54px;  /*ボタンサイズ(縦)*/
text-align: center;
text-decoration: none;
line-height: 54px;  /*行間サイズ*/
outline: none;
}
.button::before,
.button::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.button,
.button::before,
.button::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.button {
position: relative;
z-index: 2;
background-color: #ededed;  /*ボタンカラー*/
border: 2px solid #ededed;  /*ボタン枠カラー*/
color: #fff;
line-height: 50px;
}
.button:hover {
background-color: #fff;  /*マウスオン時のボタンカラー*/
border-color: #59b1eb;  /*マウスオン時のボタン枠カラー*/
color: #59b1eb;  /*マウスオン時のアイコン(文字)カラー*/
}
.button::before,
.button::after {
left: 0;
width: 100%;
height: 50%;
background-color: #ededed;
}
.button::before {
top: 0;
}
.button::after {
bottom: 0;
}
.button:hover::before,
.button:hover::after {
height: 0;
background-color: #59b1eb;

 

色分けしたので、変更する場合は同じ色の物をすべて変更してください。

 

 

 

 

 

【html】

サイドバーやヘッダー、フッターなどに貼り付けるhtmlです。

CSSで指定した大きさ・色のボタンを表示し、ボタン内に”何”を表示するかをコチラで指定します。

 

<a class="button" href="リンク先"><font size="5"><i class="blogicon-user"></i></font></a> 

 

font size="5"』の大きさを変更すると表示されるアイコンサイズ(文字サイズ)が変更されますが、ボタンサイズはCSS側で指定されているので、そのままだとデザインが崩れます。CSS側のボタンサイズ・行間サイズの大きさを調整してください。

 

blogicon-〇〇』は、はてなブログで使用できるアイコンフォントです。

下記のブログに、アイコンリストが掲載されていますので、そちらの”クラス名”を書き換えることでいろいろなアイコンを表示できます。

 

www.foxism.jp

例に出すと『blogicon-hatenablog』は、はてなブログのロゴマークで、『blogicon-twitter』ならツイッターのロゴです。

 

また、『<i class="blogicon-user"></i>』をすべて削除し、その空間に文字を入力するとボタンに文字が表示されます。はてなアイコンを使用せず、任意のアイコン(画像)等を表示したい場合はコチラに画像表示用のタグを打ち込めばよいですね。