丸数字

めぐろ子育てマップを作っていると丸数字をよく使う。
20までは変換で出るというけどわたしの新しいmacは10までしか出ない。。。

イラストレータで作業をしているのだが
以前はこの機能を知らず21以上はわざわざ丸と数字をセンター揃えにしていたな〜
でも今朝[「34」が出てこない。。。

ググってやったけど。。ダメで。
イラストレータのメニュ
「書式」→「字形」でパネルを出して、表示を「すべての異体字」にしてるのに。。

この「すべての異体字」がダメだったらしい。。

ここを「フォント全体」にしたらでた〜〜〜字形パネル

絶対次のマップの時も忘れてそうだから忘備録・・・

大好き!狂った歌声-1

アヤコレット

好き勝手作らせてくれる友人がいて好き勝手作っている。

でも最後はいつもドキドキする。
本当にこれで良いのか迷うけど。。いいみたい

彼女に作ったものでゴロワーズをフェイクしたフライヤーが大好き。データが行方不明なので探してみよう。組み立てればタバコになるよ!

最初に、彼女に会ったのはいつなんだろう。
今回もなんとなく配信するにあたり必要という連絡をもらいジャケをつくるんだけど。。。なんか綺麗。私綺麗なデザインが好きだから、短時間で作れた。

でも本当になんか普通の感じでいいのかな〜とザワザワ・・・本当にそれでいいの?って思いあらためて音源聞いた。。
いや〜クレイジ〜今そのままだったら頭どっか行ったおばちゃんになっている。
みんな若い日はあって、本当にメラメラしていて。
そんで作ったジャケ見ていたらつまらな過ぎて。。。
懐かしかった。棘と不満と恍惚とした光と。。。なんかいろんなものがあったとき。
でもってphotoshop触っていたらこんななってしまって。。。

意外と気に入ってる。今回のジャケ。でも得意ジャンルではない。。。
収まってない感じは今の私にはしっくりこなくなっている。
でもやっぱり素敵とアヤコレットは言ってくれて。
まあこのジャケになった次第。

彼女のナニカを作るようになったのはこの画像をFBにあげたのがきっかけ。。

これ今回の最初 シンプル イズ ベスト

でもって結局・・・

アヤコレット

なんか冒険させてくれるのが嬉しい。

アヤコレットはお酒は飲めないけどずっと話していると本当にお腹がよじれる。

面白い。ステージの上のアヤコレットは時として私の知らないアヤコレットになる。
その瞬間がドキッとしてなんか自分のメラメラ時代が懐かしくなり、ライブという場所にまた行きたくなる瞬間でもある。
何度アヤコレットのライブを見てベースを弾いてみようかなと思ったことか・・・

slick sliderの使い方 [3]

レスポンシブ対応について

slickのオプションで「responsive」というものがあり「breakpoint」を設定できてオプションを切り替えることができます。

私が実装したいと思っていたのはレスポンシブであり、スマートフォンの時は写真を縦長のものに変更するということでした。以前はスライド自体を差し替えていたのですがそれぞれの時に両方の画像を読み込んでしまって重くなってしまうのが気になっていました。

PCの時 横長画像

スマートフォンの時 縦長画像

cogumo design

<pictuire>タグと<source>タグを使って切り替えたいと思います。

<ul class="slides">
    <li>
    <a href="#">
      <picture>
      <source media="(min-width:768px)" srcset="PC用画像へのパス">
      <img src="スマホ用画像へのパス" />
      </picture>
    </a>
  </li>
  <li>
    <a href="#">
      <picture>       
      <source media="(min-width:768px)" srcset="PC用画像へのパス">
      <img src="スマホ用画像へのパス" />
      </picture>
    </a>
  </li>
  <li>
    <a href="#">
      <picture>       
      <source media="(min-width:768px)" srcset="PC用画像へのパス">
      <img src="スマホ用画像へのパス" /></a></li>
      </picture>
    </a>
  </li>
  </ul>

ここまでのサンプルはこちら

slick sliderの使い方 [2]

どうしてslickを使うのかときかれると色々オプションがあるからというのも大きな一つの理由です。色々説明されているサイトがあるのでしらべていけばよいのですが毎回調べるのが大変なので自分のためにもと思いよく使うものをざっくり

たとえば

・自動再生:autoplay(デフォルトはtrue)

・左右の矢印をカスタマイズ:arrows(デフォルトはtrue)

・スピード:speed(ミリ秒です!1秒=1000ミリ秒)

・スライドをループ:infinite(デフォルトはtrue)

「slick オプション」で検索すると色々出て来ます!

上記を実装したのがこちらです。

commmon.js

$(function(){
  $(".slides").slick({
  	autoplay: true,
    speed: 1000,
    prevArrow: '<button class="slide-arrow prev"></button>',
    nextArrow: '<button class="slide-arrow next"></button>',
    infinite: true,
});
});

common.css

/*arrow*/
button{
  margin: 0;
  padding: 0;
  background: none;
}
.slide-arrow{
  position: absolute;
  top: 50%;
}
.slide-arrow.prev{
  left: -40px;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 15px solid #9C27B0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}
.slide-arrow.next{
  right: -40px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 15px solid #9C27B0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}

ここのサンプルはこちら

slick sliderの使い方 [1]

授業で質問されることが多いのがヒーローイメージに使うスライダーのこと。

ヒーローイメージ:webのファーストビューでバババーンと飛び込んでくる大きな画像ね!
(私は最近までメインビジュアルと言ってたんだけど。。。こういうみたい)

話は早速それましたが、いろんなスライダーを使って来ました。少し前までは「bxslider.js」を使っていたのですが、、今現在使っているのは「slick.js」!早速設定していきましょう!

-まずは表示させてみよう-

公式サイトより(http://kenwheeler.github.io/slick/)「get it now」をクリックして「Download Now」をクリックしてダウンロードします。

slick.js

 

解凍後以下のような階層にしましょう!

 

カスタマイズする場合のcssやjsはcommonファイルに書いていきます。

slicksliderの階層の考え方

index.htmlへの記述

<head>に

<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/common.css">

cssの読み込みの順番に注意してくださいね!

index.html スライドを入れたい部分に

<section>
  <ul class="slides">
    <li><img src="img/1.jpg"></li>
    <li><img src="img/2.jpg"></li>
    <li><img src="img/3.jpg"></li>
</ul>
</section>

このマークアップはdivでもよいです。
今回は.slidesですがclass名はお好みでよいです。変更した場合はjsの指定しているclass名も要変更!

index.htmlの</body>の前に以下を記述

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha384-/LjQZzcpTzaYn7qWqRIWYC5l8FWEZ2bIHIz0D73Uzba4pShEcdLdZyZkI4Kv676E" crossorigin="anonymous"></script>
<script src="js/slick.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/common.js"></script>

common.jsへの記述

 

$('.slides').slick({ 

  });

common.cssへの記述

(このあたりはお好みで!)

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }
    img {
      width: 100%;
    }

    .slides{
        width: 70%;
        margin: 20px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }
    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

ここまでのサンプルはこちら

オンデマンド資料作り! 悪戦苦闘- no1-

大学にてオフィスリテラシーを毎年1クォーターに担当しているのだが今回のコロナの影響でオンデマンドにて教えることになった。

1クラス150人くらい。

毎年基本的な流れはできていてその時々でデザインや内容を変えている。microsoftのwordなど私の母でも使えるが、そうじゃなくてわかりやすく効率の良いそしてデザイン性も優れているドキュメントを求めている。

毎回の授業は90分。とにかくみんなの前で説明し操作し一斉に作業する。TAさんもだいたい4名ほどいてくれていろんな国の人もいるので言葉的も対応してもらっている。

という流れが、。。。。オンデマンドに。
専門学校の方の動画はみているのだが本当にわかりやすい。果たして私がそれを作れるのか。なにで作るのか?
撮影してプレミアを引っ張り出してとも考えたけどタイトなスケジュールで予算的にもちょっとな〜〜

というわけでそうだ!zoomの録画機能を使ってみよう!

パワーポイントのファイルを用意して画面共有機能で録画する。

う〜ん。右上にかすかにみえているのが私・・
今回はもうこれでいくしかないのでずっとここにうっすら登場もしくは
全面私のどちらかでした。

録画したものを聞いてみると「こどもですか__???」くらい声が高い。友人に相談して


  1. ゆっくり話す
  2. 実際に授業のように立って話す

と言われたのでやってみた。最初よりはましになる。

授業の途中wordを画面共有で開いて講義しているときはこんな感じ
(ちょい切れの私が右上に・・・)

3台本があるわけではないのでなども間違えるその度にやり直していたら本当に大変。
とうわけで続いて・・・久しぶりに
imovie登場〜〜

とにかく話して間違えたら自分で「カット」とか言いながら編集することにした。
久しぶりすぎてほぼ忘れている・・

とはいえなんとか「お疲れ様でした〜また次回がんばりましょう!」と学生に向かって最後の挨拶。
ガンバリマショウ=私。

色々不備があり、、、がっくり

次は別の方法を考えなければ、、、、

プログラミング始める前に〜ちょっとちょっと!!

2020年からプログラミングが授業に入ります。

新小学校学習指導要領におけるプログラミング教育

特に賛成ではないけど、実際に始まるので。。

Scratchやロボットプログラミング色々ありますが、、

「家に帰って、練習してみてくださいね。」

それは先生、困ります。

全家庭が子ども用にパソコンあるわけじゃない。

「はい。そんなこと言っていませんよ。ご両親のパソコンがあればそちらで〜」

そりゃ困りますよ

親のパソコンなんてセキュリティ甘々でしょ。

教育的に見せたくないサイトだってどんどん出てくるだろうし

家のパソコンだからって

パスワードやらカード番号なんか登録しっぱなし、ログインしっぱなしだったりへたしたら買い物もできちゃいますよ。

ipadでセキュリティ登録するの意外と面倒だったのに。。。

出会い系への1歩を親が加担するわけには行きません。

子ども用にパソコン買う方も、親御さんのパソコンを共有する方もまずは子どもが安全に使えるようにすることを徹底しなければ!

と、ちょっとキレ気味に思う昨今です。

 

女子のママにオススメ夏休み編!
株式会社 伊勢半本店ワークショップ

わたしと小学校2年生の娘がGWに発見していった伊勢半本店!

素敵でした。
私たちの素敵は凄くゴージャスでもなく、絶叫するくらいのびっくりする感動はないかもしれないけど、、、、紅をさすドキドキ気分の、娘を見てる私もドキドキ!

その伊勢半本店が夏にワークショップ!

http://www.isehanhonten.co.jp/museum/schedule.html

 8月 3(木)
夏休みこども自由研究「紅ってなあに」
①10:30~12:00 ②14:30~16:00
講師:当館エデュケーター
定員各5組10名(小学3・4年生とその保護者)・参加費無料9(水)
夏休みこども自由研究「赤色?黄色?? 紅染めにチャレンジ!」
14:00~16:00
講師:当館エデュケーター
定員8組16名(小学生とその保護者)
参加費500円/組(ハンカチと和紙の染色体験)
※申込み者数が定員に達しました。18(金)
夏休みこども自由研究「紅ってなあに」
①10:30~12:00 ②14:30~16:00
講師:当館エデュケーター
定員各5組10名(小学3・4年生とその保護者)・参加費無料

えっ?私愛知にいませんけど。。。【facebookログインの場所】

先日SNS講座やったばかりの私ですが、、、ちょっと朝方焦りました。

ログインの場所に愛知県???行ってないです。

大急ぎでパスワード変えました。

設定→セキュリティとログイン
もしここに、、、ログインしていない場所があったら右側の「…」のところからログアウトしてから、
パスワード変えてください!

セキュリティとログイン