レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービスブラウザやOSを問わずに、デスクトップ・スマホ・タブレット・テレビなどさまざまなデバイスのスクリーンサイズをシミュレートしてWebページの表示確認ができる無料オンラインサービスを紹介します。 操作は非常に快適で、ノーストレスです。
異なるサイズが混在するPDFをそれぞれのサイズでまとめて印刷する方法
異なるサイズが混在するPDFを、それぞれのサイズでまとめて印刷する方法を紹介します。 １．問題点 次のように異なるサイズが混在するファイルがあります。 （クリックで拡大） これを一回の印刷でそれぞれのサイズにあわせて印刷したいのですが、印刷する方法が分かりません。 ２．混在するPDFをまとめて印刷する 混在するPDFをまとめて印刷するには、次の手順で操作します。 メニューから「ファイル」→「印刷」をクリック。 「印刷」ダイアログボックスの「ページ処理」セクションで、「PDF のページサイズに合わせて用紙を選択」にチェックを入れます。 （クリックで拡大） なお「ページの拡大 / 縮小」の設定をいろいろ変えてみましたが、影響はないようです。 これで、各ページのサイズに応じてプリンタの出力トレイが切り替わります。 ちなみに、PDFに出力するときも同様の手順で各ページのサイズを変更せずに出力するこ
複数のソーシャルボタンを設置し動的に呼び出す - という話
サイトシェア用と記事シェア用に、同じ種類のソーシャルボタンを置くことになった時のメモ。 ソーシャルボタンは一つ置くだけでかなりレンダリングに時間がかかるので、記事シェア用は静的に設置し、サイトシェア用は動的に呼び出すようにした。 動的に呼び出すのはTwitter,Facebook,Google,はてブの4つ。 まずは普通に記事シェア用のボタン群を各SNSの説明に書かれている通りに設置する <!-- twitter --> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'htt
複数ページにも対応とは！ページに分かりやすいプロダクトツアーを加えるフレームワーク -Hopscotch
ページに分かりやすく、プロダクトツアーを加えるフレームワークを紹介します。 似たようなスクリプトはたくさんありますが、これはツアー移動のアニメーション、ツアーを戻る、そして複数ページにも対応しています。 1ページ内でのツアーでけではなく、複数ページを横断するツアーも作成できます。 Hopscotch Hopscotch -GitHub Hopscotchの特徴 Hopscotchのデモ Hopscotchの使い方 Hopscotchの特徴 イベントのコールバック ツアー中のさまざまなイベントのコールバックを装備。 マルチページ対応 HTML5のストレージやクッキーを利用して、複数ページにまたがるツアーも可能。 i18n対応 さまざまな言語での実装をサポート。 快適なレスポンス 一つひとつは軽量なインスタンス。 Hopscotchのデモ ページ自体がデモになっています。 中央下の「Tale
jQuery.fullContent
複数のコンテンツをそれぞれブラウザの枠いっぱいに表示し、それらを水平・垂直のマトリックス状に配置し、ダイナミックなアニメーションで切り替えるjQueryのプラグインを紹介します。 jQuery.fullContent jQuery.fullContent -GitHub jQuery.fullContentの特徴 jQuery.fullContentのデモ jQuery.fullContentの使い方 jQuery.fullContentの特徴 ウインドウのサイズいっぱいのコンテンツを水平・垂直のアニメーションで切り替えます。 各コンテンツは、碁盤のように水平・垂直に配置可能。 コンテンツ間の移動はアニメーション。 ハッシュリンクでの直接アクセス対応。 ハッシュリンクでの履歴にも対応。 IE8+をサポート。 jQuery.fullContentのデモ デモはモダンブラウザ、IE8+でご覧く
rel=canonical 属性に関する 5 つのよくある間違い
+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
[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic
2ページのPDFファイルを結合して1ページにする方法
2ページのPDF文書を結合して1ページにする方法を紹介します。 本エントリーでは、A4のPDF文書を2枚ずつ結合してA3の文書にしてみます。 結合前 結合後 このテクニックは、PrimoPDFまたはAdobe Acrobat/Windows10 Acrobat Reader DCがあれば可能です。 なお、予め複数のA4文書が結合されていることが条件です。 １．A4のPDF文書2枚を結合してA3にする（Windows 10 + Adobe Acrobat Reader DC） 「ファイル」→「印刷」を選択。 プリンタが「Microsoft Print to PDF」になっていることを確認して「プロパティ」をクリック。（クリックで拡大、以下同様） 左上の「印刷の向き」から「横」を選び、右下にある「詳細設定」をクリック。 「用紙サイズ」から「A3」を選択し、「OK」をクリック。1津前の画面も「O
[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages
Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方 外部ファイル スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jPages.js"></script> アニメーションのエフェクトを使用する場合は、「animate.css」も記述します。 <link rel="stylesheet" href="css/animate.css"> HTML デフォルトのHTMLの例です。 ページネーション用のdiv要素と各アイテムをリスト要素で実装します。 ※各ア
複数のページを1ページにまとめて表示するFirefoxアドオン「AutoPager」
複数のページを1ページにまとめて表示するFirefoxアドオン「AutoPager」を紹介します。 １．機能 このアドオンを適用すれば、複数ページにまたがるページを1ページにつなげてくれます。スクリーンショットはGoogleの検索結果です。 適用前 適用後 ある程度スクロールをするとページが読み込まれます。読み込むページ数は設定メニューで決めておくことができます。 ２．インストール 「AutoPager」のページにアクセスして、「Add to Firefox」のリンクをクリックすればダウンロード画面が表示されます。 ３．設定 アドオンを有効にしたあとサイトを閲覧すると、ページの上部に「このサイトでこの設定を使いますか？」というバーが表示されます。「はい」をクリックすればスクロールによってページがどんどん表示されるようになります。 オプションをクリックすれば次のようなメニューが表示されます。
全て同時に確認できる、スマートフォンやデスクトップなどさまざまなサイズで表示できるブックマークレット -Responsive Design Test
全て同時に確認できる、スマートフォンやデスクトップなどさまざまなサイズで表示できるブックマークレット -Responsive Design Test
連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPages
ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 例えばli要素が100個くらいあったとして、これを10個ごと、10ページに分割し、ページ移動時にエフェクトも実装する、というもの。少々カスタマイズ性には欠けますがこれはこれで手軽に大量の要素をコンパクト化出来るので覚えておいて損はないかなと思います。 以下動作サンプルです。 Sample ページネーションの数字が小さすｇ コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」:phpspot開発日誌
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」 2011年12月07日- W3Clove :: site-wide markup validation tool W3C Validator の結果を一括で得られ、サイトマップのXMLも生成してくれる便利なサービスのご紹介です 最初にトップページのURLを入力すると、サイトをクロールしてくれるのでしばらく待ちます。 まっていると結果が次のように出ます。 OKなものはグリーンデ表示され、赤でエラー、オレンジで警告といった具合に分かりやすくW3C Validatorの結果が閲覧できます サイト全体で多く見られたエラーのサマリも見ることができ、どこを集中的に改善すればいいのかが分かりやすいです 関連エントリ スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」
画像をドラッグ＆ドロップするだけで1つのPDFファイルに変換する「i2pdf」
JPEG/PNG/BMP/TIFF/GIF画像に対応し、ファイルをまとめてポイッとドラッグ＆ドロップするだけでお手軽にPDFファイル化してくれるフリーソフトが「i2pdf」です。特別な設定や事前の準備などは特に必要なく、ソフトを起動して一瞬でPDFファイルを作ることができます。 i2pdf http://web.newsguy.com/lmgava/i2pdf/ これがソフトの起動画面、「Drop your files here」と書いてあるだけの超シンプルデザイン。 JPEG、PNG、ビットマップ、TIFF、GIF画像をここにドラッグ＆ドラッグするだけ。試しに画像を2枚ほど入れてみることにしました。PDFに入れたいファイル名の頭にチェックが入っているのを確認して、「Build PDF」を押すだけ。 右下の「OK」をクリック。 保存場所を聞かれるので、適当なファイル名を入力して「保存」をク
cssの未使用セレクタをその場で複数ページ一括調査するブックマークレット・cssess
中小規模サイトの構築時に役立ちそうな ブックマークレットがあったのでご紹介します。 閲覧しているWebサイトで使用しているcss の未使用セレクタを教えてくれるブックマーク レットです。こういったWebサービスはあります が、その場でサクッと調べられるのは面倒が 無くて良いですね。 使いどころはやや限られますが、複数ページを一括で調査し、それぞれのページの未使用セレクタを知らせてくれますのでなかなか便利だなぁと感じました。 おそらくブックマークレットを使ったページからリンクされている同一ドメインページを読み込んでるっぽいのです。zipや#の付いたURLも含まれているのはそのためでしょうかね。こういうリンクがある場合はチェックをはずしてください。 ページごとに使っていないセレクタを教えてくれます。 ブックマークレットを使うと上記のような半透明のボックスが出ますので調べないページのチェックを外
rel=
rel="canonical"（属性）は、検索エンジンにインデックスさせたいURLを認識(正規化、canonicalization）させるために使用される「link要素の属性に指定する値」です。 ウェブサイトは長らく運営していると、コンテンツの追加や削除、移動、改修等を行っていくうちに、異なるURLで同一のコンテンツが存在してしまうことがあります。 （例：ECサイトの商品一覧ページにおける価格順や人気順といった並び替えページ、印刷用ページとWeb閲覧用のぺージなど） こうした場合、検索エンジンは同一の検索結果画面に同一コンテンツを保有するページが複数表示されないように、最も適切なURLを選択し、その他のURLを除外します。この時、サイト運営者が希望するURLが必ずしもインデックスされるとは限りません。 この処理をサイト運営者側でコントロール可能にする方法の1つがrel="canonical
ブログ記事を複製または移動するMovableTypeプラグイン:DuplicateEntry - エンジニアブログ - スカイアーク
このプラグインを導入すると、ウェブページ・ブログ記事を他のブログに移動したり、または複製したりすることができるようになります。(記事についたコメントやトラックバックは移動・複製できません) 改変履歴 2011/10/26 Ver 1.24 脆弱性対応を行いました。旧バージョンをご利用の方は、最新にアップグレードすることを強く推奨いたします。 プラグインのダウンロード DuplicateEntry1.24のダウンロード（MT5対応） インストールと設定 ダウンロードしたアーカイブを解凍して得られたディレクトリを plugins ディレクトリにコピーしてください。特に設定などは必要ありません。 注意事項 複製した記事についている「コメント」「トラックバック」「カテゴリー」は複製されません。 記事を移動した場合、移動元のブログ記事は削除されます。その場合に記事についている「コメント」「トラックバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Paper Slider Demo - html5beta.com
IDEA * IDEA