2022年04月22日

LINEの招待を受け取ったら?

LINEの招待を受け取ったら?
1、SMSやEメールでLINEの招待を受け取った相手には、LINEへ招待した人のLINEアカウントがURLとQRコードで送信されます。
2、URLをタップするか、QRコードをスキャンすると、LINEアプリの起動画面が表示されます。
※LINEをまだインストールしていない場合は、LINEアプリをダウンロードしてください。
3、すでにLINEを利用している場合は、LINEを開いたら相手を友だちに追加する画面が表示されます。




posted by ハンモック at 21:41| Comment(0) | スマホ・PC・TV

2022年04月07日

-複数画像を中央に注目させて見せる-

「KIZOA」というソフトを使って、動画を作成していたのですが・・・
ある日突然「invideo」というサイトに変更されていて、今まで作成し保存していた動画が全て消えてしまいました!

以前にも同じようなことが起こって、「今までの努力の結果はどこに消えてしまったの?」って思ったことありました!!

「invideo」は使いこなせば。とても面白いソフトの様ですが、ショックが大きかったので、暫く見なかったことにします(笑)


こんなサイト見つけました〜〜(^^♪

動くWebデザイン アイディア帳

この中の スライドショー -複数画像を中央に注目させて見せる-
このスライドショウが以前から気に掛かっていましたので、作ってみることにしました。


以下に記しておきます。

<<動きを実現する仕組み>>

slick というスライドショーを実現するJavaScript ライブラリを使い、HTML 内の<li>に指定した画像をスライドさせる。
CSS で左右の画像のサイズを80%、透過50% にし、中央の画像のサイズだけ等倍、透過なしに指定する。

[使用するライブラリ]
* jQuery

<<HTMLの書き方>>

head終了タグ直前にslickのCSSと自作のCSSの2つを読み込みます。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="css/slide.css">
</head>

body内のスライドを表示させたい場所にHTMLを記載します。

<ul class="slider">
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
<li><img src="img/05.jpg" alt=""></li>
<!--/slider--></ul>

body 終了タグ直前に jQuery、slick、動きを制御する自作のJS の3 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/slide.js"></script>
</body>


<<自作のCSS内の書き方>>

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
}

.slider img {
    width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slider .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


<<自作のJS内の書き方>>

$('.slider').slick({
autoplay: true,//自動的に動き出すか。初期値はfalse。
infinite: true,//スライドをループさせるかどうか。初期値はtrue。
speed: 500,//スライドのスピード。初期値は300。
slidesToShow: 3,//スライドを画面に3枚見せる
slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更
nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更
centerMode: true,//要素を中央ぞろえにする
variableWidth: true,//幅の違う画像の高さを揃えて表示
dots: true,//下部ドットナビゲーションの表示
});
追記あります
posted by ハンモック at 10:15| Comment(0) | スマホ・PC・TV

2022年03月21日

ページトップへ戻るボタンの作成

横から出てくるボタンの作成
アイコンフォントとして「Font Awesome」というサービスを利用。

***「HTML」***
head部分に下記コードを挿入
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/page_top.js"></script>

footer の上部に下記コードを挿入
<div id="page_top"><a href="#"></a></div>


***「css」style.css ***
/*その他 の上部に下記コードを挿入
/*PAGE TOP設定
---------------------------------------------------------------------------*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: -50px;
  bottom: 50px;
  background: #ef3f98;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

上記コード中
 background: #ef3f98; ←色番号
content: '\f102'; ←アイコン
888.png


***「js」page_top.js***
「page_top.js」ファイルを作成
以下のコードを挿入
jQuery(function() {
  var appear = false;
  var pagetop = $('#page_top');
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {  //100pxスクロールしたら
      if (appear == false) {
        appear = true;
        pagetop.stop().animate({
          'right': '0px' //右から0pxの位置に
        }, 300); //0.3秒かけて現れる
      }
    } else {
      if (appear) {
        appear = false;
        pagetop.stop().animate({
          'right': '-50px' //右から-50pxの位置に
        }, 300); //0.3秒かけて隠れる
      }
    }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
    return false;
  });
})






posted by ハンモック at 13:48| Comment(0) | スマホ・PC・TV

2022年03月10日

Linuxとは

先日お友達とお出かけしました時、トイレのリフォームの話題になり、どのメーカーが良いかな〜〜ってなり
「例えば【TOTO】とか?【パナソニック】とか?」
「もう一つあったよね・・・【リナックス】!!」
「違う、違う、【リ】なんとか?」
・・・となり・・・

気になって調べてみました。
正解は【LIXIL】でした(笑)


そういえば・・【リナックス】って何だっけ??

Linuxについても詳しく調べてみました。
OS(オペレーティングシステムの略)です。
WindowsやmacOSなどと同じ、コンピュータを使う際の土台になるものです。

Linuxの特徴は?
Linuxはオープンソース(無料で改変可能なプログラム)のOSで、世界中の有志たちがボランティア的に作り上げ、無料で使え、中身も完全に公開されている状態で世に放たれている異色のOSです。

Linuxでできること
・無料で使える
もちろんWindowsOSと使い勝手は違いますが、ネットサーフィンなどにしか使わない人にはまったく変わらずに使えますし、WordとExcelには互換用のソフトウェアがあります。

・ソフトウェアも大抵フリー
Linuxはインストールしたばかりのとき、機能は最小限ですが、ソフトウェアを買う必要はほとんどありません。
Linuxと同じように、Linuxに使われるソフトウェアもフリーなソフトウェアが多いからです。

※例えば・・LibreOffice
Linuxだけでなく、MacにもWindowsにもインストールできますが、WordやExcelの代わりになります。

・Androidみたいな新しいOSが作れる
AndroidはGoogleが開発しているLinuxをベースとしたスマホ用のOSです。
※Linuxの恩恵を私たちは日々受け取っているのです。

・PlayStationにもLinuxがインストールできる
昔はLinuxをいじるためのキーボードも売っていたそうです。
PlayStation2の上で動くLinuxの発売を求める署名活動が起きて、実際に発売され結構売れたらしい。

・自宅の古いパソコンをサクサク動かす
自宅のホコリを被ったPCを取り出してLinuxをインストールしてみましょう。
よっぽど古くなければサクサク動くはずです。それだけLinuxは軽いのです。

※Linuxは、不要なものをそぎ落としている軽量OSだからとてつもなく早く動く。
反面様々な補助的機能がないことも意味しており、自分でカスタマイズが必要です。

・Linux使ってます、とアピールができる(笑)
ITがよくわかっているというキャラクタを装える。
この装うというのはエンジニアになる人にとってとても大切です。
「できる!」ということは自分にプレッシャーをかけて、成長を促進する効率的な成長方法です。

Linuxは使いこなせるまで少々の努力を要しますが、使いこなせると非常に便利なツールです!!

大昔に使っていたことあるかも〜〜!?
違う、違う、使ってみたことある!?・・でした(笑)



posted by ハンモック at 07:28| Comment(0) | スマホ・PC・TV

2022年02月24日

Wordで簡単イラスト

写真の背景を消して、透明にする
今まで専門の画像処理ソフトを使っていましたが・・・
Wordで簡単に出来ること初めて知りました!!

<<背景の削除>>
1、背景を消したい写真を選択します
2、写真を選択しますと、リボンに[図ツール]が表示されますので
[図ツール]の[書式]タブ、[調整]グループにある、[背景の削除]ボタンをクリックします

背景の削除.png


3、自動認識で、消して透明にする背景をピンクで、消さずに残すものはそのままの色で表示してくれます。

123-2.JPG

ここから背景として消すものと、消さずに残すものの調整をしていきます。
※背景として消したい箇所、その逆に残したい箇所を、手動で指定していく操作があります。
見えにくいと感じましたら、画面右下のつまみをドラッグして表示倍率を拡大し、逆に全体のイメージを見たい場合には、表示倍率を小さくして見るなど、表示倍率を変更しながら操作するのがコツです

4、残すものを大まかに指定
自動認識した写真には、白いポッチで囲まれた境界線が表示されています。
この境界線の中に、消さずに残すものが収まるように、白いポッチを使って、境界線の範囲を調整します。
白いポッチのいずれかにマウスポインタを合わせ、マウスポインタが両矢印の形になったらドラッグすると、境界線の範囲を調整できます。
※この時、残したい対象物ギリギリのところに境界線が来るようにするのがポイント。

5、保持する領域と、削除する領域をマーク
残したいのに背景として認識されてしまっている部分を消さずに保持してくれるよう、手動で設定していきます。
[背景の削除]ボタンで操作を開始した時点で、リボンのボタンの表示が変わっています。
[背景の削除]タブの、[保持する領域としてマーク]をクリックしたあと、写真のところにマウスポインタを持って行くと、マウスポインタが鉛筆の形状になります。
消さずに残したいものを横切るようにドラッグすると、ドラッグした部分にマーカーが表示されます。
消さずに保持するものとして認識されましたので、ピンク色が解除されています。

123-3.JPG

繰り返し保持する領域を指定していって、すべての指定が終わりましたら、[保持する領域としてマーク]ボタンを、もう一度クリックしてOFFにします。

6、逆に、背景だから消したいのに、残すものとして認識されてしまっている場合には、背景として削除する対象になるよう、手動で設定していきます。
[背景の削除]タブの、[削除する領域としてマーク]をクリックしたあと、写真のところにマウスポインタを持って行くと、マウスポインタが鉛筆の形状になっています。
背景として削除する対象にしたいものを横切るようにドラッグすると、その周囲がピンク色になり、削除する対象になりました。

すべての指定が終わりましたら、、[削除する領域としてマーク]ボタンを、もう一度クリックしてOFFにします。

7、手動のマークも終りましたら、最後に変更を確定しましょう。
[背景の削除]タブの、[変更を保持]ボタンをクリックしますと、
背景の削除 完了ピンク色だった部分が消えて、透明になりました!

秋桜.JPG


元画像は

秋桜0.JPG








posted by ハンモック at 18:31| Comment(0) | スマホ・PC・TV

2022年02月23日

Wordでオリジナル便箋

A5用紙でオリジナル便箋作成

<<罫線を引く>>
1、新規文書を開く
2、ページレイアウトで、サイズを「B5」余白を「やや狭い」に設定
3、[Enter]キーを連打して、罫線を引きたい範囲に段落記号を表示
  ※ファイル⇒オプション⇒表示⇒段落記号にチェックで、改行マークの表示
4、左余白にカーソルを置いて、3回クリックして、段落記号をすべて選択

   段落記号選択.gif
5、[ホーム]タブの[段落]グループにある[罫線]の▼ボタンを押して、
  [罫線(内側)]をクリック  ※横罫線を引く準備です。
6、罫線を点線にしたり、色をつける
  ・すべての段落を選択⇒[罫線]の▼ボタンをクリック
   ⇒[線種とページ罫線と網掛けの設定]をクリック
   ※ダイアログボックスが表示されます。
  ・[罫線]タブの[種類]や[色]、[線の太さ]を変更して、プレビューの中罫線をクリック

   罫線.JPG
   今回は「破線」「赤」「0.75Pt」を選択してみました。

   便箋.gif
7、行番号を表示して行数を確認
  [レイアウト]タブ⇒[行番号]⇒[連続番号]をクリック
  ※この連続番号は印刷されるので、印刷時には再度[連続番号]をクリックしてオフに

8、段落]ダイアログボックスで[行間]と[間隔]を設定
  [ホーム]タブの[段落]グループにある[ダイアログボックス起動ツール]ボタンをクリック
  ※[段落]ダイアログボックスを表示

  ダイヤロボックス.jpg

  以下のように行間[固定値]、間隔は[15pt]に

  段落.JPG


<<画像の挿入>>
1、画像を挿入したい場所付近にカーソルを置く。
2、[挿入]タブの[図]グループにある[画像]をクリック

  画像挿入.JPG
  ※[図の挿入]ダイアログボックスが表示される
3、任意の画像を選択して、[挿入]ボタンをクリック
4、既定のままであれば、レイアウトは[行内]になっているので、
 [文字列の折り返し]で[前面]もしくは[背景]を選択で、
  自由に移動させることができるようになります。

  背面.JPG
5、画像の大きさを調整する
6、枠線上でマウスポインタが四方向の形になった状態でドラッグし、位置を調整します

  画像挿入.JPG


出来上がり

  画像_2022-03-07_230810.png


挿入した画像等が選択できない場合
1、「ホーム」タブにある「編集」の項目から[選択]⇒[オブジェクトの選択]とクリックします。
2、[オブジェクトの選択]をクリックし、マウスポインタを画像の上まで移動させると、マウスポインタは下画面のように表示され、画像をクリックすると、画像の選択が可能になります。

選択.png

3、「ページレイアウト」タブにある「配置」から(背面)以外の設定を行っていきます。
「背面」以外の設定で、いつでも画像を選択でき、オプションの変更が可能です。


<<画像に効果を設定>>
挿入した画像を選択して[図ツール]の[書式]タブの[調整]グループから
画像にはさまざまな効果をつけることもできます。

<<最後の段落に下罫線を引くには>>
罫線の種類から[罫線(内側)]を選択すると、最後の段落には罫線表示されません。
最後の段落にも罫線を表示するには
左余白にカーソルを置いて、3回クリックして、段落記号をすべて選択します。
すべての段落記号を選択した状態で[罫線]の▼ボタンを押して、[罫線(下)]をクリックします。
これで、最後の段落にも罫線を表示できます。

※また、一番上の段落の上に罫線を表示したい場合は、[上罫線]をクリックします。
※1行のみ罫線を消したい場合は、[枠なし]を選択します。



posted by ハンモック at 20:44| Comment(0) | スマホ・PC・TV

2022年01月15日

「LINE」をパソコンで

★「LINE」をパソコンで
メリット
1、キーボードが使える。
 長めの文章など、小さなスマホからわざわざ文字を打つのが面倒、という方にオススメです。
2、パソコンにある動画やファイルを送ることもできます。

パソコン用の「LINE」を使えるようにするには
1、PC用の「LINE」のダウンロード。
  @「LINE」サイトにアクセス https://line.me/j

LIneDown-2.JPG

  AOSのいずれかの「DOWNLOAD」をクリック。
  Bダウンロードが完了したら、ファイルをダブルクリックしてインストール。
  Cデスクトップ上の「LINE」アイコンをクリック。

2、「LINE」へのログイン
 3つのログイン方法があります
 @QRコード Aメールアドレス B電話番号

LIne.JPG

@QRコードでログイン
 ・PC版『LINE』を起動し、QRコードを表示する
 ・スマホ版『LINE』で「友達追加」⇒「QRコード」と選択する 
 ・スマホ版『LINE』でQRコードを読み込み[本人認証(初回のみ)]をタップ
※「QRコードログイン」はメールアドレスやパスワードの登録・入力が不要で、スマートフォンでQRコードを読み取るだけなので特におすすめです。

Aメールアドレスでログイン
 ・スマホの「LINE」アプリでメールアドレスを登録。
 ・その登録したメールアドレスとパスワードを確認しておく。
 ・PC版『LINE』を起動し、スマホの「LINE」で登録した「メルアド」「PW」でログイン

B電話番号でログイン
 ・スマホの「LINE」アプリを開く。
 ・設定⇒アカウント⇒他の端末と連携を開く。
 ・6桁の認証番号を入力でログイン


追記あります
posted by ハンモック at 10:34| Comment(0) | スマホ・PC・TV

2021年12月11日

Windows フォトで動画加工

★Windows フォトで動画をカットする

1、トリミングしたい動画を右クリック⇒プログラムを開く⇒「フォト」を選択
2、右上の「編集と作成」⇒『トリミング』を選択
3、切り出したい動画の始点と終点を選択して、「コピーの保存」

トリミング-2.jpg


★Windows フォトで動画を回転させる

1、フォトを開き⇒右上の「新しいビデオ」⇒「 新しいビデオ プロジェクト」
2、「+追加」をクリック⇒回転させたい動画を選択し、プロジェクトライブラリに追加します。

追加 .jpg

3、プロジェクトライブラリに追加された動画を選択し、ストーリーボードにドラッグ&ドロップします。

ストーリーボード-2.jpg

4、「回転」を選択し、動画を回転させます。

回転-2.jpg

5、確認が完了したら、「ビデオの完了」をクリック
6、ファイルの保存先とファイル名を決めてエクスポート(保存)します。
※元の動画も残ります。


posted by ハンモック at 20:42| Comment(0) | スマホ・PC・TV

2021年10月25日

スマホからパソコンへデータを送る方法

USBケーブルなどの有線ケーブルを使う
メリットは、データ量の大きなファイルでも短時間で送れる
写真や動画などのデータを送りたいときに適している

SDカードなどの記録媒体を使う
複数のパソコンに、同じデータを配付することもできる
マルチカードリーダーを利用すれば、記録媒体の形式にとらわれず、自由なデータのやりとりが可能

ウェブサービスを利用する
Evernoteなどのクラウドサービスや、Dropboxなどのオンラインストレージサービスを使用
ネットワーク下で端末を使用していれば、ファイルを保存した瞬間にデータ連携が開始されます。ユーザが意識することなく、端末間でデータのやりとりができます

メールで添付して送る
送付するデータはメールに添付して、パソコンで閲覧できるアドレスに送ります。
ファイルサイズが大きい場合は、メール送信に失敗することもあります。
ファイルやフォルダの圧縮を併用するようにしましょう。

※ 送りたいデータの種類やサイズによって、送る方法を決めること。
posted by ハンモック at 00:00| Comment(0) | スマホ・PC・TV

2021年09月18日

留守番電話サービスの設定方法

<「my 楽天モバイル」アプリから手続きする場合>

1. 「my 楽天モバイル」にログインする

※ログインができない場合は、「[my 楽天モバイル]ログインできません。」をご参照ください


2. 画面下部のメニューより「契約プラン」を選択する


3. 「留守番電話」と記載されている右側のスライダーでオン/オフを切り替える


4. 設定を変更する場合は「留守番電話」の下に記載のある「変更する」を選択する


「応答時間」と「言語」を設定いただけます。



5. 設定後、「変更する」を選択する

posted by ハンモック at 00:00| Comment(0) | スマホ・PC・TV