WebページのURLを入力し、1クリックするだけで、そのページの編集可能なFigmaファイルに変換できる無料プラグインを紹介します。 去年紹介しましたが、先日ver.2にアップデートされました！ 一括インポート、マルチビューポート、マルチテーマ、テキストとカラーのスタイル生成ができるようになり、さらに便利になりました。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma デスクトップとスマホも同時に！ 1クリックでWebページをFigmaに変換 html.to.designの利用方法 html.to.designの使い方 1クリックでWebページをFigmaに変換 html.to.designは、URLを入力して1ク

VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。 折りたたみ機能は、VS Codeで行エリアをホバーすると折りたたみ可能な箇所に下向きの矢印が表示されます。 Better Folding Better Foldingの特徴 Better Foldingのインストール Better Foldingを使ってみた Better Foldingの特徴 Better FoldingはVisual Studio Codeの機能拡張で、折りたたみ機能で求められるすべての機能を一つにまとめた拡張機能です。 VS Code標準の折りたたみ機能をより使いやすくします。 左はVS Code標準の折りたたみ、右はBetter Foldingの折りたたみ

WordPressのお問い合わせフォームに「MW WP Form」というプラグインを使っていますが、ここ最近は迷惑な宣伝投稿が増えてきました。 人間が投稿しているのであれば我慢も出来ますが、おそらく誰かがWordPressフォームのURLを収集、リスト化してボットが定期的に自動投稿しているものと考えられます。 パケットの無駄なので、これらの社名・サービス名・ドメイン名をNGワードにして二度と投稿出来ない設定を簡単に追加したのでシェアします（他のプラグインに頼らずに実装） 以下のコードをfunctions.phpに追加する <?php //--------------------------------------------- // + 問い合わせフォームのSPAM排除 //--------------------------------------------- function mwf

モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】

WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン

WordPressのプラグイン開発時での管理画面のコーディング例です。 WordPress管理画面に登録する際のアクションフックの記述方法などいくつか悩んだポイントがありましたので参考までに解説します。 WordPressで管理画面をつくるサンプルコード class-admin.php <?php /** * 管理画面コントローラー */ if (!defined('ABSPATH')) exit; require_once __DIR__ . '/view-admin.php'; // オプション名設定 define('MY_EXT_OPTION', 'my_ext_option'); class adminController { /** * コンストラクタ */ function __construct() { // WordPress管理画面にメニュー登録するアクションフック ad

InstagramをウェブサイトやWordPressに表示させたり、WordPressの記事を自動的にInstagramにも投稿させる方法など、Instagramの連携方法をご紹介します。 「ホームページにインスタグラムの写真を表示したい」 「ブログを投稿すると、インスタグラムにも自動で投稿したい」 と言ったケースは多いと思います。 ホームページとインスタグラムの連動についてベストな方法をご紹介いたします。 ホームページとインスタグラムの連動させる事前確認 SEOの影響 表示する枚数やキャッシュ機能、LazyLoadなどを利用することで、素早く表示させることができます。 instagramの写真を表示させることで、ホームページの表示速度が遅くなり、SEOへの影響を気にされる方もいますが、当社の事例や、海外の事例をみても影響はありません。 ただし、サイトスピードテストには影響するため、点数が

こんにちは。バックエンドエンジニアのまうみです。 今回はWordpressでお問い合わせフォームを実装する際の定番プラグイン、MW WP Formの知っておくと便利なカスタマイズを紹介します。 MW WP Formはシンプルなショートコードを生成し、簡単に確認画面付きのフォームを作成できることが特徴です。しかもカスマイズの幅もとてつもなく広く、応用次第で様々な案件に対応できるポテンシャルを持ったプラグインです。 今回は機能別に、「えっ、そんなこともできるの？」というようなMW WP Formのカスタマイズ技をご紹介します！ 出力されるタグのhtml構造を変更したい 例えばデフォルトのタグのDOMの構造を変更して、独自のclassを追加したい……そんなときのためのカスタマイズです。 プラグイン内で管理されているテンプレートパーツを、WordPressのthemeディレクトリにコピーすることで

はいさい！ エンジニアのうーまーです。沖縄からフルリモートでLIGでお仕事しています。 今回は、WordPressのカスタムフィールドプラグインとしてデファクトスタンダードなACFを拡張する、ACFのアドオンプラグインのご紹介です。 ACFはそれだけで神的な存在ですが、たまに「こういう機能もあったらいいなー」と思うこともあります。そういうかゆいところに手が届くようにしてくれるのがこのACF Extendedです。 機能があまりにも多すぎてすべては紹介しきれないのですが、個人的にすごいと思う機能をいくつかピックアップして紹介したいと思います。 ACFとは？その拡張とは？ Advanced Custom Fields (ACF) とは、WordPressの投稿ページや固定ページ、カテゴリ、コメント欄など任意の箇所へ入力欄を追加できるWordPressの追加機能（プラグイン）です。 テキストや画

WPプラグイン 【セキュリティ対策】WP-Cerberの設定方法！海外在住ブロガーは必須！サイバーアタックやワードプレスのっとり防止 ワードプレスブログに絶対マストなのはセキュリティ対策プラグインです！ワードプレスの管理画面からログインされてブログを書き替えられたり、真っ白にされてはかないませんから！ サイバーアタックを防止するために万全を尽くすためのプラグインが『WP-Cerber Security, Anti-spam & Malware Scan』です。設定がかなり細かくてブログ初心者さんだとよくわからないかもしれないので、とにかく真似してください！ 私はもともとは別のセキュリティプラグイン『SiteGuard WP Plugin』を使っていたのですが、いつもお世話になっている企業のセキュリティ担当の方からこちらのプラグインを教えていただきました。設定もWebセキュリティ担当の方直々

「Smash Balloon Social Photo Feed」とは WordPressで制作したサイト内に簡単にインスタグラムフィードを表示できるプラグインです。主な特徴は以下の通りです。 インスタグラムアカウントとの連携があっという間に完了できる ショートコードを使って任意の箇所に表示することもできる サムネイルのレイアウトを調整できる 特別な設定は不要なので、誰でも簡単にご活用いただけます。 「Smash Balloon Social Photo Feed」のインストール 管理画面から「Smash Balloon Social Photo Feed」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。 ダウンロード 基本的な使い方、設定方法 次の3ス

各ユーザーが公開する便利な機能をブラウザに導入できる仕組みが「ユーザースクリプト」です。「Violentmonkey」はユーザースクリプトをChrome、Firefox、Edgeの各ブラウザに導入し、クラウド同期まで可能な拡張機能とのことなので、実際に使ってみました。 Violentmonkey https://violentmonkey.github.io/ まずはViolentmonkeyをブラウザにインストールするところから。公式サイトの「GET STARTED」をクリック。 遷移先の「Stable Release」に各ブラウザ向けのリンク一覧があります。今回はChrome版のViolentmonkeyを使うため、「Chrome Web Store」をクリック。 Chromeに追加をクリック。 ポップアップが表示されるので、「拡張機能を追加」をクリック。これでインストールが完了です。

must-use plugins（mu-plugins）とは？普通にWordpressサイトを運営しているだけだとあまり見かけない用語ですが、マルチサイトで必ず有効にしたいプラグインを設定したり、Wordpressアップデートの自動更新有効化・解除の設定をしたりする場合などに使用します。 [adsense] must-use pluginsとは「must-use」とあるとおり、「必ず使用する」プラグインを入れておくための特別なフォルダです。 その特別なフォルダはどこにあるかというと、 wp-content/mu-plugins/ です。 ただ、Wordpressをインストールしただけではこのmu-pluginsフォルダは作成されないので、必要になった場合は、手動でmu-pluginsフォルダを作成する必要があります。 mu-pluginsフォルダの動作についてWordPressが起動すると

アプリケーション After Effects CC / CC2014 / CC2015 / CC2015.3 / CC2017 / CC2018 / CC2019 / 2020 / 2021 / 2022 / 2023 / 2024 OS Windows Mac ※対応するOSバージョンにつきましては、「After Effects 必要システム構成」をご参照ください。 必要システム構成プラグインのテクニカルサポート提供は、Adobe社の「After Effects 必要システム構成」内でのご利用が前提となります。「After Effects 必要システム構成」をご参照のうえ、After Effects が動作を保証するシステム構成内でプラグインをご利用ください。なお、Adobe社の「必要システム構成」で動作が保証されない環境でプラグインを使用した際に発生するトラブルへのサポート提供は致しか

Public Post PreviewPublic Post Previewは下書き状態の投稿を外部の人に公開することができるWordPressのプラグインです。 これを知るまでプレビュー画面をPDFにしたり、テキストだけをコピペして共有したり。。。様々な方法を駆使して共有してきましたが、どれもいまいちでした。しかし、このプラグインを導入すれば、プレビュー画面をそのまま外部の人に共有できることができます。 外部確認を許可するというチェックボックスにチェックをいれると専用のURLが発行されるので、そこにアクセスした人に対してページを共有することができるようになります。 たった1つの動作で下書きを公開できるなんて素敵ですね！！ 導入方法ワードプレスの管理画面→プラグインで検索窓に「Public Post Preview」を入力して検索します。 検索のトップにでてくるので、今すぐインストールをポ

[レベル: 中級] ネイティブ Lazy-load を簡単に実装する WordPress 用のプラグインを Google が公開しました。 ネイティブ Lazy-load は JavaScript のライブラリを利用することなく loading 属性を追加するだけで、画像と iframe の遅延読み込みを可能にします。 1 か月前にリリースされた Chrome 76 でサポートされました。 設定不要、インストールするだけで WP で Lazy-load Native Lazyload プラグインの使い方は非常にシンプルです。 インストールして有効にするだけです。 設定項目はありません。 有効にすると、img タグと iframe タグに loading=”lazy” 属性をプラグインが自動的に追加します。 現状では、loading 属性をサポートするブラウザは Chrome 76（以上）だ

Gutenbergでより凝ったレイアウトを簡単に作成できたり、いろいろと細かく設定ができるブロックをさらに追加してくれるプラグインのまとめです。 中には特定のテーマ向けとして作られているプラグインもあるので一般的なテーマでは一部ブロックが使えないとか機能が制限されている場合もあるものの、基本的にはどのテーマでも利用することができます。 また、容易にブロックを追加できるだけでなく、オリジナルブロックを自作しようと思っているときに作り方などの参考にもなると思います。 紹介しているブロック数・機能・設定については、このエントリー公開時のものになります。 Snow Monkey Blocks プラグイン名にも含まれている「Snow Monkey」というテーマ向けとして作成されたプラグインで、作者が日本の方なのでブロックの使い方や更新情報などについても日本語でチェックすることができます。 テーマと併

WordPressで自分用のショートコードを作成するのは通常、function.phpを触らないといけないので、少し面倒です。管理画面で簡単にショートコードを作成でき、管理もできるWordPressのプラグインを紹介します。 ショートコードはHTML, CSS, JavaScriptに対応しており、単独でも組み合わせても利用できる優れものです。 Snippy Snippyの特徴 Snippyのダウンロードとインストール Snippyの使い方 Snippyの特徴 Snippyは、独自のカスタムショートコードを素早く作成できます。 function.phpを編集する必要はなく、管理画面で簡単に作成できます。 Snippy 対応しているコードは、下記の通り。 HTML CSS JavaScript YouTube動画を埋め込むコード、Googleマップを埋め込むコードなど、自分用にカスタマイズし

先日LINE Messaging APIの社内勉強会に参加したのですが、なかなか楽しかったので何か作りたくなったyanagimachiです。 そういえば、求人サイトの写真を差し替えまして、普段の感じが伝わるようになった気がします。 よかったら見ていってください。 さて、今回はAdvanced Schedule Postsのご紹介です。 このプラグインはすでに公開した投稿を特定の日時で差し替えたり、公開終了日時を設定できたりします。 最初と違う内容に投稿を差し替えたい、または別の人に違う内容に書き換えてもらって下書きしたものをプレビューで確認した後に差し替え投稿したい！みたいな時あると思います。 そういうときに使うのがこの機能です。 今回は投稿を違う内容に差し替えてみたいと思います。 1. 元の投稿を用意 2. 投稿を複製（Duplicate Postプラグインを使うと簡単です。）し、書き換

WordPressの記事ページや固定ページごとに、異なるHTMLやCSSやJavaScriptやPHPを利用でき、一元管理もできるWordPressのプラグインを紹介します。 適用できるページは単独でも複数も可能で、適用する場所もヘッダやフッタにと指定できます。前回紹介した際から大きくバージョンがアップし、さらに便利になった新機能も含めて要チェックです。 CSS & JavaScript Toolbox CSS & JavaScript Toolboxの特徴 CSS & JavaScript Toolboxのインストール CSS & JavaScript Toolboxの使い方 CSS & JavaScript Toolboxの特徴 CSS & JavaScript Toolboxの特徴 HTMLやCSSやJavaScriptやPHPのコードを特定のページのみに挿入できます。 記事ページ、