
中山テック 代表の中山です。
さて、最近ホームページ(パソコン版)でも最下に追従広告を配置させて頂きました。
CSSやHTMLでどのように配置したのか、お話したいと思います。
中山テックのPC版追従広告はやや特殊です。
というのも、広告幅が画面の90%程度で、残10%は最上に移動のアイコン場所としているためです。
また、広告配置エリアでは、広告以外をクリックしても何も起きません。
ご安心頂ければと思います。
HTML
個別投稿ページ(page.php)のみ配置しております。
つまりブログのみ、広告を固定で最下に追従させるようにしております。
ここでは「koukoku-fixed-pc」「fixedPC」というCSSのクラスを指定してますが、固定のための重要なクラスになります。
CSS
@media only screen and (min-width: 959px){
#koukoku-fixed-pc {⇒①
background: rgba(255,255,255,0.50);
&.fixedPC {
left: 0;
width: 90%;
height: 90px;
position: fixed;
display: block;
z-index: 1000;
box-shadow:0px 3px 10px rgba(200,200,200);
}
}
@media only screen and (max-width: 958px) {
#koukoku-fixed-pc { ⇒②
display:none;
}
}
①について、下からふわっと出すのではなく、完全固定エリアなので難易度は低めです。
幅90%、高さ90px固定の枠を作るだけです。
※広告は合わせて高さ90pxのものを指定しております
ポジション固定で最下に出すようにしております。
HTMLの項での画像の通り、bottom:0pxというstyleを指定していることが前提であります。
②は幅959px未満は非表示としています。
※スマートフォン版は既にできているので、PC版と重ねる必要がありません
まとめ
非常に短いブログではありましたが、思ったよりも簡単に作ることが出来ました。
スクロールしたらふわっと出てくるパターンも作れますが、現時点で時間がないので未作成・・・
今後ふわっと出したいので、完成したら追記予定です。
もし当ブログで出来るようになった!ということがあれば是非コメントでお伝えいただければと思います。
また、誤りやアドバイス等ございましたら、いつでもコメントやメール、Twitterでも承っております。
最後までご覧頂き、ありがとうございました。
ホームページ制作系
ご料金はサービス内容・料金を参照ください。
■ホームページ制作
※ロゴ、バナーは外注となります
■SEO対策
Googleガイドライン診断、マネジメント、ブログ執筆など
システム開発系(SES請負契約向け)
■役職
プロジェクトマネジメント、PMO、リーダー、開発(要件定義~納品まで)
■スキル
工数見積(FP法)、折衝・提案、計画、調査、設計、実装(C、Java、クライアント系、SQL等)
データベース全般、テスト計画・項目作成、運用・保守
その他
Excel、プログラミングなどソフト系のお困りごと
対象地域
千葉県:東葛エリア(松戸市、柏市、我孫子市、市川市、流山市、船橋市、鎌ヶ谷市、白井市、浦安市) 他要相談
茨城県:取手市、土浦市、他要相談
埼玉県:三郷市、草加市、春日部市、他要相談
東京都:23区、他要相談
京都府:南区、他要相談
ご質問ございましたら、お問い合わせページよりご連絡ください。