Bloggerの場合は以下で、設定したブログの言語となります。
<html expr:lang='data:blog.locale'>
6 日前
2025年5月23日金曜日
2016年9月19日月曜日
2016年9月9日金曜日
Bloggerでインライン広告が表示されない
Bloggerでは「ブログの投稿」ガジェットの編集から、投稿の間に広告を表示する にチェックを入れることにより、簡単にインライン広告を設定できるようになっていますが
カスタマイズされたテンプレートでは表示されないことがあります(このテンプレートもそう)
[Blogger] main(-wrapper) にガジェットを追加できるようにする
サイドバーに追加したガジェットをドラッグすれば、移動での追加はできるんですが
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
no を yes に
2016年9月8日木曜日
header ( 「ページヘッダー」 のガジェット ) を移動可能にする
最近のBloggerの変更で、右下に[フィードバックを送信]のボタンが付いた結果、レイアウトの編集画面が狭まり、ロックされているガジェットの編集ボタンが押せなくなってしまいました
<div id='header-wrapper'>
<b:widget id='Header1' locked='true'
を
locked='false'
に
これで ( 「ページヘッダー」 のガジェット ) をドラッグで移動して編集ボタンを押せます
関連エントリ:
2016年9月7日水曜日
BloggerにPocketボタンを追加
こちらからコードをもらってきて、記事タイトル横のはてなブックマークボタン隣にコードを追加してみましたが、(参照) :タイトル文字下に標示されますね(^^:)
記事タイトルの側にあった方が良いと思うので
まぁこのままでも問題ないかな
記事タイトルの側にあった方が良いと思うので
まぁこのままでも問題ないかな
2016年9月5日月曜日
[Blogger][CSS] blockquote class="code"
.code{やっぱりpreでは問題があるのでとりあえずこんな感じに
margin: 0;
padding: .5em;
text-align: left;
background: #d5ff82;
border:#a3aeb9 1px solid; /* 枠線 */
}
<blockquote class="code">.code{(上の)HTML記述はこう
margin: 0;
padding: .5em;
text-align: left;
background: #d5ff82;
border:#a3aeb9 1px solid; /* 枠線 */
}</blockquote>
2016年9月4日日曜日
[Blogger][CSS] preとcode
pre {
margin:2px;
padding:5px;
background:#d5ff82; /* 背景 */
border:#a3aeb9 1px solid; /* 枠線 */
}
code {
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
}表示はもちろん上の様になる
preのCSS一部はblockquoteから流用
Bloggerの関連記事表示を考える
関連記事の表示はどうするか
以前使用していた LinkWithin ははっきり言って使い物にならないわけで
調べてみると、最近はMilliardを使っている人が多いみたいです
Milliard関連ページプラグインについて | シスウ株式会社
http://corp.shisuh.com/milliard%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/
国産だし、Blogger専用のコードを吐き出してくれる模様
やったぜ、これで外人に差をつけられるぞ！！というわけです
ブログ個別の専用コードなので、テンプレートのバックアップを目的としている当ブログには導入できませんが、現在のメインブログに導入してみます
他はこちらが気になります
2016年9月2日金曜日
header背景画像のリンク切れを修正
第三者が作成したテンプレートで画像を使用しているものはリンク切れに注意
CSSを見ると
#header {
background: transparent url(http://img160.imageshack.us/img160/2641/bgxk7.jpg) bottom left no-repeat;
}
imageshack.us の画像リンクが切れています
幸いにも元となったクラシックテンプレートの画像リンクは切れていないので
こちらのHTMLを参照して
#header div {
background: transparent url(http://www.blogblog.com/snapshot_tequila/header-02.gif) bottom left no-repeat;
}
このヘッダー画像を修正しました
画像はどこにアップロードすれば良いか？
外部ホスティングサービスだと削除やサービス終了の問題が付きまといます
Bloggerにアップし、リンクするのが管理も一緒にできて楽でしょう
[Blogger] header下にガジェットを追加できるようにする
<div id='main-wrapper'>前に
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
を追加
CSS:
#crosscol-wrapper {
clear: both;
background: #E9EAEB url(http://www.blogblog.com/snapshot_tequila/bg-footer.gif) bottom left no-repeat;
border-top: solid 1px #fff;
min-height: 15px;
}
こちらはfooterのCSSをそのまま流用
これでヘッダー下にページナビゲーション ( 「ページ」 のガジェット ) が追加できます
2016年8月31日水曜日
Bloggerのシェアボタンを取り戻す
<p class='post-footer-line post-footer-line-3'/>下に
<div class='post-share-buttons'>を追加
<b:include data='post' name='shareButtons'/>
</div>
参考:
記事タイトル横に "はてなブックマークボタン" を追加
テンプレートで
<b:includable id="post" var="post">セクションを展開
<a expr:href='data:post.url'><data:post.title/>下にコードを追加
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' class="hatena-bookmark-button" data-hatena-bookmark-title="data:post.title" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
スクリプト:
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>は
</body>直前に記述
コードはここからもらってきたものを変更
ページのアドレスは data:post.canonicalUrl
ページのタイトルは data:post.title を使用する
一部参考:
引用部分(blockquote)
このブログ(現在表示されているブログ)では3カラム Snapshot: Tequila の気になる部分に手を入れていきたいと思います
Modified Snapshot: Tequila: レイアウトテンプレート対応の Snapshot: Tequila
以下をCSSに追加
blockquote {
}
blockquote p {
margin:2px;
padding:5px;
background:#d5ff82; /* 背景 */
border:#a3aeb9 1px solid; /* 枠線 */
border-left :solid 3px #a3aeb9;
}
blockquote cite {
margin:2px;
border-bottom :solid 1px #a3aeb9;
font-style: normal;
}
これはさすがにW-ZERO3 KUSTOMから流用
当時かなり色など拘った部分です
はてなダイアリーのブログの影響を受けて一部参考にしたと記憶しています
(W-ZERO3 ツールMEMO さんを含むかな？)
ブログの幅を変更
YouTubeの埋め込みコードがデフォルトで横幅560だから投稿幅はそれくらい欲しい
/* -- layout -- */
#outer-wrapper {
width: 964px; > 1120px
#main-wrapper {
line-height: 1.4;
float: left;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 404px; > 560px
埋め込みテスト
登録:
投稿 (Atom)
