タグ

サムネイルに関するcometnoteのブックマーク (6)

  • アイキャッチ画像を作るときに試したい、統一感が出て印象的になる2つのコツ | デザインメモ 2.0

    アイキャッチ画像に統一感を持たせることで、読者(ユーザー)にブログのブランドや世界観をより印象づけることができます。 昨今では自分で運営するブログだけでなく、自社メディアやnoteなどのプラットフォームサービスを利用する企業も増えてきました。デザイナーさんも記事更新に関わることも増えてきたのではないのでしょうか? ただ、そういった複数人で運営するブログは、いつのまにかアイキャッチ画像の雰囲気がバラバラになって、統一感がなくなってしまった…なんてお悩みもちらほら聞きます。 そこで、このデザインメモでアイキャッチ画像を作る時に気をつけている点をまとめてみました!よかったら参考にしてみてください。 はじめに:アイキャッチ画像とは?題に入る前にちょっとだけアイキャッチ画像についておさらいです。 アイキャッチとは、主にアニメや特撮番組などの中盤でのCM放送前後に映される番組タイトルクレジットのこと

    アイキャッチ画像を作るときに試したい、統一感が出て印象的になる2つのコツ | デザインメモ 2.0
  • WordPressで自動で作られるサムネイル画像のサイズ変更方法と、再生成方法 | MONOCHROME DESIGN|東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作

    「サムネイル」「中サイズ」「大サイズ」はWordPress管理画面より変更が可能です。 「設定 > メディア設定」より、この値を任意に変更することが出来ます。 「medium_large」に関しては特殊なので、別記事にて紹介します。 デフォルトの状態で画像をアップロード 記事投稿画面より「メディアを追加」を押して、画像をアップロードしました。 元の画像ファイルは「幅5000px × 高さ3333px」というかなり大きなサイズでしたが、自動生成されたものは中サイズなら「幅300px × 高さ200px」といった風にそれぞれの上限値にそって縦横比を維持したままリサイズされています。 設定を変更し、同じファイルをアップロードし直してみる それでは、試しに「設定 > メディア設定」より数値を変更して、同じファイルをアップロードし直してみます。 中サイズの幅・高さの上限を600pxに変更しました。

    WordPressで自動で作られるサムネイル画像のサイズ変更方法と、再生成方法 | MONOCHROME DESIGN|東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作
  • WordPressで投稿内の最初の画像を取得/出力する方法

    WordPressで投稿一覧などにサムネイルを表示する際は、アイキャッチ画像を利用することが多いです。しかし、アイキャッチ画像ではなく、投稿内の1枚目の画像をサムネイルとして使いたいというケースもあると思います。 Auto Post ThumbnailやXO Featured Image Toolsを使えば、投稿内の画像をアイキャッチ画像に自動登録してくれます。これらのプラグインを使えば、投稿一覧でアイキャッチ画像をサムネイルとして表示している場合でも対応可能です。 ですが、テーマ側で対処することも可能なので、その方法をご紹介したいと思います。プラグインを使いたくないとか、もっと柔軟にカスタマイズしたいという場合は、ぜひ参考にしていただければと思います。

    WordPressで投稿内の最初の画像を取得/出力する方法
  • サムネイル画像の切り抜き範囲を調整できるWordPressプラグイン「Crop-Thumbnails」

    画像をアップロードした時に自動生成されるサムネイル画像の切り抜き範囲を手動で調整できるWordPressプラグインです。 投稿一覧などで、意図した箇所をサムネイル画像で表示させたい時に便利です。 Crop-Thumbnailsのインストール インストール手順は以下の通りです。 ファイルをFTPでアップロードしてインストール Crop-Thumbnailsをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Crop Thumbnailsを有効化します。 WordPress管理画面でインストール [プラグイン] – [新規追加]にアクセスします。「Crop-Thumbnails」で検索します。[今すぐインストール]をクリックして、Crop-Thumbnailsをインストールします。[有効化]をクリ

    サムネイル画像の切り抜き範囲を調整できるWordPressプラグイン「Crop-Thumbnails」
  • WordPressで指定した記事の投稿サムネールを取得するショートコード | Firegoby

    アイキャッチ画像は便利なんですが、テンプレートに決め打ちで書くと、ページごとにレイアウトを変えたいとかそういう特に色々とめんどいですよね。 というわけで、アイキャッチ画像を記事内に挿入するためのショートコードを作りました。 ショートコードのソース 使い方 [thumbnail] というショートコードを設置すれば、その記事のアイキャッチ画像を表示します。 以下のように引数でURLを指定するとその記事のアイキャッチ画像を表示します。 IDで直接していすればいいと思われるかもしれませんが、ID調べるよりもURLのほうが手っ取り早いので。 [thumbnail http://example.com/archives/2222] あとは、このプラグインでテンプレートとして保存しておけば、右寄せとか左寄せとかCSSがききまくったややっこしいレイアウトでも、クライアントがストレス無く画像を埋め込むことが

    WordPressで指定した記事の投稿サムネールを取得するショートコード | Firegoby
  • [WordPress] 投稿IDからアイキャッチ(サムネイル)画像のURLだけを取得する関数を作ってみた。サイズ指定ももちろん可能。 | WEMO

    アイキャッチ画像を出力させる時、the_post_thumbnail()を使用すれば簡単にimgタグを出力してくれますが、このアイキャッチ画像の、URL部分だけを取得したいという時、ありませんか? 私は、すごくあります。笑 なので、自分で関数を作ってみました。 function get_thumb_url($size = 'full', $post_id = null) { $post_id = ($post_id) ? $post_id : get_the_ID(); //第2引数が指定されていればそれを、指定がなければ現在の投稿IDをセット if (!has_post_thumbnail($post_id)) return false; //指定した投稿がアイキャッチ画像を持たない場合、falseを返す $thumb_id = get_post_thumbnail_id($post_i

    [WordPress] 投稿IDからアイキャッチ(サムネイル)画像のURLだけを取得する関数を作ってみた。サイズ指定ももちろん可能。 | WEMO
  • 1