2018年10月23日の内容『Screenpresso』『スライドショー』、スマホでの画像の表示について

            ブログ勉強会 10月23日は、キャプチャアプリ『Screenpresso』をインストール・練習し、スライドショーの表示について、スマホでの横並び画像についてなどを学びました。

スクリーンキャプチャ&編集ソフト『Screenpresso(スクリーンプレッソ)』

『Screenpresso(スクリーンプレッソ)』

公式サイトはこちらです
https://www.screenpresso.com/
最初英語で表示されますが、切り替えで日本語にできます。
(作者はフランスの会社です)

インストールしてからもメニューは全部日本語で表示されますので安心してください。

インストールした後は、右下の山矢印(△)をクリックすると、その中に丸っこいP[P]のような赤いアイコンがありますので、それをクリックすると起動できます。

『Screenpresso』は何をするソフトなの?

画面のスクリーンショット(キャプチャ)をすぐに撮って、文字や矢印を簡単に入れられるソフトです。
また、写真に写り込んだお顔など、プライバシー保護のためのぼかしもすぐに入れられます。

写真を丸くくりぬいたり、様々な文字の変形をするなどの高度な編集はできませんが、
ブログ内に入れる説明文付きの画像を作るなどには最適です。

基本的機能は無料で使えますが、有料版のお金を払うと、さらにいろいろな機能が使えます。
(私は有料で使っていますが、無料で使い続けても問題はありません)

ブログで説明画像を作るときに大変便利です。
この記事の画像もScreenpressoで使っています。

使い方

ここでは簡単にご紹介します。

お使いのパソコンの『PrintScreen(PrtScr)』キーを押しますと、画面をキャプチャーできます。

1回クリックすると全画面
クリックしながら手を放さずドラッグすると四角く切り抜けます。

Screenpressoが起動すると、右下に出てくるワークスペース(フォルダ)に、画像のアイコンが表示されますので

編集したい画像をダブルクリックすれば編集画面が開きます。

上部のメニューから様々な編集ができます。

主なものは

  • →:矢印
  • A:文字
  • しずく型:ぼかし

画像タブに切り替えると、サイズ変更などが出来ます。

キャプチャー以外の画像編集も可能

キャプチャーした画像だけでなく、『ピクチャ』の中にあるご自分の写真などもScreenpressoで編集が可能です。

画像のあるフォルダから、Screenpressoのワークスペースにドラッグ&ドロップすればOKです。

Canvaのグループ解除について

前回やった『Canva』の中で、複数の文字がグループ化されている場合、解除して別々に編集する方法をお知らせしました。

Canvaはこちら
https://www.canva.com/

Canvaについても、必要なときにやりながら少しずつ覚えていきましょう!

WordPressでスライドショー

画像が次々に変わるスライドショーについて軽く触れました。

WordPress記事内でのスライドショー

WordPressの記事内(投稿内)でスライドショーを実行するのは比較的簡単です。

↓こちらのサンプルをご覧ください
http://blogtest.wp.xdomain.jp/archives/169

Jetpackの設定を変更すれば、『メディアを追加』のボタンから設置が可能です。

これについては次回以降一緒にやりますね。

WordPressヘッダーのスライドショー

表紙の画像(ヘッダー)をスライドショーにしたいというご要望がありました。

勉強会では、そのやりかたについて、手順をさっとお見せしました。
ご覧いただいた方にはお分かりいただけたかと思いますが、かなり複雑な作業が必要です。

初心者の方には少しハードルが高い技術になりますので、設置ご希望の方はご相談ください。

ネット上では方法などがいろいろ紹介されています。
が、ご自身のお使いのテーマ(デザイン)などによって、設置の時に手直しをしないといけない場合があります。
そのままのコードを貼り付けても上手くいかない場合が多いですし、Wordpress本体を壊してしまう場合があります。
くれぐれもご注意ください。

横並べ画像の見え方

画像を横並べして、プレビューで見るとうまく行っているのに、実際のブログ画面では上手くいかない、という方が多くいらっしゃいます。

プレビュー画面は実際のブログの幅とは異なりますのでご注意ください

画像を貼り付けるとき、
画像を左揃えにし、
2枚の画像の横幅の合計が、
ブログの記事部分の幅よりも小さければ横並びにはなります。

↓こちらのページに見本があります。
http://blogtest.wp.xdomain.jp/archives/180

※ブログの記事の幅などの見方は次回以降やっていきます。

パソコンで見ると横並びに2枚表示されていますが、スマホで見ると画像は縦並びになってしまいます。

最近のブログは『レスポンシブ』と言って、
横幅に応じて、画像が並び変わるようになっています。

これは正常な現象です。

モバイルファースト

今は『モバイル(スマホ)ファースト』という考え方が主流で、スマホで見た場合の見た目を優先して考えるようになってきています。

ブログはさまざまな機械(パソコン・タブレット・スマホ)を使って見られることが前提になっているので、ご自分のパソコンからの見た目が全てと思わず、幅が変わっても記事を読むのに支障のない配置を考える必要があります。

ですので、印刷された雑誌のように画像が固定されたレイアウトをするのは難しいと思っていてください。

どうしても画像を2枚並べて表示したい場合は、くっつけて1枚の画像にする方法もあります。

ただしこの場合、スマホなどでは画像が小さくなってしまうことが考えられるため、クリック(タップ)して拡大画像が表示されるようにすると良いでしょう。

※リンク・画像リンク・別タブで表示(target=”_brank”)については次回しっかり練習する予定です。

今回のまとめ

今回は『Screenpresso』をインストールして、練習しました。
少し変わった使い方ですが、慣れてしまえばすごく簡単に操作できると思います。

スライドショーについては、見本をお見せするだけにいたしました。
ご自身の投稿内に設置する方法については次回以降、一緒にやってまいりましょう。

画像の配置とモバイルファーストについては、まだピンと来ていない方が多かったようにお見受けしますので、ゆっくりやってまいりましょう。

リンクと画像タグについて、終わりがけにさっと触れましたが、こちらも次回復習していきましょう!

次回の予定

次回は11月13日、場所と時間は今回と同じになります。

引き続き、画像の扱い方と、投稿への貼り方(タグ)についてやってまいります。
また、ご質問頂く内容も順次扱っていきますので、参加される方はご遠慮なくご質問くださいね。

タイトルとURLをコピーしました