これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました
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ク
WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利
WebページやスマホアプリのUIデザインで、一貫したコンポーネント・テーマ・カラー・タイポグラフィ・アイコンなどを作成・管理できるAdobe XDの無料プラグイン「Spectrum」を設計したAdobeのデザインシステム・デザインマネージャーの解説記事を紹介します。 Spectrum for Adobe XD: Adobe’s design language in its experience design tool by Jacob Frank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Spectrumの機能と開発した経緯 Spectrumを使用した結果 Spectrumのインストール方法 Spectrumの今後の機能 ご意見をお聞かせください はじめに アドビのデザインシステムであるSpectrumは、5年前
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル
【WordPress】多言語対応プラグインPolylangでhome_url()を使うときに気を付けること | バシャログ。
みなさんこんにちは、yamashitaです。 6月からクーラーをフル稼働していて8月にはどうなっていることやら心配です。 さて今回はPolylangプラグインを設定している状態でhome_url()を使う際の注意点を一つ紹介したいと思います。 Polylangとは 設定することで多言語ページのURLを設定してくれるプラグインで、各投稿・ページにも対応するページが存在するか一覧で確認できるようになります。 今のところ自分は使用していませんが、有料版には自動翻訳もあるようです。 home_url()の動作 テンプレート上で使用する場合はほとんど通常時と同じ感覚で使って大丈夫です。 出力内容は以下の通りです。 デフォルト言語ページの場合、http://example.co.jp/の様にトップのURLがそのまま出力されます。 他の言語ページの場合、http://example.co.jp/enの様
Webサイトをダークモードに対応させよう
2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ ↑私が10年以上利用している会計ソフト！ とにかく夜間見えづらい！ 私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわ
WordPress プラグイン Polylang の使い方を紹介 - by Takumi Hirashima
WordPress の多言語切り替えプラグイン Polylang の使い方を紹介します。 例えば、多言語サイトを制作する時に便利な方法です。 言語切替の条件分岐 言語を切り替える言語スイッチャーを実装する方法 共通したページスラッグを使用する方法 注意事項 言語切替の条件分岐 言語別に表示を切り替えるには get_locale を使って、現在のロケール情報を取得して条件分岐を行います。 例えば、日本語とそれ以外の言語で表示内容を分けるには、次のコードをテンプレートに追加します。 <?php if(get_locale() == 'ja'): ?> 日本語 <?php else: ?> 他言語 <?php endif; ?> ページ冒頭の lang 設定を言語別に切り替える際には次のコードを追加します。 <?php if(get_locale() == 'ja'): ?> <html lan
多言語化必須！多言語対応と外国人観光客向けのWebサイトを紹介します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ ディレクターのママです。 LIGのオフィスは上野エリアにあります。そして上野といえば……パンダの親子シャンシャン&シンシンで話題の「上野動物園」、活気溢れる商店街「アメ横」、西郷隆盛像のある上野公園など魅力溢れるスポット満載の街でございます。 そんな上野ですが、現在外国人観光客の方々で日々賑わっております。上野だけでなく、日本への訪日観光客数は年々増えてきており、過去最高を更新し続けているそう。 今後、たくさんの外国人観光客が日本に訪れるにあたって、Webサイトの多言語化が重要になってくる……というかなっています！ そこで今回は、Webサイトの多言語化で役立つツールと、外国人観光客向けのWebサイトなど紹介しようと思います。
これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle
CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。 CSS Feature Toggle -GitHub CSS Feature Toggleの特徴 CSS Feature Toggleのインストール CSS Feature Toggleの使い方 CSS Feature Toggleの特徴 CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブ
ダミー画像生成の真打ちとも言える高性能がすごい！オンラインなのにオフラインでも利用できてしまう -satyr.io
ダミー画像の無料サービスはいくつかありますが、真打ちとも言える高性能なダミー画像が利用できる無料オンラインサービスがリリースされました。 ダミー画像はレスポンシブ対応、可変画像や高さが不揃いの画像にも対応しています。しかもオンラインなのにオフラインでも利用できてしまう優れものです。
WordPress AMPプラグインを使って サイトをAMP対応にする – ねんでぶろぐ
Googleは、モバイルページを高速化する AMP（Accelerated Mobile Pages） に対応したサイト検索を開始しました。 AMP は AMP HTML 仕様に沿って作成する必要があります。サイトをAMPに対応させる場合、独自のタグの記述方法や 使えるタグの制約が多いので、自分で対応させるのは大変なのですが WordPressではサイトをAMP対応にするプラグインがあります。 この AMPプラグイン を使うと 自動で変換してAMP対応してくれますのでとても楽になります。ここではさっそくAMPプラグインを使用してAMP対応する方法を紹介します。 WordPress AMPプラグイン(Automattic) https://wordpress.org/plugins/amp/ 【2018/03/07 更新】 ※この記事は WordPress AMPプラグイン ver0.6.2
WordPressでCSV登録が出来るReally Simple CSV Importer | 稼げる副業でお小遣いを稼ぐ方法
とにかく沢山のデータをワードプレス上に登録しなければいけない場合、1つづつ入力するのってバカらしいですよね。 はじめに ワードプレスに数百件はあるであろう情報を登録しなければいけず、またカスタムフィールドも使用しているので、エクセルなどで情報を入力しCSVファイルとしてまとめてアップロードしたいと言う人にオススメのプラグインが「Really Simple CSV Importer」です。 注意事項 CSV登録する時の文字コードに気をつけて下さい。 すべてCSV対応してます 記事や固定、カスタム投稿全てOK タグやカテゴリー、カスタムターム全てOK カスタムフィールドの内容や項目も全てOK 公開日時や公開下書きなどの設定も全てOK 画像の登録やや画像などの指定もOK とCSVでしたい事が全てOKなすんごいプラグインなんです。 インストールしよう いつも通りです。 プラグイン > 新規追加 >
公開前の記事を共有できるWordPressプラグイン「Public Post Preview」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ひろゆきです。 メディア運営などにWordPressを使われている方も多いのではないでしょうか？ ブログの記事作成に便利なWordPressですが、非公開状態の記事を外部の人に確認してもらいたいときってありますよね。 今日は、公開前の記事を外部の人に共有できるプラグイン「Public Post Preview」をご紹介します。 特徴 Public Post Previewの特徴は下記の通り。 下書き、予約投稿、レビュー待ちの記事に対して、ログインなしでも閲覧できるプレビュー用のリンクを生成できる プレビュー用リンクに有効期限を設定できる カスタム投稿タイプにも対応している 導入方法 プラグインの新規追加から「Public Post Preview」で検索するか、こちらからダウンロードして、プラグインフォルダにアップロードしましょう。 ファイルの設置が完了したら有効にしてください
Excelで図形内のテキストを検索する方法
Excelで図形内のテキストを検索する方法を紹介します。 １．問題点 Excelで次のように図形テキストを設定します。 この状態で「hoge」を検索しても、図形内のテキストは検索対象外のためヒットしません。 （クリックで拡大） ということで、図形内のテキストを検索する方法を紹介します。 ２．「RelaxTools」のインストール ご存知の方も多いと思いますが、図形内のテキストを検索するには「RelaxTools Addin」を利用します。 ２項ではアドインのインストール手順を説明します。 RelaxTools Addinのページにアクセスして、「Source code (zip) 」をクリック。 ダウンロードしたアーカイブを展開したあと、Excelを開いて「オプション」をクリック。 「アドイン」をクリック。 「設定」をクリック。 アドイン画面が開くので「参照」をクリック。 さきほど展開した
投稿記事をカスタム投稿に移動できるプラグイン「Convert Post Types」｜WordPressプラグイン
[+]スマホ・モバイル [+]パソコン・通信 [+]マネー [+]趣味・興味 [+]健康 [+]生活 [+]英語 [+]ビジネス [+]雑記・独り言 書評 [+]作成物 サイト記事のまとめ・リスト レイアウト トップページ シングルページ ウィジェット（サイドバー） グローバルナビ（メニュー） パーツ ヘッダー フッター 外観（設定） アイキャッチ カテゴリー・アーカイブ テンプレート作成 テーマ作り コード例 CSS ツール '; collapsItems['collapsCat-592:2'] = ''; collapsItems['collapsCat-87:2'] = ''; collapsItems['collapsCat-192:2'] = ''; collapsItems['collapsCat-28:2'] = ''; collapsItems['collapsCat-45
Firefoxでドラッグを使ってページをスクロールする方法
Firefoxでドラッグを使ってページをスクロールする方法を紹介します。 Firefoxでドラッグを使ってページをスクロール（Yahoo!JAPANのページ） １．はじめに Adoboe ReaderなどではPDFファイルをスペースキーと左クリックでページをドラッグすることができます。 PDFをドラッグでスクロール ブラウザでスクロールするにはホイールを回すか、右側のスクロールバーをマウスでドラッグします。 が、ホイールでは微調整が効きませんし、微調整を右側のスクロールバーで行うためにマウスをスクロールバーまで移動するのが面倒です。 さらに横スクロールなどはさらに面倒です。 PDFのドラッグスクロールのような操作がブラウザでも行えるとかなり便利ではないかと思い、調べてみたところ、Firefoxのアドオン「Grab and Drag」で実現できることが分かりました。 このアドオンを利用すれば
シンプルなピクセルなのにすごい！さりげなく美しい質感を背景に与える商用利用無料のパターン素材
さりげなく美しい質感を加えたい、かわいすぎないかわいいデザインにしたい、といった時によさそうなシンプルなピクセルを使ったPhotoshop用のパターン素材を紹介します。
はてなブログ | 無料ブログを作成しよう
うめぇヨーグルトソースでもいかがですか。個人差にもよりますが。もしよろしければ。 お久しぶりです。 最近うんめぇ〜と思ってるヨーグルトソースがあるので、書いていこうと思います。 ヨーグルトとハーブ類をもりもり使うので、そういうのが食べられない方にはうんめぇソースではないです。ごめんなさい…。もしよろしければお茶だけも…旦~ 【用意する…
WordPressの多言語化（マルチ言語化）検討 – Narratives From A Counselling Room
Diversity Counseling New Zealand（http://dcnz.net）において、カウンセリングサービスを複数の言語で提供することに伴い、このサイトを多言語化することを検討している。（調査時のメモ書き） ワードプレスのサイトにおいて、この件ついてまとめているので参考にさせてもらいながら、検討してみたい。しかし、たくさんあるので、検証には少し時間がかかりそう。 WordPress で多言語サイトを作成する 多言語化プラグインにはいくつか基本的なタイプがあります。 １．言語ごとに1つの投稿を管理する方法 (例: WPML【有料】、xili-language、Polylang、Bogo)。翻訳された投稿はお互いに関連付けられ、ある投稿の翻訳投稿がどれなのかが表示されます。 ２．すべての翻訳文をひとつの投稿内に含める方法（例: qTranslate）。 ３．投稿のコンテク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeliciousThemes: Premium WordPress Themes and HTML Templates
[WordPress] qTranslateでサイト内検索をすると、言語設定が無効になる対処法 2 – モノグサにお灸![[WordPress] qTranslateでサイト内検索をすると、言語設定が無効になる対処法 2 – モノグサにお灸](https://cdn-ak-scissors.b.st-hatena.com/image/square/234519d754f2c45f2978896a78ecab27c77747ff/height=288;version=1;width=512/https%3A%2F%2Fmonoxa.net%2Fwp-content%2Fuploads%2Fwordpress_logo.png){kind=logo}
