「CSS」の記事一覧

広告(リンク画像)をセンタリングする方法!NGなやり方はペナルティの元

ブログで収益化する場合、A8.netなどASPのリンク付き画像広告(バナー広告)を記事内に貼ることもありますね。 ワードプレスのカスタムHTMLブロックを使って広告コードを入れますが、カスタムHTMLブロックはそれ自体センタリングの設定がない。 でもレイアウト的に、画像広告を横方向にセンタリングしたい、という場合もあ ...

【CSS】次の要素ありなしで表示を変える方法

以下のように「要素が1つだけ」の場合と「複数ある場合」とで表示を分けたい、ということがあります。 たとえば記事の先頭によくある、カテゴリ、タグの表示などで、 1つしか表示する要素がなければ、それだけを表示する。 複数(つまり次の要素が)あれば、スラッシュ( / )で区切って表示する なんていう場合があります ...

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

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

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

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

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

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

【CSS】ふわふわドキドキ動くボタンの作り方!上下や拡大縮小アニメーション

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

【CSS】光るボタンアニメーションの作り方!カスタマイズまで手順を詳しく解説

コクーン(cocoon)などのテーマで「キラッと光が横切るアニメーション付きのボタン」があったりしますが、何気にカッコいいし、目立ってクリック率も上がりそうですよね。 ということで、ここではHTML, CSSを使って「自作で光るボタンの作り方」をご紹介。 できあがりは、ほぼコクーンの光るボタンと同等になったと思いま ...

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

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

【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つ目の方法(WhatFont)、サイ ...