インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

「 CSS 」 一覧

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

2016-08-24_152333

ワードプレスでデザインカスタマイズをするのはとても楽しいですね! サイトも個性が出て読者にとっても楽しくなり、なんといっても”自分でブログを構築している”といった「オーナー気分」も出たりして、記事を書 …

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

shutterstock_328511270

ワードプレスなど、テーマのデザインカスタマイズでよく手を入れるのが、上段に表示されるグローバルメニューです。 背景色や文字色、枠や影付けなどは今ではCSSで簡単にできますが、メニュー項目の文字数の違い …

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

2016-07-16_202109

ブログでデザインカスタマイズでは、ul, li を使ったリストに対してCSSを使って2列、3列などの表形式で表示したい!という場合がよくあります。 tableプロパティを使えば簡単に表は出来ますが、f …

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

shutterstock_328511270

CSSを利用してWordPressでデザインカスタマイズをする場合では、とても便利なプラグイン「JetPack」の「CSS編集」といった機能や「Simple Custom CSS」といったプラグインを …

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

shutterstock_106649390

通常 ul li などのリストを使うと自動的に先頭に丸や四角のマークが付きます。 個性を出すためにその先頭のマークを画像などに置き換える、といったカスタマイズをすることもありますが、これが結構大変だっ …

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

shutterstock_328511270

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

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

html_css

デザインを簡単に修正できるよう、多くのサイトでCSSの具体的記述例が公開されています。 (見出しのデザインならは ブログの見出しデザインを制覇せよ!CSS貼り付けだけの簡単素材で記事を彩るの記事を参照 …

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

corridor-598319_1280

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

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

html_css

別記事で見たGoogle Chromeとその開発者ツールの威力。それを武器にCSSがカスタマイズできれば、一気にデザインカスタマイズの可能性が広がります。 実際に修正したり他から持ってきたCSSをブロ …

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

html_css

ブログのデザインをカスタマイズをする上で、前回の記事では1つの課題となるCSSのクラスについて使い方をおさえました。 (参照:ブログデザインのカスタマイズ!CSS基本のクラスを理解する) 今回はいよい …

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

html_css

ブログのデザインをカスタマイズをする上で、前回の記事でHTMLとCSSの概要をおさえました。(参照:HTMLとCSSの使い方を簡単に理解する!) 今回はいよいよ最初の壁となるCSSのクラスの使い方です …

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

html_css

ブログのデザインをカスタマイズをする上で、避けて通れないのがHTMLとCSS. で、でた━━( ゚∀゚)人(゚∀゚ )━━!! 聞いたことあるけどイヤだーと思ったそこのあなた! いや何事もそうですが、 …

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

film-589491_1280

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

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

html_css

昔からメールなどでお馴染みの顔文字。テキスト(文字)だけで感情が表現できる、今でも非常にポピュラーな表現手段の1つ。 喜怒哀楽が手軽に表現できる、日本オリジナル感が漂うものが沢山あり、文字入力から手軽 …