WordPressの目次をスクロール連動＆自動ハイライト！Cocoonでの実装手順を紹介 2025.05.30 wordpress wordpress デザイン カスタマイズ WordPressでは記事の冒頭に目次を入れることが多いですが、サイドバーに表示している人もいますよね。目次があれば全体の流れがつかめて便利ですし、サイドバーでは「今どこを読んでいるか」がハイライトされたりすると更に親切。特に長い記事では読む側も現在地が分かってとても助かります。ということで、今回はスクロール...
【CSS】ふわふわ動くアニメーションボタンの作り方！上下や拡大縮小も簡単にできる 2025.02.13 CSS wordpress デザイン CSS ふわふわ動くボタン、ドキドキ動くボタンの作り方をご紹介。上下にさり気なくフワフワしたり、拡大縮小を使って浮かび上がったり沈んだりと、CSSを使えば、ちょっと目を引くアニメーションボタンが簡単にできますね。【ドキドキ動くボタン１】【ポン！と動くボタン２】【ゆったりフワフワ浮遊ボタン】【ツンと動くボタン】【チョン...
顔文字が改行で崩れる！崩れないようにCSSで文字列をグループ化する方法 2025.02.11 CSS ネットビジネス wordpress 記事作成 デザイン CSS 昔からメールなどでお馴染みの、テキストの「顔文字」。「 ^-^) 」 とか 「 ^-^;) 」 みたなものですが、文字入力から手軽に入力できるのが良いですよね。でもブログで使う場合、表示する画面幅によっては「顔の途中で改行される」などで顔が崩れてしまう問題もあったりします。ここでは顔文字の文字列を１つのグルー...
CSSで改行(brタグ)の高さを設定する方法！marginやpadding, heightで指定できる？ 2025.02.10 CSS wordpress デザイン CSS 改行（<br>タグ）に対して高さを変更したい（高さを設定したい）という場合があります。たとえば、サイトタイトルやブログの記事のタイトルに改行を使い、実際の表示ではその改行に高さを設定して見やすくする、みたいな使い方がありますね。ここではその <br>タグに高さを設定する方法をみてみますが、ブラウザの見え方を考...
リストから表を作るCSS！flexで2列3列4列nのレイアウトを作る方法 2025.02.10 CSS wordpress デザイン CSS ブログのデザインカスタマイズでは、ul, li を使ったリストに対してCSSを使って2列、3列などの表形式で表示したい！という場合がよくあります。table や gridプロパティを使えば簡単に表は出来ますが、ここでは flexを使って簡単に2列、3列、4列といった形にしてみましょう。もう驚くほど簡単ですね。...
CSSでリストから表を作る方法！2列3列4列のレイアウトはgridで簡単にできる！ 2025.02.10 CSS wordpress デザイン CSS HTML、CSSのカスタマイズを多少でもする人はよく出くわすと思いますが、ul, li を使ったリストがあり、それをCSSを使って表形式にしたい場合が結構あります。tableプロパティでも実現できますが、今では grid や flex を使うと物凄く簡単にできますね。ここでは grid を使った場合の例をご紹...
【WordPress】記事タイトルにHTMLタグを入れる方法！ブラウザ向け対応も忘れずに 2025.02.07 カスタマイズ wordpress デザイン カスタマイズ この記事のタイトルは、一部色が変わっていたり「！」の後に改行されていたりと、タイトル（H1）にHTMLタグが入ってます。このブログでは「Coccon」というテーマを使ってますが、「Lightning」や「Luxeritas」など他のテーマでも同じことができますね。ここではワードプレスにおいて、記事タイトル（H...
広告（リンク画像）をセンタリングする方法！NGなやり方はペナルティの元 2023.02.01 CSS ネットビジネス wordpress アフィリエイト デザイン CSS ブログで収益化する場合、A8.netなどASPのリンク付き画像広告（バナー広告）を記事内に貼ることもありますね。ワードプレスのカスタムHTMLブロックを使って広告コードを入れますが、カスタムHTMLブロックはそれ自体センタリングの設定がない。でもレイアウト的に、画像広告を横方向にセンタリングしたい、という場合...
Photoscape X のインストール！無料で簡単な画像ソフトは断然これがおすすめ 2023.01.26 ツール ネットビジネス wordpress ツール デザイン パソコン ブログの記事に画像が貼りたい。その画像を簡単にトリミングしたり文字入れする場合がありますね。こうした画像編集では無料で簡単なソフト Photoscape がありますが、以前の ver3.7はずいぶん昔に開発が終わったようで、今では「Photoscape X」というアプリに生まれ変わってます。Windows版、...
画面キャプチャ無料ソフトFastStone Capture｜ダウンロードと使い方 2022.11.18 ツール ネットビジネス wordpress 記事作成 ツール デザイン Windowsで画面キャプチャといえば附属の「Snipping Tool」がありますが、一旦キャプチャした後に、もう少し端を削っておきたいなど、より綺麗に切り取りたい場合には、ここで紹介する「FastStone Capture」が超おすすめです。私も以前から愛用の無料ソフトで（最新のものは動画の機能もついた有...
【CSS】次の要素ありなしで表示を変える方法 2022.05.25 CSS ネットビジネス wordpress デザイン カスタマイズ CSS 以下のように「要素が1つだけ」の場合と「複数ある場合」とで表示を分けたい、ということがあります。たとえば記事の先頭によくある、カテゴリ、タグの表示などで、1つしか表示する要素がなければ、それだけを表示する。複数（つまり次の要素が）あれば、スラッシュ（ / ）で区切って表示するなんていう場合がありますよね。＜要...
【WordPress】画像に枠を付けるとぼやける？等倍で綺麗に表示する方法 2021.12.27 CSS ネットビジネス wordpress デザイン カスタマイズ CSS 画像にフレームというか枠をCSSで付けると、画像が等倍で表示されず「ぼやける」「滲む」（にじんむ）場合があります。（特に画像に文字が入っていると気になったりしますよね）枠の分だけ画像が縮小されることが原因ですが、その場合CSSの設定はどうするのが良いか、ぼやける理由の詳細や、ぼやけない画像の基本、ワードプレス...
【WordPress】記事本文などの横幅、縦幅を簡単に調べる方法 2021.12.25 CSS ネットビジネス wordpress デザイン カスタマイズ CSS 画像の横幅は最大どれほどが良いかなど見るときに、表示される領域（記事本文など）の横幅や縦幅を調べたい場合があります。ここではグーグルクロームの開発者ツール（デベロッパーツール）を使って簡単に横幅を調べる方法のご紹介。※）クローム以外でも同等の機能があると思いますので、探してみてくださいね。調べたい個所同じ方法...
【WordPress】管理画面や記事作成画面にCSSを反映させる方法！プラグインを使って簡単に行うには 2021.12.15 CSS ネットビジネス wordpress 記事作成 デザイン CSS ワードプレスログイン後の管理画面（記事投稿一覧など）や記事編集画面（エディタ―）でCSSを追加・反映させる方法の解説。CSSを反映させる基本はテーマのための関数（functions.php）に関数追加して… となりこれは結構面倒。ここではプラグインを使って簡単に管理画面にCSSを追加する方法をご紹介。
【ヘッダタイトル】文字だけのロゴ画像の作り方！背景を透明にする方法（PhotoScape編） 2021.11.16 カスタマイズ ネットビジネス wordpress デザイン カスタマイズ ブログのヘッダー画像を設定すると、テーマによってはそのヘッダー画像の上にサイトタイトルやキャッチフレーズが表示されるものがあります。（Cocoonなど）背景の画像の上にタイトルの文字が乗るため、背景の画像に溶け込んだりしてタイトルの文字が見づらくなる場合がありますが、こうした時には文字だけのロゴ画像を作成して...
wordpress wordpress wordpress 
wordpress 
