WEB DESIGN

WordPress

コピーライト表記を変えちゃおう!

WordPressで子テーマを使ってサイトやブログを運営している場合、フッターの「Copyright」が、WordPressになっていたり、テーマ作成者へのリンクになっていたりします。また、自作でオリ...
WordPress

WordPressの無料テーマBonesの導入方法

WordPressでオリジナルテーマを作ってみようという方に、是非とも試してもらいたい「Bones」という無料のテーマがあります。デフォルトでレスポンシブ対応にもなっており、名前の通りにほとんどその骨...
jQuery

使い勝手の良いslick.jsスライダー(レスポンシブ対応)

今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているの...
CSS

ロールオーバーで画像を半透明にするシンプルな方法

ボタンや画像などで「ロールオーバーした時に画像を半透明にしたい!」そんなときの簡単な方法をご紹介します。かなり単純なことなので、扱いやすいかと思います。(adsbygoogle = window.ad...
HTML

文字化け防止のために「文字コード宣言」は必ずしよう!

HTML文書で日本語を使用したファイルは、必ず「文字コード」を指定してから保存しましょう。また、HTML文書内において必ず「文字コード宣言」をすることを忘れないようにしましょう。// // なぜ文字コ...
WordPress

WordPressをはじめたら「8つの基本設定」を確認しよう!

個人でWordPressを導入し“Webサイト”や“ブログ”などを構築する方も増えてきていますが、何と言っても昨日の多さやそこまで知識が深くなくてもそれなりのものができるという容易さは、ここまで広くW...
WordPress

ページの表示速度を改善するプラグイン「WP Super Cache」

Wordpressでサイトやブログを運用していると、気になるのがその「表示速度」。スマホなどで閲覧すると如実に表れますが、ページ全体を読み込むまでにはそれなりに時間がかかってしまいますよね…。そんな問...
HTML

スマホサイトで使われるメニューデザイン7タイプ

スマホサイトの作成においてワイヤーを引く際に、まず悩むのが「メニューをどうするか?」ということ。サイトの印象を大きく左右するその「メニュー」について、それぞれどういったことを考え、適切なメニューのタイ...
CSS

CSSで丸いボタンを装飾してみる

CSSの「border-radiusプロパティ」を使用して、色々な丸いボタンを作ってみたいと思います。まずはデモサンプルを確認してみてください。デモサンプル(adsbygoogle = window....
CSS

半透明ボタンにしたいとき、背景の柄が透けてしまうのを防ぐ方法

ボタン要素をimg画像で配置した時に、マウスオーバー効果として半透明にする指定をすると、背景が黒っぽい場合に柄が透けてしまって少しカッコ悪くなってしまうのを防ぐ方法になります。簡単に言ってしまえば、画...
jQuery

可変グリッドレイアウトを実装できるMasonry

可変グリッドレイアウトとは、ブラウザの幅に応じてコンテンツのレイアウトを調整し整列してくれる仕様のことを指します。有名なサイトで言えば「pinterest」などがそうですが、この可変型のグリッドを簡単...
CSS

マウスオーバーでラインアニメーションを実現する

ナビゲーションなどでマウスオーバー時に、装飾の下線を横に伸ばすアニメーションをかつてはFlashなので実現していましたが、これと同じような動きをCSSのみで実現することが可能になりました。a要素に対す...
CSS

text-shadowプロパティによる装飾サンプル

テキストに対しての装飾を考えるとき、わざわざPhotoShopなどで画像を作らなくても、CSS3の「text-shadowプロパティ」の指定で、ドロップシャドウや光彩などの、基本的なエフェクト効果を実...
WordPress

テーマをカスタマイズして子テーマをつくる方法

WordPressを利用して、サイトやブログを運営している方の中で、無料テーマをそのまま利用している方も多いかと思いますが、文字サイズやテキストカラーなど、ちょっとした見た目を少し調整したいなぁと思う...