うちのこをしゃべらせるカスタムブロックを作りました。
かわいいね！！勝ちです！！
✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌
前回記事がなにやらそこそこ見られているらしく…。
【WordPress】ACF PRO をつかってカスタムブロックを作成！
WordPressのカスタマイズは多少わかるけど、込み入ったこととなるとちょっと…
…な ほたか が、ACF PRO をつかってカスタムブロックをつくることができた！というお話です。
またなんか作ってみるかー！
というのと、あとは昔のノリでうちのこをしゃべらせようと思ったので
あらためて、ACF PRO をつかってカスタムブロックを作る手順のメモです。
⓪：下準備
前回のハマりポイント。テーマフォルダに acf-json フォルダを作成しておきます。
この状態で、ACFでフィールドを保存すると、この中にJSON形式の設定ファイルがポコポコ蓄積されていきます。(ここの中身は編集の必要なし)
①：functions.phpでカスタムブロックの登録
functions.php に書いてアップ。
/* --------------------------------------------
* カスタムブロックの登録
* -------------------------------------------- */
add_action('init', 'register_acf_blocks');
function register_acf_blocks()
{
register_block_type(dirname(__FILE__, 2) . '/blocks/charaspeech'); //※１
}
/* --------------------------------------------
* ACFブロックカテゴリーの登録 //※２
* -------------------------------------------- */
function add_block_categories($categories, $post)
{
$add_categories = [
[
'slug' => 'dp-custom-blocks',
'title' => 'DPカスタムブロック',
'icon' => 'star-filled',
],
];
$categories = array_merge($add_categories, $categories);
return $categories;
}
add_filter('block_categories_all', 'add_block_categories', 10, 2);
/* --------------------------------------------
* ブロックを使用するときのみCSSを読み込む
* -------------------------------------------- */
add_action('init', 'custom_block_styles');
function custom_block_styles()
{
wp_enqueue_block_style(
'acf/charaspeech',
array(
'handle' => 'dp-customblock',
'src' => home_url('/css/customblock.css'), //※３
)
);
}
※１：テーマフォルダに blocks フォルダを作成、さらに charaspeech フォルダを作成して、その中にもろもろ設定ファイルを入れる構成です
※２：デフォルトのブロックリストに混ぜたくなかったので、独自のカテゴリを作成することにしました
(独自のカテゴリを作成すると、記事編集画面の左側のブロックリストには ←このような形で出てきます)
※３：blocks フォルダ > 各ブロック用のフォルダ にCSSを入れる例を見かけますが、このサイトでは、自作ブロック用のスタイルは、まとめて /css/customblock.css に入れています。
ちなみに、サイト全体が「ブロックテーマ」で作られていないと、「ブロックを使用しているときのみ読込み」はできないっぽいです…。(このサイトは、記事以外にはブロックを使わない「クラシックテーマ」タイプなので、どのページでも読み込まれてしまう模様)
とにかくカスタムブロック用のCSSの登録は必要なので、書いておきます…。
(JSONのほうに書く方法がメジャー？)
なお、管理画面のスタイルでは box-sizing: border-box; の設定がないようです。
「記事をプレビューする分には問題ないけど、編集画面で段ずれが起きる！」などなどの場合は、こいつをブロック用のCSSに含めてやるとよさそう。
②：JSONを登録
テーマファイル内の blocks/charaspeech/ の中に、block.json を作成します。
{
"name": "acf/charaspeech", //※１
"title": "キャラトーク",
"description": "うちのこの会話を表示します",
"category": "dp-custom-blocks", //※２
"icon": "format-chat",
"keywords": ["会話, chat, うちのこ"],
"acf": {
"mode": "auto",
"renderTemplate": "render.php"
},
"supports": { //※３
"align": false,
"anchor": true,
"className": true
},
"example": { //※４
"attributes": {
"mode": "preview",
"data": {
"__is_preview": true
}
}
}
}※１：nameにはアンスコがつかえないっぽいのでご注意ください～
(自動出力スクリプトのIDなどで、アンスコはハイフンに変換されてるので、そのあたりの関係？？)
※２：先ほど functions.php で作成した独自カテゴリに含めるようにします
※３：編集画面右に出てくる「高度な設定」で、もろもろサポートするかどうか？の設定。
いちおう、カスタムのID (anchor) とクラス (ClassName) は設定できるようにしました。
※４：example の項目は、編集画面のブロックリストでカーソルを当てた時に表示されるサンプル画像に関する設定だったと思います。いちおうサンプル画像 (thumb.png) も作ったので書いておきます。
③：ACF PRO でフィールドを登録
キャラ＋吹き出し１つに対して１つのブロック…でもよいのですが、今回はPRO版の醍醐味「繰り返しフィールド」を使いました。
フィールド全体の設定
| ロケーションルール | ブロック・等しい・キャラトーク |
繰り返しフィールド
| 全般 > フィールドタイプ | 繰り返し |
| 全般 > フィールドラベル | キャラ会話 |
| 全般 > フィールド名 | cb_cspeech |
| 全般 > レイアウト | テーブル ※ |
※：テーブルが一番、高さを取らずコンパクトな表示だったので…
繰り返しサブフィールド①
| 全般 > フィールドタイプ | 選択 |
| 全般 > フィールドラベル | キャラクター |
| 全般 > フィールド名 | cb_cspeech_chara |
| 全般 > 選択肢 ※ | haruka : ハルカ kai : カイ |
| 全般 > 戻り値の形式 ※ | 両方 (配列) |
| 検証 > 必須項目 | 有効 |
※：キャラの画像ファイル名・キャラ名の処理を両方行いたかったので、どちらも取得できるように設定
繰り返しサブフィールド②
| 全般 > フィールドタイプ | テキストエリア |
| 全般 > フィールドラベル | セリフ |
| 全般 > フィールド名 | cb_cspeech_speech |
| 検証 > 必須項目 | 有効 |
| プレゼンテーション > 改行 | 自動的に ＜br＞ を追加 ※ |
※：管理画面で入れた改行が、そのまま表で反映されるように設定
④：render.php、CSS で表示設定
テーマファイル内の blocks/charaspeech/ の中に、render.php を作成します。
<?php
//※１
if (!empty($block['data']['__is_preview'])) {
echo '<img src="' . get_template_directory_uri() . '/blocks/charaspeech/thumb.png" alt="">';
return;
}
//※２
$anchor = '';
if (! empty($block['anchor'])) {
$anchor = 'id="' . esc_attr($block['anchor']) . '" ';
}
//※２
$class_name = 'cb_charaspeech__wrapper';
if (! empty($block['className'])) {
$class_name .= ' ' . $block['className'];
}
?>
<div <?= $anchor; ?>class="<?= $class_name; ?>">
<?php
if (have_rows('cb_cspeech')) { //※３
while (have_rows('cb_cspeech')) {
the_row();
$chara = get_sub_field('cb_cspeech_chara');
$img = '/img/blog/chara/' . $chara['value'] . '.webp';
$name = explode('_', $chara['label'], 2); //※４
?>
<div class="dp_customblock cb_charaspeech__box">
<div class="chara">
<img src="<?= $img ?>" alt="<?= $name[0] ?>" title="<?= $name[0] ?>" width="100" height="100" loading="lazy">
</div>
<div class="speech">
<?php echo get_sub_field('cb_cspeech_speech'); ?>
</div>
</div>
<?php
}
} ?>
</div>※１：先ほどの json で、サンプル画像の設定があったら、サムネイル画像を適用する…というもの
※２：先ほどの json で、サポートを有効化した ID (anchor) とクラス (ClassName) に関する設定。記事の編集画面の「高度な設定」から入力があった場合は反映できるようにします。
※３：ここから繰り返しフィールドのループ処理。投稿のループ内ではないですが、IDの指定は不要のようです。(というか、そもそも何のIDを入れるかもわからないですし…汗)
今回、キャラもセリフも必須設定にしたので、「値があったら～～」のような処理は入れていません。
※４：今後キャラアイコンのバリエーションを増やす場合は、ACFでラベルにアンスコを入れて設定するようにしました。ラベルの1番目のアンスコの前が名前として表示されます。
例）haruka_2 : ハルカ_らぶらぶモード とすると、表示時のキャラ名は変わらず「ハルカ」となるあとはCSSで整えてあげればOK！
(このサイトの場合、SCSS で記述後に CSSに変換しています)
:root {
--std-atclMgn_btm: 1.25em;
--cb-text-main: #2c3338;
--cb-bg-main: #fff;
}
.dp_customblock > * {
box-sizing: border-box;
}
.cb_charaspeech__wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: calc(var(--std-atclMgn_btm) * 2) 0;
}
.cb_charaspeech__box {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 16px;
& .chara {
width: 80px;
& img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
}
}
& .speech {
width: calc(100% - 96px);
background: var(--cb-bg-main);
color: var(--cb-text-main);
line-height: 1.6;
padding: 16px;
border-radius: 8px;
position: relative;
&::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 20px 10px 0;
border-color: transparent var(--cb-bg-main) transparent transparent;
display: block;
position: absolute;
left: -12px;
top: 30px;
z-index: -1;
}
}
}
@media all and (min-width: 641px) {
.cb_charaspeech__box {
gap: 24px;
& .chara {
width: 100px;
}
& .speech {
width: calc(100% - 124px);
padding: 20px;
&::after {
left: -16px;
top: 40px;
}
}
}
}完成！
これで完成です🎉
ちなみに、ディレクトリ構造はこんな感じです。
具体的なソースとともに紹介しましたが…
「自分もうちのこをブログ上でしゃべらせたい！！」
という方、その他カスタムブロックを作ってみたい方のお役に立てば幸いです。
学園の入り口近くにクレープのキッチンカーが…！
無茶ぶりメニューせびりに行こうぜｗｗｗ
【Figma】まんがの背景効果用に、画像素材をつくってみた その2
先日の記事のつづき。
うちのこのかわいさを前面に出すべく、そんなかんじのトーンを作りためています。
【Figma】まんがの背景効果用に、画像素材をつくってみた
Figmaで、まんがの背景効果に使える画像素材をつくってみたおはなし。タイリングできるパターンや、ちょこっと置けるほわほわ系。
かわいいね！！！
✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌
また、「どうせ作るなら、ちゃんと印刷まで意識したものにしよう」…ということで、こちらの記事を参考に、使用するグレーも固定しました。(前回作ったぐるぐるにも適用しておきました)
指標があるのはありがたい…感謝！
グレースケール漫画に最適なトーン濃度（%）の決め方 | hikarium
hikarium.com
＼最適なグレー（灰色）の濃度ってどれ？／ というわけで、Web漫画のトーンについてまとめました。
Figma は「ローカルスタイル」によく使う色、テキストスタイルなどを保存しておけるので (クリスタのカラーパレット的な機能)、一度登録しておくとべんり。
フレームを選択すると、その中で使われている色をすべてピックアップしてくれるのもメチャクチャありがたいです。
スタイル名で「/ (半角スラッシュ)」を使うと、自動でカテゴリ分けしてくれるのも優秀👍
こんなかんじで、いろいろバリエーションを増やしていこうとおもいます(`･ω･´)
ちょっといま、絵を描くまでいくような心身状態にないので…
とはいえ、なにかつくりつづけていないと悪循環になるのはわかっているので…
しばらくは素材づくりのほうに取り組むかもです。
【Figma】まんがの背景効果用に、画像素材をつくってみた
Clip Assets にたくさんの素材が出品されていますが、なんとなくこう、「ポップ」「かわいい」「あほっぽい」ところで使えそうな、しっくりくるものが少なく… (→ 結局いつもハニワくんになる)
なんかうまいこと、自分で調達できないかナー…と、Figmaでつくってみることに。
かわいい！！！
✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌
つくりかたメモ
正方形の中に、ぐるぐるを敷きつめ…
(切れてしまうパーツは、複製 → マスク適用 → 反対側に平行移動)
パターンができたら、それをコンポーネント化。
複製 → 周囲にタイリングして、バランスを整えます。
中央のオリジナルのフレームをコンポーネント化しておくと、編集した内容が周囲の複製したものすべてに反映されるのでべんり👍
あとは、画像として書き出し → クリスタ側で画像素材として登録すれば、タイリング・拡大縮小・回転など自由自在につかえます。
やったね✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌
いろいろつくれそう
ほわほわ系効果もできるかナー…と。
エフェクト > レイヤーブラー を駆使して、ほわほわにしてみたり、★の図形を丸っこくかわいくしてみたり。
ペン > 鉛筆 ツールだと、ペンタブをつかって手描きもできますね。
クリスタのような手ブレ修正はついていないので、ちょっといつもの感じとちがいますが…
まとめ
しっくりくる素材がない、まんが作品に独自色を出したい…なんてときは、こんな感じで自作の素材をストックしておくとよいかも。
【Figma】テキスト全体にグラデーション枠線を適用するメモ
本職デザイナーではないのですが、Figmaにはかなりお世話になっています。
最近公開した素材の解説画像も、Figmaで作っていたりします。
(それまではクリスタで作っていたのですが…Figmaは余白サイズがすぐわかったり、オートレイアウトしてくれたり、コンポーネント化できたり…ちょっとした画像調整もできるし、超便利✨)
とはいえ、手当たり次第で使っているので (のうすじ)、実は基礎的なところがわかっていなかったりします。
これまでハマって実現できなかったこと
いままでハマっていたのが、「複数行のテキストの枠線 (境界線) に対して、全体にナナメの線形グラデーションをかける方法」がわからないということ。検索の仕方が悪いのか、調べてもなかなか目当ての方法が出てきません。
２行のテキストをグループ化、グループに対してグラデーションを適用した場合、水平方向 (各行個別) であれば実現できるのですが…
今回は「テキスト２行全体で」ナナメグラデーションをかけたいのです。
(クリスタだと、フォルダにまとめて → フォルダに対して「境界効果」を設定すれば全体に適用できるので、そのノリだったのですが…)
しかも、グループに対してのグラデーションでは「グラデーションを回転」ができないらしく…
テキスト要素それぞれを選択することで、ようやく「グラデーションを回転」が効く仕様のようで…。
(回転できるのも 水平方向 or 垂直方向 のみなので、今回の要件を満たさず)
いろいろ試してみるものの…
試行①：２行のテキストをグループ化、それぞれラスタライズ、全体のグループに対してグラデーションを適用
試行②：↑の各行ごとのグループを解除して同階層にしたうえで、全体のグループに対してグラデーションを適用
いずれもNG。
解決！
しばし考え…本日思いついた解決法がこちら。
テキストを複製して、下のほうにだけ目的の線幅で枠線を追加 (色は何でもOK)
２つのテキストグループの間に、目的のグラデーションを適用した長方形を追加
(長方形のグラデーションであれば、好きな角度に調整可能！)
下の方のテキストと長方形を選択し、「マスクとして使用」
できました！🙌
この方法、テキストをアウトライン化しなくてもできるので、あとでテキストを修正したくなった時も楽ちんです。(上下２レイヤー分修正しないとですが…)
さっそく活用
さて、やっと方法がわかったので、さっそくつかってみます！
かわいいね！！
なんでつくったかというと、本サイトのHOME最下部のバナーリストに加えるためです。
(メインのブログではなく、日々のらくがきなどはTWEETコーナーにポイポイしていることが多いため…)
かわいいね！！！！
応用として、上のテキストだけ若干ずらすと、本記事のサムネイル画像のような感じにもできます👍
かわいいね！！！！！！！
まとめ
以上、手当たり次第にFigmaを攻略している (のうすじな) 人のメモでした。
Figmaを使い始めた方のお役に立ったら幸いです。
現在、仕事が絶賛繁忙期で…
こころが荒んだり、そもそも体力が残っていなかったりして、全然更新できていないのですが……
今後も自分の城をゆっくりしっかり発展させてゆきます…。
二次創作コンテンツを分離
ここのサイト、もともと「一次創作メインで、二次創作もたまにあるよ！」的なところだったのですが…
このたび、完全に分離しようということで、二次創作系記事の一斉リダイレクト処理を追加しました。
ザ・版権！な記事を移動し、ほかの創作者さんとの交流を、本サイトでの「二次創作」カテゴリで残した形です。
二次創作 | Blog | DICE Project
ほかの創作者さんとの交流絵など。
該当する記事の diceproj.com のURLにアクセスすると、こんなかんじでリダイレクト＆お知らせメッセージが表示されます。
二次創作サイトはこちらです。
ほたかのいえ
hotakanoie.com
ほたか によるファンアート (二次創作、主にFalcom社) やブログ記事を置いているサイトです。公式とは一切関係ありません。
引き続き、一次創作メインでこちらを更新しつつ…たまに版権の話題があったらあちらに…という形で運用していく予定です。
あ、あと、
- ところどころ画像を差し替えました。
- イラストのラインナップ、表示方法を変更しました。
- lightboxプラグインを使っていたのですが、タイトル・タグなども一緒に表示させようと思い、自前の仕組みで作り直しました。
このサイトは今も進化しております…