WordPress今回はレスポンシブデザインにも対応済みの「バナー設置方法」をご紹介します。画像を使用するものと、フルCSSバージョンです。2、サイドバーにフルCSSのバナーを設置するサイドバーに置くバナーいろいろ当ブログは以前、Kindle本セールや記事カテゴリーのバナーを自作してサイドバーに置いていました。まとめ買い50%OFFセールユーザーにおすすめしたい記事や収益化できそうなカテゴリーのバナーを作ってサイドバーに置くのは、内部SEO的にもかなり有効です。TwitterやFacebookなど、SNSボタンの代用としてバナーを使うという方法もあります。今回は、サイドバーに2×2列で画像バナーを設置してみました。2×2列はパソコンで見るとあまり目立ちませんが、スマートフォンなら丁度いい大きさです。2×2列のバナーレイアウトは、はてな編集部「編む庭」が採用しており、今回はこのサイトのやり方を参考にしています。1、サイドバーに2×2列の画像バナーを設置する4つの画像バナーを可変テーブルレイアウトにするだけなので、やり方はとても簡単です。以下のHTMLとCSSを、使用しているブログのテンプレートに追加するだけ。WordPressのSimplicityを使用している場合は、「ダッシュボード」→「カスタマイズ」から、HTMLとCSSをそれぞれ追加してください。.2em;}上記HTMLコードの「#」部分には、表示させたい記事やカテゴリーのリンクを、「ここに画像バナーのURL」部分には、バナーのURLを入れます。バナーの画像サイズは600×300px推奨(他サイズでも構いませんが、バナーが細すぎると文字が読みにくくなります)。HTMLとCSSを追加したら、一度プレビュー。4つのバナーが2×2列になっていれば成功です。【完成イメージ】2、サイドバーにフルCSSのバナーを設置する画像でバナーを作るのは面倒くさい!という人は、フルCSSでバナーを作りましょう。フルCSSのバナーはカスタマイズも簡単ですし、ページの読み速度にも影響しません。複雑なデザインには不向きというデメリットもあります。フルCSSのバナー設置方法も、非常に簡単。画像バナーのときと同様、以下のHTMLとCSSをブログのテンプレートに追加するだけです。text-decoration:none;}【完成イメージ】このCSSバナーではクリック範囲をdiv全体に広げ、バナー全体をクリックできるようにしています。バナー幅、高さ、文字色、背景色などは、お好きなようにカスタマイズしてください。独自ドメイン運営のはてなブログPROからWordPressに移行したとき、サイトマップを送信しても一向にインデ...ドメイン失効によって消滅したWordPressの復旧とSearchConsoleエラー修正7月4日~14日まで当ブログが消滅し、閲覧不可になっていたようで大変ご迷惑おかけしました。私がブログ消滅に気づ...Simplicity関連記事とタグのカスタマイズ久々にサイトのカスタマイズを行ったので、忘れないようメモ。AdSense「Multiple...Simplicity簡単カスタマイズ!SNSボタン・引用・ヨメレバカエレバWordPressの「Simplicity」は、拡張性が高くカスタマイズしがいのあるテンプレートです。デフォル...Simplicity人気記事ウィジェットのサムネイルを長方形にする先日、当ブログのサイドバーに設置している人気記事ウィジェットのサムネイルサイズを変更しました。Writerをショートカットキーだけで操作する先日、2年使用していたロジクールの有線マウスがぶっ壊れました。東芝のポケットラジオTY-APR5モーニング娘。通帳・カード・届け印を紛失した状態でゆうちょ銀行を解約する【第16回】佐藤優樹と消耗していく娘。【第6回】佐藤優樹と消耗していく娘。見やすさ最重視!裁判を有利にする反訳書の書き方【サンプル文書あり】Xperiaが勝手に動く原因はタッチパネルの故障じゃなく熱暴走!自力でも直せるよ【第12回】佐藤優樹と消耗していく娘。乗り場とかインターネットに繋がらなくなる原因と切り分け(マンションの場合)【第13回】佐藤優樹と消耗していく娘。hirose福岡県在住。