自分のブログをレスポンシブWebデザインに対応させるには
スマホを所有する人が増えたことで、モバイルからのアクセスが増えてきました。このため、PCではPC用のデザインを、スマホにはスマホ用のデザインを用意しなければならなくなりました。 …[続きを読む]
SNS Count Cacheを使うために必要なFacebookとTwitterの設定
SNS のシェア数をキャッシュしておき表示速度を改善してくれる WordPress プラグイン「SNS Count Cache」ですが、Facebook のシェア数をカウントするためにはアプリIDと app secret の設定をする必要があります。併せて、公式では廃止されてしまったツイッターのシェアカウンタですが、代替 API が公表されているのでこちらについてもまとめてみたいと思います。 …[続きを読む]
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 で囲みますが、枠線を付けたり背景色を変えるだけの単純なデザインではイマイチ味気ないものです。 …[続きを読む]
