複数のサイトを運営している関係上、画像のリサイズ(サイズ変更)について説明する機会が多くありますが、今日はそのことで書いてみます。SNS全盛のせいか、FacebookでもTwitterでも、写真の投稿時に画像ファイルが大きすぎますと警告を受けることはまずありません。そのためか、撮ってすぐの大きなサイズのままでメールに添付しようとしたり、一般の投稿サイト(容量制限が設けてあることが多い)に投稿しようとして「サイズが大きいってどういうこと?」と、あわててしまう人がいらっしゃいます。スマホやモバイル機器をメインに使用していて、あまり画像加工のソフトを入れていない人は「サイズ変更ってなんだろう」と悩んでしまうかもしれません。説明するのにいちばん手っとり早い方法は、メール送信です。自分宛てにその画像をメール送信してみるように、すすめてみましょう。メール送信時には、ほとんどの場合で「この画像はとても大きいけれども、小さくしますか」と尋ねてくれます。小さくしたものを自分に送信して再受信すれば、サイズは小さくなります。これなら、慣れていない人に説明するにも、わかりやすいと思います。Androidでも、iPhoneでも、Photoshop系列の各種アプリは、無料でダウンロードできます。会員登録またはSNS経由でIDを登録すれば、オプションも使えるようになって便利です。Expressをダウンロードしてみましょう。写真をそのアプリで開いてから、必要ならば明るさなどを編集し(必要ないならばどこも触らずに)、画面上にある共有ボタンを押すと、サイズを変更して書き出しするメニューが出てきますので、便利です。パソコンをお使いの方は、だいたいにおいて写真の編集ができるソフトがもともとはいっていますので、そこのどこかで画像サイズを編集するボタンがありますから、探してもらいましょう。自動でロゴを作ってくれるサイトもたくさんありますが、自分で工夫してロゴが作れたら、それがいちばんよいかと思います。Elementsを使っていますが(数年前のバージョン)、それでもし参考になればと、手順を書いてみます。作業手順を画面キャプチャしてみました。(のちほど、1画面ずつ意味を説明する文章を書きますので、適宜ストップボタンを押しながらご覧ください)動画がうまく埋めこまれているかどうかの実験で、いったん公開しますが、説明の文章は25日夜に、書き足します。Elementsは数年前のモデルです。モードをエキスパートにしているので、かならずしも同じ画面で作業している人ばかりでは、ないと思います。何らかのご参考になれば。画面上部のタイムスタンプを故意に削除せずにおきましたので「なるほど、15分もあればできるものなんだ」と、気楽にお考えください。(途中で画面を離れるなどしたのでロスがありましたが、だいたい15分もあればできます)今回のようなロゴ作成で、用意するものフォント(パソコンにもともとインストールされているものや、ご自身で購入、または権利問題なしと確認できているもの)レイヤー処理ができる画像ソフト(多くのソフトで対応しています)手順としましては文字部分を作る。大きさや傾け方などの工夫の際にレイヤーを使用して、のちほど統合すると便利。レイヤーを用意して、模様をつける。最後に周囲の余白を切りとって、基礎部分の完成。...という流れです。基礎部分ができましたら、それに色をつけたり加工をしたり、あるいは縮めてリンクボタンにしたりと、さまざまな工夫ができるようになります。個々の画面の解説です。画面1まず適当なサイズの無地画面を作り、テキスト入力メニューから、ロゴの一部を書きます。好きなフォントやサイズは、文字を選択した状態でフォントメニュー(画面下部)から選べます。画面2レイヤーを作成するメニューから、新規に1枚を作成し、テキスト入力メニューでロゴ後半を入力します。フォントは前半部分と同じ種類のものを選んでおけば無難でしょう。画面3第1のレイヤーで、前半部分を回転させたり、ひろげたり、好きなように動かします。(周囲をつまめば好きな形に変えられます)画面4第2のレイヤーで、後半部分を好きな位置に移動させます。画面5だいたいよいかなと思ったら、レイヤーをまとめます。ここを何回かやり直すかもしれないと思ったら、画面4の段階で、レイヤーごと保存できる形式で保存してください。フォトショップ系であれば.psdという形式がそれにあたります。ほかのソフトでもレイヤーが保存できる形式があります。画面6効果のメニューから、文字をどう加工するかを選びます。画面7効果のメニューで選んだものを、設定画面から微調整できます。画面8微調整を確認しつつ、よいと思ったところでOKを押します。画面9次の作業のため、レイヤーを追加します。レイヤー追加は上のメニューバーから選べます。画面10新しいレイヤーを、いったんグラデーションで塗りつぶす準備です。グラデーションのメニューを選び、流し入れる色合いを自分で設定します。画面11色合いが決まったら、適当にぐりっと、画面上をカーソルでドラッグしてください。わたしの場合は左斜め下から右上方向に、適当にやってみました。画面12グラデーションを模様で切り抜きします。切り抜きメニューの中に、たくさん画像がはいっていますので(フォトショップでなくてもこういったものは、はいっていると思います)、選びます。画像13画面11とよく似ていますが、左下に、選んだ画像がご覧いただけると思います。この状態で、適当な場所に(何度でも移動できますので、気にせずどこにでも)ぐりぐりっとカーソルをあて、ドラッグします。画面14洋梨の絵が出ました。場所が気に入らなければ、あるいは形がいまひとつなら、何度でもドラッグしなおしできます。画面15ここでまた、レイヤーをまとめます。(やり直しがしたくなるかもと思ったら、レイヤーごと保存できる形式で、保存してください)画面16そろそろ作業も終盤ですので、適当な大きさに切りましょう。このあたりかなと思う場所を長方形で選択します。画面17周囲を切り抜きます。画面18数字をきっかり好みに合わせておきたい人は、ここで合わせましょう。作業はいったん、ここで終了です。このままファイル保存することもできますし、その後、これを部品としてさらなる加工をしていくこともできます。保存する場合、.jpg(ジェイペグ)形式ですと作業をしていた背景色(この場合は白)で背景が確定します。.png(ピング)ですと、背景色を指定、あるいは背景を透明にして保存することもできます。駆け足でしたが、今日のところは、以上です。ご覧いただきありがとうございました。More雑記2018/10/24mikimarchePHPの本まだ前回のBootstrap4の本も完全には読み終えていないのですが、この1週間くらいは、平行してこちらも読んでいます。PHPは以前にバージョン3と4について書かれた本を読んだことがあり、その数年後にPHP5について書かれた本を読みましたが、時代はもはやPHP7です。本日現在わたしの体感としては世の中でもっとも多く使われているPHP5.6は、正式には今年で、サポートが終了することになっています。入門ノート...自分としては納得の上で購入したつもりのKindle版でしたが、やはり、これは紙の本がおすすめです。あとで買い直ししたほうがよいかもしれないと考えています。解説は簡潔で明瞭、事例はネットでダウンロードしてこられるので、読むだけでも勉強になるにはなるのですが、こういう本の常として「しょっちゅう見直しをしたい」ものです。この本は電子化にあたり文字として処理をしておらず(内容を画像として掲載している状態)、当然のこと文字で内容を検索はできませんので、ふたたび読みたい項目を探すのがたいへんになります。簡単な言葉で名称が書かれているのみ。現在は初回の読み流しではありますが、再読や、今後の参照を想像しただけで、困難が待ち受けている気がします。More雑記2018/09/22mikimarche個人ブログ用の新ドメイン設定(覚え書き)10年利用しているWordPressのブログで、URLを縮めてSSL対応するため独自ドメインを取得したので、その設定について。昨日、個人ブログのほうで新ドメインを取得しました。思いついて1日で、すべての作業はあっという間に終わりました。)簡単に書いてしまうと、わたしの場合はこのmikimarche.comのはいっている場所と同じ場所で、そのブログを10年書いています。同じ家の別々の部屋にあるものを、部屋の名前で分けて呼び出しているということです。mikimarcheが呼ばれたらmikimarcheの看板がついている部屋のドアが開き、mikimarulogと呼ばれたら、別のドアが開くという仕組みです。内容そのものを引っ越したのではなく、部屋のドアにつける看板を用意して、呼ばれたら自動でドアが開くようにしたのが、今回の手順でした。それで早く終わったというわけですが、ほんとうに中身を引越(別のビルに移動)などの場合は、もう少し作業が繁雑になります。今回は、ロリポップの系列会社「ムームードメイン」で、ドメインを取得しました。4の本を読んでいます。4の本が技術評論社から発売されたばかりということで、渡りに船とばかりに、そちらを読みはじめました。(AmazonのKindle本を購入しましたが、活字でも値段は同じ3,542円です)Bootstrapというのは、もともとはTwitter社が開発したレスポンシブウェブデザインのアプリケーションです。書くと自分でもカタカナが多くてわかりにくいと思いますが、レスポンシブというのは、パソコンでもスマホでもタブレットでも、見る人の環境(使っている画面の大きさなど)を判断してそれに適した画面を表示できる状態を指します。Twitterのようにスマホなど小さな画面で見る利用者のほうが多かったであろうウェブサービスにとっては、とても重要な技術だったのですね。これはこのサービスを使いたい人がウェブサイト上に最低限のファイルを置いておき、ウェブページ上からBootstrapを呼び出すことでレスポンシブなデザインを可能にする仕組みです。多くのウェブサイトでバージョン3が使われていますが、わたしのようにこれから開始する人間は4がよいだろうと、勉強をはじめました。読み終わったら、次の本をご紹介します。掲載されていますので、よろしければご覧ください。今日は用語解説の話題を少しお休みして、本のご紹介です。したサイトを開始したわけですので、うろ覚えが多かった知識を整理すべく、何冊か本を読んでみることにしました。AmazonでKindle版を購入しましたので、パソコンの画面にこの本を開いたまま、横目でちらちら見てはエディタで練習します。ちなみに紙の本とKindleと値段は一緒で2,462円でした。いままでテキストエディタはさまざまなものを使ってきましたが、この本に紹介されていたBracketsというエディタが、ほんとうにもう「こういう作業にぴったり」なもので、驚きました。無料で利用できるエディタですので、安心してダウンロード可能です。ほんとうに簡単なところから書いてあるので、まるきり初めての人でも、とっつきやすいかもしれません。わたしのように、頭の整理として読んでも、なかなか優れものです。これが読み終えたら、また次の本をご紹介します。オープンいたしました。オープンいたしました。このシステムはbaserCMSというオープンソースの国産ソフトです。このソフトでやってみようと決意してから2日でパソコン内部で仮運営が完了、その後ロリポップ上に移動して動作確認が1日、そしてこのmikimarche.comのドメインを使うようになるまで、うっかりミスで1日悩んでしまいましたが、コミュニティの方にヒントをいただき、実現しました。(人様から教えていただかないと気づかなかった凡ミスで、ほんとうにお恥ずかしいですが、無事に公開できました)なお、お友達のみなさま、エラーが出るか出ないか、何かお気付きの点がありましたら、この欄のコメントなどにご参加いただけないでしょうか。しながらお待ちしています。Reserved.▲TOP。