Tips

制作・ハック

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

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

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

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

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

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

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

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

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

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

SCSS→CSSコンパイル監視のwatchが効かない時の対処法

SCSSファイルからCSSにコンパイル(変換)を自動で更新してくれるwatch(監視)の設定を入れてみるも、うまく実行されない…。 結論としては、作成するファイルのディレクトリ(フォルダ)を移行するだけで解決しました。 SCSS→CSSコン...
制作・ハック

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

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

Canvaでドロップシャドウを使う方法【Canva新機能】

シンプルで高機能な画像編集ソフト「Canva」で、ついにドロップシャドウが使えるようになっていました。使い方をまとめてみましたので是非ご覧ください。 Canvaでドロップシャドウは使える? 以前にCanva Proを紹介した時には、シャドウ...
ガジェット・家電

【テレワーク】リモートデスクトップ接続を安定させるためにやったこと

テレワークで使うChromeリモートデスクトップ。別のPCを操作できるのが便利な機能ですが、接続が不安定だと使えませんよね。そこでリモートデスクトップの接続を安定させるために対処したことをまとめました。 便利なChromeリモートデスクトッ...
制作・ハック

【CSS】吹き出しの三角▼部分の作り方

HTMLとCSSで作る吹き出しデザイン。吹き出しの「三角」の部分、どうやって作っていますか?一番簡単な吹き出しの作り方を伝授します! 吹き出しの三角部分の作り方 吹き出しのCSSの作り方はこちら 作る流れとしては、まず吹き出しにしたい要素に...
スポンサーリンク