WEB DESIGN

jQuery

横並びにしたブロック要素の高さを揃えたい!

横並びに配置したコンテンツが、中身の高さ(画像の大きさやテキストの長さ)によって、バラバラになってしまうことってありませんか?そんな場合には、コンテンツ内の要素に関係なく一番高さを取っている要素に合わせて、下のラインを揃えてくれる方法があり...
CSS

画像の下に隙間が出来るのはなぜ?

画像を配置する際に、なぜだか"画像の下に隙間"が出来てしまうことありませんか?どういうことかと言うと、デモサンプルを確認してみてください。DEMO上の「デフォルトの配置」の画像下に背景色が見えてしまっているのがかわるかと思います。このように...
CSS

蛍光ペン風やアンダーラインなどのテキスト装飾をCSSで実現する

ブログ記事などでよく見かける、強調表現のひとつ「蛍光ペン」や「アンダーライン」。ランディングページでもよく見かける手法ですが、背景に画像を使ってリピートさせたりすることで表現するやり方もありますが、今回はCSSのみでテキストの装飾をしてみた...
CSS

ボタンや画像の内側にシャドウを入れる方法

ボタンやイメージとして配置する画像にシャドウを入れる際は、box-shadowを指定すれば再現できますが、画像の内側にシャドウを入れて凹んだ感じにしたい場合、box-shadowプロパティの「inset」を指定してもシャドウは出来ません・・...
CSS

コンテンツを画面の中央(上下左右)に配置する方法

以前にも一度、画面中央配置の記事を書かせていただきました。「特定の要素を画面の中央(上下左右)に配置する方法」こちらは「display:table-cell」を扱った中央配置の方法でしたが、今回はCSSのみで実現できる方法になります。(ad...
WEB DESIGN

Googleアナリティクスをはじめた初心者のための基本用語リスト

皆さんは、GoogleAnalytics(グーグル・アナリティクス)を利用していますか?自分でWEBサイトやブログを運営している方のほとんどは、無料の「Googleアナリティクス」を活用していることと思います。でも実際にサイトに組み込んでい...
CSS

日本語Webフォントを利用する際に気をつけたいライセンスのこと

Webフォントを利用する際に、その使い方と合わせて「フォントに対するライセンス」をきちんと理解しておく必要があります。Webフォントだから勝手に何も気にせずに使っていいというわけではないので、細かいことかもしれませんが正しく利用するように心...
PHP

はじめてのPHP変数 定義や代入など…

PHPを学ぶ上で最初の壁といってもいい「変数」について見ていきたいと思います。PHPを扱う上で避けては通れない「変数」ですが、難しく考えずにやっていきましょう。(adsbygoogle = window.adsbygoogle || [])...
PHP

はじめてのPHPの基本文法

WordPressなどを利用していると、もっとPHPが理解できたら自由度が格段と広がるのになぁ~。と思うようになってきませんか?私はつくづく思って泣きそうになります。「スクリプト言語」というだけで、片耳くらい塞ぎたくなりますが・・・。デザイ...
WordPress

お問い合わせリンクを表示してみる

WordPressのページ内に、"お問い合わせ用のメールリンク"を表示したい場合、テンプレートタグの「bloginfo」を利用します。まずは、どのメールアドレス宛てのリンクにするかの設定から見ていきます。(adsbygoogle = win...
CSS

文字をテロップのように流すマーキーをCSSで実装する!

近年、見かけることも少なくなった「marquee(マーキー)」ですが、元々はIEの独自機能でもあったため、HTMLでは非推奨とされ消えていきました。そんな「marquee」のテロップ的動きをコンテンツに組み込みたいな~と考えたとき、CSSだ...
WordPress

パンくずリストを表示する方法

WordPressにおける「パンくずリスト」の表示方法をご紹介します。プラグインを使って表示させる方法もありますが、今回はテンプレートファイルに記述する方法を確認していきたいと思います。まったく関係ありませんが、私はゴハン派です・・・。それ...
WordPress

カスタム投稿タイプとかタクソノミーってどういうこと?

WordPressでWebサイトやブログを運営していく中で、立ちはだかるひとつの壁「カスタム投稿」についてメモしておきます。(adsbygoogle = window.adsbygoogle || []).push({});「カスタム投稿」...