management無料サイトブログ運営に便利コラム過去コラムCocoonサイトマップContact4月30日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。2019.07.22ブログで使う画像のサイズをまとめました!画像を使うかはもちろん自由です。目安ですので、お好みで変更しましょう。テーマの仕様・お好みで最適サイズは変わります。いくみ「公式推奨設定」だけは、その通りにしましょう。注:「ファビコン」の画像形式は、.pngがおススメです。.jpegを設定したとき、私は非表示になってしまいました。備考:「プロフィール用のアイコン」は「アバター」というらしいです。pixcelくらい(Facebookでシェアされたときの表示を考慮したい場合。その場合、サイズよりも「比率」が大切だそうです。縦幅サイト幅とヘッダー幅を同じにしている場合、横幅はそのまま、縦の高さを設定値の2割増しにするのがおススメ。当ブログのサイト幅は1261pixcelです。(サイト幅を変更していないCocoonユーザーは、横幅1261pixcelくらいでピッタリくるはずです。91pixcelでした。フォントサイズ40でロゴ画像を作成、余白は少な目。pxを使用しています。私の場合ですが、アイキャッチは、横幅800~1000くらいにして、オリジナル画像の比率のままにしています。フェイスブック用にするというポイントは気にしていません。デザインの選択によってあまりにも異なるので目安無し。当ブログはサイト背景画像なし。色々なオプションのテスト結果はこちら。いくみ雰囲気がでますし、視覚情報があるほうが記憶に残りますよね。画像の準備、おススメです。1.準備する画像は、.pngか.jpegがおススメです。便利な画像圧縮サイトが、その2種類をサポートしているからです。写真は.jpeg、イラスト系とスクリーンショットは.pngが良いと思います。以下の記事で、容量や比較の見た目をしています。おススメは.jpgと.png、使い分けと比較ブログに使う画像ファイルとしておススメの.jpgと.pngについて、容量と見た目の比較をしています。blogstudynotes.com2019.10.032.ファイル名は英数字(直接入力)をおススメします。日本語やダブルバイト文字を使用すると、自動でファイル名が変換されて、ちょっと分かりづらくなります。「目安」だけではなく、詳細も知りたいかたは、ぜひ以下のリンクを参考にされてください。いくみ「このサイズじゃないとダメ」という意味ではないですよ!自分がどうしたいかで決めます。pixcelは、こちらのサイトですすめられていました。この記事を書くにあたって確認していたら出会えた記事です。アカネtechアイキャッチ画像のサイズに迷ったら読んでみてくださいtech.akanequest.jpいくみありがとうございました。Cocoonはメインカラムが800pxなので、私はそのようにし始めていたところでしたが(初期は横幅640にしていました)、ボチボチ1200サイズに修正していこうと思います。思っていましたが、使用している文字入れサイトが、自動で1000サイズにリサイズしていたことが分かりました★。私はほぼ1000サイズになっています。ホームイメージについてホームイメージは、ツイッターやFacebookで「ブログのトップページ」がシェアされたときに表示される画像です。(「記事のURL」がシェアされた場合は、記事に設定しているアイキャッチ画像が使われます。)Cocoonの初期設定では、Cocoonテーマの画像になっています。いくみ「ホームイメージ」という存在を知りませんでした。以下のサイトで勉強させていただきました。【ブログカード】Cocoonを使い始めたら、ホームイメージを忘れずに設定しようWordPressテーマ「Cocoon」は、エディタ画面(投稿画面)で記事のURLを入力すると、その記事のブログカードが表示されます。こんな感じでURLを入力するとこのようにURLの部分がブログカードになって表示されます。IMAGE画像に設定するのがおススメです!以下でまとめました。IMAGEの説明、設定手順、ホームイメージ作成に便利なサイトリンクを載せました。ホームイメージはブログの名刺!ぜひ作成しておきましょう。blogstudynotes.com2019.08.30ヘッダーについて当ブログでテストをして、サイズについて記事にしています。ヘッダーサイズなどを測るのに便利なツールの紹介もしています。ヘッダー画像サイズと選ぶポイント自分のサイトに最適な幅と高さの目安が分かります。テスト結果とともに、おススメ画像タイプもご紹介します。blogstudynotes.com2019.07.04サイト背景についてデザインのオプションによってあまりにも変わるので、推奨も目安も書けないんですよね。小さい画像でパターン柄にしたり、大きい1枚をドーンと設定することもできます。背景画像テスト、サンプル画像・サイズ・設定の記録イロイロな画像を使ったテストの記録です。Insightsのデータも載せました。blogstudynotes.com2019.06.22画像情報のリンクサイズとは直接かかわりませんが、設定方法などがまとまっている記事です。ファビコンとプロフィールアイコンについて当ブログで設定方法をまとめました。自分らしさがでる簡単見た目設定プロフィールとファビコンの設定方法です。自分らしさがでます♪。WordPressユーザー共通です。blogstudynotes.com2019.05.24ロゴ画像についてロゴ画像は、フォントや余白設定、テーマの仕様も関わるので、サイズはテストをしつつ見極めるのが良いと思います。「ロゴ画像の作り方」は記事にしていますのでよろしかったら!ロゴ画像作成フリーソフトの使い方とフォントパワー!フリーソフトでブログタイトル用のロゴ画像を作る方法です。お気に入りのフォントもリストしました!blogstudynotes.com2019.07.20Cocoonで「トップメニュー」を使う場合のロゴ画像サイズについてもまとめています。トップメニュータイプの場合ヘッダーレイアウトをトップメニューにしたときのロゴ画像サイズについてまとめました。blogstudynotes.com2019.11.05画像の自動生成と圧縮について以下の記事の2番と3番です。記事を書く前に知っておきたかったこと3つ改行の重要性、複数画像が生成されること、画像圧縮について書いています。blogstudynotes.com2019.07.26画像圧縮プラグインについてしばらくしたら、(でも割と初期の内に)画像圧縮プラグインをいれることをおススメします。こちらにまとめました。images)の初期設定を日本語訳つきで詳しく解説しました。無料500圧縮の数え方もまとめました。blogstudynotes.com2019.07.29いくみ画像、いろんな種類がありますねぇ。コピーいくみをフォローするいくみあぁ、ブログ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)いくみブログを読むのが大好きなアラフォーです。朝活でトコトコ綴っていきます。好きな食べ物は納豆とお寿司です。いくみをフォローするフォトブックを作るなら長年愛用しています。手軽に透明重ね2019.10.312020.02.02思い出を本に画像編集テクを生かすチャンス♪。サイトコラム過去コラムCocoonサイトマップContactホーム検索トップサイドバーいくみブログを読むのが大好きなアラフォーです。朝活でトコトコ綴っていきます。好きな食べ物は納豆とお寿司です。いくみをフォローするフォトブックを作るなら長年愛用しています。手軽に透明重ね2019.10.312020.02.02思い出を本に画像編集テクを生かすチャンス♪。プラグイン3スポンサーリンク目次でジャンプ目次サイズについての詳細リンク情報アイキャッチ画像についてホームイメージについてヘッダーについてサイト背景について画像情報のリンクファビコンとプロフィールアイコンについてロゴ画像について画像の自動生成と圧縮について画像圧縮プラグインについてタイトルとURLをコピーしました。