Blogger Custom

今までご紹介してきたBloggerカスタマイズ情報を、改造場所毎にまとめてあります
ここを変えたいといった時にお役に立つと信じてますよ!


知っておくと助かる、カスタム前のお勉強


標準機能がここまで便利!サイトデザインを変えたい初心者にこそオススメしたい、Chrome「デペロッパーツール」で驚いた! - Sunabox

▲Google Chromeに標準機能で用意されているデベロッパーツールは、CSSの確認などだけでも重宝します。


外部ツールのスクリプトがうまく動かないときは、まずはココを確認してみましょう! - Sunabox

▲実体参照変換について。外部ツールのスクリプトを貼るときには注意しておきたいですね。


ガジェットのコードの挿入位置を確認する - Sunabox

▲テンプレートHTMLのどこにコードを貼っていいか分からない場合に。


消せなくなったガジェットを削除する方法!海外のテンプレートをテストするときには必須です。 - Sunabox

▲海外テンプレートを試す時には、覚えておいて下さい。知らないと結構ハマります・・・。


ヘッダー部分をカスタム!


画面上部の『navbar』が手軽に消せるようになりました!利点もあるようですよ。 - Sunabox

▲非表示が正式に選べるように。クイック編集が表示されないなど、ちょっと不具合残ってますが、スクリプトの展開自体をしないように出来ます。


サイズ自由のサムネイル表示で、ランダムに記事を表示可能なブログパーツ!『複眼RSS』 - Sunabox

▲サムネイル画像が表示出来るし、サイズも結構変更できて使い勝手良し。少し表示が遅延するときがあるのが惜しい所。・・・現在は使用停止中。


「All Posts」を作ろう!ページリストで全記事の一覧を表示するスクリプト。 - Sunabox


▲ページリストにて、ラベル毎の表示に使用中。また、アーカイブリスト下に日付順へのリンク表示中。


ラベル・アーカイブページで、日付とタイトルだけの表示にする方法。 - Sunabox


▲採用はしていませんが、CSSによっては使えそうなカスタム。


ソーシャルボタンのスクリプトを非同期コードを使って整理する。 - Sunabox

▲ソーシャルボタン用に。スクリプトの読み込みをまとめて非同期設定にするスクリプトコードです。


慣れるとこっちのほうがいいかも?ソーシャルボタンを縦に並べて配置する! - Sunabox

記事ヘッダーのソーシャルボタンを見直して、重複を減らしてみました。 - Sunabox

▲広告と合わせると綺麗に収まる縦並びです。表示ボタンは「ツイート」「いいね」「Google+」「はてブ」。


記事タイトルの下にラベルタグを表示する方法。 - Sunabox

▲記事タイトル下に、ラベルタグを表示します。カテゴリわけが分かりやすいと思いますよ。


タイトルの横が余ってると感じるblogger使いの人に!タイトルの横にガジェットを配置する方法をご紹介。 - Sunabox

▲ブログタイトルの横にガジェットを置けるようにするカスタムです。Adsenseやバナーを置いたり、ソーシャルボタンを置いたりしてもいいですね。


サイドバー部分をカスタム!


もっと詰めて!サイドバーのガジェット上下の余白を詰めて配置する方法。(04/28追記) - Sunabox

▲サイドバーの余白は随時調整しています。私はこれで、CSSというものを知りました(・・


ひとつひとつ設置は面倒だ!ソーシャルボタンサービス「忍者おまとめボタン」を設置してみる。 - Sunabox

▲忍者おまとめボタンは、サイドバー一番上と、記事フッターに採用中。


Googleカスタム検索が重い!bloggerの検索機能でいいかもしれません。 - Sunabox

使える検索窓の発見!検索向けAdsenseを使って、IEでも表示できるカスタム検索ができた! - Sunabox
▲Googleカスタム検索が、IEでうまく表示されなかったのですが、これで解決しました。カスタム検索にこだわりがなかったり、出来るだけ軽いものがいいなら、上の「Blogger」の機能を使ったコードがオススメです。


ブログに『読者ガジェット』を設置しました! - Sunabox


▲Blogger仲間を増やしたい!


標準の「人気の投稿」ガジェットのスタイルを自分好みに変更する方法! - Sunabox


▲CSSを使って、見た目を調整!


▲こちらは、コメントでのご希望から、サムネイル画像のみの表示にする方法。



動的ビューは諦めました・・・(zenback導入) - Sunabox

新しくなったzenbackで関連記事を表示しよう!新デザイン紹介と・・・早速余白も調整してみました。 - Sunabox
▲zenback導入記。今はサイドバーに設置しています。最近、デザインが変更されて、CSSの設定を見直しました。



下から上まで一気に飛ぼう!「ページトップに戻る」ボタンを付ける。そして回転させる・・・。 - Sunabox
▲記事のまんま使用中です。あ、スクリプトの呼び出しコードは</body>上に変えてるかな?
あと、CSSの「#back-top a」の設定は削除しています。文字を使わないので・・・影響はなさそうです。


フッター、記事フッター部分のカスタム


忍者おまとめボタン「も」利用して、記事の下にソーシャルボタンを付ける! - Sunabox
▲記事フッター部分のソーシャルボタン。忍者おまとめボタンもつけて、多機能ながら余白が整うように。・・・現在のブログでは、記事ヘッダーと同じ縦並びスタイルにしています。



シンプルな関連記事表示がしたい!「Smarter Related Posts Widget for Google Blogger - v2.0」! - Sunabox

シンプルな関連記事をつけた後に、スタイルを選ぶ!「Smarter Related Posts Widget for Google Blogger - v2.0」 - Sunabox
▲テキストだけにして、シンプルな関連記事表示に使用。「●点」が付かないので、CSSでデザイン調整をちょっとだけしています。



いつの間にかトップページが重い気がして - Sunabox

▲関連記事をサムネイル表示するLinkwithinをトップページに表示させないように変更。


標準のコメント機能で満足?(主に見た目)「DISQUS」コメント機能を導入しました! - Sunabox

[追記あります!]多機能コメントサービス「Disqus」のアップデートが来てました。更に見た目がすっきり(寂しい?) - Sunabox
▲主に見た目目的でコメント欄も変更しています!



ページ送り機能!「前の投稿」の表示を英語表記に変える方法。 - Sunabox


▲「前の投稿」という日本語表記がなんとなくオサレじゃないので。


スタイリッシュさはかなりのもの!「SexyBookmark」の導入方法について。 - Sunabox

▲採用はしていませんが、見た目のいいソーシャルボタンのご紹介。記事中では、記事フッターに設置する感覚で書いています。


投稿本文部分のカスタム


見出しにスタイルを付けたい!付箋風スタイルとクレヨンっぽいのを設定してみた。 - Sunabox
▲見出し・・・つまり記事タイトル部分やガジェットタイトル部分の装飾と、本文でhクラスを使う時用の装飾方法。



記事投稿ページの引用ボタンを活用する。(blockquot引用スタイルの変更) - Sunabox

▲ダブルクォーテーションの画像は変えてしまいましたが、使用中。引用のスタイルも設定してデザインの統一感を出したいですよね。


read-more!続きを読むを画像表示に変更する方法。 - Sunabox


▲続きを読む・・・を画像を使って雰囲気を変えています。


IEでの表示でおかしな影が・・・。CSSに書き込んで使える「zoom:1」 - Sunabox

▲↑に関連して、IEでの表示がおかしくなっていたものが解決しました。


ブログにコードを見やすく貼る。Google-code-prettify導入しました。 - Sunabox

▲HTMLコードなどをブログに貼る時に、とても見やすくすることができるスクリプトですよ。


これは常備品レベル!リンク紹介に便利なブックマークレット『ShareHtml』 - Sunabox


▲最近、これを使って貼るほうが多くなってきました。サムネイル付きの物が一発で作成出来ます。


FocusHtml NEOがすごい!Twitterアイコンまで加えた全部のせリンクを作るブックマークレットをご紹介! - Sunabox
▲こちらは、ツイートからリンクを引っ張ってくるブックマークレットです。ツイッターアイコンがつくので、コメントをつけて、ニュースリンクの紹介などをすればコンテンツが1つ出来上がってしまいます!


モバイルテンプレート用のCSS

モバイルでもLinkWithinは出しておく!画面からはみ出さないようにするCSS設定。 - Sunabox


▲Linkwithinの表示数を、モバイルテンプレート時のみ変更する方法です。


モバイルカスタムテンプレートを使いたい!ページトップに戻るボタンをモバイルでは表示させない!・・あと、埋め込み動画の対処。 - Sunabox

▲こちらもモバイル用の対処。モバイル表示時に出てしまうと、かなり邪魔に感じますよ。




▲メールでのお問い合わせから考えてみた、広告のモバイル表示。正しい使い方かどうかがちょっと微妙ですが、今のところ問題はありません。


その他


カスタマイズはここから!HTMLの知識ゼロで始めるブログ改造(主に見た目) - Sunabox

▲こんな順番にカスタムを試みると分かりやすい気がします。個人的にですが。


オススメ記事をヒョコッと表示してくれる!Facebookの【Recommendations Bar】の導入方法。 - Sunabox

Recommendations Barを導入後、モバイル閲覧時には表示させないようにする方法。 - Sunabox
▲オススメ記事の紹介をして、直帰率の改善に。モバイル閲覧時は、表示するとスペース的に辛いので、非表示に設定しています。



ブラウザ画面横が空いてませんか?簡単に設置出来る。Twitterバッジをbloggerに設置してみた。 - Sunabox

▲今は外していますが、常時表示用のツイッターフォローボタンと、外部サイトへのリンク用バッヂの紹介です。


スクロールしてもついてくるソーシャルボタン、bloggerですぐ使えるようにしてみました。 - Sunabox

▲カラム外で、スクロールしても付いてくるソーシャルボックスをつけるカスタム。好みだとは思いますが、これもいつでもソーシャルボタンがあるので、有効かもしれません。採用はしていません。


気付きにくいよ!カスタムドメインにしたら、グーグルサイトは外部Java,CSSファイルの置き場に出来なくなるようです。 - Sunabox


▲採用中というか、外部にしてるものもありますので・・・。


いいねボタンを置いたらぜひ設定!OGPをHTMLに追加してみました。 - Sunabox

▲ソーシャルボタン含め、全部の設定が一括で出来て、しかも早い!みたいなの欲しい。


FacebookのOGPが設定できているか確認する3つの方法。 - Sunabox


▲↑でOGPを設定したら、確認してみましょう。


シンプルテンプレートで、タイトル背景を透過にする方法。(追記あります!) - Sunabox

シンプルテンプレート!ページの上下にライン状に背景を設定する! - Sunabox
▲コメントで頂いた要望から。HTMLの見方や、色々勉強になりました。

2 件のコメント:

  1. 感動しました・・・・

    返信削除
  2. あら、ありがとうございます!
    ここ、コメント機能だしたままでしたねw

    返信削除