作者別: saito

カスタム投稿タイプをWordPressに追加する方法(プラグイン不要!)

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と親しくなれたらと思います。

 


CSSで字詰めの調整をしよう!

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

字詰め

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

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

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

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

デフォルト
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

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

font-feature-settings:”palt”;の指定
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

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

    .kerning_sample.spacing_sample{
        font-feature-settings : "palt";
        letter-spacing:2px
    }
font-feature-settings:”palt”;とletter-spacingの指定
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

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

両端揃え

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

デフォルト
カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう一方、適切にカーニングが施されたフォントでは字面間の空白の面積はほぼ均等になる。
DTPが普及した現在は組版ソフト上で行われることが多いが、以前は活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と読ばれる作業が必要であった[1]。現在ではこの語や詰め文字(つめもじ)という語をカーニングの訳語として用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]。
引用 – Wikipedia

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

text-align:justify;とfont-feature-settings:”palt”;の指定
カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう一方、適切にカーニングが施されたフォントでは字面間の空白の面積はほぼ均等になる。
DTPが普及した現在は組版ソフト上で行われることが多いが、以前は活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と読ばれる作業が必要であった[1]。現在ではこの語や詰め文字(つめもじ)という語をカーニングの訳語として用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]。
引用 – Wikipedia

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


Instagramの投稿を埋め込むとiPhoneで表示が大きくなる場合の対処法

Instagramの投稿をブログやサイトに埋め込んだとき、iPhoneのsafariのみ表示が大きくなり、はみ出ていることはありませんか?
AndroidやPCだとちゃんと表示できているのに…。

対処前の表示

例えばこのようなイメージです。(2018/9/20時点)

何故か埋め込んだInstagramの投稿が記事幅からはみ出ています…。

 
投稿が大きくなってしまう原因は、位置情報が長く、さらに「日本語 英語」となっている場合のようです。

iPhoneのsafariのレンダリングが原因なのか、InstagramのCSSの指定が弱いのか、具体的なところは不明です。

 

対処方法

少々強引な対処方法となるのですが、表示されるInstagramのiframe「.instagram-media」に、下記のCSSを指定すると現象を回避できます。

@media screen and (max-width: 899px){
  .instagram-media{
    width:414px !important;
    max-width: 100% !important;
    min-width: initial !important;
  }
}

 
こちらの内容は、「@media screen and (max-width: 899px)」で幅900px未満のデバイスのみCSSが効くようにしています。
「414px」はiPhone XS MAXの横幅です。その指定のみだと、その幅以下のiPhoneでは大きすぎますので「max-width: 100% !important;」を指定しています。
「min-width: initial !important;」は、自動で生成される「min-width」の値が大きい場合があるので初期化しています。

 

対処後の表示

上記のCSSを指定した後の表示がこちらになります。
iPhoneでも通常の大きさで表示されるようになりました。

 
いかがでしょうか?
なかなかこのような表示崩れに出くわすことはないかもしれませんが、Instagramの投稿をブログなどに埋め込む場合の参考になれば幸いです。


Evernoteから、レイアウトが自由なMilanoteへ。

長年使ってきたEvernote。
ブログ記事をスクラップしたり、いいなと思ったデザインやコードを集めたり、いろんなものをEvernoteに詰め込んできました。

しかし、無料版の制限ができてから「変わりのものは無いものか」とモヤモヤしていました。
有料版に切り替えて使っていましたが、せっかくお金を使うなら、もっといいサービスは無いものかと…。

 

そこで、今回、使ってみようと思っているのは「Milanote」です。

 

「クリエイティブなEvernote」と呼ばれたり、「クリエイティブな仕事のためのメモアプリ」と呼ばれたりしています。
「Google」「Apple」「Facebook」などの企業で利用されているらしいです。

 

一度使ってみようと思い、登録してみました。
100ノートまでなら、無料で使えます。

登録は簡単で「Sign up for free」から、「名前」と「メールアドレス」と「パスワード」を入力して登録するだけです。

 

画面はすごいシンプルです。
左側にあるアイテムをドラッグ&ドロップして、ノートを増やしていきます。

基本は「Board」を追加してその中に、ノートを増やしていきます。
「Board」はフォルダのようなもので、何階層も作れそうです。(10階層以上作れました。)
それと、「Board」の広さも、無限に広がっていく感じでした。

 

オフィシャルの動画を見るとイメージが付きやすいかもしれません。

動画を見ても驚いたのですが、実際に操作してみると、その自由度と速さに感動してしまい、無制限の有料版に登録したくなりました。
(月払いだと、$12.5なので、ちょっとお悩みどころ…)

 

さらに、デフォルトでテンプレートがたくさんあり、「templates」から選ぶことができます。
その豊富さと整然とされた感じに圧倒されました。

 

[templates > Design > Design brief]

 

[templates > Marketing > Social media calendar]

美しいですね…。
これらのテンプレートがデフォルトで用意されており、ドラッグ&ドロップで好きな「Board」に設置できます。
こうやって、アイディアを綺麗にまとめることに、強いあこがれを持っているので、しばらく利用してみようと思っています。

 

いきなり、「Milanote」のみするのではなく、とりあえずのメモや記録は「Evernote」や「Google Keep」を使って記録して、それを「Milanote」に移して使うといろんなことがまとまりやすいのではないかと思っています。

 


CSS変数(CSSカスタムプロパティ)を使ってみよう!

CSSで変数が使えると話題になってから久しいですが、いつの間にか対応ブラウザが増えてきました。

IE11が未対応なので使いづらいのですが、そろそろ、CSS変数(CSSカスタムプロパティ)に目を通しておいたほうがいいかもしれませんね!

CSS変数(CSSカスタムプロパティ)の基本的な使い方

:root {
    --base-color: #ffff00;
}

.content {
    color: var(--base-color);
}

上の例のように変数の先頭に「–」(ハイフン2つ)を付けます。
これで、変数の定義がされます。

「:root」内に変数を定義することで、cssを読み込んだ全ての要素で変数が使えるようになります。

 

変数を呼び出す時には、var()関数を使います。
「color: var(–base-color);」のように、指定した変数を()の中に入れるだけです。

See the Pen css 変数(1) by naoto saito (@code_ns) on CodePen.

テキストが青色になりました。
基本的な使い方はとてもシンプルですね!

CSS変数とメディアクエリ

変数のみなら、Sassでもいい気がするのですが、動的に値が変わるのもcss変数を書くメリットです。

下記の例は、幅400pxで2カラムと4カラムを切り換えています。
(別ウィンドウで確認してください。)

See the Pen CSS 変数(2) by naoto saito (@code_ns) on CodePen.

JSでの操作

Sassと違い、CSS変数であれば、JavaScriptで値を取得したり、変更したりできます。
下記の例では青色に指定したテキストをJavaScriptで変数を変更し赤色に変更しています。

See the Pen CSS 変数(3) by naoto saito (@code_ns) on CodePen.

 

この例だとテキストの色を1箇所変えるだけなので、メリットは感じられないかもしれませんが、次のように変更箇所が何箇所も出てくる場合に便利さを感じられるかもしれません。
(Choose a theme colorの右のボックスで色の変更)

See the Pen Theming a site with CSS Custom Properties by Chris Coyier (@chriscoyier) on CodePen.

 

このように、もしIE11で使えるようになったら、CSSの管理やJavaScriptとの連携が、さらに簡単になりそうです。