🔰はじめての方へ

CSS

CSS

【CSS】「counter-increment」使い方メモ/番号を付ける

counter-increment とは複数ある要素に番号を付けたいときに使用します。様よりお借りしました使い方疑似要素に「content: counter();」も指定します。文章の先頭に数字を入れたいとき、 li { counter-i...
CSS

【リセットCSS】概要とNormalize.cssの使い方

リセットCSSとは「Google Chrome」「Safari」「Microsoft Edge」など、それぞれ異なるブラウザでもすべて同じように、サイトが表示されるためのCSSのことです。リセットCSSを使用するのは一般的になっています。ブ...
CSS

【WordPress】モバイルボタンの表示が遅い!苦戦!!

私は、Wordpress のテーマ「cocoon」を使用しています。スキンの変更や、モバイルボタンの変更をしていたら、モバイルボタンの表示が遅いことに気が付きました。2秒程度待つと出てくるか、スクロールをすると出てくるようになっています。そ...
CSS

【CSS】アニメーションを付けられる「transition」の意味、使い方

transitionについて学習します。transitionとは「transition」は、ページにCSSでアニメーションをつけることができます。「transition-duration:3s」は、3秒かけて表示していくアニメーションになり...
CSS

トップページ(固定ページ)のタイトルがどうしても消えない

私は、Wordpressテーマ「cocoon」を使用しています。トップページを固定ページにしている場合、タイトルをCSSで簡単に消すことができます。固定ページ編集画面の「カスタムCSS」に記述する場合h1 {display: none;}c...
CSS

CSSが反映しない!CSSの読み込み優先順位

CSSについて学習中なのですが、記述したCSSが反映されないことがありました。CSSを記述する際には優先順位について理解しておく必要があります。CSSについて簡単に振り返りCSSはスタイルシートとよばれ、ページの装飾をするのに使用します。H...
CSS

CSSの基礎文法学習!

CSSの基礎文法CSSは、セレクタ・プロパティ・値の3つからなります。書き方のポイントプロパティと値は、「{}」で囲みます。プロパティと値の間は「:(コロン)」複数プロパティを指定するときは、終わりに「;(セミコロン)」を忘れずに!コメント...
Wordpress

【cocoon】トップページのデザイン画像リンクのレイアウト

画像リンクはカーソルを当てると、画像が薄くなるようなデザインになっております。このデザインの参考にさせていただいたサイト様画像リンクの動くデザインCSSはこちらも参考にさせていただいております。
Wordpress

【WordPress】サイドバーの目次をスクロールさせたい

デフォルトでサイドバースクロール追従に目次を追加した場合、変なところで目次が切れてしまう問題が発生しました。その対処についてご説明します!ウィジェットの設定①左の欄の「外観」をクリックまたは、カーソルを当てる②「ウィジェット」を選択③目次の...
Wordpress

【WordPress】ヘッダーをおしゃれに、メニューを右にまとめる

Wordpressのデザインを変更したいときに、参考になる方法があったのと、問題点の対処法をまとめたのでご紹介します。完成図現在のフロントページは変更されているかもしれませんが、このような感じで編集しました。ここではWordpressのテー...