Home > デザイン
デザイン
先日まで、このブログをブラウザから印刷してみると、このような情報が書き出されるようになっていました。
それが、テンプレート内に 1 行コードを追加しただけで、こんな風になりました。
余分なヘッダやフッタ、サイドバーの情報がなくなって、記事の内容だけになりました。シンプルでとてもいい感じです。これは、印刷のときにだけ適用されるスタイルシートを利用したカスタマイズで、次の記事を参考にしています。
導入方法
Blogger の管理画面「テンプレート ＞ HTML の編集」を開き、
<style media='print' type='text/css'> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #lower-wrapper, #footer-wrapper, #footer, #credit, .comment-form, .post-footer, #blog-pager, .post-feeds, #backlinks-container, #navbar-section, #navbar, .footer {display: none;} #content-wrapper, #main-wrapper, #main { width: auto !important; overflow: visible !important; float: none !important; color: black; font-size: 12pt; background: white; border: none; } #main a { text-decoration: underline; color: blue; } </style>
というコードを
<head> のすぐ後の行に貼り付けます。これだけ。「うちのブログごちゃごちゃしていて印刷向きじゃないんだよなぁ」という人は、ぜひ一度お試しください。
Blogger ブログでは、匿名ユーザーや、アバターを指定していない Blogger ユーザーがコメントを投稿した場合、コメント欄にはデフォルトのユーザーアイコンが表示されます。今回は、このデフォルトで使用する画像をブログで自由に設定する方法についてです。
※ このカスタマイズは、「埋め込み」方式のコメント欄にのみ有効です。コメント投稿フォームを投稿ページに埋め込むには、Blogger 管理画面「設定 ＞ 投稿とコメント」ページから、「コメントの場所」項目を「埋め込み」にしてください。
今回のカスタマイズ方法については、以下のサイトを参考にしました。（コードは一部変更しています。）
How to Change Default Anonymous Avatar in Blogger Comments | Blogger Help 上に示した以外のアバターも紹介されています。それぞれ URL が掲載されているので、気に入ったものがあれば、以下のカスタマイズ方法に従って変更してみてください。
導入方法
さっそく導入方法を見ていきます。
１．Blogger 管理画面で「テンプレート ＞ HTML の編集 ＞ 続行」 と進みます。
２．
３．「テンプレートを保存」ボタンを押します。
２．
</body> の直前に次のコードを挿入します。</body> は、ブラウザの検索機能を使うと見つけやすいと思います。
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type='text/javascript'>
$("img[src='http://img1.blogblog.com/img/anon36.png']").attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5WeV7jBLDLaqqYGr__WMu8qRHIAuaqTHqyxe71ntQhSNfc203286SEFn1LCFGT7Rh2gdbIC1Ska_qrsTZEEDyJKgiwD5Kg6sfyid7JeHlWuMKUH4dzVxcBsTOa1viYBGrFj8l/s1600/default_avatar.gif');
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']").attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Lg9-BjZ_jpGk-0JdUaADx7WKORc6iVlFlgjAzTbutT2Hm4DKIOoeTd6FidXUhCd_VxLvwuCil3ZzlOJjXdOIOKJrdrrqrrHMjfPl8vcP_gUBAk3YhzkbOn8Dd6mGI57gjF80/s1600/blogger-user.png');
</script>
<script type='text/javascript'>
$("img[src='http://img1.blogblog.com/img/anon36.png']").attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5WeV7jBLDLaqqYGr__WMu8qRHIAuaqTHqyxe71ntQhSNfc203286SEFn1LCFGT7Rh2gdbIC1Ska_qrsTZEEDyJKgiwD5Kg6sfyid7JeHlWuMKUH4dzVxcBsTOa1viYBGrFj8l/s1600/default_avatar.gif');
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']").attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Lg9-BjZ_jpGk-0JdUaADx7WKORc6iVlFlgjAzTbutT2Hm4DKIOoeTd6FidXUhCd_VxLvwuCil3ZzlOJjXdOIOKJrdrrqrrHMjfPl8vcP_gUBAk3YhzkbOn8Dd6mGI57gjF80/s1600/blogger-user.png');
</script>
３．「テンプレートを保存」ボタンを押します。
これだけです。簡単ですね。
カスタマイズ方法
導入方法で示したコード中、赤字部分で匿名用のアバター画像、青字部分で Blogger ユーザー用のアバター画像が指定されています。好みの画像が別にあれば差し替えてみてください。
緑色のコードは、JavaScript のライブラリ jQuery を呼び出している部分です。通常このままで問題ありませんが、ブログで他に jQuery を呼び出して使っている箇所がある場合、省略した方がいいと思います。
テンプレート変更などブログの模様替えの際に、こういった細かいところもテーマに合わせてカスタマイズしてみると面白そうです。フォトログやイラストブログなんかで、自分の撮った写真や手書き画像にしてみるのもいいかもしれませんね。
Blogger のテンプレートを配布している BTemplates にて、Blogger レイアウトテンプレート用のチートシートを発見しました。2009 年末に公開されたもののようで、めちゃくちゃ遅いニュースになってしまったんですが、一応ご紹介を。
PDF ファイルには、Blogger レイアウトテンプレートのスタイルシートで用いられている id 名、class 名が数多く紹介されています。
Blogger ブログのデザイン変更で、テンプレートデザイナーでは少し物足りないという人は、このチートシートを使って CSS 編集にチャレンジしてみてはいかがでしょうか。
Blogger には、読者がブログの表示を変更できるダイナミックビューという仕組みがあります。
/view という文字列を付け足していたんですが、いつの間にか、ブログ運営者の方で特定のダイナミックビューをデフォルトのテンプレートとして選択できるようになったようです。
設定は、テンプレートデザイナーで「動的ビュー」を選択するだけ。また、このテンプレートデザイナーへのダイナミックビューの登場に伴って、ダイナミックテンプレートも色やフォント、背景の画像などを自由に編集できるようになっています。
こういう、カスタマイズできる部分が増えるのは、ユーザーとしてうれしいことですね。
デフォルトのダイナミックビューを一時的に解除する方法
つけたしなんですが、ブログのデフォルトテンプレートにダイナミックビューが設定されていると、記事単独ページを表示しても
#!/2011/10/blogger-google-analytics.html
といった文字列が URL 末尾に自動的に追加されてしまいます。これが困る人には、一時的にダイナミックビューの起動を停止する方法があります。それは、本来のページの URL 末尾に
?v=0 をつけること。オンラインブックマークなどで困っている人は、ぜひお試しください。
以前お伝えした Blogger in Draft トップページの新デザインが、Draft を卒業して Blogger に正式採用されました。
促されるまま、試してみたのがこちら。
Google+ と同じようなインターフェースになっていますね。昔ながらの Blogger カラーが姿を消して少しさみしい気もしますが、Google のブランド戦略上、仕方ないのでしょうね。今後「Google のブログサービス」ということで、Blogger も利用者が増えてくれるとうれしいです。
ちなみに、新しいインターフェースには「以前のインターフェースに戻す」というリンクもついています。気に入らなければすぐに戻せるので、興味のある人は気軽に試してみるといいと思います。
昨年末に紹介したのが、こちらの記事。
設定は、Blogger 管理画面「設定 ＞ メールとモバイル」ページの「モバイルテンプレート」の項目から「モバイルテンプレートを表示する」を「はい」にするだけ。
自分のブログが、スマートフォンで実際にどのように表示されるかは、ブログ URL 末尾に
?m=1 を付け加えてアクセスすることで確認することができます。正式採用となったモバイルテンプレートで、スマートフォンの読者が増えるといいですね。
