DICE Project

BLOG

daily works etc.

【Figma】まんがの背景効果用に、画像素材をつくってみた

Date :
Category : 一次創作
【Figma】まんがの背景効果用に、画像素材をつくってみた

Clip Assets にたくさんの素材が出品されていますが、なんとなくこう、「ポップ」「かわいい」「あほっぽい」ところで使えそうな、しっくりくるものが少なく… (→ 結局いつもハニワくんになる)

なんかうまいこと、自分で調達できないかナー…と、Figmaでつくってみることに。

かわいい！！！
✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌

つくりかたメモ

正方形の中に、ぐるぐるを敷きつめ…
(切れてしまうパーツは、複製 → マスク適用 → 反対側に平行移動)

パターンができたら、それをコンポーネント化。
複製 → 周囲にタイリングして、バランスを整えます。

中央のオリジナルのフレームをコンポーネント化しておくと、編集した内容が周囲の複製したものすべてに反映されるのでべんり👍

あとは、画像として書き出し → クリスタ側で画像素材として登録すれば、タイリング・拡大縮小・回転など自由自在につかえます。

やったね✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌

いろいろつくれそう

ほわほわ系効果もできるかナー…と。
エフェクト > レイヤーブラー を駆使して、ほわほわにしてみたり、★の図形を丸っこくかわいくしてみたり。

ペン > 鉛筆 ツールだと、ペンタブをつかって手描きもできますね。
クリスタのような手ブレ修正はついていないので、ちょっといつもの感じとちがいますが…

まとめ

しっくりくる素材がない、まんが作品に独自色を出したい…なんてときは、こんな感じで自作の素材をストックしておくとよいかも。

【Figma】テキスト全体にグラデーション枠線を適用するメモ

Date :
Category : Web制作
【Figma】テキスト全体にグラデーション枠線を適用するメモ
手っ取り早く方法が知りたい方はこちら ↓

本職デザイナーではないのですが、Figmaにはかなりお世話になっています。
最近公開した素材の解説画像も、Figmaで作っていたりします。

(それまではクリスタで作っていたのですが…Figmaは余白サイズがすぐわかったり、オートレイアウトしてくれたり、コンポーネント化できたり…ちょっとした画像調整もできるし、超便利✨)

dp-Leaf
消滅効果ブラシ

とはいえ、手当たり次第で使っているので (のうすじ)、実は基礎的なところがわかっていなかったりします。

これまでハマって実現できなかったこと

いままでハマっていたのが、「複数行のテキストの枠線 (境界線) に対して、全体にナナメの線形グラデーションをかける方法」がわからないということ。検索の仕方が悪いのか、調べてもなかなか目当ての方法が出てきません。

↑理想

２行のテキストをグループ化、グループに対してグラデーションを適用した場合、水平方向 (各行個別) であれば実現できるのですが…

今回は「テキスト２行全体で」ナナメグラデーションをかけたいのです。
(クリスタだと、フォルダにまとめて → フォルダに対して「境界効果」を設定すれば全体に適用できるので、そのノリだったのですが…)

しかも、グループに対してのグラデーションでは「グラデーションを回転」ができないらしく…
テキスト要素それぞれを選択することで、ようやく「グラデーションを回転」が効く仕様のようで…。
(回転できるのも 水平方向 or 垂直方向 のみなので、今回の要件を満たさず)

いろいろ試してみるものの…

試行①：２行のテキストをグループ化、それぞれラスタライズ、全体のグループに対してグラデーションを適用

試行②：↑の各行ごとのグループを解除して同階層にしたうえで、全体のグループに対してグラデーションを適用

いずれもNG。

解決！

しばし考え…本日思いついた解決法がこちら。

テキストを複製して、下のほうにだけ目的の線幅で枠線を追加 (色は何でもOK)

２つのテキストグループの間に、目的のグラデーションを適用した長方形を追加
(長方形のグラデーションであれば、好きな角度に調整可能！)

下の方のテキストと長方形を選択し、「マスクとして使用」

できました！🙌

この方法、テキストをアウトライン化しなくてもできるので、あとでテキストを修正したくなった時も楽ちんです。(上下２レイヤー分修正しないとですが…)

さっそく活用

さて、やっと方法がわかったので、さっそくつかってみます！

かわいいね！！

なんでつくったかというと、本サイトのHOME最下部のバナーリストに加えるためです。
(メインのブログではなく、日々のらくがきなどはTWEETコーナーにポイポイしていることが多いため…)

かわいいね！！！！

応用として、上のテキストだけ若干ずらすと、本記事のサムネイル画像のような感じにもできます👍

かわいいね！！！！！！！

まとめ

以上、手当たり次第にFigmaを攻略している (のうすじな) 人のメモでした。
Figmaを使い始めた方のお役に立ったら幸いです。

現在、仕事が絶賛繁忙期で…
こころが荒んだり、そもそも体力が残っていなかったりして、全然更新できていないのですが……

今後も自分の城をゆっくりしっかり発展させてゆきます…。

二次創作コンテンツを分離

Date :
Category : お知らせ
二次創作コンテンツを分離

ここのサイト、もともと「一次創作メインで、二次創作もたまにあるよ！」的なところだったのですが…

このたび、完全に分離しようということで、二次創作系記事の一斉リダイレクト処理を追加しました。

ザ・版権！な記事を移動し、ほかの創作者さんとの交流を、本サイトでの「二次創作」カテゴリで残した形です。

二次創作 | Blog | DICE Project

ほかの創作者さんとの交流絵など。

該当する記事の diceproj.com のURLにアクセスすると、こんなかんじでリダイレクト＆お知らせメッセージが表示されます。

二次創作サイトはこちらです。

ほたかのいえ

hotakanoie.com

ほたか によるファンアート (二次創作、主にFalcom社) やブログ記事を置いているサイトです。公式とは一切関係ありません。

引き続き、一次創作メインでこちらを更新しつつ…たまに版権の話題があったらあちらに…という形で運用していく予定です。

あ、あと、

  • ところどころ画像を差し替えました。
  • イラストのラインナップ、表示方法を変更しました。
    • lightboxプラグインを使っていたのですが、タイトル・タグなども一緒に表示させようと思い、自前の仕組みで作り直しました。

このサイトは今も進化しております…

[素材] dp-Leaf

Date :
Category : 一次創作
[素材] dp-Leaf

木の葉や雑草を表現するのに使えそうなブラシを公開しました！

以前からBoothのほうで配布していたものですが、最新のブラシの仕様で再設定したりしたので…
Boothの方を「Classic」とし、新旧セットで、Clip Assets 上で公開しました。

筆圧でサイズが大きく変化するので、1本で 枝/茎＋葉 が描けたりします👍
チョンチョンするだけでもそれっぽくなると思います。

ぜひおためしください！

↓↓ ダウンロードは Clip Assets から！↓↓

dp-Leaf | Clip Assets

assets.clip-studio.com

木の葉や雑草を表現するのに使えそうなブラシです。
筆圧によりサイズが大きく変化します。シルエット用にも、描き込み用にも。
Enjoy Drawing !

さっそくカスタムリッチリンクを利用…
ふふふ…よきかな (`･ω･´)

【WordPress】ACF PRO をつかってカスタムブロックを作成！

Date :
Category : Web制作
【WordPress】ACF PRO をつかってカスタムブロックを作成！

WordPressのカスタマイズは多少わかるけど、込み入ったこととなるとちょっと…

…な ほたか が、ACF PRO をつかってカスタムブロックをつくることができた！というお話です。

(なんかモメてるらしいですが) みんなだいすき「Advanced Custom Fields」。
いつの間にか、このプラグインでカスタム投稿タイプ、カスタムタクソノミーまでつくれるようになってただけでも驚きだったのに、オプションページまで作れるようになってたとは… (いまさら

オプションページで繰り返しフィールドまで使えて、最強過ぎませんかね…
((ﾋｨﾋｨ言いながら functions.php にコード書いて設定ページ作ってた過去の自分ｪ…

さらには、なにやらACFのフィールドを「ブロック」にも適用できるとな…！？
残念ながらPRO版のみらしいですが…神過ぎますね。

カスタムブロックといえば…。

ブロックエディタでURL単体をぺろっ貼り付けると、勝手に「埋め込み」が適用されるのですが…
たいていの場合

「このコンテンツを埋め込めませんでした。」
余計なことをしておいて、「結局ダメでした！」。

…そんなモヤモヤを、カスタムブロックをつくることで (ついに) 解決できる！

しかしひとつ懸念が。

聞いた話では、カスタムブロックをつくるには React.js とかがつかえないとダメとかなんとか…？

そんな事になると学習コストがすごそうなので考えてしまうかもですが、
ダメ元で調べていたら、どうやらそんなことをしなくても良さそう！？

▼ 読んで勇気づけられた記事

秀丸だけ(?!)でWordPressのオリジナルブロックをお手軽につくってみる

www.vektor-inc.co.jp

ただ、コチラの例では入力周りも含めて自分で設定するタイプだったので、少しばかり内容が異なるようで… (よくわからずに進めたのもあり、メチャクチャはまってしまった)

結局は公式の記事をみながら進めました。(公式の推奨する「JSONに記載する方法」)

ACF | Create Your First ACF Block

www.advancedcustomfields.com

このサイトは完全オリジナルのテーマをつかっているので (子テーマの対応の必要なし)、その点がまた異なりましたが…💦

試行錯誤の結果…こんなものが出来上がりました！

カスタムブロック「リッチリンク」TEST

diceproj.com

WordPress、リンクを埋め込みしようとして、よく失敗 するので…

サムネイル画像・テキストをマニュアル設定＆自分好みに表示できるカスタムブロックをつくりました！ACFは神さま…。

「外部リンクかどうか (真/偽)」のフィールドをつくり、外部リンクの時だけ「target=”_blank” をつける」「別窓で開く旨を示すアイコンを表示する」設定をしています。

これで、Wordpressに埋め込みを拒否られたとき・Wordpress標準の埋め込みリンクが気に入らないときにも、イイかんじにリンクを設置できます。やったー！🙌

ACF PRO をつかえば、ポンコツほたかでもカスタムブロックをつくることができました！

よくわからないけど、カスタムブロックをつくりたい…なひとの、わずかな勇気につながりますように…

ハマりポイント

今回ハマって時間がかかってしまったポイントも書いておきます…
前提として「仕組みとか色々とよくわからないままやった」ので、くわしくわかっていらっしゃる方々にとっては「当たり前やん」な事かもですが…笑

acf-json フォルダをつくる

しれっと書いてて見逃してました笑
が、大事なものらしいです。ACF側でフィールドを設定→保存したところ、その設定データのファイルが自動出力され格納されていました。

日本語版Wordpressの公式 にある記述を使用するとうまくいかなかった

"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"render": "file:./render.php",

↑この辺を追記したりしたら失敗しました…
ACFの使用を前提とした場合は、WP公式が提示しているやり方とも若干変わるっぽいです。

記号の使い方

"name": "acf/testimonial",

name には、必ず「acf/」などと「名前空間」の指定をしなければならない…とのことですが、コレを入れるとうごかなくなり、消すと動き出す…という現象にしばらく悩まされました。

結論からすると「acf/」のあとの方が問題でした。
ここにアンスコをつかうと良くないっぽいです。
(WordPressの自動出力スクリプトなどでは、アンスコではなくすべてハイフンがつかわれているので、その関係？)

エディタなんかでは、アンスコをつかった方が、ダブルクリックで一気に選択出来ていいんですけどね…
結局はどちらの記号もつかわない名称で登録、解決しました。

追記

実装出来て、一呼吸着いたので、ファイル名などをもっと自分で管理しやすいように変更してみたり…

その中で、CSSをJSON内で読み込むと、「今回作ったブロックをつかっていなくても」「ヘッダー内に直書き出力される」ことがわかりました。CSSの内容は大したことないので、ページのパフォーマンス的にはそこまで気にするほどではないですが…ヘッダーは極力すっきりさせたいです。

というわけで、JSONの方のCSS設定を削除し、

  "name": "acf/richlink",
  "title": "カスタムリッチリンク",
  "description": "サムネイル画像、テキスト等を手動設定できます",
  "style": ["file:./style.css"], // ← これを削除

functions.php のほうに、「このブロックの使用があるときのみ」読み込むようにします

add_action(
  'init',
  function () {
    wp_enqueue_block_style(
      'acf/richlink',
      array(
        'handle' => 'acf-richlink-style',
        'src' => get_theme_file_uri('/blocks/richlink/style.css'),
        //'path' => get_theme_file_path('/blocks/richlink/style.css')
      )
    );
  }
);

“src” と “path”、両方入れると相変わらずヘッダー内に直書きで出てしまうので、結局 “path” の方は消しました。

…が、あれ…このブロックをつかっていない記事でも読み込まれてる……？？

まあ、直書きで出ることは無くなったので、いったんそれで良しとして、後日調べてみますかね…💧

↑こういうコードハイライターとか、いろいろプラグインを入れている以上しかたないのですが、極力ヘッダーはキレイにしたいもの…。