やりたいこと タイトル+URLをリンクの形式でコピーしたい。 各サービスでフォーマットがバラバラなのでいちいち覚えたくない。 あと、Ctrl+Cもめんどくさいので、bookmarkletを押すだけでClipboardにコピーしたい。 ※2017-09-01: 実装、タイトル、説明内容を見直して修正しました。 ※2021-03-27: 実装修正しました ※2022-02-21: Twitterのページで動作しない問題に対応しました ※2023-06-12: execCommandが非推奨なため、Clipboard APIで実装しなおしました 参考にさせてもらったページ JavaScript で指定したテキストをクリップボードへコピーする方法 javascript - Replace multiple characters in one replace call - Stack Overflo
タイトルとURLを色々なフォーマットでコピーできるブックマークレット 2016.02.18 （最終更新：2024.02.11） ブログ Markdown ChatWork Textile JavaScript HTML ドキュメンテーション 約1500字 普段から愛用していて、あらゆる作業効率を地味にアップさせてくるリンク共有用のブックマークレットを紹介します。Wiki・チャット・チケット・資料の作成が捗ります! ちなみに、ブックマークレットとはブラウザのブックマークに登録して使う、ちょっとしたJavaScriptコードのことです。 参考: 知ってそうで知らないブックマークレットの仕組みと使い方（と便利な11点まとめ） ｜ ライフハッカー［日本版］
Twitter やブログなどで Web で見つけた記事を紹介したいときなど、WebページのタイトルとURLを簡単にコピーできると便利です。個人的に以前から使っていた方法ですが、Safari, Chrome, Firefox, IE など、ブラウザを問わず Bookmarklet を使ってこれを行う方法を少しまとめてみました。 今回は開いてるWebページから次の6パターンで文字列を取得する Bookmarklet を紹介します。 タイトル + URL タイトル + URL + 選択テキストを引用 選択テキストを引用 + タイトル + URL Markdown 記法のリンク はてな記法のリンク HTML 形式のリンク Firefox の "Make Link" Add-on は便利だけど… 現在、Mac と Windows を両方かつ複数バージョン使っていて、ブラウザも Safari, Fir
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
【追記】このページを既に訪問された方々へ 結論から申し上げますと、当エントリーの記事内容は誤った情報になります。誤解を与える内容をアップしてしまい申し訳ありませんでした。ブックマークコメントやコメントにて指摘くださった方々、どうもありがとうございました。指摘がなければ自分も誤った情報を鵜呑みにしたまま過ごすところでした。 こちらの記事は、もともとこちらの動画（How to see who viewed your facebook profile the most? – YouTube）を偶然見つけて、initial chat friendsを検索し（What does the “initial chat friends list” on Facebook mean? ）のベストアンサーをちらりと見て書いてしまったものになります。自分で試してみた後の結果と動画を見た直後の先入観からベストアン
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should have in their arsenal, for performance for functional ease purposes. debounc
Making the web more beautiful, fast, and open through great typography
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. There was a fun little trend toward the end of last year where companies were posting their approach to CSS. The tools involved, the methodologies, the thinking, and the data and numbers behind it. Mark Otto kicked it off, best I can tell. I mostly just wanted to post a list of them here, since tha
<div id="contents"> <img src="./img/kori.jpg" width="240" height="387" alt="コリラックマ"> <img src="./img/star.png" width="76" height="76" alt="星" class="star"> </div>
こんにちは（・∀・） CSSだけで作ってみましたシリーズです。今回はドロップダウンメニューをご紹介します。通常のドロップダウンメニューとtransitionプロパティで動きのあるドロップダウンメニューの横バージョンと縦バージョンの4タイプです。 transitionプロパティはdisplayでの制御をサポートしていないため、子孫メニューの制御はoverflowで行っております。displayでの制御も可能ですが、その場合動きはなくなり、表示している矢印も表示されなくなります。 1. 横並びドロップダウンメニュー 横並びで表示するドロップダウンメニューのサンプルです。 ① 通常のドロップダウンメニュー HTML <ul class="nav"> <li><a href="#">Home</a> </li> <li><a href="#">Strategy</a> <ul> <li><a hr
In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements. The HTML The first step is to define the HTML backbone of the website. We are using HTML5 tags extens
HTMLファイルを用意する HTMLファイルがあるとテーマ作成はラク 新規のテーマを開発し始める方法の１つに、まず元となるHTMLファイルを作成して、それをWordPressのテーマファイルに直すというやり方があります。予めサイトのデザインが決まっていると、テーマ開発はよりスムーズです。 今回は、下記サイトを例にします。 このHTMLの軽い説明 div#container: サイトの中身全体を囲んで中央寄せ header#header: サイト名とメニューバーを入れる div#main: サイト中央のブロック。投稿記事＋サイドメニューを囲む div#content: 投稿記事を囲む aside#sidebar: サイドメニューを囲む footer: コピーライトを表示 CSS HTMLファイルからWPテーマファイルを作成する 1. style.cssを作成する まずは、スタイルシートをWo
一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。 WPテーマ化手順リスト STEP.1 HTMLをindex.php、header.php、footer.php、sidebar.php等に分割。分割に関しては以前の記事をご参照下さい。 以下のインクルードタグをindex.php、search.php、archive.phpに追加。 <?php get_header(); ?> <?php get_footer(); ?> <?php get_sidebar(); ?> STEP.2 header.phpのmeta
2014年度現在の、最新のOSやブラウザに対応したfont-familyのセットアップです（游書体も記述しています）。今やWebフォントの時代ですが、日本語の本文などには、まだローカルフォントの使用が必要なのではないでしょうか。 自分のために調べて用意しましたが、日本語のfont-familyを「どうしていいか分からない」「調べるのが面倒」「半信半疑ながら、Dreamweaverのプリセットを使っている」」という方は、どうぞご利用をなさってください。 古いブラウザもサポートするなら、“Complete Set for Legacy Browsers”から使用をしてください。AndroidのRobotoやDroid Sansを記述したゴシック体セット“Sans Serif Set for Legacy Browsers and Android”も用意しました。 仕様や目的、デザインなどに応じ
This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here. The Short Version LESS has very recently added support for Source Maps, so this is new and exciting! DevTools mapping means you can view LESS styles for all your relevant CSS. Edit LESS source files within DevTools a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く