なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
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サイトをリデザイン
閲覧中のウェブページ全体を単一のhtmlファイルとしてダウンロード＆注釈付けも可能な「SingleFile」レビュー
ウェブブラウザで閲覧中のウェブサイトをページ中の画像も含めて保存したいと思ったときに、HTMLファイルと画像ファイル・スタイルシートが別フォルダになることなく、単一のHTMLファイルとして保存できるブラウザ拡張機能が「SingleFile」です。 SingleFile – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/single-file/ SingleFile - Chrome ウェブストア https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle SingleFile - Microsoft Edge Addons https://microsoftedge.microsoft.com
HEY META - Website Meta Tag Check
Why your website should have meta tags? Your website visitors are visual beings (with the exception of robots). When they see the awesome content, product, video, or all of the other cool things they discover on there, they will share it. Now how great would it be if that wasn’t just a plain link in the message, post, comment or tweet but a quick preview of your awesome stuff? Meta tags enable sea
Print.js - Webで任意のコンテンツを印刷できます MOONGIFT
Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。 そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。 Print.jsの使い方 一例です。PDFファイルを指定すると見ているHTMLと全く違うPDFが印刷できます。 <button type="button" onclick="printJS('docs/printjs.pdf')"> Print PDF </button> さらにフォームの印刷も。 <form method="post" action="#" id="printJS-form"> ... </form> <button type="button" onclick="printJS('printJS-form
Webページを印刷する時に便利！不要な部分を除いたりスタイルを最適化して印刷できる -The Printliminator
Webページを印刷する時に、うまく収まらず残念な思いをしたことはありませんか？ 縮小したり、紙のサイズを変えたりも手ですが、不要な部分を除いてしまうのも手です。 ページ上の不要な部分をクリックで簡単に削除して、印刷できるブラウザの機能拡張・ブックマークレットを紹介します。 下のように2枚目にちょっとはみ出してしまうのも、すっきり1枚に印刷できますね。 The Printliminator The Printliminator -GitHub The Printliminatorの対応ブラウザは、下記の通り。 Chromeの機能拡張: The Printliminator Operaの機能拡張: The Printliminator ブックマークレット: The Printliminator ブックマークレットは、IEをはじめ各ブラウザの最新バージョンで動作します。
:target擬似クラスのまとめ
CSSの「:target擬似クラス」について調べてみました。 認識誤りがありましたらどこかでつぶやいてください。 １．:target擬似クラスとは :target擬似クラスはCSS3で追加されたセレクタです。 以下、とりあえず仕様の記載をもとに記します。 仕様は下記のリンク先にあります。 Selectors Level 3 - 6.6.2. The target pseudo-class :target フラグメント識別子（#）のついたURIは、同じHTML文書内の特定の要素にリンクされることがあり、これを「ターゲット要素」と呼びます。 次の例は、HTML文書内にあるfooと名付けられた要素を参照するURIです。 http://user-domain/index.html#foo ターゲット要素は:target擬似クラスで表すことができます。 URIがフラグメント識別子を持たない場合、その
指定したウェブサイトのスクリーンショットをサムネイルで自動生成する
ウェブサイトのサムネイルを生成したいときに、PHPを使って自動で取得し表示する方法です。こういったサービスは色々あるんですが、国内海外気づいたらサービスが終了していた、ということがあります。 wordpressのAPIを使うんですが、そうそうここは終了という可能性は低いでしょう。（と信じたい） wordpressの場合、変数urlにカスタムフィールドなどを充てれば指定したURLから自動で表示できて楽です。その場合は $url = post_custom('url'); とすればOKです。 非公式のAPIのため、いつ終わるかはわかりませんがwordpress自体が使用しているようなので当面は大丈夫なのでは？と思います。 phpが使える環境なら簡単に使える機能です。 【2014/01/09追記】 なかなかスクリーンショットが生成されないな、毎回自動生成しているのかな、と思っていたんですがどうや
Googleタグマネージャで「特定のページ」を指定するルールの作り方 | アユダンテ株式会社
気付けばGoogleタグマネージャがリリースされてから、早くも1年半が経ちました。 今も2～3週間に1度は何らかのアップデートが行われいる状況ですが、一通りの基本的な機能の実装については落ち着いたように思えます。 さて、そんなGoogleタグマネージャにおいて、利用するにあたってもっとも基本となる「ルールの作り方」について取り上げてみようと思います。 今回は初心者向けの基礎的な内容となります。 Googleタグマネージャにおける「ルール」とは？ 基本はURLを使って条件を作る URLマクロの種類 例1：TOPページを指定する場合 例2：ディレクトリを指定する場合 例3：購入完了ページを指定する場合 備考：複数のドメインにコンテナを設置している場合 備考：クエリによってページ内容が変わる場合 まとめ：URLを使ってルールを作る Googleタグマネージャにおける「ルール」とは？ まず前提とし
WordPressで特定ページにだけコードを埋め込める便利プラグインの使い方をご紹介 -CSS & JavaScript Toolbox
特定のページだけヘッダに手をいれたい、テキストや画像を加えたい、CSSやJavaScriptやPHPを適用するなど、特定の複数ページにだけコードを埋め込めるWordPressのプラグインを紹介します。 個別にCSS/JavaScriptを埋め込むことができるプラグインは他にもありますが、HTMLやPHPにも対応、そしてそれらを一元管理できるのはこれだけだと思います。 CSS & JavaScript Toolbox 以前ご紹介したCSS&JavaScript Toolboxが新しいバージョンをリリースされたので、改めて紹介します。 新しいバージョンになり、Free版とPro版の機能の差はなくなりました。 ※Pro版はサポートやフォーラムへのアクセス権がつきます。 CSS & JavaScript Toolboxの特長 CSS & JavaScript Toolboxのインストール CSS
ぼくのかんがえたさいきょうの editor-style #wpacja2013 - Toro_Unit
WordPress Advent Calendar 2013、3日目を担当させていただきます。@Toro_Unitです。 今回はWordPressで活用されているようで活用されていないような気がする、editor-style.cssをがっつり掘り下げてみようかと思います。 そもそもeditor-styleとは WordPressの投稿画面のビジュアルエディタ(ビジュアルリッチエディターとも言いますね)に適用するCSSのことです。 テーマのfunctions.phpに add_editor_style(); と記述すると、テーマ内のeditor-style.cssというファイルが、読み込まれるようになります。 また、引数にファイル名を指定することが可能で、その場合、 add_editor_style("css/editor.css"); とすると、テーマディレクトリのcss/editor.c
指定したウェブページをまるごとPDF化してくれるウェブサービス「PDF Burger」 | ライフハッカー・ジャパン
ついにiPhone卒業→「Nothing Phone (2a)」へ。この乗換えが大正解だった!【今日のライフハックツール】
WordPressのテーマをカスタマイズする際に便利な条件分岐タグをまとめました≫ゆきちゃん日記
このページには表示させたいけど、このページには表示させたくない！なんていうわがままを叶えてくれる、WordPressの条件分岐タグをご紹介します。
Googleアナリティクスで特定キーワードのページビューを調べる方法
Googleアナリティクスで、特定キーワードのページビューを調べる方法を紹介します。 このエントリーはビギナーの方向けの内容です。 １．概要 皆さんよくご存知のとおり、Googleアナリティクスではサイト全体の情報を確認したり、現在アクセスされているページやアクセス上位のページを確認することができますが、ある検索キーワードでどの位のページビューがあるか、確認したい場合があると思います。 キーワード別のページビューを調べることができれば、たとえばあるキーワードでの訪問が少ない場合、タイトルやmeta要素のdescriptionなどを見直すことができるでしょう（注：どのページがヒットしたかは分かりません）。 ということで以下、当ブログのエントリーの「コンテンツ」の表示を例に、特定のキーワードでのページビューを調べる方法を解説します。 ２．特定のキーワードでのページビューを調べる（その1） 1つ
Googleアナリティクスで特定のページを調べる方法
Googleアナリティクスで特定のページの情報を調べる方法を紹介します。 このエントリーはビギナーの方向けの内容です。 １．概要 皆さんよくご存知のとおり、Googleアナリティクスではサイト全体の情報を確認したり、現在アクセスされているページやアクセス上位のページを確認することができますが、あるページのアクセスだけを確認したいという場合もあると思います。 特定のページを調べることができれば、たとえばコンテンツは充実しているのにページビューが少ない場合、タイトルやmeta要素のdescriptionなどを見直すことができるでしょう。 ということで以下、当ブログのエントリーの「コンテンツ」の表示を例に、特定のページを確認する方法を解説します。 ２．特定のページを確認する方法（その1） 1つめは、一覧に表示されたコンテンツから調べる方法です。 左メニューの「コンテンツ」をクリック。 「サイトコ
サイトルートに表示する | DriftwoodJP
トップページを作成するWordPress の管理パネル 固定ページ > 新規追加 でサイトのトップページを作成し、公開する。 ルートディレクトリを設定する管理パネルで「設定 > 一般設定」を開く。サイトのアドレス (URL) 欄を、ルートディレクトリの URL に変更し、保存する。
トップページ（フロントページ）を固定ページで作成・編集する｜WordPress超初心者講座
WordPressサイトのトップページ（フロントページ）に、固定ページを設定する方法を紹介します。 WordPressで作ったサイトのトップページを編集したいな、と思ったことはありませんか？ 通常、WordPressサイトのトップページには最新の投稿が一覧表示されます。なので、新しい投稿を公開するたびに、重要なコンテンツがどんどん埋もれてしまいます。 本記事で紹介する設定をすると、トップページに表示するコンテンツを固定化することができます。 また、トップページの変更がうまく反映されないときの解決法も書いています。ぜひ参考にしてください。 こんにちは。この記事を書いた、かずよしといいます。2010年からWordPressを使っています。 この記事を書いた、かずよしです ユーザー数のべ800万人超えの情報サイト「WordPress超初心者講座」を管理・運営する人。ワードプレスの始め方や使い方を
Movable Typeのテンプレートで任意のページのプレビューができる「TemplatePreviewSelectorプラグイン」
Movable Typeのテンプレートで任意のページのプレビューができる「TemplatePreviewSelectorプラグイン」を公開します。 １．基本 Movable Typeのインデックステンプレートおよびアーカイブテンプレートには、テンプレートをプレビューする機能があります。 インデックステンプレートは、テンプレートで出力されるページが1ページしかないため、プレビューする内容と出力内容が一致しています。 が、アーカイブページは複数のページが存在するにもかかわらず、プレビューでは特定のページ（下記）しかプレビューすることができません。 カテゴリアーカイブ：一番古いカテゴリ 月別アーカイブ：最新の年月 ブログ記事アーカイブ：最新のブログ記事 ウェブページアーカイブ：最新のウェブページ 「TemplatePreviewSelectorプラグイン」を利用すれば、任意の年月・記事・カテゴリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WooCommerce: Login Redirect by User Role @ My Account
URLを入力すると、そのWebページの全体スクリーンショットを撮ってくれる・「Fullpagescreencapture.com」
任意のWebサイトや要素に設定されたCSSを解析するChromeエクステンション・「CSS Peeper」
