このブログの内容
bloggerでもステマ規制法対策!
世の中、ステマ規制法対策でにぎわっていますね。
GoogleBloggerで無料テーマ使いの皆さん、こんな風に思っていませんか?
Wordpressはテーマが対応してくれていいなぁ…
大丈夫、
テーマZELOで対応しましたよ!
大丈夫、コピペでできるようにしましたよ!
こんな風にしたよ
出来上がりはこんな感じです。
パソコン
下に固定で出しています。
スクロールしても下に必ず表示されます。
スマホ
スマホでも下に固定しました。
各記事でも同じものが表示されます。
コードはこちら
今回はテーマを変更します。
変更前には必ずテーマのバックアップを取ってくださいね!
スマホ用のCSSを追加
コード内にカーソルを置いた状態で、Ctrl+Fをして「.footer-section」で検索します。
「/* -------------------- 404 -------------------- */」
の上あたりに、下記コードをコピペします。
/*下部固定フッター*/
#HTML1 {
margin: 0;
}
.adtext-section {
z-index:2;
margin: 0;
width: 100%;
/*背景色*/
background-color:white;
/*下に固定*/
position:fixed;
bottom: 0;
/*高さを調整*/
height: 2em;
}
.adtext-section .box h2{
background-color:white;
font-size: 0.9em !important;
text-align: center;
color: #524e4d;
font-weight: normal;
}
タブレット・パソコン用のCSSを追加
コード内にカーソルを置いた状態で、Ctrl+Fをして「1024px」で検索します。
「/* ---------- Responsive 1024px(ipad pro、PC)以上 */」
の上あたりに、
下記コードをコピペします。
/*下部固定フッター*/
.adtext-section {
height: 3em;
}
.adtext-section .box h2{
font-size: 1.2em !important;
}
「 } 」の上ですので、画像とよく見比べて気を付けてコピペしてくださね。
HTMLを追加
コード内にカーソルを置いた状態で、Ctrl+Fをして「</footer>」で検索します。
「</footer>」 の上に、下記コードをコピペします。
<b:section class='adtext-section' id='adtext-section' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><div class="box">
<h2>
*当サイトはアフィリエイト広告を利用しています。
</h2>
</div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
これで下部にメッセージが出るようになったはず!!
背景色や文字色、サイズ、文言などは好きに調整してください。
ちなみに、テーマを保存すると、メニューから「ホーム」がいなくなることがあるので、レイアウトから「ヘッダーMENU」でホームを追加したり並び替えたりしてくださいね。
おわりに
なんとか10/1に間に合った!!
皆さんのbloggerブログで、できたら教えてね!
無料で自由なbloggerを楽しみましょう!
0 件のコメント :
コメントを投稿