CSSだけで簡単！押されるボタンの作り方

まえがき

ブロガーの皆さんこんにちは。Mです。

今回は、Web用のボタンデザインを紹介します。これはボクが実際にブログで使っているもので、HTMLとCSSをコピペするだけです。例としてはこんな感じです。

実際のデモは、ボクのブログで確認してみて下さい。

≫ＡＫＢ神７初！前田敦子がスピード結婚、勝地涼と交際半年足らずで - ゆうらり Happy Smile

見栄えも綺麗で使い勝手の良いフラットデザイン。ホバーにより背景の色が変わります。

しかし、まだＷｅｂ知識の浅いブログ初心者の方にとっては、このようなボタンひとつ作るのにとても難しく感じてしまうのでは？

実はそんな事はなく、初心者でも誰でも一度知ってしまえばあとはメモしておくだけ。ＳＮＳやランキングサイトを行き来するためのさまざまなボタンに活用できますよ。

今回の記事ではこのボタンの作り方を説明します。あとは、おまけとして、ランキングサイトであまり読まれてないブログがいつも上位表示されている（ＩＮポイントばかり異常に多い）理由について裏話をちょっとだけ暴露しちゃいます（悪用禁止）。

【目次】
①ボタンが「アクセスアップ」「ＳＥＯ対策」にとても重要なワケ
②ＨＴＭＬ
③ＣＳＳ
④【裏話】読まれてないブログがランキングサイトで上位表示されるワケ