デザイン

WordPressの目次をスクロール連動＆自動ハイライト！Cocoonでの実装手順を紹介

2025.08.01
wordpress
WordPressでは記事の冒頭に目次を入れることが多いですが、サイドバーに表示している人もいますよね。目次があれば全体の流れがつかめて便利ですし、サイドバーでは「今どこを読んでいるか」がハイライトされたりすると更に親切。特に長い記事では読む側も現在地が分かってとても助かります。ということで、今回はスクロール...

ブログのヘッダー画像の作り方！簡単リサイズから文字入れまで独自性を打ち出す

2025.08.01
デザイン
ブログは人気のテーマを使っていると、外観も他のブログとの違いがわかりづらく、グーグルから独自性がない＝読者にとって有益でないサイト、と判断されることも懸念されます。なにより他のブログとの違いが見えなければ訪れる読者も魅力を感じず、すぐ別のブログに行ってしまう、ということも考えられますね。そこで、外観の一番のポ...

【CSS】光るボタンアニメーションの作り方！カスタマイズまで手順を詳しく解説

2025.07.28
CSS
コクーン（cocoon）などのテーマで「キラッと光が横切るアニメーション付きのボタン」があったりしますが、何気にカッコいいし、目立ってクリック率も上がりそうですよね。ということで、ここではHTML, CSSを使って「自作で光るボタンの作り方」をご紹介。できあがりは、ほぼコクーンの光るボタンと同等になったと思い...

ブログのヘッダー画像サイズは？最新トレンドと推奨サイズを解説！

2025.07.25
デザイン
ブログの第一印象を大きく左右するヘッダー画像。サイトの一番上にある、顔とも言える大切な画像です。横幅は使用するテーマの幅によってきますが、縦幅をどうするかで見た目の印象もずいぶんと変わります。個性が打ち出せるかどうかの大きなポイントととなりますので、考え方など含め解説です。大きさ（縦・横サイズ）現在のトレンド...

顔文字が改行で崩れる！崩れないようにCSSで文字列をグループ化する方法

2025.02.11
CSS
昔からメールなどでお馴染みの、テキストの「顔文字」。「 ^-^) 」 とか 「 ^-^;) 」 みたなものですが、文字入力から手軽に入力できるのが良いですよね。でもブログで使う場合、表示する画面幅によっては「顔の途中で改行される」などで顔が崩れてしまう問題もあったりします。ここでは顔文字の文字列を１つのグルー...

CSSで改行(brタグ)の高さを設定する方法！marginやpadding, heightで指定できる？

2025.02.10
CSS
改行（<br>タグ）に対して高さを変更したい（高さを設定したい）という場合があります。たとえば、サイトタイトルやブログの記事のタイトルに改行を使い、実際の表示ではその改行に高さを設定して見やすくする、みたいな使い方がありますね。ここではその <br>タグに高さを設定する方法をみてみますが、ブラウザの見え方を考...

リストから表を作るCSS！flexで2列3列4列nのレイアウトを作る方法

2025.02.10
CSS
ブログのデザインカスタマイズでは、ul, li を使ったリストに対してCSSを使って2列、3列などの表形式で表示したい！という場合がよくあります。table や gridプロパティを使えば簡単に表は出来ますが、ここでは flexを使って簡単に2列、3列、4列といった形にしてみましょう。もう驚くほど簡単ですね。...

CSSでリストから表を作る方法！2列3列4列のレイアウトはgridで簡単にできる！

2025.02.10
CSS
HTML、CSSのカスタマイズを多少でもする人はよく出くわすと思いますが、ul, li を使ったリストがあり、それをCSSを使って表形式にしたい場合が結構あります。tableプロパティでも実現できますが、今では grid や flex を使うと物凄く簡単にできますね。ここでは grid を使った場合の例をご紹...

【WordPress】記事タイトルにHTMLタグを入れる方法！ブラウザ向け対応も忘れずに

2025.02.07
カスタマイズ
この記事のタイトルは、一部色が変わっていたり「！」の後に改行されていたりと、タイトル（H1）にHTMLタグが入ってます。このブログでは「Coccon」というテーマを使ってますが、「Lightning」や「Luxeritas」など他のテーマでも同じことができますね。ここではワードプレスにおいて、記事タイトル（H...

画面キャプチャ無料ソフトFastStone Capture｜ダウンロードと使い方

2025.01.28
ツール
Windowsで画面キャプチャといえば附属の「Snipping Tool」がありますが、一旦キャプチャした後に、もう少し端を削っておきたいなど、より綺麗に切り取りたい場合には、ここで紹介する「FastStone Capture」が超おすすめです。私も以前から愛用の無料ソフトで（最新のものは動画の機能もついた有...

ブログのデザインカスタマイズ！Google Chromeの開発者ツールでCSSを思いのままに操る！

2024.08.24
ツール
デザインカスタマイズでは多少なりとも必要となるHTMLとCSS。ゼロから全て学ぼうとすると、時間もかかりかなり大変なことですが、深く広く全て知る必要はなく、ポイントをおさえて必要な所のみを学んでいく、という姿勢で十分です。（この記事を読めばコピペを基本に覚えれば良い！といった感覚になるはずです（笑））まずは他...

【CSS】ふわふわ動くアニメーションボタンの作り方！上下や拡大縮小も簡単にできる

2024.03.28
CSS
ふわふわ動くボタン、ドキドキ動くボタンの作り方をご紹介。上下にさり気なくフワフワしたり、拡大縮小を使って浮かび上がったり沈んだりと、CSSを使えば、ちょっと目を引くアニメーションボタンが簡単にできますね。【ドキドキ動くボタン１】【ポン！と動くボタン２】【ゆったりフワフワ浮遊ボタン】【ツンと動くボタン】【チョン...

cssで先頭のや最後の要素を指定するには？nth-childとnth-of-typeの使い分け

2023.04.15
CSS
ブログやサイトのデザインカスタマイズをしていると「先頭や最後のこの要素だけに指定がしたいんじゃぁ~」という場合が多くあります。力技、というか、まぁ普通にやろうとすれば、先頭の要素や最後の要素だけにクラスを指定して、そのクラスに対してCSSを定義する、なんてことをしますが、これが毎回クラス指定を書く、となると、...

広告（リンク画像）をセンタリングする方法！NGなやり方はペナルティの元

2023.02.01
CSS
ブログで収益化する場合、A8.netなどASPのリンク付き画像広告（バナー広告）を記事内に貼ることもありますね。ワードプレスのカスタムHTMLブロックを使って広告コードを入れますが、カスタムHTMLブロックはそれ自体センタリングの設定がない。でもレイアウト的に、画像広告を横方向にセンタリングしたい、という場合...

Photoscape X のインストール！無料で簡単な画像ソフトは断然これがおすすめ

2023.01.26
ツール
ブログの記事に画像が貼りたい。その画像を簡単にトリミングしたり文字入れする場合がありますね。こうした画像編集では無料で簡単なソフト Photoscape がありますが、以前の ver3.7はずいぶん昔に開発が終わったようで、今では「Photoscape X」というアプリに生まれ変わってます。Windows版、...