Stickyをカスタマイズして、アプリ、ミュージックを紹介しよう!WordPress用CSSコードを紹介だ!

App Store

色々さまよってた部長ナビ(@nabi_1080)です

アプリ紹介、曲紹介、映画紹介、色々あります。たくさんカスタマイズに挑戦して跳ね返され、ネットで調べて、またチャレンジし、ということを繰り返し、ようやく答えにたどり着いた気がします

それは、gori.meさんが使っている「Sticky」というアプリ・ミュージック紹介のためのリンクメーカーです

3〜5種類くらい、行ったり来たりしてきましたが、今後は、Sticky一本で行きます。で、今日はその紹介です

スポンサーリンク

Stickyの紹介

Sticky iTunes Link Maker - iTunes リンク作成ツール

ここをまずはブックマークしてみてください

詳しい説明は、他の方のサイトを見れば載っていますし、アフィリエイトトークンさえちゃんと入力すれば、一発で使えるようになりますので、とても便利です。簡単です

わかりにくいのは、検索した後、右の端に「四角い小さな箱」があります。ここにチェックを入れると、そのアプリ、ミュージックのリンクを作れるようになります

後は、下の方に移動して、「コード作成」をクリックすると完成です。

では、アプリを使って、実際にどうなるか実験してみましょう

完成形

超絶便利なTwitterアプリ「Tweetbot 4」を紹介すると、こんな感じです

コレが完成形です

でも、実は、コレは、ちょっといじらないとこうなりません

枠を付け、枠線、背景色を付ける!

ただの紹介だとつまらないので、見た目が華やかに、クリックしてもらいやすいように考えました。

もちろん、参考にさせていただいたのはgori.meさんです。だいぶ同じテイストで申し訳ないです。枠線を周り全部にしたんですが、Hタグの見出しと「横線がたくさん」になるので、gori.meさんと同じように「左側」のみ枠線に色を付けさせていただきました。「師匠テイスト」という形でなにとぞご容赦ください

では、WordPressの管理画面「外観」「テーマの編集」から行く、「style.css」にブチ込むコードを紹介しましょう!

ずばり、コレです!

.sticky-itslink {
      border-left: 1.5px solid #FA8072;
      padding: 20px;
      background-color: #FFFFF0;
      line-height: normal;
      margin: 0 0 1.9285714285714286em;
 }

.sticky-itslink a:hover {
      text-decoration: none;
      border: none;
 }

これでイケます

gori.meファンの方も、ぜひ参考にしてみてください。枠線の色、太さ、背景色はお好みで変えてみてください。「left」をとると、外枠全体に色が付きます

gori.meさんは、商品リンクはAmazletをお使いですが、私はカエレバを使っております。コレも好みです。私は楽天の紹介も多いので、これにしました。また、そちらも後で紹介しますね!

素敵なリンクで、ナイスなアプリ紹介をしてみませんか?ぜひ、やってみてくださいね!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索