擬似要素before、afterと併用するcontentプロパティ

 content プロパティは要素の前や後ろにテキスト・画像を挿入する際に設定します。このプロパティを使用する場合には、擬似要素である ::before または ::after を併せて使います。例えば次のようになります。Yahoo ニュースなどで一度は見たことがあるのではないでしょうか。 …[続きを読む]

SNSボタンに必須!CSSだけで吹き出しを作る

 ツイッターなどでの拡散を期待してブログに SNS ボタンを設置するのはもはや定番になりましたが、デザインに使われる吹き出しは画像を使わないでも実現することができます。最近は吹き出しジェネレータが Web サービスとして公開されているので仕組みを知らなくても導入できるのですが、細かい位置調整などをしようとするとある程度原理を理解していないと厳しいと思います。 …[続きを読む]

CSSのみで三角形を作るには

 WordPress のサイドバーでドロップダウンの CSS のカスタマイズに三角形が必要になったので調べてみました。画像を使っても実現できますが、色やサイズを簡単に調整できたり、アニメーションができたりとメリットが多いです。画像より容量も縮小できますしね。使うのは border プロパティです。 …[続きを読む]

positionプロパティのabsoluteとrelativeにはどんな違いがあるのか

 要素の配置を指定するプロパティである position ですが、ネットではなんだかわかりにくいとの声が結構聞こえてきます。私も同様に感じていたので、気合を入れて調べてみました。最近ではレスポンシブデザインにも多用されているようなので、避けては通れません。結論を先に言ってしまうと、親:relative・子:absolute の組み合わせと fixed、このふたつを理解しておけばいいのでは? …[続きを読む]

HTML5でブロック要素・インライン要素による分類が廃止された件

 HTML4.01 では要素はブロック要素とインライン要素のいずれかに分類されていましたが、 HTML5 ではコンテンツモデルによって要素を分類するように変更されました。今まではインライン要素のなかにブロック要素を置いてはいけないというルールがあり、HTML 経験の長い人であれば感覚的に何をどこに入れてはいけないかわかっていると思いますが、これがカテゴリー・コンテキスト・コンテンツモデルによってより明確に定義されることになりました。 …[続きを読む]

ブログにシンプルな表を作ってみる

 データを並べて説明するためには表が欠かせません。エクセルで表を作ってスクリーンショットを画像として貼り付けるほうが簡単ですが、記事を読みにきてくれたユーザーが見やすいようにがんばって設定してみました。シンプルですけど。 …[続きを読む]

ブログデザインのカスタマイズに便利なツール・環境について

 ブログを運営している人ならインターネットサーフィンをしていると、「あっ、このデザインかっこいいな」とか「こんな風に自分のブログをカスタマイズしたい」と思うことがあるかと思います。今回は自分のブログをどのようにカスタマイズしていったらいいのか考えてみたいと思います。 …[続きを読む]

直下の子要素にだけスタイルを指定するCSSセレクタの書き方

 広告の画像を横に並べて表示しようとスタイルシートを書いていたのですが、DIV タグに class 属性を付けずに手を抜こうとしたところ、後になってどのように CSS セレクタを記述したらいいのかものすごい悩んだ、というしょうもない話です。クラス名とか関数名とか、いっつも悩むんですよ。 …[続きを読む]

WordPressのサイドバーのリストの最後の下線を消したいとき

 WordPress で運用されているブログは、ダイナミックサイドバーを使ってサイドバーを実現しているテーマが多いと思いますが、「最近の投稿」や「アーカイブ」などは ul と li を使用したリストになっています。ここで、見やすくしようとしたり、見栄えをよくしようとしてリストの項目ごとに下線を引こうとすると、 …[続きを読む]

WordPressの「続きを読む」をスタイルシートでカスタマイズするとき注意すること

 前の記事「the_excerpt()による「続きを読む」のなにが問題なのか? | Naokix.net」で WordPress の「続きを読む」について少しばかり述べましたが、CSS をいじっていて気がついたことがあったのでメモ。 …[続きを読む]

登録フォームでよく見るプルダウンメニューの使い方

 複数の項目からひとつを選ぶときに使うプルダウンメニューは、やることはラジオボタンと同じなのですが、場所を取らずにすっきりとしたレイアウトに仕上げることができます。立ち上げたばかりの超弱小な当ブログにはあまり関係ありませんが、何年もの間ブログを運営し続けると、アーカイブが数十行にもなってしまい、 …[続きを読む]

WordPressのテーマ自作初心者がメニューを設置してみる

 出来合いのテーマを使っている場合は既にいろいろと設定してくれてるので気にすることもないですが、自分でテーマを作った際にメニューを設置するときに必要になりそうな知識をまとめてみました。もちろん、既存のメニューのないテーマにメニューを追加するときにも参考にしてください。 …[続きを読む]

WordPressのテーマのカスタマイズでリンクの下線が消せないときにチェックすること

 WordPress でブログを立ち上げたら、やはりお洒落なテーマで自分のブログを格好良くしたいと思う人は多いと思います。できあいのものをそのまま使っているうちは問題ないのですが、少しテーマをカスタマイズしようとすると、途端にハードルが上がったりします。管理人が最初につまづいたのは、 …[続きを読む]

簡単だけどWordPressのデザインに統一感をだすリンクの装飾

 WordPress でテーマを自分で作ったとき、がんばってデザインを考えたのにリンクの色などが気に食わない場合にお役に立ててください。最近は CSS を使ってかっこいいアニメーションなどで装飾したりする場合も多いでしょうが、今回の方法ならかなり簡単にカスタムできます。 …[続きを読む]

引用を活用してWordPressの記事の品質をアップしようぜ!

 それとなくSEOを意識したタイトルにしてみたものの、なんとなく固かったので語尾を崩してみたら、そこはかとなくイケてない感じがするのは何故なのでしょうか。以前アメーバでブログをやっていたのですが、何年も放置したことでブログでの引用の仕方を忘れてしまったので、調べなおしてメモしておきます。 …[続きを読む]

Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP