WordPressでお知らせや商品一覧などデフォルトで用意されている投稿とは別に、独立したコンテンツを投稿したい場合ってありますよね。
そんなときは、カスタム投稿タイプを使って投稿ページを増やしましょう！

①管理画面にカスタム投稿の追加

「functions.php」に下記のコードを追加します。

add_action( 'init', 'add_post_type' );
function add_post_type() {

  // 「ニュース」のカスタム投稿タイプ
  register_post_type(
    'news', /* 投稿タイプ名 */
    array(
      'labels' => array( // 投稿タイプの名前を定義
        'name'          => 'ニュース', // 管理画面などの表示名
        'singular_name' => 'ニュース', // 管理画面などの表示名（単数形）
        'add_new_item'  => '新規追加', // 新規追加画面の表示名
        'edit_item'     => '編集', // 編集画面の表示名
      ),
      'public'          => true, // trueで管理画面等に表示
      'hierarchical'    => true, // trueで階層型
      'has_archive'     => true, // trueでアーカイブページ（一覧表示）を持つ
      'supports' => array( // カスタム投稿ページに表示される項目
        'title', // タイトル
        'editor', // 本文のエディタ
        'author', // 作成者
        'thumbnail', // アイキャッチ画像
        'excerpt', // 抜粋
        'trackbacks', // トラックバック送信
        'custom-fields', // カスタムフィールド
        'revisions', // リビジョン
        'comments', // ディスカッション
        'page-attributes', // 属性（親・順序）
      ),
      'menu_position'   => 5, // 左メニュー「投稿」の下に表示
      'rewrite' => array('with_front' => false), // パーマリンクの編集（newsの前の階層URLを消して表示）
    )
  );
}

「functions.php」にコードを追加すると左メニューに「ニュース」が追加されます。

※ 不要なフォームがある場合は、「supports」の中の不要な値を削除してください。
※ 表示位置をもっと下にしたい場合は、menu_positionの値を増やしてください。
（例えばメディアの下に持っていきたい場合はmenu_positionの値を10にします。）

②カスタム投稿タイプの表示方法テンプレートの用意

次に記事表示用のテンプレート「single-news.php」を作成します。
ファイル名single-news.phpの「news」の部分は、function.phpに追記した「投稿タイプ名」と同じにします。
（single-news.phpがない場合はsingle.phpを使って表示されます。）

③パーマリンクの保存

「設定>パーマリンク設定」で内容を変更せずに、「保存」ボタンをクリックします。
（パーマリンク設定で保存をしないとエラーページが表示されます。）

「ニュース」で投稿した記事のURLにアクセスすると投稿した内容が表示されていると思います。

やってみると意外と簡単にカスタム投稿タイプが追加出来たのではないでしょうか？
こういう所から少しずつWordPressと親しくなれたらと思います。

こんにちは。二年目デザイナーのはなです。

私はドドド文系かつ、今のところ人生でパソコン使ってる時間より紙と絵の具触っていた時間のほうが長いようなアナログ街出身の感覚派ですが、この度「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」というエンジニアさんの言葉により、XcodeのStoryboardを使ってみることになりました。

もちろん私の経験値はそのような状況（かろうじてHTMLとCSSはわかる…）ですので、傍から見ると低い段差に躓きまくりました。

それでもなんとかエンジニアさんからの介護を受けて、アプリのガワだけ作成することができ、「何このソフト…？英語しか書いてない…怖いよ～…」という状況からは脱しました。

こういうかたちのボタンはこういうふうに作れば良いんだよ、というのを理解するのに丸一日かかったりしました。

このボタン一つを苦戦しながら作って、どの画面サイズで見ても破綻していなかったときはとても感動したりしました。

あまりにも初歩的すぎますが、レベルが赤子なので見るものすべてに感動してしまうんですね。

Storyboardできる人は、まあ、一笑に付していただけると幸いです。

Storyboardを使ってみてよかったなと思ったこと

あとからエンジニアさんに細かいデザイン調整のお願いをしに行かなくて済む！

「すみません、ここなんですけど、あと10pxぐらい余白つめてもらっていいですか…」がなくなりました。

全部自分でつけてますからね。

「ここはシステム上これ以上余白詰めるのは難しいです」「そこをなんとか」という工程もなくなりました。

システム上難しいということを踏まえた上でデザインを作ればいいのです。

それが理解できるようになったことは、すごく大きな収穫だったなと思います。

画面の大きさによってどのようにレスポンシブさせるか自分で決められる！

例えばiPhone8の画面サイズで作ったUIデザインについて、5sの時はどこをどういうふうに縮める？iPhoneXやiPadの時はどこをどうやって伸ばす？というのを自分で決められます。

あとからエンジニアさんにお願いして変えてもらうとなると、下手したらAuto Layout付け直しじゃないですか（それも理解できるようになりました。そりゃ面倒くさいですね）

それを最初から自分で指定できるというのは、かなり効率がいいです。妥協もしないで済みます。

標準的なiosアプリのデザインがなんとなくつかめるような気がする！

Storyboardにはiosアプリの標準UIのパーツが元から入っています。

ドラッグするだけで置けます。すごい便利ですね。

逆に、「置けない場所」というのもなんとなくつかめてきます。

そうやって試行錯誤しているうちに、iOSアプリの標準的なデザインが、なんとなくわかってきたような気がします。

まとめ

　Storyboardを触ってみて、「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」という言葉の意味がわかりました。

見た目の微調整が自分で行えるということの素晴らしさを、デザイナーさんなら理解できると思います…

とはいえ、まだ入り口に立った段階ですので、これからも四苦八苦しながらStoryboardくんと仲良くやっていけるよう頑張りたいと思います。

デザインをする上で字詰めって大事ですよね。
でもWebページのテキストは、ブラウザの仕様で調整出来ないから諦めていたり…。
そんなことはないでしょうか？

字詰め

実は、CSSに字詰めのプロパティ「font-feature-settings」があります。
使い方は簡単で、「font-feature-settings : “palt”;」を指定するだけです。

    .kerning_sample{
        font-feature-settings : "palt";
    }

注)メイリオは、プロポーショナルメトリクスを含まないため変わりません。

　
例えばデフォルトだとこのような表示だったのが

　
font-feature-settings:”palt”;の指定をすると全体が引き締まった感じになります。

　
場合によっては窮屈な感じがするので、「letter-spacing」を使って調整しましょう。

    .kerning_sample.spacing_sample{
        font-feature-settings : "palt";
        letter-spacing:2px
    }

デフォルトと比べて、カッコや句読点の間などが整ってると思います。
各ブラウザの対応もいつの間にか整っていました。
各ブラウザの対応状況

両端揃え

字詰めのプロパティ「font-feature-settings」を使ってブログの本文や説明文などの右端がガタついて気になった場合は、「text-align:justify;」を使ってみるのもいいかもしれません。
デフォルトだと右端がガタついていますが。

　
「text-align:justify;」を使うと右端がそろうと思います。

　
毎回、字詰めの調整や確認は大変ですが、この方法だと以外に簡単にできるかもしれません。
Webコンテンツを作る際に役立てていただければ幸いです。