制作・ハック【Cocoon】検索ボックスのショートコードがないのでテンプレを作成
無料Wordpressテーマ「Cocoon」には「検索ボックス」（検索窓）のショートコードはありません。 フロントページなどで好きな位置に配置できるように、ショートコードではなくテンプレを作ってみました。 意外と簡単で、コピペだけで作れまし...
css
制作・ハック
制作・ハックSCSS→CSSコンパイル監視のwatchが効かない時の対処法
SCSSファイルからCSSにコンパイル（変換）を自動で更新してくれるwatch（監視）の設定を入れてみるも、うまく実行されない…。 結論としては、作成するファイルのディレクトリ（フォルダ）を移行するだけで解決しました。 SCSS→CSSコン...
制作・ハックCocoon ブログカードをリンク先URLによって自動で見た目を変える（ボタン・ラベル）
WordpressテーマのCocoonのブログカード機能を、リンク先のURLによって自動で見た目のデザインを変えるCSSを作りました。 例えば、リンク先がAmazonや楽天ならボタンを付けたり、内部リンクなら関連記事ラベルを表示したり、外部...
制作・ハック【Cocoon】全ての投稿ページを1カラムに！サイドバーを消さずに下に配置にする方法
ブログ記事を1カラム表示にしてスッキリさせたい時におすすめです。（PC表示時） 固定ページなどは除き、全ての投稿ページを1カラムにしてサイドバーを消さずに下に配置する方法を解説しています。 ブログを1カラムにしてスッキリさせたい PCでブロ...
制作・ハック【CSS】吹き出しの三角▼部分の作り方
HTMLとCSSで作る吹き出しデザイン。吹き出しの「三角」の部分、どうやって作っていますか？一番簡単な吹き出しの作り方を伝授します！ 吹き出しの三角部分の作り方 吹き出しのCSSの作り方はこちら 作る流れとしては、まず吹き出しにしたい要素に...
制作・ハック【Cocoon】ブログ記事内のリストをチェックリストにするCSS
ブログ記事内の「リスト」ブロックにCSSを当てて、オリジナルのチェックリストのデザインを作りました。 ブロックエディターで任意のリストブロックにclass名をつけるだけで簡単にチェックリストが表示できるようになります。 チェックリストを作り...
制作・ハックプログラミングスクールに通わず学習する方法とおすすめのWebサービス
巷ではプログラミングスクールが人気ですが、学費が高額なので手が出にくいですよね。 プログラミングスクールに通わず効率よくプログラミングの学習をする方法はないのかどうか、自身の経験を踏まえて考えてみました。また、学習する上でおすすめのWebサ...
制作・ハックブログのアイキャッチを正方形にすると良いこと（サムネイル画像）CSSでトリンミング可能
ブログのアイキャッチ画像は正方形で作っておくと、Google検索結果での表示がきれいに収まるし、各SNSへの共有にも合うので万能でおすすめです。 ページで表示する時には上下をトリミングすれば間延びせずに見やすく収めることもできますよ。 ブロ...
制作・ハック【WordPress】吹き出しのCSSを自作してみた【Cocoon】
吹き出しをCSSで自作 こんにちは 数日前の記事から、記事内に「吹き出し」を入れてみることにしました。 こんなの！ 「吹き出し」って、最近のWebページやブログ記事などではよく見る表現ですよね。 その「吹き出し」をできるだけ簡単に投稿画面（...
制作・ハック【CSS】低画質の画像が綺麗に見える加工・ストライプを重ねる
【CSS】低画質の画像が綺麗に見える加工 サイト上で使用する画像が低画質で見栄えが悪い…でも元画像がもうない・用意するのが面倒臭い…という時は CSSを使って画質をごまかしてみましょう！ CSSで画像の上にストライプを重ねるだけでなんとなく...