Vanilla JS(素のJavaScript)とCSSでスクロールアニメーションを実装する方法 | TechMemo

2020/07/10 6 users スクロールアニメーション jQuery CSS フィード 全文

jQueryを使わずにスクロールアニメーションを実装する方法をご紹介いたします。スクロールしていって可視範囲に要素が入ったら、ふわっとアニメーションしながら表示させます。 意外とコード量は少なくて済むので、スクロールアニ… ※※※このフィードは記事の抜粋を表示したものです。全文を読むにはサイトにアクセスして... 続きを読む

VSCodeでEmmetを展開した時に閉じタグの後ろにID・クラス名のコメントを自動挿入する方法 | TechMemo

2020/06/29 6 users 抜粋 全文 フィード HTML Emmet

私はHTMLを書く時、どの開始タグと対になっているかをわかりやすくするために、閉じタグにクラス名をコメントで付けています。 例えば、こんな感じですね↓ これくらいの行数だったらコメントがなくてもわかりますが、行数が長くな… ※※※このフィードは記事の抜粋を表示したものです。全文を読むにはサイトにアクセスして... 続きを読む

Visual Studio Code(VSCode)でよく使うキーボードショートカットまとめ | TechMemo

2019/10/18 50 users vscode フィード 全文 抜粋 ショートカットキー

Visual Studio Code(VSCode)でよく使うショートカットキーをまとめてみました。 あんまり量が多いと覚えきれないので、本当によく使うものに厳選しています。 Visual Studio Codeでよく使… ※※※このフィードは記事の抜粋を表示したものです。全文を読むにはサイトにアクセスしてください。※※※ 関連記事: Visual Studio Co... 続きを読む

WordPressのプライバシー設定で指定しているプライバシーポリシーページを判別する条件分岐「is_privacy_policy」 | TechMemo

2019/09/06 5 users GDPR フィード 全文 抜粋 WordPress

EUのGDPRへの対応を支援するために、WordPress4.9.6から管理画面に「プライバシー設定」という項目が追加されました。 参考：WordPress 4.9.6 プライバシー・メンテナンスリリース [設定] &#… ※※※このフィードは記事の抜粋を表示したものです。全文を読むにはサイトにアクセスしてください。※※※ 関連記事: WordPress4.9.... 続きを読む

IE11でもpicture要素を使えるようにするポリフィル「Picturefill.js」 | TechMemo

2019/07/01 12 users ブラウザ ポリフィル 以下 画像 IE11

Picturefill.jsは、picture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになるポリフィルです。 picture要素を使うことで、ブラウザの幅によって画像を出し分けることができます。例えば、以下のように記述すると、1000px以上ならextralarge.jpg、800px以上1000px未満ならlarge.jpg、8... 続きを読む

Googleしごと検索に対応した構造化データを生成してくれるツール「JOB POSTING GENERATOR」 | TechMemo

2019/06/11 19 users GENERATOR ザックリ ツール Googleしごと検索

JOB POSTING GENERATORは、自社サイトの求人情報をGoogleしごと検索に表示させるために必要な構造化データを生成してくれるツールです。 必要な項目を入力していくと、Googleしごと検索用の構造化データを出力してくれます。 Googleしごと検索とは Googleしごと検索とは、ザックリいうとGoogleの検索結果に求人情報を表... 続きを読む

サイトにGoogle Fontsを適用した場合の見た目をプレビューできるWEBサービス「Fonty」 | TechMemo

2019/06/04 5 users フィード フォント 全文 抜粋 WordPress

Fontyは、サイトにGoogle Fontsを適用した場合の見た目をプレビューできるWEBサービスです。 指定したサイトにGoogle Fontsを適用して、サイトとフォントの調和具合を確認できます。 Fontyの使い… ※※※このフィードは記事の抜粋を表示したものです。全文を読むにはサイトにアクセスしてください。※※※ 関連記事: WordPress... 続きを読む

アップロードした画像を劣化させずに圧縮・最適化してくれるWordPressプラグイン「Smush Image Compression and Optimization」 | TechMemo

2019/05/22 34 users インストール インストール手順 ファイルサイズ 以下 圧縮

Smush Image Compression and Optimizationは、アップロードした画像を自動的に圧縮・最適化することができるWordPressプラグインです。 画像を劣化させずにファイルサイズを削減してくれます。 Smush Image Compression and Optimizationのインストール インストール手順は以下の通りです。 Smush Image Compression an... 続きを読む

写真の中から人物のみを切り抜いてくれるWEBサービス「remove.bg」 | TechMemo

2019/02/04 34 users URL remove.bg アップ 使い方 人物

remove.bgは、写真の中から人物のみを切り抜いてくれるWEBサービスです。 人物が含まれる写真をアップロードするだけで、自動認識され人物のみが切り抜かれます。 remove.bgの使い方 remove.bgにアクセスして、[Select a photo]から写真をアップロードします。もしくは[enter a URL]で、写真のURLを指定してもOKです。 ... 続きを読む

議事録を作成・共有することができるWEBサービス「GIJI -ギジ-」 | TechMemo

2018/07/20 38 users きし PDF テキスト アカウント 共有

GIJIは、Web上で議事録を作成・共有することができるWEBサービスです。 作成した議事録は共有だけでなく、テキストもしくはPDFでのダウンロードも可能です。 GIJIの使い方 GIJIにアクセスして、[無料でお試し]からアカウントを作成します。 メールアドレスを入力してアカウント登録すると、承認用のメールが届くので、メ... 続きを読む

[WordPress] プラグインを使わずに独自のカスタムフィールドを追加する方法 | TechMemo

2018/06/05 5 users normal add_action カスタムフィールド 方法

//カスタムフィールドのメタボックス function add_custom_fields() { add_meta_box( 'meta_id', '独自のカスタムフィールド', 'insert_custom_fields', 'post', 'normal'); } add_action('admin_menu', 'add_custom_fields'); //カスタムフィールドの入力エリア... 続きを読む

スクロール時にパララックス効果を加えられる軽量スクリプト「ScrollReveal」 | TechMemo

2018/05/15 8 users jQuery ScrollReveal CSS 要素 サイズ

ScrollRevealは、要素が可視範囲に入った時に、アニメーションさせながら要素を表示させることができるスクリプトです。jQueryや他のCSSに依存せず、ScrollReveal単体で動作します。また、サイズも軽量でわずか8.8KBしかありません。 動きについては、以下デモサイトでご確認いただけます。 デモページを見る 今回は、このScrollRevealを使ってパララックス効果を加える方法... 続きを読む

[WordPress] カスタムタクソノミーのセレクトボックス(プルダウン)による絞り込み検索を実装する方法 | TechMemo

2018/04/17 7 users セレクトボックス プルダウン カスタムタクソノミー 実装 検索

カスタムタクソノミーのセレクトボックスによる絞り込み検索を実装する方法をご紹介いたします。 以前、「 カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法 」という記事を書きましたが、そのセレクトボックス版です。チェックボックスによる絞り込み検索よりもセレクトボックスによる絞り込み検索の方が、多少ですがシンプルです。 カスタムタクソノミーのセレクトボックスによる絞り込み検索を実装... 続きを読む

SNSを使って簡単に人を募集することができるWEBサービス「bosyu」 | TechMemo

2018/04/12 17 users Basecamp bosyu 坪田さん 用途 課題

bosyuは、SNSを使って人を募集することができるWEBサービスです。デザイナーさんを募集したり、気軽なものでいえばランチの相手を募集したりと、様々な用途で募集することができます。 bosyuの制作者は、Basecampの 坪田さん (率いるチーム？)で、以下のような課題を解決したいという想いからbosyuを制作したそうです。 bosyuはSNSで募集時によくある課題を解決したいサービスです。こ... 続きを読む

オンライン上でPDFを結合・分割することができるWEBサービス「I Love PDF」 | TechMemo

2018/04/03 11 users modules Hidden 結合 PDF フッター

最近の投稿 オンライン上でPDFを結合・分割することができるWEBサービス「I Love PDF」 フッターに被らないスクロール追尾型のサイドバーを実装する方法 Contact Form 7のフォームにページタイトルやURLなどを隠し項目(hidden)で設定できるようになるWordPressプラグイン「Contact Form 7 Modules」 テキスト選択時の背景色や文字色をCSSで変更す... 続きを読む

テキスト選択時の背景色や文字色をCSSで変更する方法 | TechMemo

2018/03/29 9 users background fff Selection CSS 白色

どのブラウザでも大体テキスト選択時は、背景色が青色、文字色が白色になりますね。「::selection」を使うと、簡単にテキスト選択時の背景色や文字色を変更することができます。 ::selection { background: #FF0000; color: #fff; } ::-moz-selection { /* Firefox用 */ background: #FF0000; color:... 続きを読む

WordPressの検索機能を強化することができるプラグイン「Relevanssi」 | TechMemo

2018/03/04 19 users Plugins rel wp-content プラグイン 以下

Relevanssiは、WordPressの検索機能を強化することができるプラグインです。検索機能をかなり細かくカスタマイズすることが可能です。 Relevanssiのインストール インストール手順は以下の通りです。 Relevanssi をダウンロードします。 ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。 管理画面の[プラグイン]ページで、Rel... 続きを読む

URLを入力するだけでOGPタグを生成してくれるWEBサービス「HEY META」 | TechMemo

2018/01/25 10 users 解析 箇所 自動生成 項目 OGPタグ

HEY METAは、サイトのURLを入力するだけで、OGPタグを自動生成してくれるWEBサービスです。 HEY METAの使い方 HEY META にアクセスして、URLを入力します。ブログの場合は、記事ページのURLを入力してください。 解析が完了すると、下記の項目が表示されますので、変更したい箇所があれば修正します。 Social Card Preview Title Description ... 続きを読む

【保存版】さくらのVPSでWordPressが動く環境を構築するまでの全手順 | TechMemo

2017/09/10 63 users マルチドメイン ファイアーウォール SSH VPS FTP

さくらのVPSでWordPressが動く環境を構築するまでの全手順を解説いたします。 おおまかな手順は、以下の通りです。 ステップ1. SSHでVPSに接続する ステップ2. 作業用ユーザーを作成する ステップ3. 鍵認証の設定 ステップ4. SSHの設定 ステップ5. ファイアーウォールの設定 ステップ6. Webサーバーの設定 ステップ7. FTPの設定 ステップ8. マルチドメインの設定 ス... 続きを読む

よくあるご質問やFAQの見た目をCSSでそれっぽく調整する | TechMemo

2017/06/27 7 users CSS FAQ dl class 見た目 デモページ

よくあるご質問やFAQなどのコンテンツをサクッとそれっぽい見た目に仕上げる方法をご紹介いたします。 紹介するCSSをコピペすれば、以下デモページのような見た目にすることができます。 デモページを見る HTML側は、以下のようにします。 <dl class="qa"> <dt>Q質問1</dt><dd>A回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1</dd> ... 続きを読む

まるで水みたいなぷよぷよとした動きを表現できるjQueryプラグイン「jquery.morphing.js」 | TechMemo

2017/02/28 6 users GitHub 解凍 jQueryプラグイン ファイル 設置

jquery.morphing.jsは、まるで水のようなぷよぷよとした動きを表現できるjQueryプラグインです。 動きについては、以下デモページよりご確認ください。 デモページを見る jquery.morphing.jsの使い方 jquery.morphing.jsのダウンロードと設置 GitHub よりjquery.morphing.jsのをダウンロードします。 ダウンロードしたファイルを解凍... 続きを読む

2014年にお世話になったGoogle Chrome拡張機能まとめ | TechMemo

2014/12/31 102 users 年の瀬 節目 フリーランス あっという間 毎年恒例

2014年もあとわずかで終わりですね。皆さんはどんな一年でしたか？私はというと、4月に開業届けを提出してフリーランスとして活動を開始したのもあり、節目となる一年だったように感じます。非常に慌しくあっという間に過ぎ去りました。2015年はもう少し余裕を持って生活したいです。さて、毎年恒例となっていますが、年の瀬ということで今年もお世話になったGoogle Chrome拡張機能を紹介したいと思います。... 続きを読む

Yahooブックマークがサービス終了！ブックマークデータをGoogleChromeに移行する手順 | TechMemo

2013/04/17 19 users GoogleChrome 手順 ブックマークデータ

人気記事 GoogleドライブでWEBサイト(HTML/CSS)... - 3,994 views[SEO]自分のサイトがペナルティを受けていないかチェ... - 1,969 views[WordPress]挿入した画像をふんわりと拡大させ... - 1,786 viewsフォームで郵便番号を入れたら、住所を自動入力させる方法... - 1,455 views「この動画は、お住まいの国では公開され... 続きを読む

GoogleドライブでWEBサイト(HTML/CSS)が公開できるようになりました。 | TechMemo

2013/02/07 87 users CSSファイル Googleアカウント 用意 CSS アップ

Tweet TweetGoogleドライブにHTMLやCSSファイルをアップロードして、WEBサイトの公開ができるようになったみたいですね。 試しに簡単にやってみたので、WEBサイトの公開方法をご紹介いたします。 HTMLやCSSの用意 WEBサイトを公開するためのHTMLやCSSなどを用意しましょう。 Googleアカウントにログイン Googleドライブを利用するには、Googleアカウントに... 続きを読む