「CSS」の記事一覧

【WordPress】CSSやJavaScript,jQueryを簡単追加する方法!プラグインのおすすめ

ワードプレスでカスタマイズをする、となると、必ず出て来るCSSやJavaScript, そして jQuery。 ネットで検索するとサンプルコードは沢山出てきますが、実際にそれらのコードをワードプレスに反映させるにはどうするか?とそもそものところが難しい、という感じです。 こうしたところはプ […]

ブログ記事一覧のサムネイル画像をマウスオーバーで拡大させる!CSSで簡単カスタマイズ

ブログの記事一覧表示にアイキャッチ画像(サムネイル画像)を表示している場合が多いですが、その画像にカーソルを乗せる(マウスホバーさせる)と、「画像がふわっと拡大表示される」という場合がありますね。 この「画像がふわっと拡大表示」は実はCSSを使って簡単に実現できますので、是非試してみてくだ […]

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

改行(<br>タグ)に対して高さを変更したい(高さを設定したい)という場合があったりします。 たとえば、サイトタイトルやブログの記事のタイトルに改行を使い、実際の表示ではその改行に高さを設定して見やすくする、みたいな使い方になりますが、ここではその <br>タグに高 […]

アドセンスの自動広告にラベルを付ける方法!スポンサーリンク、広告表示はどうすれば良い?

アドセンスの自動広告は非常に便利ですが、記事の中でいろいろな個所に表示されると、読み手から見て分かりづらくない?ということで、広告ラベル(「スポンサーリンク」や「広告」といったラベル)を貼って本文とは明らかに区別したい、と思う場合があります。 広告コードを取得してプラグインなどを使って広告 […]

スクロール固定・追従するサイドバーウイジェット!cssだけで作る方法

サイドバーに表示している広告や目次などで、画面をスクロールしても画面の上とかに固定されて追従してくるものってありますよね? ワードプレスで使うテーマによってはそうした動作をするサイドバー専用のウイジェットが用意されている場合もありますが、私が使っている賢威8にはないようです。 そこでここで […]

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

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

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

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

【WordPress】記事投稿画面にCSSを反映させる方法!プラグインを使って簡単に行うには

ワードプレスもバージョンが上がり、エディターもGutenberg(グーテンベルグ)となりました。でも、今まで記事編集画面(エディター)にCSSを反映させていたのが、この新しいエディターで反映されない!となるとストレスも溜まり作業効率も落ちますよね。(私がそうですが ^-^;)) […]

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

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

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

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

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

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

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

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

CSSでリストから表を作る方法!flexプロパティを使えば2列、3列、4列のレイアウトは簡単過ぎる!

ブログでデザインカスタマイズでは、ul, li を使ったリストに対してCSSを使って2列、3列などの表形式で表示したい!という場合がよくあります。 tableプロパティを使えば簡単に表は出来ますが、floatを使って2列、3列といったレイアウトなどにした場合に隣同士の高さが揃わず、罫線を引 […]

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

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

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

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