jQueryやJavaScriptでパスワードフィールドの文字を表示する方法
jQueryやJavaScriptでパスワードフィールドの文字を表示する方法を紹介します。 １．はじめに パスワードフィールドに入力した文字を確認したいことがあると思いますが、デフォルトのパスワードフィールドでは「●」しか表示されません。 ということで、パスワードフィールドの文字を表示するサンプルを作ってみました。 通常のパスワードフィールド チェックボックスをチェックすればパスワードフィールドを表示 ウェブサイトなどで入力したパスワードを確認したいときに便利です。 ２．パスワードフィールドの文字を表示する（jQuery） パスワードフィールドの文字を表示するには次のようにします（jQuery2.1.1で確認）。 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $(function()
Excelでセルの中にグラフを表示する方法のまとめ
Excelでセルの中にグラフを表示する方法のまとめです。 ここでは次の2種類のグラフ表示について説明します。 セルの数字に対応するグラフを同じセルに表示 複数のセルの対応するグラフを別のセルに表示 １．セルの数字に対応するグラフを同じセルに表示 B2セル～B11セルに設定された数値をグラフにします。 まず、B2セル～B11セルを選択した状態にします。 「ホーム」タブをクリック。 「条件付き書式」→「データバー」→「塗りつぶし（グラデーション）」から好きな色を選択。 これでセルにグラフが表示されました。 条件付き書式には他にもさまざまな表示方法があります。たとえば「条件付き書式」→「アイコンセット」→「方向」から好きなパターンを選択。 これでセルに矢印が表示されます。 グラフを取り消すには、「条件付き書式」→「ルールのクリア」から「選択したセルからルールをクリア」または「シート全体からルール
Excelでセルの合計値を素早く計算する方法のまとめ
Excelでセルの合計値を素早く計算する方法をまとめて紹介します。 １．はじめに セルの合計を計算するときにはSUM関数を使いますが、数式バーに「=SUM()」と入力してセルを選択する手順では手間がかかります。 数式バーに「=SUM()」を入力 ということで、セルの合計を素早く簡単に計算する方法を紹介します。 ２．連続した範囲の合計をセルに表示する まず、下のスクリーンショットように、B2～B10セルにある連続した値の合計をセルに表示させます。 B2～B10セルをマウスのドラッグで選択します。 メニューから「ホーム」タブをクリック。 この状態で「Σ」アイコンをクリック。 これでB11セルに合計が表示されます。 ３．連続した範囲の合計を表示する ２項のデータをセルに表示するのではなく、単に値を知りたい場合の方法です。 １項と同じように、B2～B10セルをマウスのドラッグで選択します。 これで
Movable Typeで記事の差分を表示する「RevisionDiffプラグイン」
Movable Typeで記事の差分を表示する「RevisionDiffプラグイン」を公開します。 １．機能 このプラグインでは次のような機能を提供します。 まず記事を新規投稿します。 記事を修正して再投稿しました。 この2つの履歴の差分を知りたいとき、履歴一覧のユーザー名のリンクをクリックします。 このように、ひとつ前のバージョンの本文の差分を表示してくれます。 現状は記事本文のみですが、今後は他のフィールドやテンプレートも対応させる予定です。 また比較バージョンも指定可能にできればする予定です。 なお、このプラグインではPerlのText::Diffモジュールを利用しています。 ２．プラグインのダウンロード・インストール 下記のリンクをクリックして、RevisionDiffのプラグインアーカイブをダウンロードします。 RevisionDiff_0_01.zip プラグインアーカイブを展
Excelで隠れているシートを表示する方法
Excelで隠れているシートを表示する方法（または非表示にする方法）を紹介します。 １．はじめに Excelではシート全体を非表示にすることができます。 たとえばSheet1をデータ入力用とし、入力したデータを処理するためのデータをSheet2に設定しておくようなケースでは、Sheet2全体を非表示にしておけば、利用者が間違ってSheet2の情報を上書きしてしまうミスがなくなります。 また、VBAでシート自体をデータ保持用に使っている場合も同様です。 ただ、メニューのどの部分を操作すればシートを表示・非表示にできるのか手順が分かりにくいです。 私自身、他の人が作ったExcelファイルで非表示になっているシートを表示させるのに色々調べなければ分かりませんでした。 ということで、Excelで隠れているシートを表示する方法（または非表示にする方法）をまとめました。 動作確認はExcel 2010
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
Windows8.1にAndroid SDKをインストールする方法：本命インストール編
姫（長女）・王子（長男）が大好き＆ガジェット好きの30代オヤジが、"Kingpapa"になるまでの長い道を歩き続けるブログ どうも皆様、ぎんときパパです。 前回、Windows8.1 Pro PreviewにしたPCにJDKをインストールしたところを書きましたが、今回はいよいよ本命のAndroid SDKをインストールする方法です。 ・Android SDKインストールに必要なもの JDKをインストールしたWindows8.1（8）のPCSDKをインストールするためのzipファイル根気 ・AndroidSDKをインストールするためのzipファイルをダウンロード 1.まずは、Android SDKをダウンロードするためAndroid Developerにアクセスします →http://developer.android.com/sdk/index.html 2.アクセスしたら、右側にある「D
Datafeedr Random Ads V2でAmazon等の広告をローテーション表示 | WordPressプラグイン
当ブログでは現在、サイドバーの右上付近でお勧めの書籍の広告を張っています。 2013年2月21日現在、WordPressで加速させる！ソーシャルメディア時代の［新］SEO戦略マニュアルと、検索にガンガンヒットさせるSEOの教科書の2種類の本を紹介しているのですが、スペース的な都合もあり、2冊のうちの本のどちらかがランダムで表示されるように設定を行なっています。 また、当ブログに設置しているAdSense広告も、イメージ画像とテキスト画像のクリック率を違いを計測したり、テキスト広告の背景色等を変更した際のクリック率の変化を調べるために、ランダムでAdSenseの広告が変更されるように設定しています。 任意の位置にランダムで広告等を表示させることができるプラグインがDatafeedr Random Ads V2です。 広告に限らず、アイディア次第で様々な物をランダム表示させることが可能なプラグ
Google ChromeでHTTPを確認する拡張「HTTP Headers」
Google ChromeでHTTPを確認する拡張「HTTP Headers」について紹介します。 １．概要 Google Chrome拡張「HTTP Headers」は、ページのHTTPヘッダーを簡単に確認することができるものです。 なお、Google Chromeではデフォルトの機能でHTTPを確認する方法がありますがちょっとみにくいので、今回はこちらの拡張を紹介します。 ２．インストール 「HTTP Headers」のページにアクセス。 （クリックで拡大） 右上にある「無料」をクリック。 表示されたダイアログの「追加」をクリック。 「CHROMEに追加済み」に表示が変わればインストール完了です。 ３．表示されているページのHTTPヘッダを確認する 表示されているページのHTTPヘッダを確認する方法です。ここではYahoo JAPANのページを例に説明します。 ページを表示した状態で右
Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に
Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのことで、HTML5Rocks でデモページが公開されています。その紹介と、dialog 要素についての簡単な解説。 HTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。 現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス （モーダルウィンドウ） の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に
rel="author" に関するよくある質問（上級編）
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Movable Type管理画面のカテゴリ一覧を折りたたむ「ListCategoryFolderプラグイン」
Movable Type管理画面のカテゴリ一覧を折りたためるようにする「ListCategoryFolderプラグイン」を公開します。 １．機能 Movable Typeのカテゴリ一覧画面は、jQueryを使ってカテゴリーの追加・削除やドラッグ＆ドロップによる並び替えができる仕組みになっており、非常に便利です。 ただ、カテゴリ数が数百以上になると、スクロールしたり並び替えを行うのが結構大変です。 このプラグインを利用すれば任意のカテゴリを折りたたむことができるようになり、作業効率がアップします。 折りたたんでいない状態 折りたたんだ状態 また、カテゴリの追加・削除やカテゴリの並び替えなどを行っても、折りたたみを常に行うことができます。 動作確認バージョンは以下です。 5.14 5.2.6 6.0b1 ２．価格 3300円/1インストールMT（税込み）。お試しはご自由にどうぞ。 ３．プラグイ
Facebookページのコメント返信をスレッド表示できるようにする
ちょっと出遅れましたが、Facebookページのコメント返信をスレッド表示できるようにする方法を紹介します。 2013年3月末、Facebookページのトップに次のようなメッセージが表示されていました。 「ページで直接コメントに返信できます」というのは、Facebookページでコメント返信をスレッド表示できるようになることのようです。 １．設定方法 上記のメッセージが表示されている場合は、「返信をオンにする」をクリックすれば有効になります。 または、「ページの編集」→「権限の管理」をクリック。 「ページでのコメント返信を許可する」をチェックして「変更を保存」をクリック。 返信が有効になるのは、この設定を行った後に投稿されたコメントからのようです。 ２．コメント表示 １項の設定を行ったあと、Facebookページの投稿にコメントすると「返信リンク」が表示されます。 設定前の投稿 設定後の投稿
Webサイトで写真を使う時に気をつけたい基本の3つ / Maka-Veli .com
1 人物写真、並べる時は顔のサイズで合わせる 人物の写真が並んでいる時、かつ人物そのものを紹介する時なんかにやると良い感じ。 撮られた写真をそのままリサイズして載せるだけでなく、一工夫。 並べるなら人物の顔サイズを基準にして並べた方がキレイです。 どうしても顔サイズで合わせる事が難しい場合でも、例えば人物の足、腰、肩、顎、目、なんかのラインを揃えるだけでもキレイに見えます。 （元々の顔が大きい、小さいの差はあるので、そこは現実になるべく合わせる方向で・・・） 未調整 こっちは写真をそのままリサイズして調整 調整版 こっちは顔サイズで合わせてリサイズ。不足している部分が出るんですが、そこは伸ばしたり合成して誤魔化してます。 あ、ちなみに人物でも「シーン」として撮影されている写真だったり、メリハリや動きをつける為にあえて大きさバラバラにするのもカッコイイので表現したいコンセプト次
Facebookページの投稿を表示するボックスを実装するjQueryプラグイン・Facio
Facebookページの投稿を任意のWebサイトに表示するjQueryのプラグイン・Facioのご紹介です。公式のが嫌、という方はこちらをご利用になってみては如何でしょうか。 Facebookページの投稿を羅列させる事が出来る、というもの。以下が動作デモです。 動作サンプルもう投稿しなくなりましたけど・・当ブログのFBページを表示させてみました。少し表示に時間かかります。 ※input要素が必要と言うわけではありません。貴方のFBページのURLを入力すれば表示テストが可能です。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>jQueryのプラグインなのでコアを読み込みます。 <div id="facio"></d
スマホサイトの機能比較表はどうデザインするか？ | 秋葉秀樹個人ブログ
table要素で構成された表組のデザインを採用する際にはモバイルサイトでも成立するかどうかを先に検討するべきでしょう。 しかしそうは言ってもこのような機能比較表は都合上どうしても横に長く、項目で割って列挙されるのでモバイルサイトでは非常に難しい見せ方の一つとされています。 指でフリックして横スライドするUIもJavaScriptなどゴリゴリに書けばできないこともないのですが「対応／非対応」の場所などは、何が「対応／非対応」かわからなくなる場合があります。そうです、画面が狭いからです。
WordPressの投稿ページに任意の説明文を挿入する - かちびと.net
WordPressの記事投稿ページに、任意の説明文を挿入する、というTipsです。3.5から使用する事が出来るようになったフックを利用しますので3.4では使えません。 3.5からedit_form_after_editorやedit_form_after_titleと言ったフックが追加されました。これを使って投稿ページに任意の説明文を挿入してみます。 コード function after_title() {//タイトル項目下部 echo '<p>上はタイトルを、記事は下部のエリアに書きます</p>'; } add_action( 'edit_form_after_title', 'after_title' ); function after_editor() {//エディタ項目下部 echo '<p>書き終えたら公開して下さい</p>'; } add_action( 'edit_form_
WordPressの管理画面で固定ページの管理性を向上させるプラグイン・Advanced Page Manager
WordPressの固定ページを管理しやすい ようにする、というプラグインのご 紹介。ツリー状にして見やすく、把握 しやすくしてくれます。CMSとして WordPressを使う際はとっても便利な プラグインですね。 個人的には以前ご紹介したCMS Tree Page Viewで慣れているので変更は無さそうですけど、これはこれで使いやすそうでした。 CMSとして使う際は固定ページの数が多くなるのでデフォルトのままだと若干管理しにくいです。そこで、こういったプラグインで管理性を高めると利便性が向上します。 ↑ CMS Tree Page Viewはツリー状の管理ページを増やす仕様なのに対し、Advanced Page Managerは既存の固定ページの管理ページを変更します。多言語化はされていないので英語表記になります。利用する際は日本語に変換しないとですね。CMS Tree Page Vie
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
HTML5のさまざまなform要素があなたのブラウザでどのように見えるかのまとめ -Native form elements