コピー2021.04.21〜こんな人向けの記事です〜✅Webサイト全体のスクリーンショットを撮りたい!✅細切れでスクショを撮って合成するのはもう疲れた。アダムページ全体のスクリーンショットが撮れたらかなり便利です!今回はそのやり方についてSafariとChromeユーザー用の解説記事です。screenshotを選択Q&Aまとめページ全体のスクリーンショットってどんなやつ?ページ全体のスクショってどんなやつ?ってパッとわからない方もいると思うので、簡単にどんなものなのかを紹介します。下の画像は左側がWebサイトの全体のスクショで、右側が一部拡大したものです。長いですが、左側のようなスクショを撮ることができれば、ページの切れ目などに悩まされずにスクショを撮って必要なところだけ切り抜けばスクショで撮った画像も思いのままです。開発タブが表示されていない方は先に表示設定を行いましょう。何もわからない方でも手順を1から順番にこなしていけば大丈夫!開発タブの表示設定は以下の通り。開発タブを表示させる上のメニューバーに「開発」という項目が出ている方はこの手順を飛ばしてオッケーです!まだ出ていない方は、「Safari」を選択して、「環境設定」を選択。「詳細」の中の一番下にある「メニューバーに”開発”メニューを表示」のチェックボックスにチェックを入れましょう。「開発」メニューの中の「Webインスペクタを表示」を選択しましょう。※画像では「Webインスペクタを接続」となっていますが、この画像を作成した時のコマンドの影響ですので、手順的には「Webインスペクタを表示」が正しいです。外観<body>上で右クリックWebインスペクタを表示させると、下の写真のように何やらコードがたくさん書かれた画面になります。〜と書かれた部分にカーソルを合わせて右クリックしましょう。右クリックしたら、プルダウンメニューが出てきます。「スクリーンショットを取り込む」を選びましょう。スクリーンショットを保存する際の注意点ですが、下の画像のように名前のお尻に「.png」などの画像拡張子をつけておきましょう。つけなくても開く場合もありますが、拡張子をつける癖をつけておいた方が、「あれ?!開かへん^^;」と不意に焦らなくて済みます(笑)Q&Aイブ「Webインスペクタ」で出てくるコードはなんですか?アダム表示されているページのHTMLやCSS、JavaScriptなどの情報が書かれています。始まる画面が出てきません。したらいいですか?アダムわかりにくいですが、「Webインスペクト」のWindowの上部に「要素」という項目があります。そこをしっかり選択できているか確認してみてください!Chromeの場合Chromeの場合は、Safariよりも手順が少なくページ全体のスクリーンショットを撮ることができます。ディベロッパーツールを表示する上のメニュータブの中の「表示」を選択。「開発/管理」の中の「ディベロッパーツール」を選択。始まる箇所にカーソルを合わせて右クリックしましょう。screenshot」という項目を選択するとスクショ完了です。始まる箇所が見つからない。アダムディベロッパーツールのWindowの上部のメニューが「Elements」を選択できているか確認してみてください!Edgeの場合Edgeもクロームと同じ手順でスクショを撮ることができます。記事を作っていく中で、スクリーンショットはよく使うと思います。画面の区切れ目も含めてスクショを撮りたいって思っても解像度的に画面サイズを小さくしすぎると読みにくい。そんな時は、この記事を思い出して、ページ全体をスクショしてから必要な部分だけトリミングするようにしてみてください。この記事内でワンクリックで指定の場所に飛ばすことができる技を使っています。【WordPress】同ページ内のリンク(アンカーリンク)の設定方法について初心者にもわかりやすく解説しています。htmlを編集することに不慣れでも、画像の通りに編集すればすぐ設定できます。手順は出発点と到着点をそれぞれ設定するだけ。ページ内リンクを使用して記事の幅を広げませんか。アナリティクス】あなたのブログの表示速度はどれくらいですか?知らない方はこの記事を読んで絶対に行動に起こしてください!行動する人は全体の上位20%です。この記事では特にアクションを起こしやすいように簡単な初心者向けの内容しか触れていません。記事を非公開にする時の手順は次の通りです。3.非公開記事にnoindexタグの追加BLOG【SEO対策】ペライチを使ってドメインパワーをあげよう!ドメインパワーを無料で上げる方法をお教えします。やるかどうかはあなた次第。周りのブロガーはみんなやってるかも?!ドメインパワー85以上の最強サイトから被リンクをゲットしましょう。全ての手順を画像を19枚使って解説しました。わかりやすい自信があります。何よりも、無料で作れるというところがありがたいですよね。BLOG【Canvaの使い方】ブログ用オリジナルアイキャッチ作成マニュアル<基礎編>アイキャッチ画像は、SNS集客においてとても大事です。違いで、Twitterのタイムラインからのリンククリック数が歴然の違い!【実際の写真あり】誰でもこのテンプレ通りに作れば、クリックをいっぱいされるアイキャッチが簡単に作れます。慣れれば【2分】でできます。【ブログアイキャッチ画像】【SNS×ブログ集客】超初心者向け。BLOGMouseflow(マウスフロー)の導入方法mouseflow(マウスフロー)の導入方法を写真付きで紹介しています。アカウント登録、トラッキング設定の参考に。サイトのアクセス解析、ブログの改善に使えるデータが、ヒートマップで表示できるmouseflow。無料版で使用感を試すことができます。BLOG【ブログ×カフェ】ブログ投稿に行き詰まったらどうする?記事作成の工夫ブロガーの皆さんへ。気分を変えてカフェでブログ記事を作成するポイントを紹介しています。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【ブログ運営報告】2月度収益PV数などなど2021.03.042021.03.20【もしもアフィリエイト】買われた商品の確認方法2021.01.212021.09.20利益を早く受け取れる!ブログ初心者が心得るべきアフィリエイトサイト集約術2021.01.192021.05.24副業でブログを始めたい!無料ブログと有料ブログどっちがいいのか。Reserved.タイトルとURLをコピーしました。