BLOG

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

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

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

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

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

ほたかのいえ

hotakanoie.com

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

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

あ、あと、

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

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

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

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

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

ぜひおためしください！

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

dp-Leaf | Clip Assets

assets.clip-studio.com

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

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

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

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

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

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

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

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

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

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

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

しかしひとつ懸念が。

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

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

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

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

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

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

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

カスタムブロック「リッチリンク」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” の方は消しました。

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

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

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

モノクロまんがのエフェクト用ブラシを公開しました！

キャラを軽率に消滅させたり、テクスチャ付け、背景・効果描写にも。
通常の平行線ツールとはまた違った雰囲気が出ると思います。
Enjoy Drawing !

ぜひつかってみてください！

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

dp-消滅効果ブラシセット / Vanish Effect Brushes | Clip Assets

assets.clip-studio.com

キャラを軽率に消滅させたり、テクスチャ付け、背景・効果描写にも。
通常の平行線ツールとはまた違った雰囲気が出ると思います。
Enjoy Drawing !

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

コードの見直し

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

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つ入っている状態…
なおした方が良いのかな💦

SNSシェアボタンアップデート

「Twitter」のままだったり「G+」があったり、最近は色々SNSが増えてきたので…
ひとまず、「TWEET」の記事のシェアボタンをアップデートしました。
たぶん、TWEETに投稿後、じぶんで押すのがメインになると思います（笑

BlueskyもMisskeyも、ちゃんと公式からロゴデータやシェア用URLを用意していてくれてよかったです。

(SNS増えすぎィ…すべては奴のせい)

また何か気づいたらちょくちょく直していきます。