デザイン

ヘッダー画像、アイキャッチ、説明画像の簡単な作り方(パソコン編)!画像編集ソフト以外で自由にサクッと作成する方法

ツール
ブログで個性を放つには欠かせない、といったら何といっても画像。特に「ヘッダー画像」「アイキャッチ画像」(サムネイル画像)、「説明用の画像」ですが、文字入れしたり(更に縁取り入れたり)するのに画像編集ソフトを使う場合も多いと思います。(youtubeのアイキャッチ画像も同様)でも実は、パソコンに入っている「パワ...

【CSS】ふわふわ動くアニメーションボタンの作り方!上下や拡大縮小も簡単にできる

CSS
ふわふわ動くボタン、ドキドキ動くボタンの作り方をご紹介。上下にさり気なくフワフワしたり、拡大縮小を使って浮かび上がったり沈んだりと、CSSを使えば、ちょっと目を引くアニメーションボタンが簡単にできますね。【ドキドキ動くボタン1】【ポン!と動くボタン2】【ゆったりフワフワ浮遊ボタン】【ツンと動くボタン】【チョン...

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

CSS
ワードプレスログイン後の管理画面(記事投稿一覧など)や記事編集画面(エディタ―)でCSSを追加・反映させる方法の解説。CSSを反映させる基本はテーマのための関数(functions.php)に関数追加して… となりこれは結構面倒。ここではプラグインを使って簡単に管理画面にCSSを追加する方法をご紹介。

【ヘッダタイトル】文字だけのロゴ画像の作り方!背景を透明にする方法(PhotoScape編)

カスタマイズ
ブログのヘッダー画像を設定すると、テーマによってはそのヘッダー画像の上にサイトタイトルやキャッチフレーズが表示されるものがあります。(Cocoonなど)背景の画像の上にタイトルの文字が乗るため、背景の画像に溶け込んだりしてタイトルの文字が見づらくなる場合がありますが、こうした時には文字だけのロゴ画像を作成して...

画像の縦サイズを縮める!いらない部分をカットする加工編集の方法(PhotoScape編)

ツール
ブログに画像を貼りつける場合、最近は特にスマホで撮影した画像を使うことが多いことから、縦長の画像になる場合も多いと思います。縦長は縦長で良いですが、アドセンスの審査段階では、アドセンスのポリシー違反にならないよう、上下の余分なところはカット(トリミング)しておくと良いですね。ここでは無料のおすすめソフト Ph...

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

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

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

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

Photoscape X のインストール!無料で簡単な画像ソフトは断然これがおすすめ

ツール
ブログの記事に画像が貼りたい。その画像を簡単にトリミングしたり文字入れする場合がありますね。こうした画像編集では無料で簡単なソフト Photoscape がありますが、以前の ver3.7はずいぶん昔に開発が終わったようで、今では「Photoscape X」というアプリに生まれ変わってます。Windows版、...

【WordPress】画像に枠を付けるとぼやける?等倍で綺麗に表示する方法

CSS
画像にフレームというか枠をCSSで付けると、画像が等倍で表示されず「ぼやける」「滲む」(にじんむ)場合があります。(特に画像に文字が入っていると気になったりしますよね)枠の分だけ画像が縮小されることが原因ですが、その場合CSSの設定はどうするのが良いか、ぼやける理由の詳細や、ぼやけない画像の基本、ワードプレス...

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

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

【WordPress】記事本文などの横幅、縦幅を簡単に調べる方法

CSS
画像の横幅は最大どれほどが良いかなど見るときに、表示される領域(記事本文など)の横幅や縦幅を調べたい場合があります。ここではグーグルクロームの開発者ツール(デベロッパーツール)を使って簡単に横幅を調べる方法のご紹介。※)クローム以外でも同等の機能があると思いますので、探してみてくださいね。調べたい個所同じ方法...

【CSS】投稿日、更新日がある時、更新日のみ表示する方法!1つ前の要素を非表示にすれば解決

CSS
ブログのテーマ(外観デザインを決めるやつね)でよくあるのが、記事の投稿日と更新日の表示。例えば以下のように表示されたりしますが、投稿日:xxxx年xx月xx日 更新日:xxxx年xx月xx日この場合、投稿日がかなり古くなっていくと、何か記事が古く見られそうだし、そもそも新しく更新しているので投稿日を表示する必...

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

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

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

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

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

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