どうも、さやです
Twitterの鳥に飛んで欲しい。そんな願いがあってつくっていきます（？）
今回は使ってるひとが多そうなWordPressに埋め込んでいきます( ･´ｰ･｀)
（参考： https://codepen.io/andreasstorm/pen/qOeyOx）
Twitterの鳥の元
みなさんはHTML/CSSつかえますか？
WordPrssをやってきてあんまり「テキスト」のとこを使う人はいないのでしょうか？
まあ、ぜんぜん知識がない！！ って人でも鳥が羽ばたけるようにしましょう
別にWordPress使ってるんじゃねえよって人はコードだけみてくれて大丈夫です(｢・ω・)｢ｶﾞｵｰ
WordPressの「テキスト」を開く
今回は投稿に入れていきます
別にどこでもいれられます(*´∀｀*)
HTMLコードを貼り付ける
次に、「テキスト」の編集画面でこれを貼り付けます
|
1 |
<div class="aoiro"><i class="twitter-tori"></i></div> |
これは鳥の「要素」です！
でこれだけだったらなんの意味もありません！
まじでなんも表示されないので注意です
CSSでパタパタさせる
次に、「外観 → CSS編集」（もしなかったら、「外観 → カスタマイズ → 追加CSS」）まで進んでください
さて、私の場合左になんやらいっぱいかいてますが…なにもいじってない人は白紙ははずです！！
ここにCSSコードを入れ込みます（したのをまるっとコピペして「公開」）してください
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.aoiro { display: inline-block; background: #4AB3F4; padding: 6px 1px 2px 9px; border-radius: 4px; } .twitter-tori { position: relative; fill: #aaa; display: inline-block; vertical-align: middle; width: 34px; height: 22px; background-image: url("http://andreasstorm.com/lib/tweet.svg"); background-repeat: no-repeat; background-position: 0 0; background-size: 288px 22px; animation: tweet 0.6s steps(7) infinite; } @-moz-keyframes tweet { 100% { background-position: -256px 0; } } @-webkit-keyframes tweet { 100% { background-position: -256px 0; } } @-o-keyframes tweet { 100% { background-position: -256px 0; } } @keyframes tweet { 100% { background-position: -256px 0; } } |
完成！！
どうですか？（ちなみに、最後のTwitter紹介にもついてるｗｗ）
ちなみに、羽ばたいている鳥の色を変えるのは若干むずかったので挫折…
