今回はレスポンシブデザインにも対応済みの「バナー設置方法」をご紹介します。画像を使用するものと、フルCSSバージョンです。LINKサイドバーに置くバナーいろいろ当ブログは以前、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列になっていれば成功です。LINK2、サイドバーにフルCSSのバナーを設置する画像でバナーを作るのは面倒くさい!という人は、フルCSSでバナーを作りましょう。フルCSSのバナーはカスタマイズも簡単ですし、ページの読み速度にも影響しません。複雑なデザインには不向きというデメリットもあります。フルCSSのバナー設置方法も、非常に簡単。画像バナーのときと同様、以下のHTMLとCSSをブログのテンプレートに追加するだけです。text-decoration:none;}【完成イメージ】このCSSバナーではクリック範囲をdiv全体に広げ、バナー全体をクリックできるようにしています。バナー幅、高さ、文字色、背景色などは、お好きなようにカスタマイズしてください。知識が身につく「知っておきたい仏像の見方」みんなマウス絵描こうぜ!ベジェ曲線とブラシ・ペイントツールでできることRankingXperiaが充電できない原因は内部コネクタの接触不良!直し方を解説おしゃれで美しいサインを作成できるWEBサービスまとめコーラックは何時間で効く?1粒から10粒までの統計結果を取りました努力を一切せず「ながら習慣」だけで指を長くする方法モーニング娘。冷蔵庫なし生活や災害時に役立つ、常温保存できる食品リストデザインの参考に!おしゃれなタブメニューを導入しているサイトまとめ【第13回】佐藤優樹と消耗していく娘。’14時代の7~9月Android端末所持のままNHKの放送受信契約を解約する方法また現メンバーが腐るぞ!カガシステム発動がモー娘。’17とハロプロに及ぼす悪影響はてなブログPROを強制非公開にされたので、WordPressに引っ越しましたイオンバイクの自転車5台を超本音レビュー!購入する際の参考にどうぞ【第1回】佐藤優樹と消耗していく娘。以前10着のアイテムで作る「シンプルなのにセンスが良い」ベーシックファッションスタイル転居届を出したのに郵便物が届かない!郵便局への問い合わせ・再配達依頼のやり方Xperiaが勝手に動く原因はタッチパネルの故障じゃなく熱暴走!自力でも直せるよモー娘。無味に飽きたらちょい足しで変化を。音楽NewMBSヤングタウン土曜日2018年6月9日書き起こし※解説つきSimplicity人気記事ウィジェットのサムネイルを長方形にする【第13回】佐藤優樹と消耗していく娘。【第12回】佐藤優樹と消耗していく娘。【第11回】佐藤優樹と消耗していく娘。【第10回】佐藤優樹と消耗していく娘。【第9回】佐藤優樹と消耗していく娘。【第8回】佐藤優樹と消耗していく娘。