7

tumblr からの新しいコード{LikeButton}には、色とサイズという非常に少数のオプションが付属しています。

「いいね」機能を処理し、SVG グラフィックを提供する iFrame を挿入します。

ただし、iframe およびクロス サイト スクリプティング ポリシーにより、css で変更したり、コンテンツを編集したりすることはできなくなりました。

独自の Like ボタン スプライトまたは svg を使用するために、新しいコードを変更または挿入するにはどうすればよいですか?

4

3 に答える 3

4

@mikedidthis の投稿のおかげで、現時点で考えられる最善の解決策は次のとおりです。

のようなボタンを親に配置し、 のdivようliに呼び出します.like。ボタンの上に、Tumblr でハート アイコンに使用される SVG を配置します。

<li class="like">
    <svg width="14" height="14" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
        <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path>
    </svg>
    {LikeButton size="14"}
</li>

<svg width="..." height="..."...と{LikeButton size="..."}をお好みのサイズに変更してください。

シンプルなCSSをたくさん使ってみましょう

.like { /* Make a parent element */
     position: relative;
}
.like svg path { /* Select your color of choice */
     fill: #563d7c; 
}
.like .like_button { /* Position like button above your custom one */
     position: absolute;
     top: 0;
     opacity: 0;
 }
 .like .like_button.liked { /* Keep the functionality active */
     opacity: 1;
 }

ここでは、リブログ ボタンに対して同じことを行う方法を示します。これは iFrame では呼び出されないため、もう少し単純です。親などに入れ、div次のliように呼び出します.reblog

<li class="reblog">
    {ReblogButton size="14"}
</li>

そして、CSS

.reblog svg path { /* Select your color of choice */
    fill: #563d7c;
}

最初にここに投稿されました。

于 2014-12-27T20:54:49.257 に答える