【小説】「いいね!」ボタンのデザイン編集の方法

670 views
  1. コメントする
  2. 記事検索
  3. 更新
  4. 凍結

0
しおり Chrome 2018/01/21 18:49
小説の「いいね!」ボタンを指ハートにしたいです。
(指ハート:K-POPアイドル発祥の親指と人差し指の先端を重ねて表現する小さなハートです)
しかし、フリー画像で拾ってきた画像を設定するだけではないのでしょうか。
デザイン編集可能って、指ハートをCSSで入力するのでしょうか。
指ハートのCSSのタグがありましたら教えていただけますでしょうか。

よろしくお願いいたします。
768×768PNG
33KB


残り995件書き込み可

5
しち Firefox 2018/03/26 01:36
>>4
「本文」というのは、個々の小説本文の編集ページのことではありませんか?
そこには#iine#独自タグを使えません。
#iine#は【全体デザイン】や【○○画面編集】に使うタグです。

小説本文内にいいねボタンを表示したいのであれば、【文章画面編集】のどこかお好きな場所に独自タグを貼ることになります。
4
わと Chrome 2018/03/25 20:09
>>3
返信が遅くなり大変申し訳ございません!
まだ解決に至っておりません。

画像URL
>https://alicex.jp/data/自サイトID/img/自サイトID_upld_2.png


>button.original-evaluation-btn {
の後に

>background-image:url(https://alicex.jp/data/自サイトID/img/自サイトID_upld_2.png);
>height:50px;
>width:70px;

を「いいねボタンCSS」に追加しました。
そして、小説ページ「本文」に

>#iine#
>の独自タグを

入れたのですが、
画面を確認すると、画像ではなく“#iine#”とテキストで表示されている状態です。
ご教授お願いいたします。
3
ななし SOV33 2018/01/22 00:57
>>2
CSSに画像urlを使うときは普段推奨されている
##IMAGE_DATA_2_URL##
の独自タグではなく、画像urlをそのまま使います。
https://alicex.jp/data/あなたのID/img/あなたのID_upld_2.png
みたいなやつです。

##IMAGE_DATA_数字_URL##
はCSSでは使えないです。

あとは小説本文のレイアウト画面の好きなところに
#iine#
の独自タグを入れてください。
2
しおり Chrome 2018/01/21 22:23
>>1
ななしさん、解答ありがとうございます。

CSSではタグではなく、プロパティというのですね!
そして、やってみたのですが、指ハート画像が反映されず、解決できませんorz

CSS編集欄の
button.original-evaluation-btn {
の下に

background-image:url(サイトID/##IMAGE_DATA_2_URL##);
height:50px;
width:70px;

ならないということは、上記は間違っているんですよね;
さらに、小説本分ページの「いいね!」ボタンを表示させたい箇所に

<button type="button" class="original-iine-btn original-evaluation-btn" value="サイトID-数値">いいね!<span>カウント</span></button>

と書きました。
理解が悪くて申し訳ございません;
ご教授お願いいたします;
1
ななし KYT31 2018/01/21 20:20
>>0
実際には「いいね!ボタンの背景画像をCSSで指定する」という流れです。
画像を使いたい大きさに縮小してからアップして
いいねボタンのCSS編集欄に↓3行を追記

background-image:url(画像url);
height:ボタンの縦幅px;
width:ボタンの横幅px;

追記場所は
button.original-evaluation-btn {
の後です。
urlはhttps://alicex.jp/data/あなたのIDから始まるやつです。

ちなみにCSSの場合はタグでなくプロパティと呼びます
検索する際はタグと入れず「ボタン 背景 CSS」で調べるといいです
1ページ中1ページ目

Back to Top