【ポチレバ代用】Sticky iTunesのCSSカスタマイズ

Pocket

アイキャッチ画像

こんにちは、mioです。

iTunes上のアプリや音楽、映画などのリンクをサクッと作成してくれるツール「リンクマーク ポチレバ」。

「ポチレバ」はとても便利なことから、多くの方が利用しています。

しかしながら、2017年10月現在、わたしと「ポチレバ」の相性が悪いみたいで、macアプリのリンクを作成することができません。

そこで、ポチレバの代用になるようなものがないか調べたところ、「リンクマーク Sticky iTunes Link Maker」がよさそうだったので、デザインをCSSでカスタマイズしてみました。

せっかくなので、カスタマイズをぜひみなさんにも活用していただきたく、ご紹介していきたいと思います!

参考記事

今回のカスタマイズは、こちらの記事「リンクマーク ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ!」を参考にさせていただきました。

この場を借りて感謝の気持ちを述べさせてください。ありがとうございます!

完成形

完成形は、こんな感じです。

  • パソコン
  • 完成形

  • スマホ
  • 完成形

    実際に、リンクを貼ってみるとこんな感じ。

    CSS

    それでは、コードをご紹介していきますね。

    下記コードをcssに貼り付けてください。

    /*————————————–
    Sticky iTunes Link Maker
    ————————————–*/
    .sticky-itslink {
    padding:25px 25px 0px 25px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
    }

    .sticky-itslink-img {
    margin:0 15px 0 0;
    float:left;
    min-width: 100px;
    text-align: center;
    }

    .sticky-itslink-img img {
    margin:auto;
    text-align:center;
    }

    .sticky-itslinktext {
    line-height:120%;
    overflow: hidden;
    }

    図

    wordpressをお使いの方は、左メニューの「外観」をクリックし、「テーマの編集」をクリック。

    そして「スタイルシート」の一番最後などわかりやすいところに貼り付けてください。

    Sticky iTunes Link Makerでリンクを作成

    次に、「リンクマーク Sticky iTunes Link Maker」で商品のリンクを作成します。

    作成手順は、下記になります。

    作成手順その1 商品を検索

    リンク作成

    はじめに、紹介したい商品を検索しましょう。

    商品を見つけられたら、右側にあるチェックボックスをクリック。

    作成手順その2 リンクを作成

    リンク作成

    次に、一番下までスクロールして、リンクを作成してください。

    その際に、設定を「標準」、オプションの画像の大きさを「中」にしてください。

    以上でリンクの作成は完了です!

    html

    作成したリンクに少しだけ手を加えましょう。

    <div class="sticky-itslink">

    <a href="https://itunes.apple.com/jp/app/logic-pro-x/id634148309?mt=12&uo=4" rel="nofollow" target="_blank"><img src="http://is2.mzstatic.com/image/thumb/Purple118/v4/b2/07/92/b2079207-ebf3-b416-9846-fd16270029a4/source/100x100bb.png" style="border-style:none;float:left;margin:5px;" alt="Logic Pro X" title="Logic Pro X" ></a>

    <div class="sticky-itslinktext">
    <a href="https://itunes.apple.com/jp/app/logic-pro-x/id634148309?mt=12&uo=4" rel="nofollow" target="_blank">Logic Pro X</a><br>

    Apple<br>
    価格: 23,800円<br>

    <br>
    <span style="font-size:xx-small;">
    posted with <a href="http://sticky.linclip.com/linkmaker/" target="_blank">sticky</a> on 2017.10.10
    </span>

    </div>

    <br style="clear:left;" >

    </div>

    上記が手を加える前のリンクです。

    (わかりやすくするために、改行だけしました。)

    <div class="sticky-itslink">

    <div class="sticky-itslink-img">

    <a href="https://itunes.apple.com/jp/app/logic-pro-x/id634148309?mt=12&uo=4" rel="nofollow" target="_blank"><img src="http://is2.mzstatic.com/image/thumb/Purple118/v4/b2/07/92/b2079207-ebf3-b416-9846-fd16270029a4/source/100x100bb.png" style="border-style:none;float:left;margin:5px;" alt="Logic Pro X" title="Logic Pro X" ></a>

    </div>

    <div class="sticky-itslinktext">
    <a href="https://itunes.apple.com/jp/app/logic-pro-x/id634148309?mt=12&uo=4" rel="nofollow" target="_blank">Logic Pro X</a><br>

    Apple<br>
    価格: 23,800円<br>

    <br>
    <span style="font-size:xx-small;">
    posted with <a href="http://sticky.linclip.com/linkmaker/" target="_blank">sticky</a> on 2017.10.10
    </span>

    <br><br>
    <!– ここにダウンロードボタンを追加 –>

    </div>

    <br style="clear:left;" >

    </div>

    赤字が付け加えるタグで、中央線が引いてある青字が消すタグです。

    わたしは、値段の情報はいらないと思うので消しちゃいます。

    「<!– ここにダウンロードボタンを追加 –>」は、面倒くさいですが貼った方がメリハリがあってよいです。

    もし、ダウンロードボタンをつけない方は、先ほどお伝えしたCSSだとテーブルが崩れてしまうので、お手数ですが下記CSSにしてください。

    /*————————————–
    Sticky iTunes Link Maker
    ————————————–*/
    .sticky-itslink {
    padding:25px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
    }

    .sticky-itslink-img {
    margin:0 15px 0 0;
    float:left;
    min-width: 100px;
    text-align: center;
    }

    .sticky-itslink-img img {
    margin:auto;
    text-align:center;
    }

    .sticky-itslinktext {
    line-height:120%;
    overflow: hidden;
    }

    さいごに

    ということで、Sticky iTunesのCSSカスタマイズでした。

    不具合などありましたら、リンクマーク お問い合わせフォームリンクマーク ツイッターのDMなどからお知らせください。

    それでは、今回はこの辺で!

    Pocket

    SPONSORED LINK