整体師がWordPressテーマ作りました

Healerは、スマホ&タブレット対応・SEO対策済みの整体院・サロン専用テーマです。

お客様の声やWeb予約カレンダー表示機能など便利機能が搭載されています。

詳しくはこちらから。

公式サイト

CSSで作る!Feedly購読ボタンデザイン集

feedly-button-css-thumbnail

CSSを使ったオリジナルのFeedly購読ボタンの作り方を紹介します。

どれもレスポンシブ対応しているので、PCとスマホの両方からきれいなデザインで表示させることができます。

Feedly購読ボタンの作り方

事前準備

1.Font Awesomeのヘッダー読み込み

これから紹介するFeedly購読ボタンには、アイコンフォントを使用します。

アイコンフォントのヘッダー読み込みがまだの方は、事前に以下の記事を参考に設定をおこなってください。

font-awesome-thumbnail
アイコンフォント「Font Awesome」をWordPressに導入する方法を紹介します。 Font Awesomeの導入方法

2.RSSフィードURLの確認

FeedlyにはRSSフィードURLが必要です。

RSSフィードURLがわからない方は、以下のサイトでご確認ください。

参考RSSフィード取得・検出ツール – BeRSS.com

ふわっと背景色が切り替わる

HTML
<div class="feedly-button"><a href="http://feedly.com/i/subscription/feed/RSSフィードURL" target="_new"><i class="fa fa-rss-square" aria-hidden="true"></i> Feedlyで更新情報を受け取る</a></div>

好きなテキストに変更も可能です。

CSS
.feedly-button {
margin: 20px auto;
text-align: center;
max-width: 100%;
}
.feedly-button a {
padding: 15px;
font-size: 15px;
font-weight: bold;
letter-spacing: 1pt;
color: #fff;
background: #6CC655;
border: 2px solid #6CC655;
border-radius: 2px;
text-decoration: none;
display: block;
transition: .5s;
}
.feedly-button a:hover {
color: #6CC655;
background: #fff;
}

4行目のmax-width: 100%;の変更で横幅を調整できます。

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

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

Gravatarに登録すると、お好きな画像をアバターに設定できます。