忘備録_1 bloggerちょびっとカスタマイズ
Bloggerのテーマを、動的ビューからContempoに
変更しました。現時点で最新w
"基本テーマの背景、レイアウト、色、フォントなどをカスタマイズできます。"
↑をそれぞれ設定
追加で、SNSのshareボタン Back to Topボタン Disqusのコメント欄の設置
shareボタンはaddthisのやつ。
toggle sharing icons と言うの？
右下に出てるのがそうだけど、動きが楽しい。
一応画像も
addthisは、サインアップまたはサインインしてゴニョゴニョ設定してコードをコピペ。
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="ここは専用のURL"></script>
↑こんなやつね
これを、
管理画面のレイアウト
↓
ガジェットを追加
↓
HTML/JavaScript を選択
HTML/JavaScript の設定
↓
コンテンツに貼り付け
表示にチェック
タイトルは無しでおk
↓
保存
これでaddthis設置完了
クルクルを楽しもうww
Back to Topボタンは、色々試したんだけどなかなかうまく行かなかった。左下にニュッって出るようになってる。
これも一応画像
結局、これを貼り付けた
↓
<style type="text/css">
.back-to-top {
position: fixed;
bottom: 10px;
left: 10px;
display: block;
z-index: 999;
text-decoration: none;
color: #460e44;
background-color: rgba(212,220,214, 0.8);
font-size: 16px;
padding: 1em;
display: none;
}
.back-to-top:hover {
color: #028760;
background-color: rgba(158,161,163, 0.50);
text-decoration: none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
var offset = 150;
var duration = 1500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<a class='back-to-top' href='#'>Back to Top</a>
管理画面のテーマ
↓
HTML の編集
一番下の
</body>
</html>
のすぐ上に貼り付け。
cssの、z-index これ入れとけば、試行錯誤することなかったかもしれない。
素人の悲しさよ..
css javascript html まとめておくと変更とか楽。
1からサイト構築なら外部ファイルとかするんだろうけど、出来合いのものに変更加えるようならこうしたほうがいいと思った。
* javascriptはwordpress用で、 $ に代えて jQuery を使っているらしい。
cssで色や位置の設定。
ボタンにカーソルを合わせると、 hoverエフェクトで変色。
位置は右下が多いけど、addthisボタンがあるので左下に。
javascriptでボタン出現位置、スクロール速度の設定。
var offset = 150;
var duration = 1500;
150下がったらボタン出現
1500はミリセカンドだから、1.5秒で戻る設定
画像を使う場合は、htmlの Back to Top のところに img src="imageのURL" でいけるのでは？多分。
googleのMaterial iconsも使えたけど、テーマのフォント設定が適用された。
cssの設定で !important 使えば行けたんだろうか？
Disqusコメント欄の設定
bloggerの純正コメント欄
なんかいじりたくなるんだよねw
Disqusにサインアップかサインインしてゴニョゴニョ設定。
自動的にガジェットが追加された気がする
↑こんなのが入ってた
すべて設置完了
いろんなサイトからの寄せ集めコピペですが、参考になったら幸いwww
参考にさせてもらったたくさんのサイトの中の人、どうもありがとう。