Web制作 | Blog | DICE Project

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

Date : 2025.03.16

Category : Web制作

手っ取り早く方法が知りたい方はこちら ↓

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

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

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

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

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

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

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

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

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

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

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

いずれもNG。

解決！

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

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

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

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

できました！🙌

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

さっそく活用

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

かわいいね！！

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

かわいいね！！！！

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

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

まとめ

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

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

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

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

Date : 2024.12.22

Category : Web制作

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” の方は消しました。

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

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

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

城の手入れ

Date : 2024.12.01

Category : Web制作

とつぜんコード書いたりしらべたりしたい欲が出てきたので…
とてもとても久々に、城 (という名の自分のサイト) の手入れをしました。

コードの見直し

非推奨になっていた関数やら、昔未熟だったころに書いた非効率なコードを書きなおしました。
外観的にはほとんど変わりは無いですが…

CSSを SASS → 1行CSS に変更したり、JavaScriptを統廃合したり…
多少はパフォーマンス向上してるといいな…

とりあえず、自分の成長が実感できて良かったです。

セキュリティ対策対策

WordPressの自動出力スクリプトがいくつもあって、うざいナーとおもいながら確認していたら…

「oEmbed (JSON)」「oEmbed (XML)」の中身をなんとなく見てみたところ、なんと「見えたらよろしくないデータ」までバッチリ出ていたではありませんか…！

やばいやばいと至急対応。

手っ取り早いのは、このoEmbedの自動出力を無効化することだと思いますが…
万が一だれかがうちの記事を埋め込もうとした場合に不格好なことになったらやだナー…という不安から、無効にしていませんでした…

とりあえず、気づいてよかった。

SEO対策アップデート

記事ページを中心に、「構造化タグ」なるものを追加してみました。
個人サイトレベルで、どこまで効果があるものなのかはわかりませんが…
とりあえず、少し経ったらまた様子をみてみます。

Googleも推奨している「JSON-LD」形式を採用。

ただ、一部のコンテンツタイプ (「WebSite」など) は Search Console で認識してくれないらしく…
エラーチェックなどする場合は、Search Console ではなく「Schema.org」の検証ツールをつかった方が良さそうです。

パンくずリストの構造化タグは、使用しているプラグイン「Breadcrumb NavXT」のほうで出力してくれます。(bcn_display_json_ld() 関数で実装)

ただ、プラグインのデフォルトテンプレートが「RDFa」形式に対応したものだったので (だいぶ前からつかっているから？)、構造化タグ情報が2つ入っている状態…
なおした方が良いのかな💦

Home	「WebSite」「SiteNavigationElement」「ItemList」 ※Homeには新着情報集みたいな役目もあるので、いちおうアイテムリストも追加…SEO的にどうなのかは不明
アーカイブページ	「BreadcrumbList」「ItemList」 ※アーカイブページ特化のものは無いっぽいので、「ItemList」にしてみました…
投稿詳細ページ	「BreadcrumbList」「BlogPosting」