Lognote

ネット集客に強い整体院サイトを制作

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

公開日:2017-07-19
最終更新日:

Pocket

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

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

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

最終完成イメージ

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

カスタマイズの手順

  • アイコンフォントのCDNを追加する
  • HTMLの記述する
  • 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が分からない方は以下のサイトで確認ができます。

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が分からない方にも「更新情報を受け取る」という説明文でクリックを促せるメリットがあるかと思います。

以上、「CSSでオリジナルのFeedly購読ボタンを作成する方法」という記事をお届けしました。

-WordPress

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

CSSでオリジナルのFeedly購読ボタンを作成する方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

share-count-display-thumbnail

WordPressの記事トップにSNSのシェア数を表示する

ブログをやるうえで、記事をバズらせるというのは一つの夢でもあります。 こちらのサイトによると、バズるブログの6 …

mb-substr-wordpress-thumbnail

WordPressの抜粋表示には「mb_substr」ではなく「the_excerpt」を使った方がいい理由

最近、SEO的に画像にaltとキャプションを入れるのも無視はできないという記事を読み、わたしも実践するようにな …

none-plugin-custom-field-amazon-thumbnail

WordPressのカスタムフィールドを使ったAmazon商品紹介エリア作成方法

以前、カスタムフィールドテンプレートというプラグインを使った、記事下のAmazon商品の貼り替え方法を紹介しま …

ogp-twitter-card-matome-thumbnail

WordPressのSEO対策で必ず設定するべきOGPとTwitter Cardコードまとめ

WordPressでブログを運営するうえで、まず初めにやってもらいたいSEO対策の一つとしてOGP設定というも …

wordpress-comment-voice-thumbnail

動画も可!WordPressのコメント機能を使った口コミ掲載方法

整体院サイトをリニューアルする中で、「お客様の声」を掲載するための専用ページをどのようにするか迷...

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい