制作・ハックブログ記事内のテキストリンクをボタンにするCSS
ブログ記事にリンクをつけることはよくありますが、テキストリンクだけでは寂しい時やもっと目立たせたい時はありますよね。 CSSを追加してテキストリンクからボタンのデザインに変更できるようにしてみました。Class名を付け替えるだけでデ...
Tips
制作・ハック
制作・ハック【Cocoon】検索ボックスのショートコードがないのでテンプレを作成
無料Wordpressテーマ「Cocoon」には「検索ボックス」（検索窓）のショートコードはありません。 フロントページなどで好きな位置に配置できるように、ショートコードではなくテンプレを作ってみました。 意外と簡単で、コピペ...
制作・ハックSCSS→CSSコンパイル監視のwatchが効かない時の対処法
SCSSファイルからCSSにコンパイル（変換）を自動で更新してくれるwatch（監視）の設定を入れてみるも、うまく実行されない…。 結論としては、作成するファイルのディレクトリ（フォルダ）を移行するだけで解決しました。 SCS...
制作・ハックCocoon ブログカードをリンク先URLによって自動で見た目を変える（ボタン・ラベル）
WordpressテーマのCocoonのブログカード機能を、リンク先のURLによって自動で見た目のデザインを変えるCSSを作りました。 例えば、リンク先がAmazonや楽天ならボタンを付けたり、内部リンクなら関連記事ラベルを表示した...
制作・ハックCanvaでドロップシャドウを使う方法【Canva新機能】
シンプルで高機能な画像編集ソフト「Canva」で、ついにドロップシャドウが使えるようになっていました。使い方をまとめてみましたので是非ご覧ください。 Canvaでドロップシャドウは使える？ 以前にCanva Proを紹...
ガジェット・家電【テレワーク】リモートデスクトップ接続を安定させるためにやったこと
テレワークで使うChromeリモートデスクトップ。別のPCを操作できるのが便利な機能ですが、接続が不安定だと使えませんよね。そこでリモートデスクトップの接続を安定させるために対処したことをまとめました。 便利なChromeリモートデ...
制作・ハック【CSS】吹き出しの三角▼部分の作り方
HTMLとCSSで作る吹き出しデザイン。吹き出しの「三角」の部分、どうやって作っていますか？一番簡単な吹き出しの作り方を伝授します！ 吹き出しの三角部分の作り方 吹き出しのCSSの作り方はこちら 作る流れとしては...
制作・ハック【Cocoon】ブログ記事内のリストをチェックリストにするCSS
ブログ記事内の「リスト」ブロックにCSSを当てて、オリジナルのチェックリストのデザインを作りました。 ブロックエディターで任意のリストブロックにclass名をつけるだけで簡単にチェックリストが表示できるようになります。 チェッ...
制作・ハックブログのアイキャッチを正方形にすると良いこと（サムネイル画像）CSSでトリンミング可能
ブログのアイキャッチ画像は正方形で作っておくと、Google検索結果での表示がきれいに収まるし、各SNSへの共有にも合うので万能でおすすめです。 ページで表示する時には上下をトリミングすれば間延びせずに見やすく収めることもできますよ...
制作・ハック【WordPress】吹き出しのCSSを自作してみた【Cocoon】
吹き出しをCSSで自作 こんにちは 数日前の記事から、記事内に「吹き出し」を入れてみることにしました。 こんなの！ 「吹き出し」って、最近のWebページやブログ記事などではよく見る表現ですよね。 その「吹き出...