WordPress・Cocoon

WordPress・Cocoon

Gutenbergで他のブログ記事をカード表示する方法

1.適当な文字にカード表示させたいURLのリンクを貼る 2.コードエディタで表示してaタグ部分をコピーする 3.ビジュアルエディタに戻り、ブロック作成で「カスタムHTML」を選択...
WordPress・Cocoon

Cocoonデフォルトの「枠線の丸め(border-radius)」の打ち消し方

Cocoonはデフォルトで枠線角に丸めが入っている個所があるのですが、この丸めの打ち消し方は、該当箇所のCSSに「 border-radius: 0; 」を追加する という簡単な作業です。 たったこれだけなのですが、私のような初心者...
WordPress・Cocoon

ナビケーションメニューでの FontAwesome の入れ方

アイキャッチにもなって見やすいアイコンフォント FontAwesome を、ナビゲーションメニューで使ってみたので、簡単に手順を書いてみました。 FontAwesomeサイトからHTMLをコピー FontAwe...
WordPress・Cocoon

記事全体に枠線をつける

とても簡単な追加CSSなのですが、忘備録として残しておきたいと思い、記事にしました。 #main{ border: 1px solid #ddd; } 場合によってはヘッダーとの兼ね合いにより、main上...
WordPress・Cocoon

商品リンクボタンのHTMLとCSS

Amazonで見る Sample Rinkerなどとは別に、個別で商品リンクをしたいときの、Amazonなどへの誘導ボタンのHTMLと追加CSSです。コピー、カスタマイズなど自由にお使いくださ...
WordPress・Cocoon

WordPress 投稿見出しのセレクタ

見出しをカスタマイズしてみたいと思い、F12を押してデベロッパーツールからセレクタを抜き出してみました。 .article h○ が、それぞれの見出しのセレクタとなります。{ } 内は、私個人の「外観→カスタマイ...
WordPress・Cocoon

Cocoonでサイドバーの見出しのカラーだけを変更する方法

Cocoon設定内では、サイドバーの見出しのカラー変更は個別ではできません。でも、ほんの少しだけCSSコードを書き加えると、個別で思い通りのカラーに変更することができます。 書き加えるCSSコード .sidebar h3 { ...
WordPress・Cocoon

WordPressの記事をTwitterでお知らせする方法

Cocoonなら簡単にできました。以前は小難しく考えすぎて途中で挫折してしまったのですが、こんなに簡単だったなんて、ちょっと目からウロコでした。 設定(準備) ①Twitterのアカウントを用意する Twitterへの...
WordPress・Cocoon

Cocoonで画像が表示されない時の対処例

Cocoonを使っていて、記事内に画像があってもインデックスで表示されなくなったときの対処例です。 ※大量のページで症状が出ている方には不向きな方法となってしまいます。 (↑イメージを再現するために、記事内に画像のないページ...