ホームページ制作Fの業務を月ごとにご紹介

2015年4月30日(木)
Photoshopを使ってミニチュア風の写真加工

ステップ1:加工したい写真を用意
043001.jpg
今回は、こちらの写真を使用します。
なるべく上空から撮影したものを使うと作りやすいです。

ステップ2:アンシャープマスクをかける
アンシャープマスク.jpg
アンシャープマスクをかけることで、メリハリを強調させることができます。
[フィルター]→[シャープ]→[アンシャープマスク]で荒くなり過ぎないように、
写真を見ながら調整してください。
043001-.jpg

アンシャープマスクをかけた状態です。↑

ステップ3:上下をぼかす
クイックマスクモードを利用して、グラデーションツールの<反射形>で選択範囲を決めます。
043002--.jpg
選択範囲以外は「赤半透明色」で塗りつぶされます。
ここは、何度かやり直して微調整しましょう。
調整後は、もう一度モード選択で通常モードに戻します。
043003-.jpg
通常モードに戻すと先程選択された箇所が点線で囲われのが確認できます。↑
[フィルター]→[ぼかし]→[ぼかし(レンズ)]でぼかし具合を調整します。
043003--.jpg
加工写真のサイズによって数値は調整する必要があるので
画面を見ながら好みの数値を探して下さい。

ステップ4:色合いを整える
ミニチュアらしい色合いにするために、彩度や明るさを調整します。
彩度02.jpg
[イメージ]→[色調補正]→[色相・彩度]
彩度.jpg
レッド系、イエロー系、グリーン系の色を調整します。赤、黄色を強めにし、緑は明るめすると、ミニチュアのパーツぽくなります。
043004.jpg
最後はトーンカーブで白色を強調。
[イメージ]→[色調補正]→[トーンカーブ]
トーンカーブ.jpg
スポイドの「画像内でサンプルして白色点を設定」を使い
画像内の白色に近いグレーを選択。今回は、中央の屋根部分をチョイス。
何度も場所を変えて選択可能ですので全体の雰囲気を確認しながら調整して下さい。
043005.jpg
よりオモチャっぽくなりました。
以上で完成です。
SNSやブログなど、個性的なアピールとして活用してみてはいかがですか?

2015年4月29日(水)
改行タグについて

基本的にHTMLを組む時はAdobe Dreamweaverを使います。
そのとき、改行に関しては<br><br/><br />と三種類の入力ができます。
スラッシュを入れるか、スラッシュの前に半角スペースを入れるか、という違いです。
Dreamweaverは改行タグを基本的に<br />としているようで、<br>と入力したら<br />に変換されます。(後述しますが、環境設定で決めるところがあります)
<br/>はその限りではないようです。
たいていのブラウザでは、<br><br/><br />のどれも問題なく改行として扱われます。
br01.png
改行タグの歴史をひもとくと、古いHTMLでは<br>と書くのに対し、xhtmlでは<br />と書くのが正式な記述となっています。
Dreamweaverが改行タグを<br />とするのは、環境設定のカテゴリ「新規ドキュメント」で初期設定ドキュメントタイプ(DTD)を「XHTML 1.0」より新しくしている場合の動作です。
<br/>に関しては、その程度なら許容するというブラウザ側の思いやりみたいです。

<br/>が問題になるのは、WordPressです。
WordPressでHTMLを記述するとき、<br/>で改行すると、<br /><br />と改行二つ分の扱いになってしまうのです。
wpbr02.png
当然<br>または<br />では、改行一つ分になります。
MovableTypeでは、このような問題は見られませんでした。

たかが半角スペースと侮ってはいけません。正しい改行タグの記述でトラブルを防ぎましょう。

2015年4月28日(火)
Illustratorでパターンテクスチャを使って見出しを作る

Illustratorで見出しを作るときにこれは使えると思った、
パターンテクスチャを10個紹介していきます。

1.斜め線
斜め線を使った見出し

2.ひし形
ひし形を使った見出し

3.チェック
チェックを使った見出し

4.グリッド
グリッドを使った見出し

5.ダイヤ
ダイヤを使った見出し

6.ざらざら
ざらざらを使った見出し

7.和紙
和紙を使った見出し

8.革
革を使った見出し

9.不思議な模様
不思議な模様を使った見出し

以上、Illustratorでパターンテクスチャを使って作った見出し10選でした。
まだまだこの他にも沢山あるので、次回また紹介していきたいと思います。

2015年4月27日(月)
角が丸い四角の下側だけ真っ直ぐにする方法

イラストレーターで角が丸い四角を描くのは簡単です。
角を丸くするのは「効果」の「スタイライズ」に「角を丸くする」を選べば
パスを変形させずに角を丸くすることができます。

角丸の四角

しかし、これだと全ての角が丸くなってしまうので、
下のような枠を作る場合は少し不便です。

上だけ角丸の四角い枠

そこで一瞬で下側だけ真っ直ぐにする方法をお教えします。
それは、

「下のパスを白矢印で消す」だけです。

下のパスを消した四角

これで下側が真っ直ぐになります。

下が真っ直ぐの四角

「オブジェクト」の「アピアランスを分割」でパスを角丸にして
下を真っ直ぐにすることも可能ですが、
メニュー表示
パスを角丸にした四角
この方法だと四角を変形させる時に角丸が変形してしまうので、
おすすめしません。
角丸が変形した四角

それにまた下を角丸にしたい場合、パスを消す方法だと
パスを繋げれば簡単に角丸を復活することができます。

下がまっすぐの四角

変形も簡単ですし、こちらで作業する方をおすすめします。

2015年4月24日(金)
Photoshopで基準点を変える

Photoshopで画像のサイズを変える時、
基本的に基準は中央になっているので
基準点
サイズ変更後
このように中心を基準にサイズが変わってしまいます。

そこで基準点を
基準点
画像のように左上に設定することで
dd05.png
画像のように左上基準にすることができます。
画像のサイズによって基準点を変えることで作業効率の向上ができると思います。

2015年4月23日(木)
インターネットエクスプローラーのブラウザチェック方法

ホームページの表示をする時、IEはバージョンの違いでレイアウトが崩れたり、スライドなどの効果が動作しないことがあります。

最新バージョンはIE11ですが、それ以前のバージョンの利用者もまだ多いため各バージョンで正しくホームページが表示されているか確認する必要があります。


今回は、IE11で他のバージョンの表示結果を確認する方法をご紹介します。


確認したいページの「ツール」-「開発者ツール」を選択します。
(またはキーボードのF12キーを押下)
02.jpg


右上のバージョン(Edge)を切り替えると、そのバージョンでの表示結果を確認できます。
03.jpg

特別なソフトを入れなくても簡単に作業できるのでとても便利な機能です。
是非お試しください。

2015年4月22日(水)
元のページから新しいページへリダイレクトする方法

ホームページを運営していると、メンテナンスでサイトを休止したい時や、新しいホームページへ移転したい場合があります。このようなときに役立つのが、元のページへのアクセスを新しいページに自動転送する「リダイレクト」です。
リダイレクトには、

・各ページにリダイレクトのmetaタグを入れる
・.htaccessを使う

という大きく分けて二つの方法があります。今回は私が使用した「.htaccessを使う」という方法をご紹介します。まず.htaccessを開き、

RewriteEngine on
RewriteCond %{REQUEST_URI} !(^/$)
RewriteRule ^(.*)$ / [R=301,L]

を記入します。
b_4.jpg
これでページを確認したところ、画像とCSSが効いておらず、文字が詰め詰めでただ並んだだけの状態になってしまいました・・・。

そこで、一部の画像とCSSも反映させるために

RewriteEngine on
RewriteCond %{REQUEST_URI} !(^/$)
RewriteCond %{REQUEST_URI} !(^/img$)
RewriteCond %{REQUEST_URI} !(^/css$)
RewriteRule ^(.*)$ / [R=301,L]

と記入し直しました。
b_3.jpg
b_2.jpg
するとこのように画像とCSSが効き、見やすくなりました!


b_1.jpg
赤線で囲んだ部分のリンクは古いページですが、クリックするとどれも先ほど載せたサイト閉鎖のお知らせページに飛びました。これでリダイレクト成功です。

ホームページの休止や、お引っ越しの際に便利だと思いますので、是非この方法をお試しください。

2015年4月21日(火)
パスで書かれたイラストをIllustrator上で自由変形

イラスト素材サイトなどから、パスで作成されたイラストを持ってきてデザインをすることが多々あります、
jpgやpngなどの画像とは異なり、Illustrator上で変形しても
画像が荒れることなく、いちいちPhotoshopなどのソフトでサイズ変更する必要がなく大変重宝しています。

しかし、中には線がピクセルで指定されて作成されているものもあり
カーソルてちょっちょっとサイズの変更をすると、線も太くなってしまい
使えたものではなくなるものも中にはあります。
線が太くなる

そういう時は、「オブジェクト」→「透明部分を分割・統合」→そのまま「OK」を押すと、
線がそのまま図形のように分割され、リサイズが自由になります!

その分パスが多くなるのでデータは重くなる気はするのですが、
この機能はパスのイラストを使用する上で欠かせないので使用しています。

皆様も、困った時は是非使用してみてください。

2015年4月20日(月)
テキストを波型にする簡単な方法

普通にテキストを打つだけじゃ物足りない、なんてときに
簡単に波型の動きを出すことができる方法が便利です。目にすぐ付きやすいのでバナーなどにおすすめです

こちらの文字に動きをつけたいと思います。
テキストを波型にする1.jpg


まず、ペンツールで好きな波幅、長さの波線を作成します。
テキストを波型にする2.jpg

作成したら、文字ツールに切り替え、線の上をクリックするだけです!
テキストを波型にする3.jpg

あとはお好きな文章を打っていくと、
最初に作成した線に沿って文章が流れていきます!

テキストを波型にする4.jpg


ただ文字だけでなく、リボンのオブジェクトの上などに使用したりなどオブジェクトと合わせて使ったりすると
柔らかい雰囲気が簡単に出せます。
もっと雰囲気を出したい方はフォントを変えたりするとより効果的だと思います。

是非お試しください。

2015年4月17日(金)
Illustratorで図形の小数点を消す方法

Illustratorで画像や図形を配置すると、サイズや軸の数値に小数が入ってしまう事があります。
少数が残ってしまうと、コーディングの時に、綺麗に書き出せないため、
整数にする必要があります。
ほとんどの場合は、手打ちで少数を消して整数にできるのですが、
状況によって少数が残ってしまう場合があります。
小数点付き画像
一見、普通の見出しですが、よく見ると...
小数点付き
小数点が残ってしまっています。
手打ちで整数にしようとするのですが、元にもどってしまいます。

実は、四角形の外線に問題がありました。
20150417_3.jpg
線ダイアログの「線の位置」をご覧ください。
デフォルトでは「線を中央に揃える」になっています。

「線を内側に揃える」か「線を外側に揃える」にします。
20150417_4.jpg
これで整数に変える事が出来ました。

コーディングを含めたデータをIllustratorで作るときは
整数にするように出来るだけ心がけましょう!

2015年4月16日(木)
htmlコーディングするなら入れたいGoogleChromeの拡張機能を厳選3種!

ブラウザ「GoogleChrome」にはデフォルトでもかなり便利な機能が付いていますが、
それ以外にも無料で使う事ができる便利な機能が沢山あります。


そこで日頃ホームページの更新やhtmlコーディングをしている中で、
この機能は外せない!と思ったGoogleChromeの拡張機能を3つ厳選してご紹介します。


ColorPick Eyedropper

ColorPick Eyedropperの使用例1

ColorPick Eyedropperの使用例2

ホームページで使われている色をスポイトで抽出して調べられます。
「このサイトのここの色を使いたい!」と思ったらColorPickの出番です。
1pxの表示でもきちんと色を拾ってくれるスポイトは優れものです。
コーダーだけでなくデザイナーも重宝しているのではないかと思います。


MeasureIt

MeasureItの使用例

ブラウザ上で定規が使えます。
サイト上の特定の場所の横幅を知りたい、高さを知りたい時に役に立ちます。
こちらもコーダーのみならずデザイナーにとっても非常に便利な筈。


IE Tab

IE Tabの使用例

Internet Explorerを立ち上げずにInternet Explorerでの表示を確認できます。
Internet Explorerを起動するのが面倒な時、とりあえずInternet Explorerでの
表示が問題無いか手軽にチェックしたい時に使えると思います。


他にもChromeウェブストアには無料で使えるアドオンや拡張機能が沢山あるので、
ホームページの作成用途に合わせた機能を導入していくと楽しいですよ。

2015年4月15日(水)
普段はまず使わないが、いざというときに使えるcssのセレクタ

フォントの大きさや背景画像など、様々な要素を指定するcssですが、中には「実際に使う機会はまずないのでは?」と思うものもあります。
それは「*」。全要素を指定する、というセレクタです。

今から紹介するcssの使い方は、緊急事態のものだったので、あまりスマートではないと感じています。
スマートでない全称cssの使い方
cssの一部を抜粋しました。前提として画像・背景画像のサイズがピクセル単位で指定されています。
ここで、ブラウザ幅が980ピクセル以下になったとき、背景画像を全て縮小したかったので、
「全てのセレクタで、幅や高さのピクセル指定をなかったことにして、背景画像の大きさを60%縮小する」「さらにimportantをつけて最優先にする」という記述をしました。

後にリセットcssと呼ばれる、様々な値を基本に戻す際のスマートな記述を知りました。
スマートな全称cssの使い方
このような記述を目的に応じて変更させた方が、スマートだと思いました。

2015年4月14日(火)
メリハリをつけて見やすいデザインにする方法

今回は、「メリハリをつけて見やすいデザインにする方法」について考えてみました。


【目次】
1.文字の大きさと色をかえて目立たせる
2.フォントの種類をかえて単調さをなくす
3.見出しをつけてわかりやすく
4.写真でイメージしやすくする
5.色を統一する


すべて基本的なところですが、最近意識し始めたことについてあげてみました。


1.文字の大きさと色をかえて目立たせる

文字の大きさと色をかえない

文字の大きさと色をかえた

いかがでしょうか?
強調したい部分を大きくして、赤色にかえるだけでメリハリがつき見やすくなったと思います。


2.フォントの種類をかえて単調さをなくす

フォントの種類がすべて同じ

フォントの種類をかえている

フォントの種類をかえるだけでも単調さがなくなり、リズムよく読み進めていけると思います。
文字の太さをかえるだけでもメリハリがでて読みやすくなりますよね。


3.見出しをつけてわかりやすく

見出しをつけていない

見出しをつける

これは極端な例ですが、見出しをつけるだけで断然見やすくなります。
大見出しは大きく、小見出しは小さくが基本ですよね。
あと見出しのデザインを変えるのも大切になります。


4.写真でイメージしやすくする

写真がない場合

写真があるとわかりやすい

写真があるのとないのとでも伝わりやすさが全然違ってきます。
写真を載せるだけでも見た人がイメージしやすくなり読みやすくなりますよね。


5.色を統一する

色が統一できていない

色が統一できている

色を多く使いすぎるとデザインがおかしくなってしまいます。
上の例は極端ですが、色はあまり多用せずに少ない色で統一したほうがきれいなデザインになります。
場合によるかもしれませんが基本的に3色程度でいいのではないでしょうか。


以上「メリハリをつけて見やすいデザインにする方法」について5つあげてみました。
この他にもまだまだたくさんあると思いますが、
日々学びながらここで紹介していこうと思います。

2015年4月13日(月)
同じような写真をLightroomで簡単に補正する方法

Lightroomで画像補正を行う場合、同じ雰囲気の写真を何枚も一つひとつ補正するのは大変です。

そこで便利なのが、一つだけ画像を補正して設定をコピーして貼り付ける方法です。

似た雰囲気の写真

まず、片方の写真を補正します。
それからその設定をコピーします。

設定のコピーを押す

設定のウィンドウ

コピーしたい項目をチェックします。
分からない場合は全てにチェックを入れた状態で大丈夫です。

次に設定を反映させたい写真を選んでペーストをします。

設定のペーストを押す

あとは微調整をすればOKです。

設定を適用前と適用後の写真

大量に同じような写真を補正する場合はこの方法で行うと便利です。

2015年4月10日(金)
画像を軽量化してホームページの読み込みスピードをアップ

ホームページを見ている時、画像がたくさん使われているページがなかなか表示されない...という経験はありませんか?どんなに素晴らしい内容でも読み込みが遅いと、お客様に内容を見てもらえない可能性があります。
ホームページの読み込みスピードをアップする対策として、「画像のサイズを軽量化する」方法があります。
今回は「BTJ32」を使用した画像軽量化の方法ご紹介します。

【BTJ32の特徴】
・exeを起動するだけで簡単に使用できる
・JPGの軽量化に特化している
・1枚1枚作業を行う必要があるが、
 画像が劣化していないか見比べながら作業ができる
BTJ32使用方法1 自動更新にチェックBTJ32.exeを起動し、軽量化したいファイルを開きます。
「自動更新」にチェックがついていることを確認します。
自動更新にチェックをつけることで、元画像(左)と変更後画像(右)を見比べながら作業することができます。
BTJ32使用方法2 品質の値を変更品質の値(0~100%)を下げるほど、画像が軽量化されます。
ファイルサイズは画面下の画像情報から確認できます。
例えば、品質を10%と極端に下げてみます。
ファイルサイズは 131.38KB → 5.93KB と劇的に小さくなりました。
しかし、右側の変更後画像を見ると画像が汚くなってしまっています。
これでは、せっかくの写真が台無しです。
BTJ32使用方法3 品質の値を変更品質を90%にすると、画像の劣化がなくなりファイルサイズは 131.38KB →30.91KB に軽量化されました。

このように、元画像と変換後の画像を見比べながら作業を行えるのがBTJ32のメリットです。
見た目は変わらず、ホームページの読み込みのスピードがアップします。
ぜひお試し下さい。

2015年4月 9日(木)
コメントアウトでソースを見やすく綺麗に。

HTMLでページを構成する際に、ただコードを並べるだけではどこに何があるかわからなくなりますよね。
そこで使うのが、コメントとして無効化する「コメントアウト」と呼ばれるものです。
Webページには全く反映されないので、ページ構成をわかりやすくするためにとても便利です。

記述法 : <!- ここにコメントアウトしたい内容を書く ->

例えば、どこからどこまでがブログ部分なのかをわかりやすくするため、コメントアウトします。
コメントアウト.png

赤線部がコメントアウトした箇所です。
このように記述することによってソースが見やすく、きれいになります。
後にコードなどを書き足しする際、必ず役に立つと思いますのでぜひご活用ください!

2015年4月 8日(水)
Photoshopで簡単にパノラマ写真を作る方法

PhotoshopにCSから追加されたPhotomerge(フォトマージ)という機能をご存知ですか?
これは複数枚の写真を繋ぎ合わせてパノラマ写真を自動的に生成することができる機能なんです。

ただCS、CS2の頃はエラーが多く、まだまだ使い勝手の悪いものでした。
それがCS4以降では格段に進歩して使いやすくなったので、ご紹介したいと思います。

まずは、繋ぎ合わせたい複数の写真をご用意下さい。
この時、注意したいのが結合箇所に充分な重複部分がある写真をお使い下さい。
今回は少しオーバーですが、15%~40%の重複があれば良いと思います。
では、この3枚の写真を使ってパノラマ写真を作っていきます。
コマ切.jpg
写真が用意できたら、Photoshopを起動して
1.[ファイル]メニューの[自動処理]→[Photomerge...]をクリック
04.jpg
2.[Photomerge] を開いたら、レイアウトの種類を選択し、[参照]をクリックして、
合成したいファイルを選択します。
今回は「自動設定」にしています。
撮った写真のアングル等によっても変わってきますので、
いくつか試しながら写真にあった設定を探してみるのもいいですね。
05.jpgのサムネイル画像
3.[OK]をクリックすると、合成が自動スタートします。
(ファイルのサイズや数によっては、処理に時間がかかることがあります)
「一部の画像を自動的に整列できませんでした」というエラーが出る場合、
各画像の結合部分に充分な重複部分がない可能性があります。撮影の際に、
必ず隣の画像と重なる部分を確保しておくようにすると確実です。
パノラマ2.jpgレイヤー.jpg
4.合成が終了した後は、それぞれのレイヤーごとにレイヤーマスクがかかっていますので
必要に応じて結合できます。
上下や左右の端に透過の部分がありますが、不要な部分は
「切り抜きツール」などでカットしてください。
パノラマ1.jpg
これで完成です。

ホームページ内での眺望写真や店内写真など、広く、詳しくご紹介したい時などに
この機能を活用してみてはいかがでしょう。

2015年4月 7日(火)
Chromeでウェブサイトを印刷する

「ホームページって印刷できないの!?」とお客様にしばし聞かれることがあります。
とても便利に簡単に印刷ができるのです!ご紹介します。

まず、印刷したいページ上で【メニュー】→【印刷】と進むか、
マウスの右クリックで【印刷】を選びます。

するとこのような画面になるかもしれません。
印刷起動画面

全部印刷できないじゃないの!と思うことと存じますが、
このオプションの「背景のグラフィック」にチェックを入れるだけで、全部綺麗に表示されるようになります!
オプションを編集

また、これが便利なのがもう一つあり、なんとそのままpdfにも保存できるのです!!
PDFに保存

とても便利ですので、印刷でお困りの場合は、プラグインなどいれなくても柔軟に
実現することができますので是非ご活用ください!

2015年4月 6日(月)
写真に枠をつけて目立たせる方法

せっかくきれいにうつった写真でも、素材として文字と並べたら
なんだか物足りない・・・ってときに、おすすめの簡単な方法があります。

まずは写真と同じ大きさの四角をかきます。
この時点ではまだ同じ大きさで大丈夫です。
写真に枠をつける.jpg

写真より下に四角を重ね、ここで写真に合わせて幅をつくり、
枠を作ります。
写真に枠をつける2.jpg

このままだと色と背景が同化してしまい、分かりにくいですので
ドロップシャドウで背景と差をつけます。
写真に枠をつける3.jpg

これでおわりです。文字に負けないような写真になりました。
写真に枠をつける4.jpg

2015年4月 3日(金)
Illustratorで影を付ける方法

Illustratorでは、ドロップシャドウを使って簡単に影を付けることが出来ます。
しかし、多用し過ぎるとワンパターンな内容になってしまいます。
そこで今回は、ドロップシャドウを使わずに簡単に影を作る方法をご紹介します。
丸い画像
まず、横長の丸を描きます。
ガウスぼかし
ガウスぼかしダイアログ"
次に「ガウスぼかし」をかけます。
数値は適時変えてみてください。
今回は、60pixelにします。
ぼかしのかかった丸
ぼかしがかかりました。
クリッピングマスク前の画像
四角形を少し下に描き、クリッピングマスクをかけます。
影付き完成
ピシッとしたかんじの影が出来ました!
図形に影付き
見出しなどの下に配置すると、ドロップシャドウとはまた違った影を付けることが出来ます。
ドロップシャドウに飽きたときにはぜひ使ってみてください!

2015年4月 2日(木)
Movable Typeでカテゴリーを限定してコンテンツを表示させる方法色々

Movable Typeでは記事にカテゴリーを付けて様々な条件を指定してコンテンツを表示させることができます。
今回は、その中でも特に覚えておくと便利な方法をご紹介致します。

今回は以下のようなカテゴリーを用意しているという事にします。
MTのカテゴリ作成例 メインになる大カテゴリーに「ブログ」と「お知らせ」を作成し、「ブログ」カテゴリーの中に
更に「店長ブログ」「スタッフ太郎」「スタッフ花子」というサブカテゴリーを作成します。


大カテゴリに属している記事を表示する

まずはMovable Typeを始めて早い内からお世話になるであろうこの方法。

特定のカテゴリーに属している記事だけを表示させたページを作りたい!ということがよくあります。

サイトのトップページにお知らせ欄を作成し、「お知らせ」カテゴリーを付けた新着記事を表示させる
という方法もよく見かけると思います。

そこで、「お知らせ」カテゴリーを設定している記事だけを
出力する場合は、以下のように記述すればOKです。

<MTEntries category="お知らせ"> この中に表示させたいコンテンツを記述 </MTEntries>



大カテゴリーの指定が無いサブカテゴリーの記事を表示する

次に、とりあえず大カテゴリ「ブログ」の中にあるサブカテゴリ
「店長ブログ」「スタッフ太郎」「スタッフ花子」の記事を全部表示させたいとします。

ちなみに「店長ブログ」「スタッフ太郎」「スタッフ花子」の記事は
大カテゴリ「ブログ」は選択されていない状態で投稿されているとします。

この場合、大カテゴリに所属するサブカテゴリーの記事を全部表示させる、という以下の方法を使います。

<MTEntriesWithSubCategories category="ブログ">
この中に表示させたいコンテンツを記述
</MTEntriesWithSubCategories>


これで、「ブログ」カテゴリーの中にある「店長ブログ」「スタッフ太郎」「スタッフ花子」の記事
全てを表示させることができます。

この方法だと、今後「ブログ」カテゴリの中に「スタッフ一郎」「スタッフ佳子」など
サブカテゴリが増えた時も便利です。


「ブログ」を表示させたいなら「店長ブログ」を投稿する時に大カテゴリ「ブログ」も一緒に選択して

<MTEntries category="ブログ"> この中に表示させたいコンテンツを記述 </MTEntries>


の記述すれば良いでしょ。という方法もありますが、
ブログを投稿する度に複数のカテゴリを選択するのはちょっと手間と感じる場合は
MTEntriesWithSubCategoriesでの絞込がお勧めです。


特定のサブカテゴリーに属している記事だけを表示する

最後に、サブカテゴリー「店長ブログ」の記事だけを表示させたいとします。

この場合、大カテゴリ「ブログ」内にあるサブカテゴリ「店長ブログ」を表示するという
指定になりますので、コードは以下のとおり記述します。

<MTEntriesWithSubCategories category="ブログ/店長ブログ">
この中に表示させたいコンテンツを記述
</MTEntriesWithSubCategories>


サブカテゴリーだと<MTEntries category="※カテゴリー※"></MTEntries>が使えないので、
この記述を覚えていると大変便利です!


Movable Typeのカテゴリーを駆使してサイトを作成したい方は、是非お試しください。

2015年4月 1日(水)
イラストレーターで複数ページのpdfを保存する方法

前回、私が書いた記事において、Illustratorは1ページのpdf保存しかできないと書いてしまいました。
しかしその後、複数ページを保存する方法を知る機会がありました。
今回は、後から知った知識を合わせて、Illustratorで複数ページのpdfファイルを保存する方法をまとめておきます。

1.最初から作る場合
A4サイズ7ページのpdfファイルを作成します。
aiから複数ページpdfを作る途中
ここでは、左から右に1~7ページでデータを作っています。
そして複数設定したアートボードの番号が、ページ数と同じになるようにしておきます。
この状態で「別名で保存」→「ファイルの種類:PDF」→「PDFを保存」とすれば、pdfファイルができます。
データの軽量化に関しては後ほど説明します。

2.pdfファイルを修正する場合前回の記事で説明しているので、さらっと書きます)
A4サイズ7ページのpdfファイルを想定します。
修正ページを開いて保存します(これは単数ページの保存になります)
修正の際に高解像度画像を配置した場合、データが大きくなるので、画像を圧縮します(後ほど説明します)

修正しなかったページに関しては、そのページを開いて単数ページとして保存します。
この場合、結果7つのpdfファイルができたことになります。
あとはpdf結合で一つのpdfにすれば終了です。

3.データの軽量化について
保存の際、オプションでは最低でも「Illustratorの編集機能を保持」チェックを外します。
aitopdf-opt1.png
もうひとつ、データの大きくなる原因が高解像度の画像になります。
画像の圧縮は用途に応じてやるため、絶対的な正解はありません。
ここでは、私の作業を前提にして説明します。
私の作業ではスクリーンショットを使うため、画像の細部がつぶれると何を書いているかわからなくなる危険が常にあります。
「画像の拡大縮小」「JPEG圧縮」はこの場合使えません。

そこで、pdfを保存する際の圧縮設定をいろいろ試してみました。
まずスクリーンショットは解像度72dpiから300dpiに変更して配置。photoshopでは「画像解像度」で「画像の再サンプル」チェックをはずし、解像度に300pixel/inchと入力します。
reso.png
データを作成する時は一切拡大縮小をせず、ファイルも非圧縮形式(psd)形式にしておきます。
compressop1.png
そしてpdf保存するとき、左側のメニューから圧縮を選びます。
このファイルではカラー画像しか使っていないので、選ぶところはカラー画像になります。
compressop2.png
これが、いろいろ試して使えると思ったスクリーンショット向け圧縮設定です。
ppiに関しては、解像度がこのサイズより大きかったら150まで縮小する設定です。300→150という、きりのよさもポイントです。圧縮に関しては、現状、JPEG2000形式(自動とつくものもある)が最もよいらしいです。これを選ぶときはAcrobat6(PDF 1.5)以上の形式を選ぶ必要があります。画質は最高を選んでますが、圧縮なしでも別に変わりませんでした(スクリーンショットに限るかもしれません)
タイルサイズはデフォルトの256で充分です。もっとも細かい128でも大した差は出ませんでした。
150dpi400per.png
左が圧縮してない解像度300dpi「ダウンサンプルしない」pdf:容量9.60MB、
右が圧縮した解像度150dpi「バイキュービック法、JPEG2000」pdf:容量3.44MB
JPEG特有のブロックノイズがなく、1/3くらいまで圧縮できて、遠目には文字が判別できる程度だからなかなかのものと考えています。
これよりよい設定があれば、また記事にしたいです。

簡単無料お見積もり

お問合せ内容
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • 無理なく持続する経営がしたい
  • 現状を維持しながら息の長い経営をしたい
  • リスクを回避するための線引きをしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
  • 5~10万で自分でテンプレート形式で作る方法に興味がある
内容