Cocoonのアイキャッチ画像に最適なサイズ . 2019年6月25日; Wordpress, 取扱説明書; Wordpress. アイキャッチの本文上の表示をCocoonの設定で変える方法。一番簡単な方法でもあるが、 アイキャッチ画像が重複する という問題が存在する。 設定. アイキャッチ画像の適切なサイズがわからない… おすすめのサイズがあれば、その答えを知りたい！ このような悩みに対し、「WordPressに適切なアイキャッチサイズ」をお伝えしていきます。 本記事で得 … WordPressではアイキャッチを設定していないページはサイトのエントリーカードの画像が共通で「NO IMAGE」になります。このままだと味気ないのでNO IMAGEをオリジナル画像に変更する手順をご紹介します。Cocoonテーマ用の設定。 アイキャッチ画像サイズとは？ 【Wordpress素朴な疑問】 アイキャッチ画像とはどの部分をいうのでしょうか？ブログを更新したことのある方ならわかりやすいと思います。このブログでいうと3か所にアイキャッチの画像が出てきています。 アイキャッチ画像の高さがバラバラに表示される…。 皆さんコンニチハ。リトマです。 先日、ついにこちらのワードプレスのテーマを「Stinger8」から「Cocoon」に変えました。それがこちら。じゃじゃーん！ 綺麗！Cocoonめっちゃキレイ！と、今となってはきれいに整列されているのですが、 … 写真画像にそのままロゴ載せても良いのですが、素材が合わないとロゴがうまくなじみません。私は、Canvaというデザインツールを使ってロゴ周辺部分にマスクをかけました。 当ブログで文字入りのアイキャッチは全てCanvaで作成しています。 綺麗に写る. このカードの画像は、アスペクト比が2：1で、最小サイズが300×157または最大サイズが4096×4096ピクセルです。. Cocoon設定の「画像」を見なおそう. 調べてみると、Cocoon（コクーン）のアイキャッチ画像のサイズは320×180ピクセルです。. Cocoonのアイキャッチ画像の便利な使い方 3. Cocoon設定・画像・アイキャッチの自動設定. アイキャッチ画像は、その名の通り ユーザー の目（アイ）を引きつける（キャッチ）するための画像です。. 以下にチェックを入れている場合です。 アイキャッチ自動設定を有効にする. 参考リンク アイキャッチ画像のサイズについて. まずは、「デザインを作成」から、アイキャッチのサイズを指定して、制作画面を表示します。 ちなみに僕は、「Cocoon」という無料テーマですが、 1024×630 で作っていま … WordPressの神テーマCocoonを利用していて多くの方が抱く疑問がこちら。, このような方に向けて「Cocoonにおけるアイキャッチ画像の最適なサイズ」について簡潔にまとめました。, TwitterとFacebookで記事を共有した際に表示されるOGP画像ですが、そのどちらにおいても1200×630のサイズだと見切れず綺麗に表示されます。, TwitterのOGP画像は二種類あるのですが、今回はメジャーなSummary Card with Large Imageの場合で考えていきます。, このカードの画像は、アスペクト比が2：1で、最小サイズが300×157または最大サイズが4096×4096ピクセルです。 (引用：image-twitterより), その場合、2:1の比率が公式に推奨されておりほぼ同じ1200×630で問題ありません。, 昔は「1200×630がよい」と推奨する記述があったようですが今は無くなっています。, しかし1.91:1ということで1200×630とほぼ変わらず、こちらも問題ありません。, ブログ主が運営しているモンストのサイトでは最初320×180にして途中から変更したのですが、上のを見ても分かるようにやはり1200×630の方が綺麗ですよね。(当たり前だけど), アイキャッチというのはファーストビューでほとんどの人が目にするものなので見栄えは大事ですね⸝⸝- ̫ -⸝⸝, 「アイキャッチ画像のサイズを1200×630にしたらなんか見切れるようになっちゃった…」という方は以下の方法を試してみてください。, 「Cocoon設定」→「全体画像設定」にいき、「Retinaディスプレイ」のON・OFFをいじってあげてください。, 具体的には「ONにしてアイキャッチ画像を設定(アップロード)してOFFにする」、これで解決しない場合はその逆「OFFにして…」を試してみてください。, カルーセルや新着記事といった、ヴィジェットで配置した箇所などのアイキャッチが見切れた場合は、上のコードをfunction.phpに記述することで解消されます。, サイトの第一印象…とまではいきませんがアイキャッチ画像はほとんどの訪問者が目にするものなので気を配っておきたいですね。, 2022年4月から都内Webエンジニアとして働く大学生。現在は入社0年目としてインターンしてます。幼少期は海外でミスチルを聴きながら育ちました。このサイトで日々の勉強であったりWordPressのカスタマイズ情報などを発信しながら、他にも複数サイトを運営しています。. いきなり結論から。 最適サイズ. こんにちは。さとみです。今回は、ブログのテーマが【コクーン】を使っている方へのアイキャッチ画像どうやって画像を作ってるの？どうやって画像を挿入してるの？という方へお伝えしていきます。こういうのですね♪流れを動画でどうぞ♪アイキャッチの画像サ WordPressのアイキャッチ画像を挿入・非表示・サイズする方法 . Cocoonを利用する上で、忘れがちな画像の設定をまとめてみました。これらを設定することで、少しでもサイトを綺麗に見せることができて、覚えてもらいやすくなると思います。 WP編集画面の Cocoon設定＞画像 この中に アイキャッチの表示 本文上にアイキャッチを表示する という項目があるので、このチェックを外します。 これでトップ画像とアイキャッチ画像が二重表示されることはありません。 アイキャッチとは. 少なくとも横幅が1280px以上、出来れば1920px以上でも良いかもしれません。 今後、機器の性能は上がっていくので、これぐらいのサイズが設定してあっても全く問題ないと思います。 まずはアイキャッチを作成する. このサイズになります。 1200×630pxにした方がいい理由・メリットとして以下の2点があります。 SNSで共有した際に見切れない. ITStudyのサイトはWordPressでCocoonのテーマを使用していますが、アイキャッチ画像のサイズが400×300や300×250などバラバラだったのでトップページから見た時に画像の一部が欠けたりしていました。以下のようなものです 上の画像は一つ必死で作り上げました。アイキャッチ画像です。コクーンの初期の設定だとトップページにブログカードが並ぶ状態になります。このブログカードに出る写真はアイキャッチ画像が表示されます。既にここまでで、私はつまづきまくりました。このトップページにならぶ記事が何かわからないので、検索のしようがありませんでした。でも、NO IMAGEだけは何としても避けたかったんですよね。ここまでたどり着くのはとても長かったです。, まず、たくさん検索してみて、トップページに表示される記事のブロックの事をCocoonではブログカードと呼んでいる事がわかりました。次に調べたのが、このブログカードに表示される写真はなんだろう？Cocoon設定にブログカードというタブがあります。これをヒントに調べていきました。どうやら、アイキャッチを設定するとブログカードに写真が出るらしい。, 気になったので、ついでに調べてみました。アイキャッチとサムネイルって違うの？「Cocoon アイキャッチ画像とサムネイル 違い」とかで調べると、どうやらワードプレスではアイキャッチもサムネイルも同じような感じという結末に。厳密には違うようなのですが、アナログな私は、必要になったら調べよう。という姿勢で頑張っています。だって、つまづくところが多すぎて前に進めない。このブログもドメイン取って挨拶の後3ヶ月経ってるのは、カテゴリーがよくわからなかったからです。, ブログがSNSやFBにシェアされる時の為に大きめの画像でアイキャッチを作成するのが良いとのこと。でも、元の画像が小さくて大きくできない！って場合は比率を守れば文字は切れないそう。オススメ比率は1.91:1しかし、小さい画像が大きく拡大されると、ちょっと画像がぼやけちゃう。比率から言うと、☑ 一番オススメ。 横1200×縦630ピクセル☑ 横900×502ピクセル☑ 横800×418ピクセルなどのサイズが良いみたいです, 今でこそ、左右きっちり文字を入れることができましたが、初めは左右文字が切れていました。自動的にCocoonが画像のトリミングを行ってしまうようでした。, 最初はDLしてきた画像そのままに文字を入れていました。DLする前の画像のサイズは1280×853ピクセルでした。それを1200×630ピクセルにトリミングをした後、文字を入れました。この1200×630ピクセルというサイズは重要です。調べてみると、Cocoon（コクーン）のアイキャッチ画像のサイズは320×180ピクセルです。とあったので、最初そのサイズにして作っていたのですが、どうもアイキャッチ画像がぼけちゃってなんか変だなって思ったんです。, アイキャッチ画像がぼけてしまうのは、設定した画像サイズが小さい時に起こります。1200ピクセルの画像を準備するのは難しい事もあると思いますが、320ピクセルだとぼけてしまいます。800ピクセル以上の画像を準備できるといいですね。アイキャッチ画像は、ブログ記事をSNSでシェアした時にも表示されるので、画像はきちんとしたかったんですよね。, 早速Cocoonで最適なサイズでアイキャッチ画像を作ってみましょう。アイキャッチ画像は Ｃａｎｖａ (キャンバ）https://www.canva.com/で作りました。基本的な画像加工は無料でできます。Ｃａｎｖａの使い方はたくさん紹介されてますので、私は一番最初に困ったところを紹介します。, 私はここで躓いてたんですけど、皆さん大丈夫でした？Ｃａｎｖａ (キャンバ）のログインの後、サイズの設定ができます。, こういう、地味なところで躓きます。この後は、私は文字入れとかしかできないんで、説明はここまでです。なかなか、自分が欲しい情報にたどり着くのって難しいですね。, 2020年6月4日追記おぉ。虫歯の日。歯磨きの日かな。さて、更新頻度がとてものんびりしていますが、ワードプレスにも少しずつ慣れてきました。出来ることが増えてきました。パワーポイントでアイキャッチ画像を半透明で作れるようになりました。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, パワーポイントで半透明の画像でアイキャッチ画像を実際に作ってみました。cmからピクセルにPowerPointが自動で計算してくれるので簡単にサイズ指定で画像が作れるようになりました。. 自分の認識が間違っていたらすみません。トップページの記事横に表示される画像をサムネイル、各ページのタイトル下に表示される画像をアイキャッチとして書かせて頂きます。 アイキャッチとサムネイルは同じ画像を使用していると認識しております。 最近の投稿には、文字だけでアイキャッチの画像が表示されていません。見た目がさみしいです。 ウィジェット内の「最近の投稿」の設定. 1200×630 px. この1200×630ピクセルというサイズは重要です。. それを1200×630ピクセルにトリミングをした後、文字を入れました。. テーマによってアイキャッチ画像のサイズ（縦横比率）が適当だと、拡大や縮小されて間延びしたり、画像が切れてしまったりします。Cocoonの場合は、画像の縦横比を設定する事が出来る為、その設定に沿った比率の画像をアップすれば、サムネイル時も記事 canvaでのアイキャッチ画像の作成方法を、分かり易く丁寧に説明しています。サイズってどうするの?保存するファイルの種類は?という事についても書いています。おすすめの画像圧縮方法も! ココのアイキャッチ元画像サイズが500×386。 https://flaugh.jp/wp-content/uploads/2018/03/%E6%9B%B8%E9%A1%9E%E3%81%9F%E3%81%8F%E3%81%95%E3%82%93.jpg https://gyazo.com/69de9e6d2d1be0525505858e094e3c13 WordPressで記事を表示する際や一覧で表示をする際には、必ずと言っていいほどアイキャッチ画像を設定してください。 このアイキャッチの挿入をすることによって ・PV数の増加 ・SNS とあったので、最初そのサイズにして作っていたのですが、どうもアイキャッチ画像がぼけちゃってなんか変だなって思ったんです。. アイキャッチってなんのためにあるんでしょう。 やっぱり、記事の見栄えをよくするため。あとは、各種SNSにシェアされた際の見栄えをよくするためでしょうか（OGPなど設定している場合） とにかく見栄えのためにあると！ たぶん。 つまり最適なアイキャッチのサイズを調べるには、ブログのレイアウトの確認と、SNSの仕様の確認が必要になるわけです。 まずは左側のサイドバーから「Cocoon 設定」をクリックして、Cocoonの設定ページを開く。 記事を保存したり公開したりするときに、本文中に最初に出てくる画像をアイキャッチにします。※プレビューには反映されません。 「カラム幅のサイズを広げる」 「カラム幅のサイズを広げる」 上記で変更した場合、画像はバランスよく配置されますが、アイキャッチ画像が小さく見える時にはカラムいっぱいに画像の幅を広げることができます。 WordPressテーマ「Cocoon」は、ブログ運営でやってみたいあらゆることを実現してくれる夢のようなテーマと聞いてワクワクしながらいざ始めようとされていることと思います。無料でここまでできるなんて「感激」という体験を是非あなたもしたいですよね。でもWordPressはカスタマイズの自由度があることも人気の理由であり、個性的なサイトを誰でも作り上げることができます。「Cocoon」もカスタマイズをしやすい特 … © 2020 ぽてちる All rights reserved. アイキャッチ画像の画質設定を3つ解説。 アイキャッチ画像の画質設定を解説します。以下の3つを試せばきれいな画質で表示されるようになると思います。 画質設定 ①画像のRetinaディスプレイ対応の設定方法。 ②WordPressのメディア設定を変更する方法。 解決方法は、「サムネイルをRetinaディスプレイ対応にする」にチェックを入れるだけでした。 Cocoon設定＞画像 を選択 下にスクロールして、Retinaディスプレイの「サムネイルをRetinaディスプレイに対応する」にチェックをいれる コレで完了です。簡単すぎる。
ƌ定席 ȇ由席 Ɂい, Âキシクリーン ɢ呂 Âビ, Ãント ɘ水剤 Ɯ強, Ãロウィン Âャラ Âスプレ, ť約書 ō鑑 Ľ置, Google Nest Âキュリティカメラ, Âディダス Ãディース Ãーフパンツ, Cx-3 Cx-30 Áっち, Ãォルダ ÂイムÂタンプ更新 Ľい方, ɫ崎山 Áみたまご Âット,