冒頭でも述べました通り、MTのカテゴリの作り方はとても簡単です。ブログ編集ページから「記事→カテゴリ」と進んで、入力欄にカテゴリ名を入力するだけで新しいカテゴリを作ることができます。また、作ったカテゴリの名前の右に表示されている「＋」をクリックすることで、そのカテゴリの下に子カテゴリを作ることもできます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/77b804200351464aa40c41493afe4b0d/img_cat01_03.png" alt="" width="420" height="231"></figure>さらに、それぞれのカテゴリをドラッグ＆ドロップすることで、親子関係や表示の先後を変更することも容易です。カテゴリの作り方はこれだけです。驚くほど簡単です。

MTのカテゴリの作り方

しかし上記のようにとんとん拍子で作ったカテゴリを使っていざ何かをしようとすると、MTタグやそのリファレンスに頻繁に出現する様々なカテゴリ用語の壁が高々と、我々初心者の前に立ちはだかるのです。 プライマリカテゴリにメインカテゴリにサブカテゴリ、トップレベルカテゴリ等々……調べれば調べるほど、本当に訳が分からなくなってきました。そこでまずは言葉の定義から。<h3 style="text-align: start" id="h1eb489bbf5">いろいろなMTカテゴリ用語の意味</h3><ul><li>プライマリカテゴリ、メインカテゴリ(primaryCategory)「★」のついているカテゴリを指します。 記事編集ページで「★catL-catM-catS」と表示されている場合、「catS」がその記事のプライマリカテゴリになります。</li><li>トップレベルカテゴリ(topLevelCategory)一番上の階層のカテゴリを指します。 記事編集ページで「★catL-catM-catS」と表示されている場合、「catL」がその記事のトップレベルカテゴリになります。</li></ul>絶対的な概念である上の2つに対して、下記の2つは相対的な名称になります。<ul><li>親カテゴリ(parentCategory)現在のカテゴリが属する、より上の階層のカテゴリを指します。 「★catL-catM-catS」となっていた場合、「catS」の親カテゴリは「catL」と「catM」、「catM」の親カテゴリは「catL」となります。</li><li>サブカテゴリ、子カテゴリ(subCategory)現在のカテゴリが属する、より上の階層のカテゴリを指します。 「★catL-catM-catS」となっていた場合、「catL」のサブカテゴリは「catM」と「catS」、「catM」のサブカテゴリは「catS」となります。</li></ul>メインカテゴリとサブカテゴリというと、どうも対立する概念のように聞こえますが実は違っていて、サブカテゴリがメインカテゴリであることもある、というより、カテゴリを階層状にした場合ほとんどがそうである、ということに注意する必要があります。

MTのカテゴリの使い方

カテゴリ別の記事リストを作るのも、カテゴリの階層が1つの場合は簡単です。記事をループさせるのに使う<a href="http://www.movabletype.jp/documentation/appendices/tags/entries.html" target="_blank" rel="noopener noreferrer nofollow">&lt;MTEntries&gt;</a>というタグのモディファイアである「category(またはcategories)」を用いて、<pre><code>&lt;MTEntries　category=&quot;catL&quot;&gt;
	&lt;ループする中身&gt;
&lt;/MTEntries&gt;</code></pre>とするだけで「catL」に含まれる記事のみをループさせることができます。しかし、カテゴリに階層がある場合、上記のような記述をしても「★catL-catS」というカテゴリに属する記事はそのループ内では表示されません。「なぜだ!?」とリファレンスを見ると、“このモディファイアでは、【中略】記事に設定したサブカテゴリもフィルタリングの対象になります。”との文字。出ました、サブカテゴリです。この場合「catS」は記事のメインカテゴリですが、フィルタに用いている「catL」にとってはサブカテゴリです。したがって、「catL」のサブカテゴリである「catS」をメインカテゴリとする記事は、このフィルターにかかって表示されないことになるのです。その問題を解消するために便利なのが、「include_subcategories」というモディファイアです。<pre><code>&lt;MTEntries　category=&quot;catL&quot; include_subcategories＝&quot;1&quot;&gt;
	&lt;ループする中身&gt;
&lt;/MTEntries&gt;</code></pre>このように設定することで、「catL」に該当する記事を、そのサブカテゴリをメインカテゴリとする記事も含めて一覧で表示させられるようになります。 (include_subcategories＝”0″と書くと「サブカテゴリは含めない」の意味です。)<h3 style="text-align: start" id="h4406830ddc">カテゴリによる条件分岐方法いろいろ</h3>&lt;MTEntries&gt;の「category」モディファイアには、直接1つのカテゴリを指定する以外にも、様々なフィルタリング方法があります。そこでそれらについても、よく使うものを中心にご紹介させていただこうと思います。<pre><code>&lt;MTEntries categories=&quot;catL/catM/catS&quot;&gt;</code></pre>このようにスラッシュで区切ることで、「catLの中のcatMの中のcatS」というように絞り込んでいくことができます。&lt;mt:Entries category=”catS”&gt;とした場合との違いは、他のカテゴリグループの中にある同じ名称のカテゴリの記事を排除できることです。また、「AND」「OR」「()」を使うと、下記のような分岐も可能になります。<pre><code>&lt;MTEntries categories=&quot;catA AND catB&quot;&gt;</code></pre>(catAとcatB両方に属する記事)<pre><code>&lt;MTEntries categories=&quot;catA OR catB&quot;&gt;</code></pre>(catAかcatBに属する記事)<pre><code>&lt;MTEntries categories=&quot;catA AND (catB OR catC)&quot;&gt;</code></pre>(catAに属し、かつcatBかcatCに属する記事)そして、カテゴリ名の前に「NOT」をつけると「そのカテゴリ以外」という分岐になります。<pre><code>&lt;MTEntries categories=&quot;NOT catA AND NOT catB&quot;&gt;</code></pre>(catAにもcatBにも属さない記事)<pre><code>&lt;MTEntries categories=&quot;catA AND NOT catB&quot;&gt;</code></pre>(catAに属する記事の中でcatBには属さない記事)

カテゴリ別記事リストの作り方

ここまで、カテゴリによる条件分岐の方法をご紹介してまいりましたが、あまり欲張ってカテゴリを重層的にしすぎると、条件分岐の設定が煩雑になりがちです。 親-子の2階層だけならまだしも、親-子-孫など、3階層以上になりますと、それぞれに親カテゴリやサブカテゴリが複数存在する状態になり、無用な混乱を招きかねません。そこで最後に、カテゴリではなくチェックボックスを使って行う条件分岐の方法についても紹介させていただこうと思います。カスタムフィールドとして設置できるチェックボックスは、そのon/offで条件判定をすることができるのです。例えば、 「チェーン展開している店舗の中で駐車場がある店舗の紹介記事のみを一覧表示させたい」 などという場合、「has_parking」というテンプレートタグ名で記事投稿画面にチェックボックスを設置し、<a href="http://www.movabletype.jp/documentation/appendices/tags/if.html" target="_blank" rel="noopener noreferrer nofollow">&lt;MTIf&gt;</a>を用いて、下記のように記述します。<pre><code>&lt;MTEntries&gt;
	&lt;MTIf tag=&quot;has_parking&quot;&gt;
		&lt;ループする中身&gt;
	&lt;/MTIf&gt;
&lt;/MTEntries&gt;</code></pre>こうすることで「has_parking」にチェックが入っている、「駐車場がある店舗紹介記事」のみをループさせることが可能になります。チェックボックスによる条件分岐のいいところは、任意にon/offを切り替えられることです。チェックボックスの入った記事のループで表示させるのをやめたいときは、ただそのチェックボックスのチェックを外すだけでいいのです。 この性質を活かすと「新旧を問わず任意の3記事をTOPページに表示させたい」という場合などにも使用できて便利なので、カテゴリと合わせて上手く活用してみてください。

おまけ：チェックボックスによる記事の出し分け方

いかがでしたでしょうか。私の場合、作業が終わった後も、「一体あれは何だったのだろう」と、もやもやしたままだったのですが、今回こうしてまとめてみて、私自身も少しMTのカテゴリに対する理解が深まったように感じています。 この記事を読んでくださった皆さまにとっても同様であれば、これ、幸いにございます。

最後に

【MovableType6】初心者にはわかりにくかった、MTのカテゴリのこと。

ドロップレットとは、デスクトップなどのディスク上に「ドロップレットアイコン」を作成できる機能です。 ドロップレットアイコンには自由なアクションを1つ設定することができ、画像ファイルやフォルダーをそこへドラッグ＆ドロップするだけで、そのアクションが実行できるようになります。1～10個くらいのドキュメントにアクションを適応したいときに最適です。

ドロップレットとは？

バッチ処理とは、特定のアクションを指定したファイルごとに自動的に適応してくれる機能です。 ドロップレットと違い、Photoshop上にて実行しなければなりませんが、10個以上の大量のデータに処理を行いたい時はバッチ処理を使いましょう。

バッチ処理とは？

今回は、下のPSDデータをドロップレットを使ってJPEG保存したいと思います。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/ba45805ea08f4547bbb08e52281475d5/00.jpg" alt="" width="620" height="455"></figure><h3 id="hcaba0b185b">STEP1:アクションを作成</h3>まず、JPEG保存するアクションを作成します。①ウィンドウ＞アクションを選択し、新規アクションダイアログを立ち上げます。 ②アクション名、セットを設定します。今回はアクション名を「JPEG保存」とし、セット名に「オリジナル」を選択します。アクション名とセットの設定ができたら、「記録」をクリックします。 ※セットをオリジナルにするには、ウィンドウ＞アクション＞新規セットを作成で、アクションセット名を「オリジナル」に設定し、フォルダを作成します。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d0a69ad695844ae4b769d4d1c62c3ead/1.jpg" alt="" width="620" height="400"></figure>③アクションパネル下部のボタンが赤くなり「記録状態」であることを確認します。ここから、アクションの録画スタートです。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/b932391664264f5b9f73a404af201a95/2.jpg" alt="" width="620" height="340"></figure>④ファイル＞開くを選択し、デザインデータを１つ開きます。 ⑤ファイル＞別名で保存で、ファイル名は変更せず、ファイルの種類でJPEGを選び「保存」をクリックします。 ⑥ファイル＞閉じるでファイルを閉じたら、アクションパネル下部の「再生/記録を停止」ボタンをクリックします。これで、アクションの登録が完成しました。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/8afe70fc2bd54979977b7db24936aec4/3.jpg" alt="" width="620" height="340"></figure><h3 id="h64877671a4">STEP2:ドロップレットを作成</h3>アクションが完成したら、ドロップレットを作成しましょう。①ドロップレットを作成ファイル＞自動処理＞ドロップレットを作成を選択します。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d6e551bec33d4e44b6715820872a20e7/06.jpg" alt="" width="620" height="355"></figure>②ドロップレットを保存「選択」をクリックし、ドロップレットを保存する場所、ドロップ名を指定します。 今回は、保存場所をデスクトップに設定し、ドロップ名を「JPEG保存」としました。③実行セットを「オリジナル」、アクションを「JPEG保存」に設定し、「“開く”コマンドを無視」にチェックを入れます。④実行後「保存して閉じる」を選択し、「“別名で保存”コマンドを省略」にチェックを入れます。 設定ができたら、「OK」をクリックしてドロップレットアイコンの完成！<h3 id="h96f3d2a81c">STEP3:ドロップレットアイコンにPSDデータをドラッグ＆ドロップ</h3>デスクトップに「JPEG保存」のドロップレットアイコンがあるか確認したら、PSDファイルをドロップレットアイコンでJPEG保存してみましょう。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/08f20c236ae048789abb769112fc413c/07.jpg" alt="" width="180" height="185"></figure>①PSDファイルの入ったフォルダを、ドロップレットアイコンにドラッグ＆ドロップします。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/6f868cbaa1b841a18f961dfb77e01b72/09_2.jpg" alt="" width="620" height="275"></figure>②処理が終了したら、PSDファイルの入ったフォルダの中にJPEG保存されています。これで、ワンアクションで複数のPSDファイルをJPEG保存するアイコンの完成です！<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/55a77360d0a04f88b32700e50150c404/10.jpg" alt="" width="620" height="455"></figure>

ドロップレット機能を使ってみよう

今回は、PSDファイルのJPEG保存のドロップレットアイコンを作成しましたが、アクションの設定を変えれば、写真の画像サイズの変更と画質を調整してくれる画像処理のドロップレットアイコンなどを作る事ができます。みなさんも自分がよく使うアクションを見直して、オリジナルのドロップレットアイコンを作成してみてください！

ドロップレットでこんなこともできる！

たったワンアクション！　大量のPSDファイルを一気にJPEG保存する方法！

<h3 style="text-align: start" id="hcb5b322e7f">線路</h3>地図でよく使う「線路」、みなさんはどのように作りますか？<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/f94107ca030243ccabd5f9f301d0460a/senro-1.png" alt="" width="480" height="320"></figure>まずはペンツールで黒い線を引きます。つぎに、ウィンドウからアピアランスパネルを表示します。先ほどのパスを選択した状態で、パネル左下の「新規線を追加」をクリック。追加された線の色を白に変更し、線幅を変えます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/338dea164fa34a9ba30716a4454cd6d8/senro-2.png" alt="" width="480" height="320"></figure>追加した線をクリックすると、線パネルが表示されるので、「破線」にチェックを入れます。線分をお好みの長さに変えれば「線路」の完成です。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/c52411b7bcb14c4094d53b880bcc08e3/senro-3.png" alt="" width="480" height="320"></figure>作ったスタイルは保存することもできます。ウィンドウからグラフィックスタイルを選択し、右上のメニューから「新規グラフィックスタイル」をクリック。好きな名前を付けてOKを押すと、スタイルが保存されます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/7fc942ee1e9345d4b637228a7a05ef60/senro-4.png" alt="" width="480" height="320"></figure>あとは自由に線を引いてスタイルをあてれば、簡単に線路を作ることができます。 最初は少し面倒に感じられるかもしれませんが、1つの線（パス）で作られているため、長さや色を変えたり、曲線を追加したり、自由に形を変えることができます。<h3 style="text-align: start" id="hec2a566c00">袋文字</h3>地図でよく使う袋文字も、アピアランスで簡単に作ることができます。文字を配置し、アピアランスパネルで「新規線を追加」をクリック。このままでは、文字の上に線が乗っている状態のため、線の青色で文字がつぶれてしまいます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d986598df091494190eb5c2806456795/hukuro-1.png" alt="" width="480" height="320"></figure>線のレイヤーを選択し、文字のレイヤーの下に移動させると、袋文字を作ることができました。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/b69c6c840d9441b9a21ea801276b2e11/hukuro-2.png" alt="" width="480" height="320"></figure>これも元のオブジェクトはひとつのため、テキストを変更したり、文字サイズを変更しても袋文字のまま。テキストの修正も簡単に行うことができます。<h3 style="text-align: start" id="h8ba5c4e0d9">応用編</h3>これまでは線の追加だけを行いましたが、その他の属性を複数追加することもできます。さきほどの要領で袋文字を作成して「新規塗りを追加」をクリック。「塗り」のレイヤーを「線」レイヤーの下に移動します。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/ed35c418288d42d5a49034f0c490f61a/ouyou_1.png" alt="" width="480" height="320"></figure>塗りのレイヤーを選択し、「効果」＞「形状に変換」＞「角丸長方形」を選択します。 オプションで「値を追加」を選択し、幅、高さを指定します。角丸の半径も変えることができます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/be842387ffa94726a1fbca70467d73fa/ouyou_2.png" alt="" width="480" height="320"></figure>このままだと、文字が上にズレてしまっているため、調整します。 「効果」＞「パスの変形」＞「変形」を選択します。数値は目で見ながら、ちょうどいい位置に来るように調整します。（今回は垂直方向に-4px移動しました）<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/ef21131070c04f779eea441461dde493/ouyou_3.png" alt="" width="480" height="320"></figure>最後に色などを変更して完成です。これも元はひとつのオブジェクトのため、テキストの内容は自由に変えることができます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/48a24e962bf643da9452bd54be9b5e4c/ouyou_4.png" alt="" width="480" height="320"></figure>今回は地図を例に挙げましたが、その他の場面でもアピアランスはとても便利な機能です。元のオブジェクトを変えることなく作業が行えるため、あとから修正しやすいのが一番のメリットだと思います。すこしでも作業をラクにしたいと思ったときは、ぜひアピアランスを使ってみてください。 それではまた。

アピアランスに効果を追加する方法

【Illustrator】地図の作成などに便利なアピアランス機能

<h4 style="text-align: start" id="hb6509f48bf">結果</h4>基準：20px 範囲：18~24px<h4 style="text-align: start" id="h8b4a58d83a">サイト数の分布 </h4><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/442359e27ac64d38bdf012982326f81a/sp.jpg" alt="" width="315" height="512"></figure>※黄色いエリアは、サイト数が集中したエリアになります。 ※PSは、Photoshopでのサイズです。実際の2倍。タイトルはサイトによって大きさにバラツキが多いようです。サイトの雰囲気に合わせたタイトルが多い印象をうけました。

タイトルのフォントサイズについて

<h4 style="text-align: start" id="hb6509f48bf">結果</h4>基準：15px 範囲：14・15・16 px<h4 style="text-align: start" id="h2b64876b0f">サイト別の分布 </h4><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/5fdbcf5ebae84304bd59917e10d93fbf/38db5e4551f7923e81df3fd99ba5bf11.jpg" alt="" width="358" height="350"></figure>※黄色いエリアは、サイト数が集中したエリアになります。 ※PSは、Photoshopでのサイズです。実際の2倍。分かりやすく、3サイズに集中しました。デザイン性が高いサイトはフォントサイズは小さめ。ニュースサイトは可読性を重視して大きめなど。サイトによって使い分けれそうです

本文のフォントサイズについて

<h4 style="text-align: start" id="hb6509f48bf">結果</h4>基準：1.8 範囲：1.5～2.0<h4 style="text-align: start" id="h8b4a58d83a">サイト数の分布 </h4><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/dab84aa3112a4d32aeb5d6f5beb2df7b/5a9bd09641533fc11c0eb731d8371ea5.jpg" alt="" width="306" height="682"></figure>※黄色いエリアは、サイト数が集中したエリアになります。本文の行と行の間の数値になります。バラツキがはげしいですが、ＰＣ・ＳＰ同じ数値で指定されているサイトが多い印象でした。

行間（行送り line-height）のフォントサイズについて

今回、まとまったサイト量で調査できたので、目安となる基準が見えてきた気がします！ (自分で調べるのって大事ですね）下記は、調査データ・PSDスマホテンプレートです。デザイナーのお役に立てれば◆<a href="https://docs.google.com/spreadsheets/d/1ItP_mMQDUvdBKxvZrV-20I0cPSOSHFpiNts8RU29J28/edit?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">フォントサイズ調査スプレットシート</a> 記事で紹介していない調査結果・詳細が載っています。 本文より情報が濃いです（笑）是非覗いてみてくださいね！<a href="https://www.m-hand.co.jp/cms_s7GC9LpH/wp-content/uploads/2018/07/sp-template_01.zip" target="_blank" rel="noopener noreferrer nofollow">◆PSDテンプレート</a> フォント調査をベースに、テンプレートPSDを作成しました。見出し・本文のフォントサイズを平均サイズに合わせて作成しています。デザイン作成の効率アップに役立てば幸いです。(ウィンドウ幅：750px / バージョン：PhotoshopCC)<a href="https://www.pinterest.jp/uedapico/00_web-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3_sp/" target="_blank" rel="noopener noreferrer nofollow">◆スマホデザインまとめ</a> スマホデザインをピンタレストでまとめています。パーツ別にソートしているので、スマホのメニューやボタンまわりの大きさの参考に。あまり数がないですが今後少しづつ増やしていきますね。最後に。調査にご協力いただいたweb好きのお友達のみんな、ありがとう！ 今度会ったとき、モロゾフプリンおごります！

blog

related blogs

【MovableType6】初心者にはわかりにくかった、MTのカテゴリのこと。

たったワンアクション！　大量のPSDファイルを一気にJPEG保存する方法！

【Illustrator】地図の作成などに便利なアピアランス機能

スマホデザインのフォントサイズの基準は？目安となる国内サイトを大調査！

blog

related blogs

【MovableType6】初心者にはわかりにくかった、MTのカテゴリのこと。

たったワンアクション！ 大量のPSDファイルを一気にJPEG保存する方法！

【Illustrator】地図の作成などに便利なアピアランス機能

スマホデザインのフォントサイズの基準は？目安となる国内サイトを大調査！

たったワンアクション！　大量のPSDファイルを一気にJPEG保存する方法！