CSSでオリジナルのFeedly購読ボタンを作成する方法

ほかのブログを見ていると、記事下に公式のFeedly購読ボタンを設置している方が多くいらっしゃいますよね。

ただあれってFeedlyを知ってる人にしか伝わらないので、補足で「Feeldyで無料購読ができます」みたいに書かないといけなくなります。

そこで今回は、CSSを使ってオリジナルのFeedly購読ボタンを作成してみたのでその方法を紹介します。

最終完成イメージ

カスタマイズ完成イメージです。

カスタマイズの手順

  1. アイコンフォントのCDNを追加する
  2. HTMLの記述する
  3. CSSでデザインを整える

1)アイコンフォントのCDNを追加する

アイコンフォントを使用するためのCDNコードをヘッダーに追加します。

以下のCDNコードをヘッダーの<head>〜</head>の間に貼り付けてください。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

念のため、最新のコードをBootstrapCDNで確認してください。

これでアイコンフォントを表示させる準備はできました。

2)HTMLの記述する

以下のHTMLをボタンを表示したい場所に記述してください。

<div class="feedly-button"><a href="http://feedly.com/i/subscription/feed/https://lognote.biz/feed/" target="_new"><i class="fa fa-rss-square" aria-hidden="true"></i> Feedlyで更新情報を受け取る</a></div>

URLの最後は各自RSSフィードのURLに変えてください。

RSSフィードのURLが分からない方は以下のサイトで確認ができます。

[blogcard url=”http://berss.com/feed/Find.aspx”]

3)CSSでデザインを整える

以下のCSSを子テーマに追加してください。

/*--------------------------------------
Feedly Button
--------------------------------------*/
.feedly-button {
margin: 20px 10px 15px;
text-align: center;
max-width: 100%;
}
.feedly-button a {
padding: 15px;
color: #fff;
background: #6CC655;
border: 1px solid #54803A;
text-decoration: none;
display: block;
}
.feedly-button a:hover {
color: #6CC655;
background: #fff;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}

効果の検証はこれからですが、Feedlyが分からない方にも「更新情報を受け取る」という説明文でクリックを促せるメリットがあるかと思います。

この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで