CSS

インターネット

「display: grid」 は「grid-template-columns」とともに

「display: grid」を使って、テーブルのようなレイアウトを作ってみました。
ブログ関連

tableを横線だけのスタイルにする(HTMLとCSSの記述案)

表はさ。罫線を減らした方が見栄えがよさそうな感じがするんだ。
ブログ関連

画面スクロールしても常駐してくれるstickyが楽しかったので

スクロールしても常駐してくれるボタンを設置したい!(CTAとしては強力な気がしています。)
ブログ関連

マウスオーバー時の画像切替えをCSSで実装

マウスオーバーで画像を切替える動きをCSSだけで実装します。JavaScriptなしです。
ブログ関連

HTMLだけで折り畳み構成(summary と details) + ちょっと装飾

HTMLタグだけで、いわゆるアコーディオンメニューを構成できます。
ブログ関連

リスト(ul、li)のマークはCSSで変更(HTMLソースの話)

CSSの疑似クラス(:before)を利用して、リストの先頭マークを調整します。
ブログ関連

全角と半角は使い分けたい(SEOのアピールになる?)

SunShine! 英単語は半角で書いてね。記号は全角で書いてね。 機械に読んでもらうってこと 誰か 細かいな。 SunShine! ちゃんと意味あんのよ。 主にSEOみたいな話なのかな。テキスト読み上げでも一緒でしょ? 機械的に文字列を読...
ブログ記事

CSSで兄弟要素の幅に合わせる(WordPressで画像の真下に中央揃えでキャプションを入れたい!)

画像は左揃えにして、そのブロック内でキャプションを中央揃えにするレイアウトになっているはずです。
ブログ関連

一部の表示がダメみたいでして(#Gutenbergが悪い!)

最近発見したんだけど、GutenbergのCSSがやべー。
ブログ関連

SNSアイコン画像をCSSでいい感じに表示させたい

ボタン用に準備した画像をマウスオーバーで色反転させたいのです。
ブログ関連

HTMLのリスト要素(li)の行頭記号をCSSで変更する話

HTMLでリストを書く場合、「ol」か「ul」を使います。リストの冒頭に設定される数字や記号(マーク)は、HTML解釈による自動設定です。これは、CSSで調整が可能なのです。
ブログ関連

WordPressテーマ『Freesia Empire』でホームページを改修

当ブログでは、WordPressを使っています。そして、利用しているテーマは『Freesia Empire』というものです。このテーマに実装されている、ホームページのカスタマイズ機能を適用しました。当ブログのホームページや、デモ画面にあるような見た目にできます。思っていた以上にいろいろなところに調整が必要だったので、記録を残します。
ブログ関連

「WordPress Popular Posts」で自分好みに順位を表示できるようにCSSを設定

当ブログでもお世話になっているプラグイン『WordPress Popular Posts』。アクセスランキングを簡単に表示できて、重宝しております。ところで、順位の数字を1、2、3・・・と付けたいのです。CSSできれいに装飾もしたいのです。
ブログ関連

HTMLタグの見出し(Headline: h)の構成を変更した記録(h3をh2に変更)

当ブログの見出し(Headline)構成を最適化しました。h3をh2に、h4をh3に、と、ナンバー構成の変更です。WordPressのプラグインを利用して一括置換して、関係するcssの記述も変えておきました。すべてステージング環境で実施後、本番環境にコピーしました。
ブログ関連

【CSS】アルファベットを大文字化する設定(解除しました)

現在利用中のWordPressテーマ『Freesia Empire』(無料版)では、「text-transform」がCSSファイルで指定されている項目が多いのです。アルファベットが強制的に大文字になるのには困っていたので、noneを優先指定しました。
ブログ関連

【CSS】タグに「style」で書式を指定しているのに反映されずに苦労した件

CSSで書式が調整されているブログに記事を投稿した際、対象部分だけどうしても見た目を変更したいことがあります。CSSでは、優先順位が最も高い「style」オプションによるタグ内指定でよいという認識でしたが、理解が中途半端だったために苦労したという話です。
ブログ関連

直近のカスタマイズ(固定ページの抜粋表示、ラインマーカー風文字装飾の追加)

ブログの見た目を調整しました。直近で2つです。1つは、固定ページで「抜粋」を表示、編集できるようにしました。もう1つは、ラインマーカー風の文字装飾ができるようにCSSを追加しました。
ブログ関連

【WordPress】ビジュアルエディターのフォントをゴシック体に変更

WordPressの投稿をビジュアルエディターで編集する際に、明朝体フォントでの表示だと違和感があったので、ゴシック体に変更しました。
ブログ記事

テーマを更新する前に確認

テーマを更新することになったのですが、無計画に更新していたので、これを機に更新箇所のみを子テーマに移します。
ブログ記事

子テーマを使うように切り替えた

無料テーマを使っていて、細かい調整を入れていました。 特にCSSをいじくりまわしていました。しかも直接。。 ネットでいろいろ読んでいると、どうやら子テーマにしてカスタマイズした方がよいということで、早速設定、導入してみました。 子テーマにす...