今日はIllustratorの話です。
CCでは
ウィンドウ→アセットの書き出しを押すと
アセットのウィンドウが出てきます。
ここに該当する素材を
①ドラッグ（複数ある場合はAlt+ドラッグ）すると素材が格納され
②形式や名前を記入して書き出すことができます。
ただ、１つ難点があります。
クリッピングマスクをした素材を書き出そうとすると
クリッピングマスク外の範囲まで書き出せれてしまいます。
NGです。
そんなときの対処法
①ライブラリを開く
②対象素材をライブラリにドラッグする
③②の素材をアートボードに再び移す
すると、クリッピングマスクの範囲がなくなり
欲しい部分だけの状態になります。
これでOK。
【特徴】
ドラッグするだけでできる
他にも良い方法があるかもしれないのですが
まずはこの方法を使ってみましょう。
イラレのアセットの書き出しを使用していると、普通にスライスした時よりも、画像が荒く感じたり経験した人もいるかと思いますが、
設定を少し変更するだけで、画像の荒さを解消することができます。
アセットの書き出しパネルから
↓
アセットの書き出しメニューの形式の選択
↓
PNGやJPGなどオプションを変更したい拡張子を選択
↓
オプションのアンチエイリアスをなしからアートに最適(スーパーサンプリング)を選択
上記の設定をするだけで、アセットの書き出しで書き出した画像がなめらかになると思います。
アセットは普通にスライスするよりも便利ですが、標準の設定で使用していると、普通にスライスするよりも荒いということもあるので、設定しておくとよいでしょう。
今日は「相手に理解してもらためのポイント」を整理します。
ポイント：相手が知りたいことと自分が話したいことは異なる
【例】
○状況
Ａさんに「会議を開いてほしい」と言われたＢさん。
時間と場所の調整のために東奔西走します。
ようやく調整がついたのでＡさんに報告する。という場面。
○会話
Ａさん 「先日言ってた会議の件、いつできそう？」
Ｂさん
OK:「木曜日にできます。」
NG:「CさんとDさんは木曜日と金曜日が都合いいらしく、
会議室は人事部が木曜日に使う予定なんですが、
譲ってくれるらしいので、木曜日にできます。」
【解説】
Ａさんが聞きたいのは「いつできるか？」という問いのみ
なのにNGのＢさんは
まるで自分の武勇伝を語るが如く、経緯を説明してしまいます。
これではＡさんが話の途中で「で、なんやねん。」と思ってしまいます。
自分のことを話したくなる性質があることを認識し
意識して相手が知りたいこと、
つまり『結論』から話をするようにしましょう。
WordPressはオープンソースで、無料で使用できるCMSであり、無料で使用可能なプラグインも豊富です。
ですが、オープンソースであるがために、脆弱性が発見されやすくハッキングの標的になりやすいといった面もあります。
対策としては
1. WordPressのバージョンやプラグインを最新の状態に保つ
脆弱性が見つかった場合、その都度バージョンアップをして脆弱性を修正しています。
最新バージョンは以前の脆弱性がありませんが、バージョンが古いと脆弱性は多くなってしまいます。
なので、バージョンは常に最新版にしておくことがおすすめです。
2. 使用していないプラグインは削除する
インストールしているけども利用していないプラグイン、などは「停止」にするだけではなく、「削除」するようにしたほうがよいです。
なぜなら、プラグインに脆弱性が発覚した場合、その脆弱性が狙われる可能性があるからです。
3. ユーザー名やパスワードは強固なものにしておく
WordPressのログイン用ユーザー名を「admin」のままにしている方もいますが、独自のものに変更しておいたほうが良いです。
また、パスワードはンダムに10文字以上の英数字を織り交ぜた文字を設定したほうがよいでしょう。
4. wp-config.phpにアクセスできないようにする
データベースのアカウント情報が記載されている「wp-config.php」のファイルは、外部からのアクセスを防ぐように設定しておかなければなりません。
このファイルが、外部に渡れば、データベースが操作されてしまう危険性があります。そのため、外部からのアクセスを不可に設定しておく必要があります。
手順
「wp-config.php」と同じ階層にある「.htaccess」に、下記を記述
order allow,deny deny from all
スマートフォン用のwp更新アプリはGoogle Playから入手できます。
インストールが完了すると、スマートフォン上にアイコンが表示されます。
アイコンをタップすると、WordPressのログイン画面が表示されます。
1.「インストール型 WordPress ブログを追加」を選択、
2.「インストール型 WordPress のアドレス(URL)」入力欄が表示される。
3. PCの管理画面のWordPress アドレス (URL)を入力します。
記事の追加や編集や、スマートフォンから、画像や動画の追加可能な「メディア」メニュー、固定ページの追加・編集機能など、pcと同じようにサイトを管理することが可能です。
スマートフォンからでもブログを編集可能なので、入れておくと便利かもしれません。
背景に複数の画像・背景色を入れたいと以下の場面で思うことがあります。
①画像を二つ入れる
例：2カラムのサイトを作成するとき左のサブカテゴリー内で[画像・文字・矢印]としたい
②画像と背景色を入れる
例：背景に色をつけつつ、画像も入れたい
今日はこの２場面に対してのスタイルの付け方をまとめます。
タイトル
タイトル
【特徴】
・①はカンマが必要。
②はカンマが不要です。
・わざわざ、背景用のdivを入れる必要がなくなる。
シンプルなコードを目指します。
SMACSS(スマックス)はOOCSSのコンセプトをベースにできた、フロントエンドに関するガイドラインです。
SMACSSのポイントはパターンを抽出しやすくするためにカテゴライズされていることです。
SMACSSで提案しているカテゴリは
・BASE
・Layout
・Module
・State
・Theme
・BASEは各要素のデフォルトのスタイルを定義します。例えばreset.cssなど各要素のスタイルをリセットするものなどBASEカテゴリに属します。
・LayoutはIDを用いて定義されるヘッダーやコンテンツ、サイドエリアやフッターなどといった構成の大枠へのルールです。
・Moduleではページを構成できるオブジェクトのカテゴリです。それはボタンや見出しなど再利用可能なものを指します。
・Stateは、状態を表すルールを指します。よく使われるものでいえば
.is-hidden{/*.is-hiddenといった要素を隠すためのdisplay:none;を適用させるためのクラスを作成*/
display:none;
}
・Themeはテーマを切り替えられるような機能が求められるようなcssの時に考慮されるカテゴリです。
よくつかわ
管理しやすいcssを記述するうえで必要なのは、
コンテナーとコンテンツを分離は場所に依存しないセレクタを書くことです。
サイトのロゴやバナーなど、ヘッダーやフッター、コンテンツエリアで渡って使われることのあるオブジェクトの場合、#headerなどのコンテナーと切り離して記述したほうが良いです。
header .logo{
width:200px;
height:50px;
}
フッターにもロゴが必要になった場合
footer .logo{
width:200px;
height:50px;
}
上記のようになると、ヘッダーやフッタのロゴに対して指定することになってしまうので、logoというパーツとして
.logo{
width:200px;
height:50px;
}
という風にすれば、ヘッダーやフッターという場所に関係なく、修正も必要がなくなります。
場所に依存しないようにパーツ化してcssを記述することが拡張性の高いcssを書く上でのポイントとなります。
なので、フッターだけロゴサイズを小さくしたい場合
footer .logo{
width:150px;
}
ではなく、新しい定義として、
.small-logo{
width:150px;
}
として、場所に依存しないようにしてやることが望ましいでしょう。
リストの中でタイトルと画像を並べたいとき
リストタグの中でhタグとulタグを使用し、ulタグの中でリストタグを用いてimgタグを使用します。
また、imgに用いているリストタグをインライン要素にすることで横並びにします。