• ITに強い編集プロダクション・リブロワークスのWebサイト

    カスタマイズ

    キャラの絵を差し替えたい

    キャラ絵を丸ごと変えたいときはどうしたらいいの?
    え、変えたいの?
    画像を差し替えるだけだよ~

    CSSと一緒にアップロードした「img」フォルダの中に3つのフォルダがある。うち、2つに画像が入っている

    サンプルの画像サイズは438×438ピクセルだけど、正方形になっていれば問題ない。重要なのは余白の比率

    余白の比率?

    この画像はfslimにハマるように設計されていて、絵が上にはみ出しすぎるとセリフに被さってしまうんだ

    吹き出し用の画像は500×400ピクセルでなぜかマンガ用より大きくなっているんだけど、これも5対4という比率があっていればサイズを変えても大丈夫なはずだよ

    表情パターンを増やしたい

    表情パターンを増やす場合は、画像のアップロードに加えてCSSの追加が必要だよ

    CSSわからないよ~

    意外と簡単だよ! 以下の表情用スタイルをコピーしてCSSに追加、「soreda」のところを適当な表情名に変更し、画像のファイル名を変えれば基本はOK。rightのところで左右位置を調整できるんだ

    表情名はアルファベット、英数字、ハイフン、アンダーバーが使える。HTMLのクラス名と同じだ

    .wp-block-create-block-lw-soromanga-block .frame.soreda::after{   /*soredaを任意の名前に*/
        content: "";
        background: url("img/manga_chara/chara2-7.png"); /*画像ファイル*/
        background-repeat: no-repeat;
        background-size: contain;
        width: 168px;
        height: 168px;
        position: absolute;
        bottom:0;
        right:-9px; /*左右位置調整*/
    }

    会話用のパターンも忘れずに追加しておこう!

    .wp-block-create-block-lw-soromanga-block .kaiwa.soreda::after{   /*soredaを任意の名前に*/
        content: "";
        background: url("img/kaiwa_face/chara2-7.png"); /*画像ファイル*/
        background-repeat: no-repeat;
        background-size: contain;
        left: -79px;     /*左右位置調整*/
    }
    
    一回しか使わない画像なら裏技がある
    Markdown風の画像挿入![]()を使うのだ
    センセがいらすとやさんに!
    @センセ「fslim
    Markdown風の画像挿入![]()を使うのだ
    ![](https://画像URL/icon_medical_man12-2.png)
    @」

    この技を使う場合、画像サイズをコマにぴったり合わせる必要があるよ。参考までに各コマのピクセルサイズを載せるよ

    高さ
    指定なし259px209px
    fslim168px209px
    fwide347px209px
    ffull527px209px
    ftall245px
    ftall6286px
    ftall7331px