画像を使わずHTML/CSSだけを使ってアイコンを表示する!Font Awesome がとても便利!

Webフォントの時代。通常は自分の持っているパソコンにインストールされているfontを使ってブラウザの文字は表示されています。そのため、パソコンが異なる環境だと表示するフォントが限られてきます。一般の方のパソコンに入っているフォントを使おうとなるわけです。

大きく違うのは、WindowsとMac。などの機械やOSの違い。またインストールされているソフトによってもフォントは入っている、入ってないが決まってきます。できれば、そういうことを気にせず、このフォントでホームページを表示したい!というのは節なる願いで、そこに最近登場している手法がWebフォント。フォントファイルを読み込ませてCSSで指定をすることによって表示させるといいものです。

Web フォントについては、こちらで詳しく解説中。

そのWebフォントにアイコンが存在します。そのフォントデータをサーバにアップ。もしくは呼び出しておいて、そのフォントデータをHTML内配置するというものです。文字の扱いと同じな為、CSSでfont-sizeを変更したり、color  配置などを扱うことができ、とても幅広く使われています。

今回はその中でもメジャーな Font Awesome をご紹介します。

Webアイコン Font Awesome を設定してみよう

 

スクリーンショット 2015-12-19 10.47.11

Font Awesome

605種類以上のアイコンを表示できます。アイコンは常時追加されているので、まだまだ増える可能性の高い Font Awesome。様々なサイトで見かけるアイコンは、多くのWebデザイナーが利用している証のようなものです。トップページにDownload ボタンからダウンロードすると一揃えセットで入っています。こちらをサーバにアップロードする方法もありますし、こちらのサイトでは、ナビゲーションにある Get Stated をクリックして、CSSファイルの読み込みを行うことができます。

スクリーンショット 2015-12-19 10.53.46

Get Statedページをクリックして、少しスクロールを下げたところに

スクリーンショット 2015-12-19 10.54.57

下記の部分を選択して、HTMLファイルに貼り付けるだけで準備は OKです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

WordPressなどで使う場合は、外観のCSS編集に

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";

とコピーペーストして使っていくこともできます。

アイコン例 使ってみよう!

  • fa-phone-square
  • fa-phone
  • fa-shopping-cart
  • fa-credit-card
  • fa-arrow-right
  • fa-arrow-circle-o-right
  • fa-envelope-o
  • fa-rss

などなど、小さな画像をイラストレーターで作ってスライスしてHTMLに<img>で貼り付けるという手間は全て吹っ飛んでしまいます。

Webアイコンを使いた場所のHTMLに下記のコードを貼り付けるだけ

<i class="fa fa-home"></i>

上記コードで、 を表示させることができます。

コードは、Font Awesome 内のiconsというページを開いて、一覧から、該当のアイコンをクリックするだけ

スクリーンショット 2015-12-19 13.01.38

例えば coffee と検索ボックスに入力すると

スクリーンショット 2015-12-19 13.03.22

アイコンが出てきますので、そのアイコンをクリックして

スクリーンショット 2015-12-19 13.04.27

<i class="fa fa-coffee"></i>

上記コードをコピーペーストです。大きさを変更したり、色を変えたりしたい場合は、 class 名の faとfa-coffee を使います。 fa の方は、全てのアイコンについているクラスなので、統一した内容を、fa-coffee は、このコーヒーアイコンのみについているclassなので、特別性をもたせた方が効率的です。

Classがよくわからないという方は直接、CSSにstyleを書いても大丈夫です(あまりオススメはしませんが)

<i class="fa fa-coffee" style="font-size:500%;color:red">Cofee Shop</i>

Coffee Shop

画像をスライスしたり、作成して呼び出す手間を考えると非常に便利なWebアイコン

Webサイトのデザインもより一層クールなものに変わりますので、ぜひお試しください。

 


Photoshop ブラシ  豪華でシックな写真フレーム枠が欲しい時にとても便利

Photoshopのフレーム枠のブラシは、非常に多く公開されていて、利用頻度も高いブラシの一つです。写真に簡単に枠が付けられて、その写真を豪華さをあげたり、シックな感じを演出したりと様々。

今回は有名なブラシサイトのご紹介です。ダウンロードして、ブラシを設定してみましょう。

リンク先のアドレスの右側にあるダウンロードボタンからブラシファイルをダウンロードできます。

スクリーンショット 2015-12-16 0.05.18

 

ブラシの設定の仕方は、前に紹介したキラキラブラシと同様です。

 

 

Frame Photoshop brushes

豪華な写真フレーム。シンプルテイストにが以外と使えます。

スクリーンショット 2015-06-16 12.36.10

 

Frame brushes set 2

様々なフレーム。絵画調などの写真にいかがでしょうか?

スクリーンショット 2015-06-16 12.41.52

 

Oval Frames

円形のフレーム枠。マスク処理をうまく使って表現してみましょう。

スクリーンショット 2015-06-16 12.43.17

 

 

frame brushes

横顔の写真を入れてみたい。とても綺麗な写真枠です

スクリーンショット 2015-06-16 12.39.50

 

Old Photo Frame Brushes 3

こちらのブレームブラシを使ってアイキャッチ画像を作ってます。

写真の四隅に付けられる、汎用性の高いフレームブラシです。調整レイヤーを使ってアレンジしてみましょう

スクリーンショット 2015-06-16 13.03.22

 


WordPressの表示アドレス (URL)と管理画面のサイトアドレス (URL)を変えないといけない場合の方法と注意点。

WordPressをインストールする際、ルートディレクトリ(レンタルサーバの一番上の階層)に全てのWordpressファイルを、アップロードすると、当然のことながら他のファイルをアップしたい時にごちゃごちゃして見ずらいし、困ったことになる場合が多い。

そのためWordpressをアップロードする場合は、ルートディレクトリにディレクトリ(フォルダ)を作成して、その場所にアップロードしていきます。

ディレクトリにあるWordpressのアドレスと表示アドレス

WordPressの管理画面は作成したディレクトリ下にあるので、そのままだと表示するサイトそのディレクトリを指すことになる。

WordPressを   http://wp.com/wp    にアップロードした場合は

表示するサイトも http://wp.com/wp  ということになる

 

実際のところディレクトリに入っている状態で表示はしたくない

http://wp.com/wp    ←この場所にWordpressが入っている
http://wp.com     ←実際の表示するアドレスはこちら

上記のように、表示するサイトアドレスは上の階層・ルートの状態にしておきたい。

 

管理画面の設定 > 一般より サイトアドレスの変更を行う

例えば下記の図のように

スクリーンショット 2015-12-14 10.53.28

管理画面の設定 一般より、サイトアドレスの方には、ディレクトリをつけない表示とした。

ただ、このままでは、表示しないので、FTPソフトなどで、サーバに接続し、

wpの階層に入っている index.php ファイルを少し修正する必要がある。

index.phpダウンロードして、下記の箇所を変更

require('./wp-blog-header.php');

の部分を

require('./wp/wp-blog-header.php');

これは、wp フォルダの  wp-blog-header.php  を読み込むという記述。もちろん下のフォルダを読むと index.phpを変更するので、

修正がおわったら、index.phpファイルをルート(http://wp.com)にアップロードしないといけない。

また忘れないように、 wp の中にある index.phpは削除しましょう。

 

ただし、こちらの設定は管理画面が違うので、管理画面へログインする際、うまくい繋がらないとか、何度か試してやっと入れた・・・という話もよく聞きます。

index.php を扱うのがよくわからない・面倒だ と言われる場合は、マルチドメインなどが使えるサーバで、ディレクトリごとに、ドメインを設定できる方法を使うのが便利かもしれません。

例えば http://wp.com/wp にWordpressをインストールして、その wp  がルートになるように、サーバに設定し、その場所に使用するドメインを割り当てるものです。

詳しくは、さくらサーバなどのマルチドメインの設定をご覧ください。

 

 


パスワードの生成と管理。登録する際求められるパスワード生成。そのあとの管理をすっきり解消!

自分がよく使うパスワードはいくつ持っていますか?

この質問を生徒さんにもよく尋ねるのですが、ほとんどの方が1個か2個ぐらいです。それも自分に関連する内容のパスワードを生成しているケースが。理由は簡単覚えられないから。そうですよね。私もです。登録する際は、ランダムな数字・アルファベットを含む8文字以上と記載があるので、その場で思いついて難しいパスワードをつけて忘れないようにメモしとこ。。。でもそのメモがわからなくなるパターン。仕事で忙しい中の登録だったりすると、ついついおこりがちなことです。

それで結局簡単なパスワードになりがち。

そうなると、パスワードが破られて、自分の情報が見られるんじゃないか、、、見られてさらに盗まれるんじゃないか。

と頭を悩ます原因になります。

覚えられて難解な解読不能なパスワードってできないの?

そうですよね。それが一番。

長いパスワードはやはり難解になるので、8文字から12文字ぐらいは生成したいですね。

単語などは辞書攻撃(ディクショナリーアタック)というサーバへの攻撃を受けやすいので、避けましょう。

大文字小文字を適度に混ぜる。なにげに記号を使う。

使ってはいけないのは、数字やアルファベットの連続 123456  とか 00000 aaaa  abcdef

あと管理者を表す admin や 編集者などが使う  guest      Test   などもダメですね。

4文字から5文字は、全く意味不明は数字とアルファベットを決めて、残りの4文字に自分に関連した語句にします

好きな本のタイトルの部分とかの語句に数字の1を足すなどの工夫をしてみます。

乱数発生の考え方は、こちらのサイトが非常に詳しく解説してあります!

http://www.lifehacker.jp/2014/07/140715password_methods.html

ただその組み合わせのパターンが思いつかない。これはよくあります。

それで単調になる・・・ではまずいのでそういう時はパスワード生成サイトを使いましょう。

パスワード生成というサイトがネット上にはたくさん存在します。

スクリーンショット 2015-12-10 22.45.36

http://www.luft.co.jp/cgi/randam.php

こちらのサイトはランダムにパスワードを生成してくれて、さらにデータをダウンロードできます。12文字でランダムな記号からみの強固なパスワードが生成可能です。

 

 

スクリーンショット 2015-12-10 22.47.43

http://www.graviness.com/temp/pw_creator/

こちらのパスワードジェネレーターは、32文字の強度を最高にした乱数でパスワードを生成してくれます。

思いつかない時はこういう生成サイトを使ってパスワードを生成しましょう。

作ったパスワードをサイトごとに割り当てるとかが必要になってきた場合は、アプリや管理ツールに頼った方がいいかもしれません。ただしサイトの中には、管理ツールから直接パスワードが入らなかったりする場合もあるので、使用方法は注意が必要ですね。

無料で使えるパスワード管理

パスワード管理ツールの種類は非常に多いので、こちらの比較サイトが便利です。

http://www.appps.jp/184377/

最近では、googleが改良版のパスワードマネージャーは「Smart Lock」を発表しました。スマホ版は前からありましたが、PC版が登場して期待されています。まだ英語での案内のようですね。

スマートフォンでいうと LastPassなどが有名です。

https://lastpass.com/

 

私は大丈夫〜とおもわず、パスワードは気を引き締めて管理しておきましょうね。

 

 

 

 

 

 


Illustrator講座 5分いや3分で作る簡単レース作成 回転すればこっちのもん!

スクリーンショット 2015-05-07 17.13.39

Illustrator講座の中で、オブジェクトを描いてからの回転で花を作る。という内容は、あと少し時間が残った時によく解説します。

さらに講座内で時間に余裕のある時に、文字から作る簡単レースもなかなか好評でして。

このレースは最初に入力した文字列や間隔で仕上がりがそれぞれ異なるのも面白いところです。

1 テキスト入力をする。

スクリーンショット 2015-05-05 18.04.18

フォントや、カーニングを気にしても気にしなくてもOK

2  下方向にコピー

スクリーンショット 2015-05-05 18.04.24

コピー&ペースト後 シアーを使って垂直方向に回転

3 少し重ねるように移動

スクリーンショット 2015-05-05 18.04.29

 

 

スクリーンショット 2015-05-05 18.04.34

 

90度に回転

4 さらに10度か15度方向に回転

 

 

スクリーンショット 2015-05-05 18.05.34

 

回転はコピーを行い。Command + D  で繰り返しを行って360度コピー回転。背景に色・グラデーション・パターンなどをつけて、レース模様がよく見えるようにして完成。

ただ制作の現場でどこで使うかが問題・・・

スクリーンショット 2015-05-05 18.05.42


Photoshop キラキラブラシ ブラシ1つでバナーや写真のクオリティーを大幅アップ!簡単設定動画とダウンロード先のご紹介です。

Photoshopにあるブラシの種類は無限大

Photoshopのツールの中にあるブラシ。種類と用途も非常に多いことから様々な写真加工に使われています。その中で、寒いこのシーズンにはぴったりのキラキラブラシをご紹介します。これを使えば商品や風景の写真に簡単にキラキラ感が演出できます。今回は非常に人気のキラキラブラシをセレクト。ダウンロードしてPhotoshopに読み込んで使ってみましょう。

ダウンロードした、もののキラキラブラシの使い方がわからない!という方は、下記のブラシ設定の動画をご参照下さい。

 

 

Photoshopブラシをダウンロードしてみよう!

Sparklies Photoshop Brushesby redheadstock

この手にキラキラブラシはとても便利。写真に嫌味のない輝きを出すには最適なブラシ。

スクリーンショット 2015-05-07 22.27.56

http://redheadstock.deviantart.com/art/Sparklies-Photoshop-Brushes-67557195

http://redheadstock.deviantart.com/art/Sparklies-Photoshop-Brushes-67557195

Starbrushes by TimelessArt

この手のStarbrushesは、ちょっとした輝きを出すのに便利なブラシ。

スクリーンショット 2015-05-07 22.32.10

http://redheadstock.deviantart.com/art/Sparklies-Photoshop-Brushes-67557195

http://redheadstock.deviantart.com/art/Sparklies-Photoshop-Brushes-67557195

Stars Brushes by GieGie

同じサイズのブラシというのは、便利なものです。500*500

スクリーンショット 2015-05-07 22.35.18

http://giegie.deviantart.com/art/Stars-Brushes-86137088

 

 

1000 Starsby alsnd12

1000個あります ブラシが!すごい。定番の丸にキラキラはお役立ちブラシ。

スクリーンショット 2015-05-07 22.36.56 

http://alsnd12.deviantart.com/art/1000-Stars-24842912

 

Sparkleby exotika-brushes

こういうのもあると役にたつ。ロゴが引き立ちますね。

スクリーンショット 2015-05-07 22.40.02

http://exotika-brushes.deviantart.com/art/Sparkle-13900386

 

Glitter + Sparkles Photoshop and GIMP Brushes

ちょっとかわいい仕上がりになるスターブラシ群 Photoshopをお持ちでない方のために無料の描画ツールGIMP用のブラシも公開されています。

スクリーンショット 2015-06-16 12.14.28

http://alsnd12.deviantart.com/art/Glitter-Sparkles-Photoshop-and-GIMP-Brushes-48646588

 

 

Glitter II Photoshop and GIMP Brushes

フェアリーぽい仕上がりに。こちらもGIMP用があります。

スクリーンショット 2015-06-16 12.16.57

http://alsnd12.deviantart.com/art/Glitter-II-Photoshop-and-GIMP-Brushes-106683022

 

Dangling Glows Photoshop and GIMP Brushes

流れるようなフレームに使えますね。

スクリーンショット 2015-06-16 12.19.02

http://alsnd12.deviantart.com/art/Dangling-Glows-Photoshop-and-GIMP-Brushes-61664675

 

いかがだったでしょうか?ブラシを使って様々なPhotoshopアートにチャレンジしてみて下さい!

 

 


WordPressプラグインのトップへ戻るボタン「Back To Top」をインストールしてみた。あれ?ってなったパターンです。

WordPressプラグイン新規追加より「Back To Top」と検索すると非常にたくさんのプラグインが表示されます。

こういう状態になった場合、優先順位は★の数より、「お使いのバージョンの WordPress ではテストされていません」という表示です。そうはいっても使えないわけではなく、お目あてのプラグインは、このあと、ネット検索で情報を収集します。

今回は「BackTo Top Plugin」をとりあえずインストールしてみることに。

スクリーンショット 2015-06-24 10.15.47

最終更新:2年前ってのもちょっと気になりますが・・・

スクリーンショット 2015-06-24 10.17.26

インストール後、有効化で、設定より Back To Topを選択します。

あれあれ?こんな画面です

スクリーンショット 2015-06-24 10.19.02

これは・・・・おかしいな〜 一番人気の筈では、、プラグイン一覧から確認すると

スクリーンショット 2015-06-24 10.21.17

す・・・スペースが空いてない方???なんと・・・ということでアンインストール。

結構プラグインを探していると、こういう目?にアイマス。。。プラグイン削除後は、こういう場合は、念のためサーバーのプラグインの入っているdirectoryからも削除しましょうね。

ということで、再度探します。あ・・・こちらのようです。

スクリーンショット 2015-06-24 10.24.16

https://wordpress.org/plugins/backtotop/

★5つですし。Last Updated: 2015-4-21 ですね。はいこちらです。

こちらはダウンロードしてからのプラグインから新規追加>プラグインのアップロードで無事設定完了

一覧にメニューが追加されています。さすが本物(?)

スクリーンショット 2015-06-24 10.27.15

Back To TopのBack To Topを選択すると、下記の画面が表示されます。1番上がこのあと、チョイス画面が、2番目は自分で画像をアップする場合、3番はテキストで。といったところでしょうか。

スクリーンショット 2015-06-24 10.29.16

 

一番上を選択して Next….. するとたくさんの画像が表示されます。

スクリーンショット 2015-06-24 10.31.45 スクリーンショット 2015-06-24 10.31.54

こちらを選択して

スクリーンショット 2015-06-24 10.33.09

表示位置や、速度をSetteingから行って

スクリーンショット 2015-06-24 10.35.29

設置完了です。簡単設置でBack To Topのボタン完了します。


ブロックされた悪意あるログイン試行もJetPackの新機能「プロテクト」で安心。

総当たりされても元気ですかー!!!

この時期、迷惑メールが増えてきますよね。それとあわせて、サーバへの総攻撃も増える時期です。サーバが急に重くなってウェブサイトが開くなったり、繋がらなくなったり。中でもやっかいなのが、総当たり。Wodpressのログイン画面で様々なID パスワードを使って不正にログインしようとする攻撃も多くなります。

 

ブロックされた悪意あるログイン試行とは?

スクリーンショット 2015-12-05 11.01.09

 Wordpressダッシュボードにログイン後、目に止まるJetPackのアクセス解析ログ。その一番下に「ブロックされた悪意あるログイン試行 4158」とあります。これは、総当たり攻撃=バックドアと呼ばれるサーバへの不正アクセスのことで、その際にWordpressのログインをadminというユーザ名で、様々なパスワードをディクショナリーアタック(辞書攻撃)を使って試した、試行したという数字です。それを見事ブロックした数ということですね。

2015年春のアップデートでJetPackに「Protect」が追加

Jetpack プロテクトはクラウドの力を使った総当たり攻撃への対策ツールです。
数千万の WordPress サイトを活用し、悪意のある IP を識別・ブロックします。 Jetpack プロテクトは、このプラグインをインストールしたサイトに対しての失敗したログイン試行をトラッキングします。ある IP からの短期間に失敗したログイン試行が多すぎる場合、このプラグインを使っているすべてのサイトへのログインがブロックされます。

JetPackの「Protect」の前は「Crazy Bone」を使っていましたが、無線LANなどでIPが変わっても警告が出続けるというちょっとやっかいなところがありました。今回この機能がプラスになったことで、当面こちらの機能をフルに活用していきたいと思います。

スクリーンショット 2015-12-05 11.14.47

JetPackのインストール方法 動画


HTMLやCSSコードを入力するテキストエディタのオススメ4選。SublimeTxet

テキストエディタとは?

テキストエディタは、Windouwでは、アクセサリーの中に入っているメモ帳。macではmiなどの標準で入っているプログラムで、テキスト(文字)をだけを扱うことを主体としているものです。Wordなどは、その文字の書式を変える(文字サイズや色・配置)ことできますが、テキストエディタは、そういう機能は持ち合わせていません。そういう機能がないぶん、動作は軽くスピーディに入力できる点に重点をおいています。

良い点(こういう点を備えています)

  • 検索や置換の設定
  • 行番号がでる
  • 行末揃えを変更できる
  • スペースなどが記号になる
  • 文字エンコードを操作できる
  • 保存がテキスト形式なので、他のプログラムでも開くのが容易

HTMLやCSS入力に最適なテキストエディタ

素早い入力ができるテキストエディタは、ほとんどがHTML/CSSやJavaScriptなどのプログラムに適した作りになっています。コードと呼ばれるプログラム部分の色をこまかく変えたり、入力補助機能がついていたり。これらの機能を使うことで、正確に素早くコードを入力することができます。

Windouwsのエディタ

TeraPad

試験会場などでよく使われているエディタです。初めての方にはとても使いやすい導入編テキストエディタです。

tp_w7_s

http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html

 

さくらエディタ

html

http://sakura-editor.sourceforge.net/

 

秀丸エディタ

http://hide.maruo.co.jp/software/hidemaru.html

 

SublimeTxet

本家は英語モードなので、日本語用に変える手間はありますが、非常に高性能なテキストエディタです。今回の動画はこちらのSublimeTextをご紹介します。

http://www.sublimetext.com/


Photoshop CC2015の基礎講座(01) コンテンツに応じた移動ツール[動画]

Photoshop CC2015の便利機能コンテンツに応じた移動ツールの説明です。

とても便利な移動ツールなのですが、初めてやってみると、結構うまくいかなかった・・・ってことも。この機能を使って失敗しそうなところを解説して、こういう手法だとうまく移動できるよ!を説明しています。

Befor  >>>> after

 


1 2 3 4