cocoon

制作・ハック

【WordPress初心者】ブログ記事内のブロックにクラス名(class)を追加する方法【CSS】

WordPressでCSSを追加してページ内に反映させるには、該当要素にクラス名を追加する必要があります。CSSを追加したものの、クラス名のつけ方がわからない…という方は是非参考にしてくださいね。段落ブロックにクラス名(class)を追加す...
制作・ハック

【CSS】テキストリンクのクリックできる領域を増やす方法【WordPress】

普通のテキストリンクだとテキストの範囲しかクリックできませんが、テキストの周囲もクリックできる領域にしてしまう方法があります!広い範囲をクリックできるようになるので、クリック率もアップするかも👍CSS関連記事はこちらテキストリンクのクリック...
制作・ハック

【WordPress】Rinkerリンク切れの画像サムネイルが消える→画像準備中を表示させて対処【CSS】

商品リンク作成の「Rinker」プラグインで、リンク切れが起きてサムネイル画像が非表示になってしまう時に「画像準備中」などを表示させて対処した記録です。Rinkerのリンク切れで画像が消えてしまったリンク切れの更新がすぐできないという時に利...
制作・ハック

【ブログ】テキストリンクを貼ると自動でバナーが出てくるCSSの書き方【WordPress/Cocoon】

WordPressなどブログ上で、テキストリンクにクラス名を追加するだけでバナーが表示されるCSSを作りました!このCSSを追加すればエディター上ではテキストリンクを作るだけ!簡単にバナー付きリンクを表示させることができます。テキストリンク...
制作・ハック

【Cocoon】投稿した画像を加工せずに円形や長方形にトリミングするCSSの方法【WordPress】

WordPressのブログ記事に画像をアップしたものの、周りに写っているものをトリミングしたいな〜でも加工して再アップしたくないなという時ありませんか?すでに投稿した画像をトリミングしたい長方形の画像を円形にトリミングしてメリハリをつけたい...
制作・ハック

【WordPress】ブログ記事の好きな位置に矢印を入れる方法【CSS】

ブログ記事で流れや手順の説明をしている内容の時に「↓矢印」が好きな位置に配置できたら便利じゃないですか?Wordpressの投稿記事内の好きな位置に矢印を入れることができる方法をまとめてみました。ブログ記事の好きな位置に矢印を入れる方法ブロ...
制作・ハック

コンテンツブロッカー対策をした記録。(ASPタグ改変なし)

iPhone等でブラウザにコンテンツブロッカーを使っているとブログ記事の一部のアフィリエイトリンクが表示されなくなってしまいます。それだとブログ記事の内容が正常に伝わらず見栄えも悪くなってしまうので、アフィリエイトタグを改変せずにできる限り...
制作・ハック

ブログ記事内のテキストリンクをボタンにするCSS

ブログ記事にリンクをつけることはよくありますが、テキストリンクだけでは寂しい時やもっと目立たせたい時はありますよね。CSSを追加してテキストリンクからボタンのデザインに変更できるようにしてみました。Class名を付け替えるだけでデザインを切...
制作・ハック

【Cocoon】検索ボックスのショートコードがないのでテンプレを作成

無料Wordpressテーマ「Cocoon」には「検索ボックス」(検索窓)のショートコードはありません。フロントページなどで好きな位置に配置できるように、ショートコードではなくテンプレを作ってみました。意外と簡単で、コピペだけで作れましたの...
制作・ハック

Cocoon ブログカードをリンク先URLによって自動で見た目を変える(ボタン・ラベル)

WordpressテーマのCocoonのブログカード機能を、リンク先のURLによって自動で見た目のデザインを変えるCSSを作りました。例えば、リンク先がAmazonや楽天ならボタンを付けたり、内部リンクなら関連記事ラベルを表示したり、外部リ...
スポンサーリンク