WordPressでのレスポンシブ画像ってどうなってるの?

モバイルからのネットアクセスが増加したことにより、WordPress 4.4からデフォルトでレスポンシブ画像に対応するようになりました。画面サイズに適した画像のみをダウンロードすることで通信量の低減を行い、ユーザーの離脱を防ぐ効果があります。思った以上に簡単に導入できるのでおすすめです。 …[続きを読む]

レスポンシブWebデザインで画像をどのように扱ったらよいのか

 2015年に Google がスマホに対応しているサイトを検索結果で優遇するアルゴリズムを導入したことで、多くのウェブサイトにおいてモバイルフレンドリー化が進んできました。ジャンルによってはアクセスの6割がモバイルであるという調査も出ており、これからもこの傾向は進んでいくものと考えられます。 …[続きを読む]

なぜsizesで表示サイズを指定できるという間違いがまかりとおるのか

「sizes はグリッドデザインで使うと便利だよ~」というコメントを見かけたのですが、グリッドデザインについて不勉強な私にはなにが便利なのかよくわかりませんでした。ただ、sizes で表示サイズを指定できるという説明だけはちょっと違うんじゃないかなと思ったので、sizes についてまとめてみました。 …[続きを読む]

なぜフルードイメージではmax-widthを100%にしているのか?

スマホでのネット利用者の増加により、ウェブサイトのレスポンシブ対応が必要になってきました。画像に対してはフルードイメージを導入しますが、ネットで調べると次のようなソースコードが出てくるはずです。 …[続きを読む]

画像のレスポンシブ対応でsizes属性を使う際に注意すること

ごく稀になんですが、画像を常にビューポートの幅80%で表示するには sizes 属性を使って次のように記述すればよいという説明を見かけることがあります。 …[続きを読む]

レスポンシブWebデザインがうまく動作しないときにチェックしてみること

 スマホによるネット利用の増加と Google 検索アルゴリズムの修正により、多くのサイトがレスポンシブ Web デザインに対応するようになりました。出来合いの HTML テンプレートや WordPress テーマはともかく、自分でレスポンシブルにしようとしたときにはテストをしなければなりません。 …[続きを読む]

CSSだけでWordPressのグローバルメニューをドロップダウン化してみる

 アコーディオン、または多層化などとも呼ばれるそうです。メニュー項目が多い場合に、わかりやすく分類できて便利です。JavaScript や jQuery などで実現する方法もありますが、今回は CSS だけでカスタマイズする方法について解説します。 …[続きを読む]

WordPressの検索フォームをカスタマイズしてみる

 WordPress には記事の中身をキーワードで検索し、該当する記事を一覧表示してくれる機能があります。一番簡単な設置方法はサイドバーに表示させることです。テーマをカスタマイズすることができるなら、ページトップのヘッダーに表示させることもできます。 …[続きを読む]

WordPressのカスタムメニューで複数のメニューを切り替えてみる

 静的 HTML のウェブサイトで設置したグローバルメニューに変更があった場合、ひとつひとつのページを手作業でコピー&ペーストした苦労を経験したことがあるかもしれません。その点、WordPress は管理画面から変更するだけで一度にすべてのページに反映されるので、大変便利です。 …[続きを読む]

WordPressでアイキャッチ画像を表示させてみるの巻

 ブログ記事を鮮やかに彩るものとして、また記事の内容をユーザーにより強く印象付けるため、記事の冒頭に挿入するアイキャッチ画像はたいへん便利なものです。いくつかの設定が必要なことと、画像の大きさの取り扱いに初心者の方には難しく感じるかもしれませんが、一度設定してしまえばあとは画像をアップロードする作業だけですので、がんばって設置してみてください。 …[続きを読む]

WordPressのテーマでcategory.php・date.php・search.php・tag.phpを作成する

 なぜこれらをひとまとまりと考えているのかというと、同じような作業工程で作ることができてしまうからです。WordPress のテーマの作成やカスタマイズの経験があれば、それほど難しくないわけです。ここまでテーマを作成してきて「これ以上はもうムリ」と思っているかもしれませんが、もうひとふんばりでユーザーがより使いやすいテーマを提供することができます。 …[続きを読む]

WordPressのコメント欄をカスタマイズしてシンプルなデザインにする方法

 WordPress のテーマを作成しているのですが、コメント欄はシンプルなデザインにしたいなと思い、いろいろ調べたものをまとめてみました。function.php を少し編集することで、出力される文字を変更することもできます。 …[続きを読む]

CSSでblockquoteを引用符付きでお洒落にカスタマイズする方法

 ニュースや論文系のブログであれば、ほかのウェブサイトなどの文章を引用する機会が多いと思います。他所からのコピーですよ、ということを検索エンジンにきちんと知らせるために blockquote で囲みますが、枠線を付けたり背景色を変えるだけの単純なデザインではイマイチ味気ないものです。 …[続きを読む]

WordPressで「前の記事へ」、「次の記事へ」をカスタマイズする

 訪問してくれた人がブログを気に入ってくれて、日付をさかのぼって順番に記事を読んでもらうのに便利なパーツです。当ブログのように検索流入でやってきて関連する記事だけを読んで離脱してしまう場合にはあまり効果がありませんが、日記形式のブログなどでは威力を発揮します。 …[続きを読む]

Simply Static による静的 HTML 化ではパーマリンク設定が重要である

 静的 HTML でホームページを作りたい、けれども Dreamweaver などを買うお金がない場合どうしますか?サイドバーなどのリンクをすべて手作業で行う?ページ数が少なければ問題ありませんが、100や200ものページをコピー&ペーストするのはかなり無理がありますよね。 …[続きを読む]

Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP