ratio_3_2 のカスタマイズ方法

RSS ボタンの追加~Font Awesome にあるアイコンの活用方法~【baserCMS ratio_3_2】

RSS ボタンの追加~Font Awesome にあるアイコンの活用方法~【baserCMS ratio_3_2】
、ブログRSSフィードを出力する方法をお届けしました。

→ ブログRSSフィードを出力する方法

今回は、テーマに組み込まれている Font Awesome を利用してRSSボタンを設置したいと思います。

Font Awesome にあるアイコンは、ウェブフォントと同じ様に利用できる様にした物ですので、CSSで色・サイズなど文字同様に指定ができます。

Font Awesome にあるアイコンの活用方法

追加後

fa1.png

デザイン部分を白に、背景色をそれぞれ指定してあげることで、各イメージロゴが浮き上がってきます。

※イメージ図
fasample3.png
右の図の様に背景が同色(白)だと見えません^^;

他のアイコンも同様に背景色が指定されていて、ご覧のように表示されています。
スポンサードリンク

実践編

ますはアイコンをセットします。ウィジェット番号8に移動します。
fa2.png
追加前にソースのバックアップを取っておくことをおすすめします。
fa3.png

赤枠部分を追加しました。青枠はTwitter

実際のコード

 
<li><a target="_blank" href="/news/index.rss" class="btn btn-round btn-rss">
<i class="fa fa-rss"></i><span class="sr-only">RSS</span>
</a></li>

この時点では、背景色が無い状態ですので白いボタンだけが表示される状態になります。  

背景色を設定する

custom.css に移動して下記を追加します。  
a.btn-rss,
a.btn-rss:active,
a.btn-rss:focus,
a.btn-rss:hover,
a.btn-rss:visited{color:#FFF;}
.btn-rss,
.btn-rss:active,
.btn-rss:focus,
.btn-rss:hover,
.btn-rss:visited{background:#f6ad49!important}
.btn-rss .fa{top:5px;left:1px;font-size:24px;}
5行目でアイコン(フォント)の色を、10行目で背景色を指定しています。この#から始まる色番号を変えると変更できます。
→ WEB色見本 原色大辞典

既出の物は、テーマ製作者さまが style.min.css に記載して下さってますが、他のものはこの様に追記が必要になります。
アイコン一覧表

詳しい使い方はこちらがおすすめ
 

新しくアイコンが追加された時は・・・

新しい Font Awesome をダウンロードし、テーマ内のCSS一覧→ font-awesome.min.css を上書きしてあげれば使えるようになります。
fasample4.png


脱線しましたが、RSSフィードURLをリンク先にしておけばOKです。

RSSボタンを設置する方法は以上になります。

Firefox から RSSボタンをクリックしてみると・・・

fa4.jpg

safari からアクセスしてみると・・・
fa5.jpg
 

最後に・・・

RSSボタンがあれば、購読してもらえる可能生が上がると思います。再訪問者が増えればファンになってくれることもあります。

商品の販売やサービスの提供もよりスムーズになるかもしれません。しかし、最も大切なのは、定期的な更新と良質なコンテンツの提供だと思いますので、私自身も努力してまいります。

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。

P.S.
Twitter はじめました。
→ https://twitter.com/ratio32
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

 にほんブログ村 デザインブログ Webデザインへ

baserCMS

CakePHP(tm) : Rapid Development Framework