ぶっちろぐ Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】 ... Cocoon既知の不具合。今後やりたいこと。 2019/1/19 2019/9/26. 今やれることを精一杯やる!と思いながらマイペースに過ごしています。 好奇心旺盛なので、様々なジャンルについての記事を書いていますよ♡*°, COCOONの人気記事ウィジェットは、新着記事ウィジェットと形が一緒なので、ウィジェットを並べると統一感があります。, ただ、アイキャッチ画像がたくさんになってしまうと、少し見づらく感じるかもしれません。, CSSを貼るだけで、人気記事の一覧を画像を消してシンプルなリストのように並べられますよ!, 人気記事ウィジェットのカスタマイズは、「.entry-header .popular-entry-card」の周辺を指定してカスタマイズしていきます。, このCSSをコピペで貼り付けると、COCOONの人気記事ウィジェットのアイキャッチ画像を削除できます。, このままでは記事タイトルの位置はそのままの状態で、画像のみが非表示になっています。, 位置を指定して下線を付けるCSSはコピペできるように、次のページでご紹介させていただきます。, COCOONの人気記事ウィジェットの画像を非表示にして、文字タイトルだけを表示したいと思ったことはありませんか?そこで、シンプルなリスト形式で人気記事を表示できるカスタマイズのコピペで使えるCSSについてまとめています。, logicool(ロジクール)のUSBレシーバーはBluetoothに接続できるのか【USB UNIFYING レシーバー】, 【レビュー】logicool(ロジクール)マウスM705の使い心地やサイズ感【口コミ】, &honey(アンドハニー)のヘアオイルを3種類試してみた!髪への効果・使用感・香り【口コミレビュー】, .entry-header .popular-entry-card-thumb {. このブログはWordPressを使用しています。テーマはCocoon(コクーン)です。 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に記述することで解消されます。, サイトの第一印象…とまではいきませんがアイキャッチ画像はほとんどの訪問者が目にするものなので気を配っておきたいですね。, 2000年生まれのエンジニア志望。独学でプログラミング学んでます。幼少期は海外でミスチルを聴きながら育ちました。このサイトを含め3つのサイトを運営してます。. こんにちは、バーチャルブロガー大学生ことさいとう(@S41T0H)です。今回はわいひらさん作成の最高な無料WordPressテーマ「Cocoon(コクーン)」で新着記事・人気記事を投稿上部に表示させてデザインするカスタマイズ方法を紹介します こんにちは、バーチャルブロガー大学生ことさいとう(@S41T0H)です。今回はわいひらさん作成の最高な無料WordPressテーマ「Cocoon(コクーン)」で新着記事・人気記事を投稿上部に表示させてデザインするカスタマイズ方法を紹介します Cocoonでブログを作成すると、サイトアイコンはCocoonのデフォルト画像が設定されます。 ただCocoonフォーラムではこれまで、このカスタマイズ方法についての問い合わせが結構多かったので、機能化しました。, プラグインにより、画像の再生性が必要になるので、既に投稿されている記事数によっては、実行時間はかかるかもしれません。, YouTube等でも利用されている比率なので、ネットと親和性の良さからデフォルトにしています。, 美しさを追求するならこれなのかも。デフォルトよりも縦幅が広くなるので、アイキャッチの文字列が切れたりする可能性も低くなります。, 和風サイトとかにも良いのかもしれない。縦幅が広いので、アイキャッチの画像に書かれた文字も楽々入ると思います。, ちょっとレトロ感があります。縦幅は広くなるので、この比率の画像を用いている写真サイトやイラストサイトなどには良いかも。, 横より縦を優先したい場合。この比率は結構Cocoonを利用したイラストサイトに利用されているのを見ます。, 画像自体に反映させるには、Regenerate Thumbnailsプラグインを利用して「画像の再生成」を行う必要があります。, 「大きなカード」は、WordPress設定の「メディア」で設定されている「画像サイズ(大サイズ)」のサイズが適用されます。, タイルカードは「アイキャッチ画像本来のアスペクト比で表示するための機能」であるため、縦横比率を変更すると機能としての意味が無くなってしまいます。, アイキャッチに、設定サイズよりも小さな画像が選択されている場合(例えば320x180pxで設定されているのに300x160pxの画像だった場合)は、画像が再生成されません。, なるべくアイキャッチには、大きな画像を設定しておくことをおすすめします。少なくとも、横幅800px、できるならば横幅1280px以上の画像を設定することをお勧めします。, こんな感じで、テーマで利用されているほとんどのサムネイル画像サイズ(縦横比)を手軽に変更できるようになりました。, サイトによっては、最適なサムネイルサイズはまた違ってくる場合もあるので、機能化された意味はあると思います。, また、Cocoon設定から画像比を変更した場合は、プラグインにより「画像の再生成」はお忘れなく。, 無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。, 性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。 それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。, ◎安く始められる ◎LiteSpeedを用いた高速サーバー(完全SSD) ◎http/3(高速化プロトコル)に対応 ◎東京・大阪でリージョン選択が可能 ◎プランのアップ・ダウングレードが自由自在 ◎同サービス内でドメイン管理が可能 ◎ディスク容量が多い ◎転送量が多い ◎毎日無料バックアップ(14日分) ◎DBは14日以内なら無料自動復旧可能 ◎ファイルも14日以内なら無料自動復旧可能 ◎アダルト・出会い系サイト可 ◎ドメインとサーバー代のチャージ払いが可能 ○サーバ引っ越し依頼が可能(有料), 1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。, とにかく速い。サイトに表示スピードを求めるならココ。 管理画面がシンプルで使いやすい。, ◎nginxを用いた高速サーバー(完全SSD) ◎プランのアップ・ダウングレードが自由自在 ◎同サービス内でドメイン管理が可能 ◎ディスク容量が多い ◎転送量が多い ○http/2(高速化プロトコル)に対応 ◎毎日無料バックアップ(14日分) ◎DBは14日以内なら無料自動復旧可能 ◎ファイルも14日以内なら無料自動復旧可能 ◎サーバ引っ越しツールあり(無料) ○サーバ引っ越し依頼が可能(有料) ◎ドメインとサーバー代のチャージ払いが可能, 安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。, ◎nginxを用いた高速サーバー(完全SSD) ◎老舗サーバーなので安定感抜群 ◎ディスク容量が多い ◎転送量が多い ◎同サービス内でドメイン管理が可能 ○http/2(高速化プロトコル)に対応 ○毎日無料バックアップ(14日分) ○DBは7日以内なら無料自動復旧可能 ×ファイルは有料かつ手動での復旧 ×プラン変更でCPUのスペックアップができない ×プラン変更しても即時反映されない ×アダルト・出会い系サイト不可, 常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。 LiteSpeedやHTTP/2を日本で初めて導入したサーバー。, ◎LiteSpeedを用いた高速サーバー(完全SSD) ◎http/3(高速化プロトコル)に対応 ◎プランのアップ・ダウングレードが自由自在 ◎同サービス内でドメイン管理が可能 ◎転送量が多い ◎ディスク容量が多い ◎毎日無料バックアップ(14日分) ◎DBは14日以内なら無料自動復旧可能 ○ファイルは14日以内なら無料復旧可能(※手動) ◎アダルト・出会い系サイト可 ◎ドメインとサーバー代のチャージ払いが可能 ○サーバ引っ越し依頼が可能(有料), 格安な値段で始められる高機能サーバーです。 性能も備えつつ最安ならここ。 ただし少し機能は弱い。, ◎LiteSpeedを用いた高速サーバー(完全SSD) ◎激安プランが用意してある ◎値段あたりのスペックが高い(コスパ良し) ◎サーバ引っ越し依頼が可能(無料) ◎アダルト・出会い系サイト可 ○http/2(高速化プロトコル)に対応 △プランのアップは可能だがダウンは不可 △毎日自動バックアップ(1日分) △前日のバックアップからのみ復元できる(無料), ▼デザインスキンを選択Cocoonデフォルトみるらいとシンプルブルーシンプルグリーンシンプルネイビーシンプルピンクシンプルレッドカラフルラインダークエンジダークルリダークカモノハ Veilnui Simplog (amber)Veilnui Simplog (blue)Veilnui Simplog (brown)Veilnui Simplog (cyan)Veilnui Simplog (deep orange)Veilnui Simplog (deep purple)Veilnui Simplog (green)Veilnui Simplog (indigo)Veilnui Simplog (light blue) Veilnui Simplog (light green) Veilnui Simplog (lime)Veilnui Simplog (orange)Veilnui Simplog (pink)Veilnui Simplog (purple)Veilnui Simplog (red)Veilnui Simplog (teal)Veilnui Simplog (yellow)Momoon(アクア)Momoon(グリーン)Momoon(オレンジ)Momoon(ピンク)Momoon(パープル)tecurio earthtecurio grapetecurio limetecurio mangotecurio moontecurio peachtecurio skytecurio soiltecurio sunsetBizarre-food(ブラックバーガー)Bizarre-food(ブルーカレー)Bizarre-food(グリーンソバ)Bizarre-food(ピンクワイン)Bizarre-food(ホワイトラーメン)Season(Spring)Season(Summer)Season(Autumn)Season(Winter)COLORS(レッド)COLORS(ブルー)COLORS(イエロー)COLORS(グリーン)COLORS(ピンク)COLORS(ブラック)Like SimplicityモダンブラックFuwari -海老茶(えびちゃ)-Fuwari -褐色(かちいろ)-Fuwari -海松茶(みるちゃ)-Fuwari -御召茶(おめしちゃ)-旅カメラいつもの深海いつものローズいつものコーヒーおでかけピンクおでかけブルーおでかけレモンサムライブルー(無印)サムライブルー(勝ち色)HygieneMetal Styles(1カラム)ミックスグリーンミックスブルーミックスレッドドット・ワインレッドドット・レイニーブルーm-soram-tomatoほんわかライトニングCocoon設定の「スキン」タブで変更できます。, プラグインによる一括処理が必要になるので、一応念のためサーバーのWordPressファイルのバックアップをしておくことをおすすめします。MixHostやカラフルボックス(復元無料)、エックスサーバー(復元有料)のような自動バックアップ機能のあるサーバーであれば不要かもしれません。, Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。, AMPページでCSSが50,000Byte(約50KB)を超える「無効なCSSエラー」が出た場合の対処方法, テーマのサムネイルをRetinaディスプレイ対応させる方法(スマホで画像がぼやける対策), Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】, Cocoon 2.2.3公開。WordPress5.5デフォルトのLazy Loadが優先されるように調整。. THE THOR(ザ・トール) サムネイルの表示タイプなんかも設定できるみたいですね。 新着記事 アイキャッチの画像が表示された.  MASAa.blog ⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!, Cocoonのアイキャッチは位置の変更も可能です。基本的には左寄せとなっていますので、バランスが悪いと思ったらこの部分で編集します。, 「アイキャッチの中央寄せ」にチェックを入れて「変更をまとめて保存」をクリックします。, Cocoonのカスタマイズと使い方!【WordPressテーマ】初心者でもカッコよいブログになる設定方法!!, 上記で変更した場合、画像はバランスよく配置されますが、アイキャッチ画像が小さく見える時にはカラムいっぱいに画像の幅を広げることができます。, ここで設置をすると小さな画像でも強制的に引き延ばされますので、ご注意ください。もしぼやけてしまうようなら少し大きな画像にすると良いでしょう。, 「アイキャッチをカラム幅に引き伸ばす」にチェックを入れ「変更をまとめて保存」をクリックします。, 【初心者必見!】THE THOR(ザ・トール)の購入8特典!割引についても調査!【WordPressテーマ】, Cocoonだけではなく一般的にもキャプションという言葉を聞くと思います。簡単に説明すると画像につける説明文(補足)のようなものです。例えば、自分が撮った画像に日付を入れたり、スイーツなら食べたお店の名前とかの情報を入れることができます。, ライブラリにある画像から、キャプションを付けたい画像を選びます。(まだなにもアップロードしていない場合には画像を取りこみます), 右側に画像の情報がでてきますので、その中の「キャプション」という部分に説明文を入れてください。, 「アイキャッチにキャプションがある場合は表示する」にチェックを入れ「変更をまとめて保存」をクリックします。, アイキャッチを設置していない記事のサムネイルなど空欄にならないように「NO IMAGE」としてあるサイトを見たことがあると思います。, 「NO IMAGE」画像はそこまで凝る必要もありませんが、適当に作ってしまうと雑な感じがします。そこで、CANVAを使って「NO IMAGE」画像を作ってみます。, ブログのヘッダー画像の作成ツール「CANVA」で簡単きれい!サイトが5分でおしゃれになる作り方。, 左側の候補の画像の上にカーソルを持っていくと「無料」と出てくるものが使えるテンプレートですので、気に入ったものをクリックすると右側の画像に追加されます。, 文字の部分を変更し、必要であれば色やテキストも調整できるようになっています。(テキストの王冠マークがついているものは有料です), できあがったものをダウンロードします。デフォルトではPNGとなっていますが、JPEGに変更しダウンロードします。, ウィジェットで「[C]人気記事」をサイドバーにドラッグ&ドロップします。展開すると以下のようになります。, サムネイル表示方法を選べますので、試しながら設定してください。好きな画像を選んでチェックを入れ「保存」をクリックします。, Cocoonでは記事内の画像も装飾できるようになっています。(デフォルトでは装飾のない状態です), 「ボーダー(薄い太線)」にチェックを入れて「変更をまとめて保存」をクリックします。, シャドー(薄い影)をあまり見た目には変わりはありませんが好きな方で設定してください。, ↓ このブログから大人気のTHE THORを購入くださった方に特典をプレゼントしています。, 稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。, ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。, などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。, シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。, 今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。, なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。, 稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。, もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。, カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。.  WordPress関連 カルーセルや新着記事といった、ヴィジェットで配置した箇所などのアイキャッチが見切れた場合は、上のコードをfunction.phpに記述することで解消されます。 あ、ファイルをいじる場合はバックアップしておくことをオススメします。 無料WordPressテーマ Cocoon Copyright © 2018 MASAa.net All Rights Reserved. このブログも、先日Googleアドセンス審査の申請をして、無事... カテゴリーの順番は自由に並び替えできません。残念ながら、Cocoonの機能にもカテゴリーの順番を自由に並べ替える機能は備わっていないようです。「Category Order and Taxonomy Terms Order」というプラグインを導入するだけで簡単に解決できました。, 【Cocoon(コクーン)】ブログのサイトアイコンをペイントで作成・変更する方法【WordPress】, ワンオペのお風呂で大活躍!生後2か月から使える【アンパンマンコンパクトおふろチェア】. からあげ棒、ありったけ (WordPressテーマ THE THOR 使用) 高速表示、アイキャッチなど最高です! ... 新着記事.  パソコン関連 (WordPressテーマ THE THOR 使用) Cocoonテーマの公式サイトには最近の投稿(新着記事)に画像付きで表示されているのに、私のサイトには画像表示がない。専門的なカスタマイズが必要なのか?こんな事がハードルになる初心者の悪戦苦 … パソコン選びのコツ 【Cocoon】トップページのカテゴリタブを可愛くカスタマイズする方法!コピペでOK!, このカードの画像は、アスペクト比が2:1で、最小サイズが300×157または最大サイズが4096×4096ピクセルです。. WordPressのブログではトップページに記事の一覧が表示されます。Cocoonでは記事一覧の表示する方法としてリスト形式やカード形式などいくつかの方法があらかじめ用意されています。ここではWordPressのテーマとしてCocoonを使用している場合にトップページの記事一覧の表示方法を変更する … ウィジェット「新着記事」の詳細設定項目. Cocoonはきめ細やかな設定が可能な無料Wordpressテーマです。特にブログ上部に位置するアイキャッチをうまく使うことで印象が良くなります。, 【THE THORの評判】実際使ってみた口コミとレビュー。【WordPressテーマ】, Cocoonのアイキャッチ画像の一部に、カテゴリーが小さいラベルで表示される機能があります。ラベルの効果は、ひとめで何を書いてある記事かわかりやすいことや文章となるとあまり読んでもらえないので、ここで興味を引くこともできます。, アイキャッチは、固定ページと投稿ページに表示されますが、そのアイキャッチ画像にラベルを付けることができます。, 「アイキャッチラベルを表示する」にチェックを入れ「変更をまとめて保存」をクリックします。, このブログからTHE THOR(ザ・トール)をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。, ※残りの3種類とブログの全体像は以下の記事で見れますのでよかったらご覧ください。 Hestiaのカスタマイズ方法を丁寧に解説【ビジネス向けおすすめワードプレステーマ】, 【対策とは】ウイルスバスタークラウドが重い原因!trend micro anti-malware solution platformがメモリを使ってcpuがフリーズ。, Twenty Nineteenのカスタマイズ方法を解説!【高機能だけど簡単なおすすめワードプレステーマ】, WordPressブログのデザイン作り方!無料でどこまでできるか初心者にもわかるように説明!, Storefrontのカスタマイズ方法を丁寧に解説【ビジネス向けおすすめWordPressテーマ】, WordPressにログインできない!ユーザー名の確認やパスワード再設定の対処方法も!, AFFINGER5のブログカードとラベルのカスタマイズ!記事内で目立つリンク先の作成, 初心者でも配色がおしゃれになる組み合わせ!2色~4色でイメージ別に解説。かっこいいwebカラーとはズバリコレ!, AFFINGER5の全体カラーとレイアウト変更!最も簡単なデザインを作ってみる!【作成マニュアル】, Cocoonのスキンとは。インストールと自分好みのWordpressブログにする調整方法, 難しい表現をせず超初心者でも理解できるようなWordpressテーマの使い方説明や、カッコいいデザインの作り方もお伝えしています。, 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!, WordPressのテーマでおしゃれなもの厳選12選!かわいいテンプレートなどアレンジも!, 【図解】AFFINGER5のデザイン済みデーターの使い方!初心者にもわかるように丁寧に説明。, 【動画あり】THE THORの使い方の完全マニュアル!できる、カスタマイズ総まとめ!【WordPressテーマ】. ② アイキャッチ画像の表示サイズを変更できます。 上記の様に設定し変更を保存すると、以下画像の様にサイドバーへ最新記事が表示されます。 サムネイルのサイズ感や、日付の表示等、変更が可能です。 (WordPressテーマ Cocoon 使用), WordPressテーマ  MASAa.net パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト WordPressテーマ「Cocoon」の【関連記事のアイキャッチ画像】に対して、シャドー(影)と角丸コーナーのカスタマイズしてみました。と言う事で【関連記事のアイキャッチ画像】のカスタマイズについて書いたエントリー記事です。