イラレのアセットの書き出しで荒れるとき

イラレのアセットの書き出しを使用していると、普通にスライスした時よりも、画像が荒く感じたり経験した人もいるかと思いますが、
設定を少し変更するだけで、画像の荒さを解消することができます。

アセットの書き出しパネルから

アセットの書き出しメニューの形式の選択

PNGやJPGなどオプションを変更したい拡張子を選択

オプションのアンチエイリアスをなしからアートに最適(スーパーサンプリング)を選択

上記の設定をするだけで、アセットの書き出しで書き出した画像がなめらかになると思います。

アセットは普通にスライスするよりも便利ですが、標準の設定で使用していると、普通にスライスするよりも荒いということもあるので、設定しておくとよいでしょう。

相手への説明方法:結論から話そう

今日は「相手に理解してもらためのポイント」を整理します。

ポイント:相手が知りたいことと自分が話したいことは異なる

【例】

○状況
Aさんに「会議を開いてほしい」と言われたBさん。
時間と場所の調整のために東奔西走します。
ようやく調整がついたのでAさんに報告する。という場面。

○会話
Aさん 「先日言ってた会議の件、いつできそう?」

Bさん
 OK:「木曜日にできます。」

 NG:「CさんとDさんは木曜日と金曜日が都合いいらしく、
   会議室は人事部が木曜日に使う予定なんですが、
   譲ってくれるらしいので、木曜日にできます。」

【解説】
Aさんが聞きたいのは「いつできるか?」という問いのみ
なのにNGのBさんは
まるで自分の武勇伝を語るが如く、経緯を説明してしまいます。
これではAさんが話の途中で「で、なんやねん。」と思ってしまいます。

自分のことを話したくなる性質があることを認識し
意識して相手が知りたいこと、
つまり『結論』から話をするようにしましょう。

WordPressのセキュリティを強化する

WordPressはオープンソースで、無料で使用できるCMSであり、無料で使用可能なプラグインも豊富です。

ですが、オープンソースであるがために、脆弱性が発見されやすくハッキングの標的になりやすいといった面もあります。

対策としては
1. WordPressのバージョンやプラグインを最新の状態に保つ

脆弱性が見つかった場合、その都度バージョンアップをして脆弱性を修正しています。
最新バージョンは以前の脆弱性がありませんが、バージョンが古いと脆弱性は多くなってしまいます。
なので、バージョンは常に最新版にしておくことがおすすめです。

2. 使用していないプラグインは削除する
インストールしているけども利用していないプラグイン、などは「停止」にするだけではなく、「削除」するようにしたほうがよいです。
なぜなら、プラグインに脆弱性が発覚した場合、その脆弱性が狙われる可能性があるからです。

3. ユーザー名やパスワードは強固なものにしておく
WordPressのログイン用ユーザー名を「admin」のままにしている方もいますが、独自のものに変更しておいたほうが良いです。
また、パスワードはンダムに10文字以上の英数字を織り交ぜた文字を設定したほうがよいでしょう。

4. wp-config.phpにアクセスできないようにする
データベースのアカウント情報が記載されている「wp-config.php」のファイルは、外部からのアクセスを防ぐように設定しておかなければなりません。
このファイルが、外部に渡れば、データベースが操作されてしまう危険性があります。そのため、外部からのアクセスを不可に設定しておく必要があります。

手順
「wp-config.php」と同じ階層にある「.htaccess」に、下記を記述

WPをスマートフォンで編集

スマートフォン用のwp更新アプリはGoogle Playから入手できます。

WordPress – Android アプリ

インストールが完了すると、スマートフォン上にアイコンが表示されます。
アイコンをタップすると、WordPressのログイン画面が表示されます。

1.「インストール型 WordPress ブログを追加」を選択、
2.「インストール型 WordPress のアドレス(URL)」入力欄が表示される。
3. PCの管理画面のWordPress アドレス (URL)を入力します。

記事の追加や編集や、スマートフォンから、画像や動画の追加可能な「メディア」メニュー、固定ページの追加・編集機能など、pcと同じようにサイトを管理することが可能です。

スマートフォンからでもブログを編集可能なので、入れておくと便利かもしれません。

backgroundに複数の画像・背景色を入れる

背景に複数の画像・背景色を入れたいと以下の場面で思うことがあります。

①画像を二つ入れる
例:2カラムのサイトを作成するとき左のサブカテゴリー内で[画像・文字・矢印]としたい

②画像と背景色を入れる
例:背景に色をつけつつ、画像も入れたい

今日はこの2場面に対してのスタイルの付け方をまとめます。

【特徴】
・①はカンマが必要。
 ②はカンマが不要です。
・わざわざ、背景用のdivを入れる必要がなくなる。

シンプルなコードを目指します。

SMACSS

SMACSS(スマックス)はOOCSSのコンセプトをベースにできた、フロントエンドに関するガイドラインです。

SMACSSのポイントはパターンを抽出しやすくするためにカテゴライズされていることです。

SMACSSで提案しているカテゴリは
・BASE
・Layout
・Module
・State
・Theme

・BASEは各要素のデフォルトのスタイルを定義します。例えばreset.cssなど各要素のスタイルをリセットするものなどBASEカテゴリに属します。
・LayoutはIDを用いて定義されるヘッダーやコンテンツ、サイドエリアやフッターなどといった構成の大枠へのルールです。
・Moduleではページを構成できるオブジェクトのカテゴリです。それはボタンや見出しなど再利用可能なものを指します。
・Stateは、状態を表すルールを指します。よく使われるものでいえば

・Themeはテーマを切り替えられるような機能が求められるようなcssの時に考慮されるカテゴリです。
よくつかわ

コンテナーとコンテンツを分離

管理しやすいcssを記述するうえで必要なのは、
コンテナーとコンテンツを分離は場所に依存しないセレクタを書くことです。

サイトのロゴやバナーなど、ヘッダーやフッター、コンテンツエリアで渡って使われることのあるオブジェクトの場合、#headerなどのコンテナーと切り離して記述したほうが良いです。

フッターにもロゴが必要になった場合

上記のようになると、ヘッダーやフッタのロゴに対して指定することになってしまうので、logoというパーツとして

という風にすれば、ヘッダーやフッターという場所に関係なく、修正も必要がなくなります。
場所に依存しないようにパーツ化してcssを記述することが拡張性の高いcssを書く上でのポイントとなります。

なので、フッターだけロゴサイズを小さくしたい場合

ではなく、新しい定義として、

として、場所に依存しないようにしてやることが望ましいでしょう。

リストの中で画像を横並べ

リストの中でタイトルと画像を並べたいとき

リストタグの中でhタグとulタグを使用し、ulタグの中でリストタグを用いてimgタグを使用します。
また、imgに用いているリストタグをインライン要素にすることで横並びにします。

【特徴】
・リストタグの中でタイトルと画像を区別できる
・ulとliでのシンプルかつキレイなコードが書ける
・スタイルもシンプル

cssでの絶対値

デザインデータからコーディングするとき要素ごとの余白やフォントサイズの値をcssに反映させることがあるでしょう。

絶対値で行間を指定すると上記のように.textや.text_box対してどちらも行間が文字サイズの1.5倍となっています

今度はline-heightを相対値にすることでフォントサイズが変わっても.text_boxの子要素に対し、行間が文字サイズの1.5倍でされます。
この利点としてフォントサイズの調整があっても行間の値を修正する必要がなくなります。

また、フォントのプロパティ(color,font-size,line-height)などは親要素に設定した値を子要素に継承することが可能なので、子要素にそれぞれ指定する必要がなくなります。

絶対値や単位による指定をする必要がない限り、相対値で指定したほうが、のちの修正など、管理しやすいcssの記述をすることが可能です。

WordPressでの条件分岐

WordPressで固定ページやフロントページなどによって処理内容や記述を変えたい場合があります。
そんな時に便利なよく使う条件分岐を記載しました。

elseを省略して

条件以外では何も処理をしたくない場合else文を省略して記述することも可能です。

またelseifを記述して

ifに当てはまらなかったときに、elseifの条件を判定してくれます。

複数の条件を組み合わせでは

ifの()内で、&&(かつ)と||(又は)を使って、2つ以上の条件を組み合わせることができます。

また、
下記のようにページによって条件を変えることが可能です。