黒姫のお絵かき帳

黒姫朱理が描いたイラストと何か思いついた内容を綴ってゆく日記です。

シンプルで解りやすいRSSボタンをつくる

f:id:yulime:20150721065748p:plain

↑ 右に表示されてるこれを画像ではなくCSSだけで作ります。

作り方

[ デザイン ][ カスタマイズ 🔧 ] から [ サイドバー ] を選択します。

[ サイドバー ] から一番下の [ モジュールを追加+ ] をクリックすると

f:id:yulime:20150721070528p:plain

のようなものが出てくるのでその中の [ HTML ] をクリックしフォーラムの中に下記のタグを追加します。

<ul>
<li class="rssd">
<a href="/feed" target="_blank" class="rssa">RSS</a>
</li>
<li class="rssd">
<a href="~" target="_blank" class="rssa">好きなリンク</a>
</li>
</ul>

取り敢えず「適用」を押し「変更を保存」を押します。

次に「レンチマーク🔧」の一番下の [ CSS ] をクリック
そうすると何か入力画面が大きくなるので下記のタグを追加します。

.rssd{
    text-align: center;
    padding:3px !important;
    border-radius: 5px;
 width:80%; /* 消しても良い */
    margin:5px 10%; /* width / 2 */
}

.rssd:nth-child(1){
    background-color: #E67928;
}

.rssd:nth-child(2){
    background-color: #aaa;
}

.rssa{
    display: inline-block;
    color:#fff !important;
    width: 100%;
    height:100%;
}

そうすると画像のようなモノが出来るので後は加工してください(o・ω・o)
.rssd:nth-child(n) は <li>の数(n) で色を変えるものです。好きな色に変えてもOKです。

広告を非表示にする