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

「 デザイン 」 一覧

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

shutterstock_328511270

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

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

2016-07-16_202109

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

CSSでリストから表を作る方法!2列、3列、4列のレイアウトはこうすれば良いけど罫線が問題

2016-07-16_202109

よく出くわすかもしれませんが、ul, li を使ったリストがあり、それをCSSを使って表にしたい!という場合があります。 tableプロパティを使えば簡単に表は出来ますが、横長の一行の表になってしまう …

ワードプレスで記事投稿前でもプレビュー表示を共有して見る方法!プラグイン「外部確認」が超便利

2015-08-16_185553

ワードプレスで記事を書いていると、実際に投稿する前の下書きを誰か他の人に確認して欲しい、という場合があったりします。 そんな場合には、意を決して実際に投稿して記事のURLを確認して欲しい第三者に送るか …

Simplicityのカスタマイズ!iPadでもPC表示のようにサイドメニューを横に配置したい!

2016-06-23_193918

ワードプレスの人気テーマで、無料でシンプル、見やすくカスタマイズも簡単に沢山できる、となると「Simplicity」でしょう。 私もとても気に入っていていくつかのブログで使ってますが、それでもiPad …

画面の拡大縮小操作ができない!Stinger Plusのカスタマイズ例でviewport設定を解説

silence-390331_1280

ワードプレスのテーマにもいろいろありますが、パソコンで見ている分には問題なくても「スマホやタブレット」など画面が小さいモバイル端末で表示している時に「拡大して見たい!」という時があります。 もっと大き …

ワードプレスでテーマのカスタマイズができない!何度も読み込み直しになる原因はこれ!

stress

ワードプレスのテーマを「カスタマイズ」しようとすると、何度も読み込み直しの無限ループになり、「カスタマイズできないじゃん!うわー!」と焦る場合があります。 というか、私も実は先ほどなりました(笑) と …

「table of contents plus」の先頭の数字を非表示にしたい!特定の記事やページだけに適用するワザ

blackboard-677578_1280

記事に自動的に目次をつけるプラグインとしては「table of contents plus」がとても便利です。 訪れた読者から見ると、目次をつけることで 記事全体の把握がすぐできる 求める情報がどこに …

プラグイン – WordPressでCSSを特定の記事だけ、ページだけに反映したい場合の便利なプラグイン

shutterstock_328511270

WordPressでテーマなどのデザインカスタマイズをする場合、JetPackの機能にあるCSS編集や、「Simple Custom CSS」といったプラグインを使用しますが、「この記事、このページだ …

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

shutterstock_328511270

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

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

shutterstock_106649390

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

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

shutterstock_328511270

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

画像編集ソフトの無料でおすすめはフォトショップ? 無料でダウンロードできる深い意味

shutterstock_275762663

画像編集ソフト、といえば、今では無料のソフトでも非常に優秀なものが出まわってます。 PhotoScape(公式ページはこちら) GIMP(公式ページはこちら) それでも何年も前から現在に至るまで、画像 …

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

html_css

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

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

corridor-598319_1280

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