CSS

グーグルフォントは重いのか？使うと遅くなるのか表示スピードを検証！

2019.09.13
CSS
今後更に利用が拡大すると思われるWebフォント。でもいくら文字の表示が良いものになったとしても気になるのがその表示スピードです。数あるWebフォントの中でも人気なのが「グーグルフォント」だと思いますが、その表示スピードがどうなるか検証してみました。Webフォントを使うと重くなる（つまり表示スピードが遅くなる）...

フォントを調べる方法！Webサイトやブログはグーグルクロームのツールを使えばすぐ分かる

2019.09.10
CSS
サイトやブログを見ていて、このフォントは何だろう、と調べたくなる場合がありますが、これはツールを使えば簡単に分かります。ツールには２つあり、１つはグーグルクロームの拡張機能「WhatFont」、もう１つは、グーグルクロームの開発者ツール（デベロッパーツール）。簡単に調べるには1つ目の方法（WhatFont）、...

WordPressへYouTubeの貼り付け方法 – 動画の大きさを画面サイズに合わせて自動調整する技

2018.02.21
CSS
記事の中に参考としてYouTubeの動画を貼る場合がありますが、ブラウザなどのウインドウサイズを小さくすると、YouTube動画だけが大きさが変わらず横にはみ出してちゃんと見れない！！なんてことありませんか？WordPressのテーマによっては自動でYouTube動画の大きさを画面サイズに合わせて調整してくれ...

ブログデザインのカスタマイズ！HTMLとCSSの使い方を簡単に理解する！

2017.04.16
CSS
ブログのデザインをカスタマイズをする上で、避けて通れないのがHTMLとCSS.で、でた━━( ﾟ∀ﾟ)人(ﾟ∀ﾟ )━━!! 聞いたことあるけどイヤだーと思ったそこのあなた！いや何事もそうですが、１つ１つ見て行けば難しいことはありません。挫折するとしたら難しいからではなく、簡単そうが故に一気に色々とやろうとし...

横並びのメニュー項目の高さを揃えたい！CSSで子要素にheight100%、親要素に高さを指定するのがコツ

2017.04.16
CSS
ワードプレスなど、テーマのデザインカスタマイズでよく手を入れるのが、上段に表示されるグローバルメニューです。背景色や文字色、枠や影付けなどは今ではCSSで簡単にできますが、メニュー項目の文字数の違いから、高さを揃えたりするのが結構難しかったりするんですね。親のブロック要素の高さが可変で、その中にあるリンクa要...

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

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

ブログの見出しデザインを制覇せよ！CSS貼り付けだけの簡単素材で記事を彩る

2017.04.13
CSS
ブログデザインの中でも大きな要素を占めるものの1つが「見出し」。トップページや個々の記事、またサイドバーなど、ブログのいたるところで使われるものですね。見出しはテーマごとにいろいろとデザインがされていて、テーマの特徴がとてもよく出るものですが、そうであるからこそ逆に人気のテーマでは「あ、これはあのテーマ使って...

ビジュアルエディタにCSSを自動的に適用する！プラグインCSSのURLを捜索せよ！

2016.09.20
CSS
ワードプレスでデザインカスタマイズをするのはとても楽しいですね！サイトも個性が出て読者にとっても楽しくなり、なんといっても”自分でブログを構築している”といった「オーナー気分」も出たりして、記事を書く力も一層入るというものです（笑）そんな時に思うのが、ビジュアルエディタの表示。ビジュアルエディタにもデザインカ...

クラスの指定法 – WordPressでCSSを特定の記事だけ、ページだけに反映したい場合

2016.05.13
CSS
CSSを利用してWordPressでデザインカスタマイズをする場合では、とても便利なプラグイン「JetPack」の「CSS編集」といった機能や「Simple Custom CSS」といったプラグインを使用して、CSSを新たに追加します。ここで「ある特定の記事だけ」、「ある特定のページだけ」にCSSを設定したい...

WordPressのCSSカスタマイズ！読み込み用プラグインとCSS反映の具体例！

2016.05.10
CSS
別記事で見たGoogle Chromeとその開発者ツールの威力。それを武器にCSSがカスタマイズできれば、一気にデザインカスタマイズの可能性が広がります。実際に修正したり他から持ってきたCSSをブログに反映するには、１）使用しているテーマのスタイルシートに直に書き込む２）プラグインを利用したスタイルシートに書...

リストの先頭にフォントでマーク表示！画像を付けるのはもう古い！

2016.01.31
CSS
通常 ul li などのリストを使うと自動的に先頭に丸や四角のマークが付きます。個性を出すためにその先頭のマークを画像などに置き換える、といったカスタマイズをすることもありますが、これが結構大変だったりするんですね。画像の難点は、調度良い形と大きさのものを探してネット上をさ迷い歩くといった放浪の旅に出てしまう...

ブログのデザインカスタマイズの決め手！CSSの適用範囲を確認する技

2015.11.28
CSS
デザインを簡単に修正できるよう、多くのサイトでCSSの具体的記述例が公開されています。（見出しのデザインならは ブログの見出しデザインを制覇せよ！CSS貼り付けだけの簡単素材で記事を彩るの記事を参照してみてくださいね！）CSSをサクッとコピーしてブログに貼り付ければすぐ利用ができる、といった手軽さでとっても便...

ブログデザインのカスタマイズ！CSSのidの指定法を理解する

2015.11.28
CSS
ブログのデザインをカスタマイズをする上で、前回の記事では１つの課題となるCSSのクラスについて使い方をおさえました。 （参照：ブログデザインのカスタマイズ！CSS基本のクラスを理解する）今回はいよいよ第二の壁、CSSの id の使い方です。CSS のクラスと id は、CSSを理解して利用するには避けては通れ...

ブログデザインのカスタマイズ！CSS基本のクラスを理解する

2015.11.27
CSS
ブログのデザインをカスタマイズをする上で、前回の記事でHTMLとCSSの概要をおさえました。（参照：HTMLとCSSの使い方を簡単に理解する！）今回はいよいよ最初の壁となるCSSのクラスの使い方です。HTMLとCSSを使ってみようと思ったはいいけど、結局良くわからずにやめてしまった、という場合、原因の多くは以...

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

2015.10.01
CSS
昔からメールなどでお馴染みの顔文字。テキスト（文字）だけで感情が表現できる、今でも非常にポピュラーな表現手段の１つ。喜怒哀楽が手軽に表現できる、日本オリジナル感が漂うものが沢山あり、文字入力から手軽に入力できて、相手にも必ず同じように表示されるのがなんといっても一番の魅力。ブログを書いたり、ホームページを作っ...