欲しいものリスト

Customize Simple Template in Blogger -Bloggerのカスタマイズまとめ-

MacBook Air Software Reinstall USB Drive
Blogger のシンプルテンプレートをカスタマイズするためのまとめです。

photo-credit: syui



Table of contents


Help Pages


ここでは、主に、Bloggerの基本情報をまとめます。

# 内容 タグ
01 標準的なカスタマイズ方法について standard
02 応用的なカスタマイズ方法について hard
03 Google Chromeを使った問題の解決方法について chrome
04 モバイルテンプレートのカスタマイズ方法について mobile
05 Bloggerで使えるお勧めテンプレート template


Simple Template


ここでは、主に、Bloggerのシンプルテンプレートのカスタマイズ手順についてまとめます。


# 内容 タグ
01 「投稿:Atom」を削除する方法 post
02 「ホーム」を削除する方法 home-link
03 「前の投稿」を削除する方法 blog-pager-older-link
04 「次の投稿」を削除する方法 blog-newer-older-link
05 「Powered by Blogger」を削除する方法 widget
06 タイトルとコンテンツを分ける線を表示する方法 main-inner
07 タイトル文字に常にリンクを貼る方法 title-link
08 記事の下に表示されるオプションボディを削除する方法 post-footer
09 「続きを読む」をアイコンにする方法 jump-link
10 「続きを読む」を右側に表示する方法 jump-link
11 ページャーを分ける線を表示する方法 blog-pager
12 フッターの背景を画像する方法 footer-outer
13 タイトルに画像を表示する方法 title
14 画面下に表示されている点線を削除する方法 footer-outer
15 メインコンテンツの下に線を表示する main-inner
16 ページャーの「新しい投稿」や「古い投稿」をアイコンで表現する方法 pager
17 ページャーにJavaScriptを使用する方法 pager
18 ダウンロードアイコンに使えるボタンを作る方法。 icon
19 メニューバーを表示する方法 menu
20 ブログタイトルにアイコンを挿入する方法 title
21 コメントフォームを改良する方法 comment
22 Bloggerの個別記事に+ブログタイトルの名称を付ける方法 title
23 個別記事に枠を付ける方法 post-outer
24 クリックできないボックスが出てきてしまった時の対処法 z-index
25 画像の回り込みを解除する方法 float
26 404のエラーページを作成する方法 error_page
27 画面下に表示する固定されたメニューバーを作成する方法 footer
28 サイドバーにスクロールしても付いてくるガジェットを追加する方法 fixed-box
29 記事の見出しタグを吹き出し形式にする方法 post
30 画面上で固定されるSNSアイコンを設置する方法 icon
31 メニューバーに検索フォームを埋め込む方法 menu
32 Webフォントを使ってアイコンを表現する方法 font
33 記事を投稿した時の日付を表示する方法 date
34 同じ日付でも繰り返し表示する方法 date
35 記事タイトルの下に日付を表示する方法 post-header
36 タイトル下にラベルを表示する方法 post-header
37 パンくずリストを作成する方法 post-header
38 タイトルの見栄えを変更する方法 post
39 シンタックスハイライトを使ってコードを綺麗に見せる方法 syntaxhighlighter
40 引用符をカスタマイズする方法 blockquote
41 キーワードを強調するボックスを作る方法 span
42 記事末尾にSNSボタンを設置する方法 sns
43 公式SNSボタンを使う方法 button
44 ラベルのスタイルを簡単にカスタマイズする方法 label
45 ブログトップまで移動できるアイコンを表示する方法 top
46 はてなブログパーツを貼り付ける方法 hatena
47 ZenBackを使ってまとめてSNSボタンを表示する方法 zenback
48 テーブルのレイアウトをかっこ良くする方法 table
49 はてなブログパーツをCSSでカスタマイズする方法 hatena
50 人気の投稿に画像がない場合 widget
51 「続きを読む」を記事の下に表示する方法 jump-link
52 記事タイトルの幅をボディいっぱいに表示する方法 h3
53 記事タイトルにH2を使う方法 h2
54 Google Playのアプリをブログで紹介する方法 post-app
55 サイトの表示速度を分かりやすく表示する方法 site-speed
56 立体感のある線をCSSだけで再現する方法 border
57 iPhoneのホーム画面をブログで紹介する方法 iphone
58 目次まで移動する矢印アイコンを取り付ける方法 name
59 人気の投稿ガジェットを均等に表示する方法 sidebar
60 スクロールしても動かない上メニューバーを設置する方法 menubar
61 RSSアイコンの設置 rss
62 最下部への移動アイコンの設置 down
63 検索フォームのCSSをカスタマイズする search-box
64 ブログのタイトル画面で画像を左に置き換える title-img
65 個別記事でのページナビを復活させる方法 page-navi
66 Feedlyの登録用アイコンを設置する方法 feedly
67 Bloggerでコンテンツをトップページでは非表示にする方法 別ページ
68 ブログをカスタマイズする上で、とても参考になった記事 別ページ
69 タイトル画像にアニメーション付きのエフェクトを適用する方法 別ページ
70 CSSのTooltipを吹き出し風にして表示する方法 別ページ
71 目次にジャンプするアイコンを設置しました 別ページ
72 Google+のカバー写真のサイズを変更する方法 別ページ
73 Google+とブログの連携まとめ 別ページ
74 Google+のコメントフォームを使う方法 別ページ
75 Bloggerで連絡フォームを個別記事に設置する方法 別ページ
76 個別記事のタイトルを「投稿タイトル| ブログタイトル」にする方法 別ページ
77 GitHubのブログパーツについて 別ページ
78 Bloggerにオートロード機能を付ける 別ページ


Mobile Template


ここでは、主に、Bloggerのモバイルサイトに関する情報をまとめます。


# 内容 タグ
01 Twitter ブログパーツを表示する方法 twitter
02 PC用のテンプレートをそのまま適用する方法 mobile
03 スワイプを無効にする方法 mobile
04 CSSによる微調整 post-body
05 サムネイル画像を置き換える方法 mobile-post-outer
06 ページャーの文字位置が適切でない問題を解消する方法 pager
07 ホームボタンを非表示にする方法 home-link
08 ブックマークに登録する際にアイコンを表示する方法 safari
09 タイトル上に日付を表示する方法 date
10 パンくずリストがボックスからはみ出した場合に非表示にする方法 overflow
11 サイトマップのボタンを設置する方法 sitemap
12 コメントフォームに「Disqus Wigdet」を使用する方法 comment
13 「ウェブバージョンを表示する」をアイコンにする方法 mobile-desktop-link
14 Bloggerのモバイルテンプレートのアイコンを大きくする方法 別ページ
15 Bloggerモバイルに一番上に移動するアイコンを設置する方法 別ページ


Editer for Blogger


ここでは、主にBloggerでの編集やポスト関連の情報をまとめます。


# 内容 タグ
01 ターミナル画面からBloggerへ投稿する方法 terminal
02 Vimによる執筆環境を整える方法 vim
03 Sublime Text2による執筆環境を整える方法 sublimetext2
04 Bloggerで使用する画像をPicasaで管理する方法 googlecl
05 長いコードはやっぱりGistにポストすることにした 別ページ
06 Sublime Text2 から Blogger にポストする方法 別ページ
07 Sublime Text2からPicasaに画像をアップロードする方法 別ページ


リンク


ここでは、主に、Bloggerをカスタマイズする上でのおすすめサイトを紹介します。

#タイトル 種類
01 クリボウの Blogger Tips外部リンク
02 ふりむけばコウホウ外部リンク


コラム


ここでは、主に、Bloggerに関するコラムを紹介します。


#タイトル 種類
01 2013年にオススメのブログサービスまとめ | MBA-HACK 別ページ
02 Bloggerやってる人の気持ち悪い点 | MBA-HACK 別ページ


標準的なカスタマイズ方法について


フォントやサイト幅などを変更する


管理画面から テンプレート > カスタマイズを選択します。




CSSを追加する


管理画面から テンプレート > カスタマイズを選択します。そこで、 アドバンス > CSSを追加を選択します。




応用的なカスタマイズ方法について


HTML/CSSの編集


管理画面から テンプレート > HTMLの編集を選択します。




この記事では、通常こちらの編集方法を用います。したがって、この知識を前提としてカスタマイズを行なっていってください。


ガジェットの追加と削除


Bloggerでは、ガジェットを表現するキーワードを widgetと言います。ここで、この widgetには、一括して様々な設定ができるようになっているのですが、ロックするかしないかを設定することができます。ここで、ロックをオンにした場合は、管理画面からの変更が不可能になります。反対に、ロックをオフにした場合は、管理画面からの変更が可能になります。truefalseで設定できます。これは、ロックをするか?と聞かれた場合の Yes , No の意味です。


ここで変更可能にした widgetは、管理画面の レイアウトから変更可能になります。




Bloggerのレイアウト要素については、 こちらが参考になります。


コメントアウト


Bloggerのコメントアウトは少し特殊です。通常なら /* コメントアウト */<-- コメントアウト -->でいいわけですが、以下のように特殊な文字を使用して、当該コメントを表現してやる必要があります。詳しくは、 こちらに書かれています。

&lt;!-- コメントアウト --&gt;


これは、Bloggerでは、上のようなコメントアウトがページ生成時には、削除されてしまうからです。したがって、JavaScriptなどのコードを使用する場合、注意が必要です。


<script type="text/javascript">
  <!--
  alert("Hello, World!");
  //-->
</script>


<script type="text/javascript">
</script>


また、 " 文字 "などのダブルクォーテーションを使用することも多いかと思いますが、これについても、以下のように表現してやる必要が出てくる場合があります。

&quot; 文字 &"


jQuery


Bloggerで jQueryを有効にするには、以下のコードを </head>の上に追記します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" />

そして、実際のコードは追記したコードの下に書いて行きましょう。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" />
<script>

$(function(){
  $("#fixed-box").hide();
  $(function () {
    $(window).scroll(function () {
      if ($(this).scrollTop() > 4300) {
        $('#fixed-box').slideDown(100);
      } else {
        $('#fixed-box').slideUp(100);
      }
    });
  });
});
</script>


Googleが推奨するコードの書き方


Google HTML/CSS Style Guideに掲載されています。


和訳された こちらの記事が参考になります。


Google Chromeを使った要素の検証


Google Chromeを使用している場合、 要素の検証というものが行えます。これを使うには、検証したいサイト上で、右クリックするか Cmd + Alt + iを押します。これは、Macの場合ですので、OSによってショートカットキーは異なります。 こちらを参考にしてください。




モバイルテンプレートのカスタマイズ方法について


モバイルテンプレートをカスタマイズする際は、管理画面にて 「テンプレート」 > 「モバイルの設定」ボタンを選択し、「カスタム」にします。




Bloggerで使えるお勧めテンプレート



私自身は、デフォルトのテンプレートである「Simple Template」をカスタマイズして使っていますが、以下のサイトには、面白そうなテンプレートがたくさんあります。


Dowlonad



http://btemplates.com/


個人的なおすすめ




★★★☆☆



★★★☆☆



★★★★★



★★★★☆


気に入ったテンプレートがありましたら、プレビューで動作を確認してみてください。





Setting



テンプレートを適用するには、ダウンロードした圧縮ファイルを解凍し、解凍してできたフォルダ内にある .xmlファイル をBloggerの管理画面よりアップロードします。








「投稿:Atom」を削除する方法


以下の箇所を見つけてそれを削除します。

<data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>


「ホーム」を削除する方法


以下の箇所を見つけてそれを削除します。

<a class='home-link' … </a>


「前の投稿」を削除する方法


以下の箇所を見つけてそれを削除します。

<span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>


「次の投稿」を削除する方法


以下の箇所を見つけてそれを削除します。

<span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>


「Powered by Blogger」を削除する方法


これは、変更できないガジェットを変更できるようにして削除します。

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>


解説としては、Bloggerでは、ガジェットを表現するキーワードを widgetと言います。ここで、この widgetには、一括して様々な設定ができるようになっているのですが、ロックするかしないかを設定することができます。ここで、ロックをオンにした場合は、管理画面からの変更が不可能になります。反対に、ロックをオフにした場合は、管理画面からの変更が可能になります。truefalseで設定できます。これは、ロックをするか?と聞かれた場合の Yes , No の意味です。

ここで変更可能にした widgetは、管理画面の レイアウトから変更可能になります。

Bloggerのレイアウト要素については、 こちらが参考になります。


タイトルとコンテンツを分ける線を表示する方法


.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);

border-top: solid 1px #ccc;
}


タイトル文字に常にリンクを貼る方法


<b:include name='title'/>という箇所を見つけて、以下のようにします。

<a href="URL"><b:include name='title'/></a>


また、ホームリンクを表現するタグを使用してもいいと思います。


オプションボックスを非表示にする方法


記事の下には、オプションが表示されるボックスがあります。これを非表示にする方法を紹介します。

.post-footer
{
display: none;
}


定義されている要素を非表示にしたい場合、よくdisplay: noneを使うことがあります。


「続きを読む」をアイコンにする方法


.button01 a {
    background: #EEE;
    padding: 3px 12px;
    border: 2px solid #CCC;
    text-decoration: none;
    color: #000!important;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
}
.button01 a:hover {
    border: 2px solid #06c;
    background: #06c;
    color: #fff!important;
}

jump-linkと検索し、以下の様な箇所を見つけます。

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

そして、以下のタグに書き換えます。

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <div class="button01"><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div></div>
    </b:if>


「続きを読む」を右側に表示する方法


align='right'を追加します。具体的には、以下のようになります。

<div class='jump-link'>
        <div align='right' class='button01'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><span class='fontawesome-play'/> <data:post.jumpText/> </a>
      </div></div>


ページャーとメインコンテンツを分ける線を表示する方法


画面下には、ページャーと呼ばれるボックスがあります。これは、主にページの前後に移動するめのものです。このページャーを分かりやすくするために上辺りに線を引いてみます。

.blog-pager {
padding: 20px;
border: solid 2px #ffffff;
border-top-color: #F2F2F2;
}


フッターの背景を画像にする方法


.footer-outer {
border-top: none;
background-image: url("ここに画像URLをいれる");
background-repeat: no-repeat;
}


タイトルに画像を表示する方法


これは、Bloggerの管理画面にて レイアウト > Headerを編集します。



そこで、アップロードした画像を適用するだけです。なお、アップロードする画像はサイトの幅などを考慮し、カスタマイズするといいと思います。 こちらが参考になります。


画面下に表示されている点線を削除する方法


.footer-outer {
  border-top: none;
}


メインコンテンツの下に線を表示する方法


.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
<!--メインコンテンツに枠線を表示する-->
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:#F2F2F2;
}


ページャーをアイコンで表現する方法


ページャーの「新しい投稿」や「古い投稿」をアイコンで表現する方法を紹介します。先ほどの「続きを読む」をアイコン化した時に使ったCSSを再利用します。

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>

<!--"###新しい投稿###"-->
      <span id='blog-pager-newer-link'>
      <div class='button01'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Next</a></div>
      </span>

<!--"新しい投稿"バックアップ
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
-->

    </b:if>

    <b:if cond='data:olderPageUrl'>

<!--"古い投稿"-->
      <span id='blog-pager-older-link'>
      <div class='button01'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Prev</a></div>
      </span>

<!--"古い投稿"バックアップ
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
-->

    </b:if>

<!--"ホーム"-->
<div class='button01'><a class='home-link' expr:href='data:blog.homepageUrl'>HOME</a></div>

<!--"ホーム"バックアップ
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
-->
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>


一応、CSSを再表示しておきます。

.button01 a {
    background: #EEE;
    padding: 3px 12px;
    border: 2px solid #CCC;
    text-decoration: none;
    color: #000!important;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
}
.button01 a:hover {
    border: 2px solid #06c;
    background: #06c;
    color: #fff!important;
}


ページャーをカスタマイズする方法


ページャーにJavaScriptを使用してみます。 Pagination in Bloggerを使ってみます。 </body>を検索し、その上にいかのタグを貼り付けます。

<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>


そして、 Accents を検索し、当該箇所を以下のようにします。ページャーの表示には、直接関係のない箇所もありますが、参考のために載せておきました。


/* Accents始まり
---------------------------------------------- */
.section-columns td.columns-cell {
  border-$startSide: 1px solid $(body.rule.color);
}

<!--"点線"を削除
.blog-pager {
  background: $(paging.background);
}
-->

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

.footer-outer {
  border-top: none;
}

<!--###".footer-outer"のバックアップ
.footer-outer {
  border-top: $(footer.bevel) dashed #bbbbbb;
}
-->

<!--###"ページ"のリストを表示する-->
.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;}
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

/* Accents終わり
---------------------------------------------- */


ダウンロードアイコンに使えるボタンを作る方法


.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;

  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

/*CSS3*/
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

HTMLは以下のように書きます。

<div class="button">
  <a href="URL">Download</a>
</div>


メニューバーを表示する方法


CSS3 dropdown menuを使います。

/* Main */
#menu{
 width: 100%;
 margin: 0;
 padding: 10px 0 0 0;
 list-style: none;
 background: #111;
 background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
 background: -webkit-linear-gradient(#444, #111);
 background: -o-linear-gradient(#444, #111);
 background: -ms-linear-gradient(#444, #111);
 background: linear-gradient(#444, #111);
 -moz-border-radius: 7px; /* 変更箇所 */
 border-radius: 7px; /* 変更箇所 */
 -moz-box-shadow: 0 2px 1px #9c9c9c;
 -webkit-box-shadow: 0 2px 1px #9c9c9c;
 box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
 float: left;
 padding: 0 0 10px 0;
 position: relative;
}

#menu a{
 float: left;
 height: 25px;
 padding: 0 25px;
 color: #999;
 text-transform: uppercase;
 font: bold 12px/25px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
 color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
 color: #fafafa;
}

#menu li:hover > ul{
 display: block;
}

/* Sub-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
 height: 10px;
 width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
 height: 10px;
 width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
 background: -moz-linear-gradient(#04acec,  #0186ba);
 background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background: -webkit-linear-gradient(#04acec,  #0186ba);
 background: -o-linear-gradient(#04acec,  #0186ba);
 background: -ms-linear-gradient(#04acec,  #0186ba);
 background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

ハイライトされたタグを探しその上に以下のタグを挿入します。

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li>
  <a href="#">Categories</a>
  <ul>
   <li><a href="#">CSS</a></li>
   <li><a href="#">Graphic design</a></li>
   <li><a href="#">Development tools</a></li>
   <li><a href="#">Web design</a></li>
  </ul>
 </li>
 <li><a href="#">Work</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
<div class='header-cap-bottom cap-bottom'>


ブログタイトルにアイコンを挿入する方法


ヘッダの編集には、 HTMLを直接編集する方法プラグインを追加する方法があります。ここでは、直接的にHTMLのタイトルタグ内にアイコンを入れていく方法を紹介します。

HTMLの編集にて <!--No header image -->を探します。そこで、 <h1 class='title'>の後に以下の様なタグを挿入します。

<h1 class='title'>
<div style='float: right; width: 350px;'>
<a href='URL' target='_blank'>
<img alt='RSS' border='0' height='26' src='画像URL' style='background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px' title='RSS' width='26'/>
</a>
<a href='URL' target='_blank'>
<img alt='twitter' border='0' height='26' src='画像URL' style='background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px' title='twitter' width='26'/>
</a>
</div>
<a href='http://mba-hack.blogspot.jp/'><b:include name='title'/></a></h1>


ちなみに、アイコンは、 こちらからダウンロード出来ます。


コメントフォームをかっこ良くする方法


DISQUSを使うことで、コメントフォームを改良することができます。





まず、 DISQUSにてアカウント登録した後、 Blogger専用ページに移動し、 add site "xxxx" to Bloggerをクリックします。


タイトルに+ブログ名の名称を付ける方法


名称とは


タブに表示されるのが、ここでいう名称になります。




この名称は、以下のタグを使用することで、付けることができます。

<title>
文字
</title>



上のようなタグは、通常、 <head></head>の間に挿入されます。


個別記事に+ブログタイトルの名称をつける


以下の様な箇所を見つけます。

<title><data:blog.pagetitle/></title>


そして、上のタグを以下のタグに書き換えます。

<!--<title><data:blog.pagetitle/></title>-->
<!-- Start of Changing the Blogger Title Tag -->
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - ここに自分のブログタイトルを記載</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- End of Changing the Blogger Title Tag -->



参考 : 【Blogger】記事タイトル:ブログタイトルの並び替え




個別記事に枠を付ける方法


Bloggerのシンプルテンプレートでは、個別記事には、枠はついていません。しかし、分かりやすさという点では、枠を付けたほうがパッと見た感じ、わかりやすいと思ったので、枠を付けてみました。





.post-outer {
border: 1px solid #DCDCDC;
}


<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>



HTMLは、最初からこんな感じだったのかどうなのか忘れてしまいましたが、一応現在の状況を書いておきます。


CSS3で線に影をつける


それでもまだ分かりにくかったので、CSS3で線に影をつけてみました。線の太さを太くすれば、分かりやすくなるかもしれませんが、それでは、ちょっとカッコ悪くなるので、止めておきました。


-webkit-box-shadow: 0 1px 0 #C1D6EC;
-moz-box-shadow: 0 1px 0  #C1D6EC;
box-shadow: 0 1px 0  #C1D6EC;



参考 : 立体感のある水平線をCSSだけで実現する方法


最終的には、以下の様な感じになりました。

.post-outer {
border: 1px solid #DCDCDC;
margin: 0px 0px 40px 0px;
padding: 20px 20px 0px 20px;
-webkit-box-shadow: 0 1px 0 #C1D6EC;
-moz-box-shadow: 0 1px 0  #C1D6EC;
box-shadow: 0 1px 0  #C1D6EC;
}




ボックスがクリックできない問題を回避する方法


ボックスがクリックできない時の原因は、ほとんどが divの重なりだと思います。


私の場合は、ちょっと違ったわけですが、とりあえずの応急処置として、以下のCSSを当該ボックスに設定することで、回避出来ます。


.post-header {
position: relative;
z-index: 2;
}



参考 : CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする


画像の回り込みを解除する方法


HTMLを使った画像の回り込み


HTMLを使った画像の回りこみは、以下のようにします。

<img src="" align="left"/>

文字

<br clear="all">


ハイライトされた5行目は、回り込みの解除です。


CSSを使った画像の回り込み


.float
{
float: left;
margin-right: 1em;
}
.floatclear
{
clear: both;
}


<div class="float">

<img src="" alt="" />

</div>

<br class="floatclear">


これも先ほどと同じように、最後の行で回りこみの解除を行なっています。これは、 CSS の clear: bothによって実現します。


モバイルテンプレートでの使用例


私の場合、アイキャッチ画像に回りこみをしています。しかし、モバイルページだと幅が小さいため、回り込みを使用するのは、見栄えがあまりよろしくないです。


したがって、以下の様な場所に <br class="floatclear">を使います。
<b:includable id='mobile-post' var='post'>
.
.
.
<div class='date-posts'>
<div class='post-outer'>
<br class='floatclear'/>





404 のエラーページを作成する方法


Bloggerの管理画面から 設定 > 検索設定 > カスタム 404 ページ と進むと、簡単に変更できるようです。

参考 :
30 Custom 404 Pages for Blogger


ただし、個人的には、 こちらのページを見て画像メインではなく、文字メインで 404 ページをカスタマイズしてみました。


Demo



まず、 </head>と検索し、その上に以下を追記します。


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404 Error.</title>
<h1><a href='/'>404 Not Found</a></h1><br/><br/>
<h2>指定したページは存在しません&#12290;お手数ですが&#12289;<a href='/'>こちら</a>をクリックしてホームページに移動してください&#12290;
</h2>

<style type='text/css'>
body {
background: #000000 url(&quot;画像URL&quot;);
background-repeat :no-repeat ;
margin:70px;
padding:20px;
}

h2 {
color: #666666;
}

.cap-top {
-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=80)&quot;; /* IE */
filter: alpha(opacity=80); /* IE */
-moz-opacity:0.8; /* Firefox(old) */
-khtml-opacity: 0.8; /* Safari(old) */
opacity: 0.8;
}

.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

</b:if>





画面下に表示する固定されたメニューバーを作成する方法


CSS Sticky Footer For Bloggerを使います。しかし、いくつかの変更点があるので、それを明示します。





#stickey_footer { /* This will make your footer stay where it is */
left: 0%;
width: 100%;
z-index: 300;
}
#footer_menu li span {
/* display:none; */
}



メニューバーの幅はブラウザいっぱいに表示させるようにしました。


z-indexは値が高いほうが上に来ます。よって、設定している人は、この値を変更して、どのコンテンツを上に表示するのか調整してください。


また、前回紹介した Web フォントを表示させる関係で spanを表示させるようにしました。


<div id="stickey_footer">
<!– Begin Footer Menu –>
<ul id="footer_menu">


# ここに左側に表示したいメニューを作る
サンプル:
<li><a href="URL" ><span>Twitter</span></a></li>


</ul>
<ul id="social_icons">
<!–Social Icons –>
<li>


# ここに右側に表示したいメニューを作る
サンプル:
<li><a href="URL" ><img src='画像URL' alt="" /><span>Twitter</span></a></li>


</li>
</ul>
</div>





サイドバーに、スクロールしても付いてくるガジェットを追加する方法


jQuery


Bloggerでは、公開されているファイルを読み込むことで、 jQueryを使えるようになります。 </head>の上に以下を追記します。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" />



Bloggerのサイドバーにスクロール時に表示位置を固定するガジェットを追加する方法


そして、上で追記した箇所の下に jQueryのコードを書いていきます。

<script>
$(function(){
$("#fixed-box").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 4300) {
$('#fixed-box').slideDown(100);
} else {
$('#fixed-box').slideUp(100);
}
});
});
});
</script>



ちなみに、 4300の箇所ですが、ガジェットが現れる位置を指定しています。指定する値は、スクロール幅と関係しているようです。つまり、数字が大きければ、それだけスクロールしないと表示されないことになります。


これは、サイドバーにある空白がどれくらいスクロールすれば現れるかで指定すればいいと思います。Chrome要素の検証機能を使って調べましょう。





次に、CSSを記述します。


#fixed-box{
display: none;
position: fixed;
top: 10px;
z-index: 0;
}

.footer-outer {
position: relative;
z-index: 1;
background-color: #FCFCFC;
}



background-colorは、 #ffffffだとうまく表示できないので、色を付けてみました。限りなく白に近い白を指定しても良かったのですが、フッターにはちょっとだけ色を付けたほうがしっくり来ました。


その他の要素についての解説は、こちらが参考になります。


後は、管理画面から レイアウト > ガジェットを追加 > HTML/JavaScriptを選択して、表示したいコンテンツを表現したタグを以下のタグで囲みます。ちなみに、タイトル入れなくてもいいです。


<div id='fixed-box'>

(コンテンツ)

</div>



自分の場合は、 はてなブログパーツを表示してみました。





<div id='fixed-box'>
<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "http://mba-hack.blogspot.com/";
Hatena.BookmarkWidget.title = "人気エントリー";
Hatena.BookmarkWidget.sort  = "count";
Hatena.BookmarkWidget.width = 250;
Hatena.BookmarkWidget.num   = 10;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();
</script>
</div>



記事の見出しタグを吹き出し形式にする方法


記事中のみで使用する場合は、 .postと指定します。


Sample


上のような感じになります。


.post h2{
position:relative;
margin-bottom:20px;
padding:10px 10px 10px 20px;
background-color:#ECECEC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}

.post h2:before{
content:"";
position:absolute;
width:0px;
height:0px;
top:100%;
left:30px;
border-style:solid;
border-width:20px 20px 0px 3px;
border-color:#ECECEC rgba(192,192,192,0);
}



<h2>Sample</h2>


参照 :

CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる

画面上で固定されるSNSアイコンを設定する方法


stylifyyourblogで紹介されているSmall Buttons Left Alignedを使います。




以下のコードを管理画面の レイアウト > ガジェットを追加 > HTML/JavaScriptより追加します。ちなみに、タイトル入れないでください。






<style type="text/css" >
.vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/*
.socialite-instance { display: none; opacity: 0; }
.socialite-loaded .socialite-button { display: block; opacity: 1; }
.socialite-button iframe { max-width: 100%; max-height: 100%; }
*/

#syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }

#syb-social {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px; display: block; list-style: none;  }
#syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
#syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url('http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png') 0 0 no-repeat; }
#syb-social .socialite-loaded {width: 100px !important; background: none; }

#syb-social .twitter-share { background-position: 0 0; }
#syb-social .googleplus-one { background-position: 0 -45px; }
#syb-social .facebook-like { background-position: 0 -90px; }
#syb-social .linkedin-share { background-position: 0 -135px; }
#syb-social .pinterest-pinit { background-position: 0 -175px; }
</style>
<a href="http://www.stylifyyourblog.com" alt="Blogger Tutorials" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
<ul id="syb-social" class="cf">
<li  >
<a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
<span class="vhidden">Share on Twitter</span></a>

</li>
<li>
<a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium"  rel="nofollow" target="_blank">
<span class="vhidden">Share on Google+</span>
</a>
</li>
<li>
<a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
<span class="vhidden">Share on Facebook</span>
</a>
</li>
<li>
<a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share"  data-counter="right" rel="nofollow" target="_blank">
<span class="vhidden">Share on LinkedIn</span>
</a>
</li>
<li>
<a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
<span class="vhidden">Pin It!</span>
</a>
</li>
</ul>

<script type="text/javascript"  src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>


<script type='text/javascript'>
//<![CDATA[

// add pinterest extension
(function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

var element ;
element = document.getElementById('syb-social');
element.onmouseover = function () {
Socialite.load();
};
//]]>
</script>

http://www.stylifyyourblog.com/2012/08/lazy-loading-floating-share-bar-widget.html


しかし、これをそのまま使うと SafariFirefoxでブログを開いた場合、以下の様な表示が出てきます。





したがって、ハイライトされた記述を削除しましょう。


<script type="text/javascript"  src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>




メニューバーに検索フォームを埋め込む方法


<span class='entypo-search'/> <form action='http://mba-hack.blogspot.jp/search' id='searchthis' method='get' style='display:inline;'><input id='b-query' maxlength='280' name='q' size='15' type='text'/>
</form>


上のタグをメニューバーの <li>タグ中に入れます。ちなみに、 sizeはフォームの長さで maxlengthは、最大入力文字数です。



Webフォントを使ってアイコンを表現する


Google Web Fonts


Google Web Fontsというものがあります。これを使うことで、Bloggerでもカスタムフォントを使えるようになるらしいです。


Bloggerでカスタムフォントを使うには、 こちらの記事が参考になります。


We Love Icon Fonts


We Love Icon Fontsというものがあります。これは、アイコンをフォントのように利用するものです。CSSの記述から使用できるので、非常に便利そうです。


webfont (1)


試してみました。使えるフォントの種類は、8種類あるようです。記述は使用するものだけでOKです。

@import url(http://weloveiconfonts.com/api/?family=brandico|entypo|fontawesome|fontelico|maki|openwebicons|typicons|zocial);

/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}

/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}

/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}

/* fontelico */
[class*="fontelico-"]:before {
font-family: 'fontelico', sans-serif;
}

/* maki */
[class*="maki-"]:before {
font-family: 'maki', sans-serif;
}

/* openwebicons */
[class*="openwebicons-"]:before {
font-family: 'OpenWeb Icons', sans-serif;
}

/* typicons */
[class*="typicons-"]:before {
font-family: 'Typicons', sans-serif;
}

/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}


ここで、例えば、 entypoentypo-homeを使ってみるとします。


webfont


<span class="entypo-home"></span>

<ul>
<li class="entypo-home"></li>
</ul>



次に、ハイライトされている行を検索し、それ以降を追加します。すると、BloggerでもWe Love Icon Fontsのカスタムフォントを使用できるようになります。



<head>

<link href='http://weloveiconfonts.com/api/?family=brandico|entypo|fontawesome|fontelico|maki|openwebicons|typicons|zocial' rel='stylesheet' type='text/css'/>



Icon Fonts


5 Use Cases for Icon Fontsという記事に注目のデモが公開されています。すごいですね。



記事を投稿した時の日付を表示する方法


今回のカスタマイズでこれが一番ハマりました。通常は、以下のタグを使用すると、日付を表示することができます。

<data:post.dateHeader/>



しかし、なぜか表示されないと思ったら、レイアウトのブログの投稿より日付にチェックを入れなければならないのです。








同じ日付でも繰り返し表示する方法


デフォルトでは、上で使用するタグは、同日日付を繰り返し保存しないため、同日日付で投稿した記事には、いくつか日付を表示できないものが存在してしまいます。


これは、レイアウトを考える際に、一括してデザインを処理できない要素になってしまうため、これを回避する方法を紹介します。

<div class='datebox'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
</script>
<span class='date'><script type='text/javascript'>document.write(timestamp);</script></span>
</div>




記事タイトルの下に日付を表示する方法




ハイライトされている行を検索でもしてその後に、日付を表示するタグを入れてください。ちなみに、 ラベルを表示する関連のタグはこの記事とは無関係なので無視してください。


<div class='post-header'>
<div class='post-header-line-1'/>

<!-- ###ラベルを表示する### -->
<div class='label-size'>
<span class='post-labels'>

<!-- ###日付を表示する### -->
<div class='datebox'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
</script>
<span class='date'><script type='text/javascript'>document.write(timestamp);</script></span>
</div>
<!-- ###日付を表示する### -->

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
</b:loop></b:if></span></div>
</div>
<!-- ###ラベルを表示する### -->



span.date {
float: right;
color: #ffffff;
margin: 2px;
padding: 2px 7px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff1f88', endColorstr = '#ff298e');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff1f88', endColorstr = '#ff298e')";
background-image: -moz-linear-gradient(top, #ff1f88, #ff298e);
background-image: -ms-linear-gradient(top, #ff1f88, #ff298e);
background-image: -o-linear-gradient(top, #ff1f88, #ff298e);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ff1f88), to(#ff298e));
background-image: -webkit-linear-gradient(top, #ff1f88, #ff298e);
background-image: linear-gradient(top, #ff1f88, #ff298e);
}


コンテツンを右側に表示するには、 float: right;を使用します。左側に表示したい場合は、デフォルトの設定にもよりますが、ほとんどの場合、この記述を削除することで対応できると思います。

ちなみに、表示形式を変更したい場合は、Bloggerの管理画面より設定 > 言語と形式 > フォーマットから変更可能です。




タイトル下にラベルを表示する方法


タイトル下にラベルを表示するのは、CSSLabel Design #3を使います。





.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}



ハイライトされた行を検索してください。そして、それ以降を追記します。


<div class='post-header'>
<div class='post-header-line-1'/>
<div class='label-size'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
</b:loop></b:if></span></div>
</div>




パンくずリストを作成する方法


パンくずリストを作成し、それを Breadcrumb Designs #3を使って表示します。




.breadcrumbs{zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}
.breadcrumbs:before,.breadcrumbs:after{display:table;content:"";zoom:1}
.breadcrumbs:after{clear:both}
.breadcrumbs a{color:#999}
.breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}
.breadcrumbs > a:after{content:'';position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs > a:before{content:'';position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs a :last-child{color:#333}
.breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}
.breadcrumbs a:hover{text-decoration:none!important}
.breadcrumbs span:hover{color:#666}
.breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}
.breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}
.breadcrumbs span{margin-top:1px;color:#999}


パンくずリストを表示するには、 こちらを参考にしてください。その上で、以下のコードに書き直します。


<b:includable id='breadcrumb' var='posts'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>HOME</a>
<b:if cond='data:blog.homepageUrl == data:blog.url'><!-- breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
<b:else/>
ラベルなし
</b:if>
<span><data:post.title/></span>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><!-- breadcrumb for the static page -->
<data:blog.pageName/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search page -->
<data:blog.pageName/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
全投稿
<b:else/>
<data:blog.pageName/>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>



タイトルの見栄えを変更する方法


私は、以下のようにしています。

.post h2{
  position:relative;
  margin-bottom:20px; 
  padding:10px 10px 10px 20px;
  background-color:#F2F2F2;
}

.post h2:before {
  content:"";
  position:absolute;
  width:0px;
  height:0px;
  top:100%;
  left:30px;
  border-style:solid;
  border-width:20px 20px 0px 3px;
  border-color:#F2F2F2 rgba(192,192,192,0);
}

.post h3 {
font-size:18px;
border: 1px solid #CCC;
background: #EEE;
padding: 10px 20px 10px;
}

.post h4 {
font-size:17px;
border-bottom: 1px solid #CCC;
padding: 10px 20px 10px;
}


シンタックスハイライトを使ってコードを綺麗に表示する方法


SyntaxHighlighterを使うと、コードを綺麗に表示できます。私は、以下のようにカスタマイズしてみました。

/* シンタックスハイライト */
.syntaxhighlighter {
  border: 1px solid #999999; /* 枠のサイズ、形態、色 */
  /* 以下、角丸 */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
  line-height: 1.5em !important; /* 行間調整 */
}

.syntaxhighlighter table td.gutter .line {
padding: 0 6px 0 13px !important;
}

/* タイトル */
.syntaxhighlighter table caption {
  text-align: left !important; /* 文字位置 左揃え */
  padding: 0.5em 0 0.5em 0.5em !important; /* 余白設定 上右下左の順 *
  color: #999999 !important; /* タイトル文字の色 */
  border-bottom: 2px solid #999999 !important; /* 下線のサイズと形態と色 */
  background-color: #F5F5F5 !important; /* 背景の色 */
  /* 以下、角丸 (意味ないかもしれません)*/
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;

/* ツールバーを非表示にする */
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.defaults[&#39;toolbar&#39;] = false;
</script>

HTMLは以下のように書きます。言語とハイライト、タイトルを表示できます。

<pre class="brush: 言語; highlight: [ハイライト]; title: 'タイトル';">ここにコードを書きます。</pre>

引用符をカスタマイズする方法




/* 引用 */
blockquote {
position: relative;
 padding: 20px 50px;
 min-height: 20px;
 background: url(quote_start.gif) no-repeat 10px 10px #eeeeee;
 }

 blockquote:after {
position: absolute;
 bottom: 10px; right: 10px;
content: url(quote_end.gif);
}


HTMLは以下のように書きます。アップロードした画像URLを上のquote_start.gifとquote_end.gifの部分に挿入します。画像は こちらからダウンロードするのがいいでしょう。

<blockquote>ここに引用を書きます</blockquote>


キーワードを強調するボックスを作る方法




span.code {
border:1px solid #DCDCDC;
    color: #000000;
    margin: 2px;
    padding: 2px 7px;
    line-height: 2em;
    background-color:  #F5F5F5;
    border-radius: 3px;        /* CSS3草案 */
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 3px;   /* Firefox用 */
}

span.code2 {
border:1px solid #DCDCDC;
    background-color:  #F5F5F5;
    color: #ff3399;
    margin: 2px;
    padding: 2px 7px;
    line-height: 2em;
    border-radius: 3px;        /* CSS3草案 */
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 3px;   /* Firefox用 */
}

HTMLは以下のように書きます。

<span class="code">ここにキーワードを書きます</span>

<span class="code2">ここにキーワードを書きます</span>


記事末尾にSNSボタンを設置する方法


まず、忍者おまとめボタンのページにて、アカウント登録を終えてください。そして、以下の様な手順を踏みコードを発行します。





そして、管理画面にてテンプレート > HTMLの編集 > 続行 > `ウィジェットのテンプレートを展開`と進みます。



そこで、div class=’post-footer’という文字列を検索し、最初にヒットした<div>タグ内にコードを挿入し、編集を保存します。

<div class='post-footer'> <!--###ここから###--> <div class='ninja_onebutton'> <script src='http://omt.shinobi.jp/xxxxxxxx' type='text/javascript'/> <span class='ninja_onebutton_hidden' style='display:none;'><data:post.url/></span><span class='ninja_onebutton_hidden' style='display:none;'><data:post.title/></span> </div> <!--###ここまで###--> <div class='post-footer-line post-footer-line-1'><span class='post-icons'> 




公式SNSボタンを使う方法


忍者おまとめボタンは遅くなりすぎるので、公式ボタンを使ってみます。例えば、Bloggerの各種記事をブックマークしてもらうには、個別記事のURLを表現するdata:post.urlと個別記事のタイトルを表現するdata:titleを使います。


また、<b:if cond='data:blog.pageType == "item"'></b:if>で囲むことで、トップページに表示しないように出来ます。

<b:if cond='data:blog.pageType == "item"'> <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' class="hatena-bookmark-button" expr:data-hatena-bookmark-title='data:post.title + " : " + data:title' data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /> </a> <b:if cond='data:post.isFirstPost'> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </b:if> </b:if>


以上のタグを上で説明した場所に追記すると、はてなブックマークの公式ボタンを使用できます。



ラベルのスタイルを簡単にカスタマイズする方法


今回は、有志が作成し、公開している Blogger の Widget を用いて、ラベルの表示を簡単にカスタマイズする方法を紹介します。


blogger_widget_labels


まずは、以下のサイトから Widgetを追加します。

widget_labels_add


そして、ラベルのWidgetを追加します。Bloggerの管理画面にて、 レイアウト > ガジェットの追加 を選択し、ラベルを追加します。

labels


なお、ラベルの設定は、以下のようにしてください。

blogger_widget_labels_setting


これで、ラベルのスタイルが変更されます。また、ラベルのスタイルを独自にカスタマイズしたい人には、 こちら に詳しく解説されています。




ブログトップまで移動できるアイコンを表示する方法


今回は、BloggerにTopまで移動するアイコンを表示する方法を紹介していきたいと思います。ほとんどが こちら の記事の引用ですが、変更部分があります。


まずは、Bloggerの管理画面にて、 テンプレート > HTML編集 を選択します。そして、以下を </head> の上に追記します。


<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
});
</script>


そして、 </body> の上に以下を追記します。

<p id="back-top">
<a href="#top"><span></span></a>
</p>



次に、Bloggerの管理画面にて、 レイアウト > アドバンス > CSSの追記 を選択し、以下を追記します。

/* backtotop */
#back-top {
position: fixed;
bottom: 5px;
right: 20px;
margin-right: 85%;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

/* arrow icon (span tag) */
#back-top span {
width: 50px;
height: 50px;
display: block;
margin-bottom: 0px;
background: #eae5e3 url(※用意した画像のURL) no-repeat center center;

/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top a:hover span {
opacity:0.5;
}


なお、画像は、以下のサイトにて ダウンロードしアップロードするといいと思います。


また、上で指定した画像サイズにするために、画像サイズを変更します。以下のコマンドで画像サイズを変換することができます。

brew install imagemagick

convert -resize 50x50 src.png dst.png


これで、Bloggerの画面下の方にTopに戻るアイコンが表示されたと思います。

blogger_top_icon


なお、今回参考にした記事はとても分かりやすく書かれているため、分からない人は、そちらを見てもらうのが一番かと思います。



はてなブログパーツを貼り付ける方法


はてなブログパーツを設定し、コードを取得します。ここで、このコードをそのまま貼り付けるのではなく、一部変更することで、 1usersの記事でも表示することができます。


hatena


主に、変更する箇所は、ハイライトしておきます。


<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "http://mba-hack.blogspot.com/";
Hatena.BookmarkWidget.title = "人気エントリー";
Hatena.BookmarkWidget.sort  = "count";
Hatena.BookmarkWidget.width = 250;
Hatena.BookmarkWidget.num   = 7;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();
</script>



なお、Bloggerを使用する場合は、URLを http://mba-hack.blogspot.jp/ではなく、 http://mba-hack.blogspot.com/のようにする必要があります。



ZenBackを使ってまとめてSNSボタンを表示する方法


ZenBackに登録することで、SNSや関連記事などをブログに表示してくれるコードを取得できます。メールアドレスとパスワードの設定、ブログの登録という手順を踏めば、すぐにでもコードを発行してくれます。簡単で便利です。以下のリンクからアクセスします。

ZenBack





以下のように、 <b:include data='post' name='comments'/> を検索し、その上に取得したコードを貼り付けます。ただし、ハイライトされている文字列を追加してください。

<!-- X:S ZenBackWidget --> <script type='text/javascript'>
// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//mba-hack.blogspot.jp/&nsid=754389589028945890238940803285493&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script> <!-- X:E ZenBackWidget -->

<b:include data='post' name='comments'/>




テーブルのレイアウトをかっこ良くする方法


テーブルは こちらのものを使うと結構カッコイイです。



/* テーブル */
table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
}

.bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}

.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

HTMLは以下のように書きます。長くなるので途中省略します。

<table class="bordered">
    <thead>

    <tr>
        <th>#</th>
        <th>IMDB Top 10 Movies</th>
        <th>Year</th>
    </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>The Shawshank Redemption</td>

        <td>1994</td>
    </tr>
    <tr>
        <td>2</td>
        <td>The Godfather</td>
        <td>1972</td>
    </tr>
    <tr>

        <td>3</td>
        <td>The Godfather: Part II</td>
        <td>1974</td>
    </tr>
</table>


はてなブログパーツをCSSでカスタマイズする方法


はてなブログパーツというものがあります。これを使うことで、はてなブックマークされたリンクをブックマーク数に応じて表示できます。





.hatena-bookmark-widget-body ul {
background-color: transparent !important;
padding: 10px 10px 0px 10px;
}

.hatena-bookmark-widget ul li {
}

.hatena-bookmark-widget-title {
display:none;
}
.hatena-bookmark-widget-footer {
}



参考 : はてブのブログパーツを自分のブログデザインに合わせる方法



人気の投稿に画像がない場合、画像を指定する方法


文章の抜粋は、post.snippet、サムネイルなども「人気の投稿」ウィジェットで書かれている内容と一致します。


ここで、画像がない場合に指定した画像を表示する処理を書いてみたいと思います。

<b:widget id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' src='ここに画像URL'/>
</a>
</div>

</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' src='ここに画像URL'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



参考 :

http://blog2.k05.biz/2012/11/blogger.html


Mobile Templateの場合もこちらを参考にすれば、画像がないときだけ、特定の画像を表示することができると思います。

これである程度のコンテンツもPC版と同じようにCSSが適用されるようになります。





「続きを読む」を記事の下に表示する方法


レイアウトを考える際に、「続きを読む」は結構厄介でした。ボタンにしても文字にしても中途半端な位置にしか表示できず、記事のボディにうまく表示しようとするも、文字が隠れてしまう形になったり、記事ボディから出して、右、左に表示してみましたが、空き領域がどうしても気になってしまいます。また、記事ボディとその下の中間に表示してみても、意図せざるしてそうなった感が半端ありませんでした。よって、記事ボディの下に幅いっぱいに表示してみました。

jump-linkとでも検索し、 <b:if cond='data:post.hasJumpLink'>の部分を <div class='post-footer-line post-footer-line-3'/>の下辺りに持ってきます。


<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><span class='fontawesome-play'/> <data:post.jumpText/> </a>
</div>
</b:if>

そして、CSSは以下のように書きました。

.post-outer {
border: 1px solid #DCDCDC;
-webkit-box-shadow: 0 1px 0 #C1D6EC;
-moz-box-shadow: 0 1px 0  #C1D6EC;
box-shadow: 0 1px 0  #C1D6EC;
margin: 0px 0px 80px 0px;
padding: 20px 20px 0px 20px;
}

.jump-link a {
overflow: hidden;
position:absolute;
margin: 0;
left:0;
right:0;
width:100%;
padding: 10px 0px 10px;
border: 1px solid #CCC;
background: #EEE;
text-decoration: none;
text-align: center;
color: #000!important;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.jump-link a:hover {
border: 0px solid #06c;
background: #06c;
color: #fff!important;
}





記事タイトルの幅をボディいっぱいに表示する方法


まず、 <h3 class='post-title entry-title' itemprop='name'>とでも検索し、その部分を post-outerの上辺りに持ってきます。


<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

</div>
<div class='post-outer'>



そして、CSSは、以下のように書きました。

.post.hentry {
margin: 0;
}

.post-outer {
border: 1px solid #DCDCDC;
-webkit-box-shadow: 0 1px 0 #C1D6EC;
-moz-box-shadow: 0 1px 0  #C1D6EC;
box-shadow: 0 1px 0  #C1D6EC;
margin: 0px 0px 80px 0px;
padding: 20px 20px 0px 20px;
}

.post h3 {
background-color:  #F5F5F5;
border-left:12px solid #ccc;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
padding:.1em .8em
}






記事タイトルにH2を使う方法


見出しタグの数字が小さければ小さいほど重要度が増すようです。したがって、SEO対策になるとかいうことを聞きます。ちなみに、SEO対策というのは、簡単に言うと検索エンジン対策のことです。


以下の様な箇所を見つけて、そこにある h3h2に書き直します。


<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>


<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>






Google Playのアプリをブログで紹介する方法


ChromeApp2HTML for GooglePlayをインストールします。





すると、 Google Playのアプリページの一番下に当該アプリへのHTMLコードが表示されます。




サイトの表示速度を分かりやすく表示する方法


ブックマークレット


【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレットを読んで、このサイトの表示速度を計測してみました。


また、ブックマークレットを使用する以外にも、 Google Analyticsを使用することで、表示速度を計測することができます。この場合、 コンテンツ > サイトの速度を見ます。




このサイトの表示速度


最初に注意ですが、このブックマークレットを使用する場合は、色々なサイトでよく見かける Twitterのブログパーツは外しておいてください。






どうやら標準よりもちょっと遅いのが、このサイトの表示速度のようです。正直、様々なカスタマイズを施し、かつウィジェットを使いまくっているため、激重だろうと考えていたので、ちょっとだけホッとしました。


その他、色々なサイトで表示速度を計測してみましたが、Bloggerのシンプルテンプレートをデフォルト(何もカスタマイズしていない状態)で使っているサイトの表示速度は、 約2秒(標準)でした。


立体感のある線をCSSだけで再現する方法


.border_sh {
    border-bottom: 1px solid #4C678F;
    -webkit-box-shadow: 0 1px 0 #C1D6EC;
    -moz-box-shadow: 0 1px 0 #C1D6EC;
    box-shadow: 0 1px 0 #C1D6EC;
  }


参考 :
CSS3でborderに影をつけるたような効果を与える方法


iPhoneホーム画面とアプリの紹介


iPhoneホーム画面と使用しているアプリを紹介したければ、 appetite.ioがお勧めです。ホーム画面をスクリーンショットで撮影し、それをサイトにアップロードするだけで、個別ページが出来上がります。




カッコイイ影付き画像を作成する


もしかっこいい影を画像に貼り付けたい場合は、当該サイトから以下の部分をドラッグ&ドロップします。そして、画像を保存し、貼り付けたい画像に合成させれば、カッコイイ影がついたiPhone、その他のスマホ画像の出来上がりです。




ブログのサイドバーに貼り付ける


ホーム画面をアップロードしてできたページをスクリーンショットで撮影し、撮影した画像をリンク付きでサイドバーに貼り付けます。Bloggerの場合は、 管理画面 > レイアウト > ガジェットを追加 から HTML / JavaScriptの設定を選択します。

<img src="ここに画像URL" />
<font size="1"><br /><p  align="right"><a href='ここに作成されたURL' >appetite.io</a></p></font>






目次まで移動する矢印アイコンを取り付ける方法


ブログに目次をつけるには、以下のように書きます。これは、主に目印のようなものです。

<a name="mokuji"></a>


これで、以下の様なタグを使うと、目次までジャンプできます。

<a href="#mokuji"></a>



なお、ここで使用している mokujiという文字列はなんでも構いません。



目次までジャンプする矢印アイコン




画面右下 :

(あまりはっきりしませんが、目次がある場合は、クリックするとジャンプしてくれます)


#back-top2 {
position: fixed;
bottom: 20px;
right: 1px;
}

/* arrow icon (span tag) */
#back-top2 span {
width: 60px;
height: 30px;
border: 1px solid #ccc;
display: block;
background: #333333 url(ここに画像URL) no-repeat center center;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top2 a:hover span {
opacity:0.5;
}



そして、 </body>のあたりに、以下のタグを挿入します。


<p id='back-top2'>
<a href='#mokuji'><span/></a>
</p>



なお、モバイルには表示させたくないので、以下のように書きます。


<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0' name='viewport'/>
<style>

#back-top2 {display:none !important;}

</style>
</b:if>



または、


.mobile #back-top2 {display:none;}




人気の投稿ガジェットを均等に表示する方法


Bloggerでは、人気の投稿というガジェットが用意されており、それを追加することで、サイドバーなどに、アクセス数に応じて、サムネイル付きで記事を表示できます。


しかし、各記事の文字数などの関係で表示が均等にならないため、見栄えがあまり良くありません。よって、今回は、これを解決する方法を紹介します。





#PopularPosts1 .item-content{
height:79px;
overflow:hidden;
}






参考 :

Bloggerの人気の投稿ガジェットで記事をきれいに並べる方法


スクロールしても動かない上メニューバーを設置する方法






タイトル上にメニューバーを付けました。これは、以前紹介したブログの下に付けていたメニューバーのCSSを改良し、再利用しました。


<div class='content-outer'>
<div class='stickey_sns'>
<div id='stickey_footer'>

<ul id='footer_menu'>
<li>ここにメニューを記述</li>
</ul>
<ul id='social_icons'>
ここに検索フォームを記述
</ul>
</div></div>

<div class='content-cap-top cap-top'>



#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #F2F2F2;
/* border: 1px solid rgba(0, 0, 0, 0.3);*/
top: 1;
/* font-family: Arial, Helvetica, sans-serif;*/
height: 44px;
left: 50%;
margin: 0 auto 0 -510px;
padding: 0 10px;
position: absolute;
width: 1000px;
z-index: 999;
}

/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #F2F2F2;
}

#footer_menu {
margin: 0;
padding: 0;
width: auto;
}

#footer_menu li {
overflow:hidden;
background:#F2F2F2;
list-style: none;
float: left;
font-size:26px;
padding: 6px 0 0 30px;
/* border-right:1px solid rgba(0, 0, 0, 0.4);*/
/* background: rgba(0, 0, 0, 0.3);*/
}

#footer_menu li:hover {
background:#F2F2F2; /* Fallback color for old browsers */
/* background: rgba(0, 0, 0, 0.3);*/
}

#footer_menu li a {
display: block;
color: #000000;
text-decoration: none;
}

#footer_menu li a:hover {
color: #0066FF;
text-shadow:0 0 1px #ffffff;
}

#footer_menu li span {
/*
display:none;
*/
}

#stickey_footer #social_icons {
float:right; /* social icons positions */
margin: 0;
padding: 0;
width:auto;
overflow:hidden;
}

#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:auto;
padding: 12px 14px 14px 14px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
}

.stickey_sns {
border: 1px solid rgba(0, 0, 0, 0.3);
background: none repeat scroll 0 0 #F2F2F2;
/* border: 1px solid rgba(0, 0, 0, 0.3);*/
top: 0;
height: 46px;
left:0;
position: fixed;
width: 100%;
z-index: 310;
}



ポイントは、新しい親要素を作り、そこで position: fixed;を指定することと、コピーしてきたものを position: absolute;に書き換えることです。


ちなみに、モバイルには表示しないので、以下の様な感じで。

.stickey_sns {display:none;}
#stickey_footer {display:none;}



CSS Sticky Footer For Blogger


最下部への移動アイコンの設置






移動先は、適当にidを指定。

<div id='back-top'>
<a href='#top'><span class='entypo-up-open-big'/></a>
</div>
<div id='back-top2'>
<a href='#footer-2-2'><span class='entypo-down-open-big'/></a>
</div>

</body>



/* backtotop */
#back-top {
position: fixed;
top: 2px;
right: 2px;
background: #1F1F1F;
z-index: 1200;
font-size:15px;
height: 20px;
width: 25px;
margin: 5px;
padding: 5px;
text-align: center;
}

#back-top a {
display: block;
color: #ffffff;
text-decoration: none;
}

#back-top a:hover {
text-shadow:0 0 3px #FF0066;
color: #FF0066;
}

#back-top2 {
position: fixed;
top: 2px;
left: 2px;
background: #1F1F1F;
z-index: 1200;
font-size:15px;
height: 20px;
width: 25px;
margin: 5px;
padding: 5px;
text-align: center;
}

#back-top2 a {
display: block;
color: #ffffff;



ポイントとしては、 text-shadow:0 0 3px #FF0066; の部分です。 text-shadow:0 0 3px #FF0066 inset;などとすると、内側に影をつけることができます。指定できる値は以下のようになっています。


text-shadow:'横にずらす値' '下にずらす値' 'ぼかし値' '色の指定';



また、 text-shadowの部分は、 box-shadowとすることもできます。


RSSアイコンの設置





Webフォントを使いました。ただし、Feedlyのアイコンは見つかりませんでしたので、公式画像を使用。

<li><a href='http://mba-hack.blogspot.jp/feeds/posts/default' target='blank'><span class='fontawesome-rss'/></a></li>

<li><a href='' target='blank'><span class='fontawesome-fire'/></a></li>

<li><a href='' target='blank'><img alt='follow us in feedly' height='28' id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-logo-black_2x.png' width='28'/></a></li>



http://www.feedly.com/factory.html


検索フォームのCSSをカスタマイズする







検索フォームは、以下の記事からコードを取ってきて改良。このサイトは、今回のブログデザインにとても参考になりました。

[How-To] Make a search box with Pure CSS for blogger! | Symmetrycode


<ul id='social_icons'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<!-- Search box for blogger by Namanyay Goel //-->
<input id='namanyay-search-box' name='q' placeholder='' size='40' type='text'/>
</form><span class='entypo-search'/>
</ul>



#namanyay-search-btn {
background:#0099ff;
color:white;
font: 'trebuchet ms', trebuchet;
padding:10px 5px;
border:0 none;
font-weight:bold;
}

#namanyay-search-box {
border:1 #2f2f2f;
padding:5px;
margin:10px;
width:200px;
}

#namanyay-search-box:hover {
box-shadow:0 0 3px #0066FF inset;
}



ブログのタイトル画面で画像を左に置き換える





ブログのタイトルを変更しました。具体的には、画像を左に置きました。意外と厄介なので、HTMLで書きました。おすすめはしません...。


<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<div class='float'><a href='ここのサイトURLを記述'><img src='ここに画像URLを記述'/></a></div>
<a href='http://mba-hack.blogspot.jp/'><b:include name='title'/></a></h1>
</div>
<b:include name='description'/>
</div>



ポイントは、 floatです。画像の回りこみの設定をします。


個別記事でのページナビを復活させる方法



削除していたページナビを戻しました。

<!-- navigation -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

<!-- feed links -->


Feedlyの登録用アイコンを設置する方法






http://www.feedly.com/factory.htmlにアクセスし、サイトのフィールドURLを入力します。(なお、ボタンも好きなのを選択出来ます)





あとは、コードをサイドバーなどに貼り付けるだけです。





LinkWithinを使って関連記事を表示する方法


記事下に関連記事を表示したければ、LinkWithinというものを使います。Bloggerには、以下の方法で追加します。まずは、必要な情報の入力です。





コードが発行されますので、承認します。


トップページに表示したくない場合は、以下のコードを追加します。

<b:widget id='HTML7' locked='false' title='linkwithin' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:content/>
</b:if>
</b:includable>
</b:widget>



タイトルを変更するには、以下のようにします。

<script>
var linkwithin_site_id=あなたのID;
var linkwithin_text='関連記事';
</script>



CSSを追加することで、ある程度の表示をカスタマイズ出来ます。

/*記事のタイトル部分の色や大きさを設定*/
.linkwithin_title_0{
margin-top:-5px!important;
padding:10px 0;
background:#202020;
color:#ffffff!important;
}

/*コンテンツの高さを設定*/
.linkwithin_posts{
height:130px!important;
overflow:hidden;
}

/*全体の幅をいっぱいに表示*/
.linkwithin_inner{
width:100% !important;
}

/*コンテンツのリンク部分に隙間を設定*/
.linkwithin_posts a{
padding: 13px !important;
}



参考 :

Blogger にオススメ記事を表示するLinkWithinを導入して、さらにレイアウトまでもカスタマイズする。 | ふりむけばコウホウ


LinkWithinのちょっとした裏技 【カスタマイズ】 | 某氏の猫空


Twitter ブログパーツを表示する方法


Twitterブログパーツ公式から設定します。いつの間にか新しくなっていました。





そして、できたコードを以下のタグの下あたりに貼り付けます。

<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>



ちなみに、私は、 iPhoneの標準ブラウザである Safariに表示させてみたところ、 高さ:400に設定するとスッポリと1画面内に収まる寸法でした。





PC用のテンプレートをそのまま適用する方法



Bloggerのテンプレートをモバイル端末対応にしてデザインの自由度を格段にアップさせる方法


上の記事で紹介されている方法を使います。追加は以下のとおりです。

#menu {display:none;}


後は、プロファイルなどを非表示にします。

<b:widget id='Profile1' locked='false' mobile='no' title='PROFILE' type='Profile'>



ここで、widgetが出てきましたね。Bloggerのカスタマイズには、結構な頻度で出てきますので、こちらを参考にしてください。widget(レイアウト)の要素についてですが、こちらが参考になります。


つまり、mobile='no'と記述することで、モバイルでは非表示にすることができます。


スワイプ無効にする方法



Bloggerでモバイル閲覧時のスワイプによるページ切り替えを無効にする


上の記事でほとんど書かかれている通りです。 </body>の上に以下を追記します。

<!-- No Swipe Mobile -->
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
(function() {
var c = document.getElementById("main");
c.addEventListener = null;
})()
</script>
<style>
#spinner-canvas {display: none !important;}
#left-arrow {display: none !important;}
#right-arrow {display: none !important;}
</style>
</b:if>
<!-- /END -->



CSSによる微調整


表示がいまいちな部分があったので、CSSによる微調整を行います。 .mobileを設定すればいいようですが、今回は、HTMLを新たに書き換えました。

.post-body1 {
font-size: 110%;
line-height: 1.4;
position: relative;
}

.blog-pager1 {
padding: 50px;
background-color: #F5F5F5;
border:1px solid #DCDCDC;
}



タイトルと本文の隙間を埋める



<div class='mobile-post-outer'>
.
.
.
<div class='post-body'>


<div class='mobile-post-outer'>
.
.
.
<div class='post-body1'>



ちなみに、PC版は以下の様な感じで設定されています。タイトル下にラベルを表示したら、隙間がなくなってしまったため結構広めに余白をとっています。

.post-body {
margin: 50px 0px 0px 0px;
font-size: 110%;
line-height: 1.4;
position: relative;
}



ページャーの領域を広くする


<b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>



<b:includable id='mobile-nextprev'>
<div class='blog-pager1' id='blog-pager1'>



サムネイル画像を置き換える方法


画像を非表示にしてもいいのですが、置き換えてみました。

<b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title' itemprop='name'><data:post.title/></h3>
<div class='mobile-index-arrow'>&amp;rsaquo;</div>
<div class='mobile-index-contents'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img src='ここに画像URL'/>
</div>
</div>
<div class='post-body1'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>


このブログは画像をあんまり使わないので、画像がない記事は必然的に画像なしになってしまいます。


それでは、統一感がなくなってしまいますので、特定の画像を表示することにしました。もちろん条件処理を書いてもいいのですが、サムネイルに指定される画像には気に入らないものも多いので...。


ページャーの文字位置が適切でない問題を解消する方法


ページャーの文字位置が適切ではない問題に対応します。デフォルトでは、文字位置は、左なのですが、ページャーの場合、これがどちらも左だとアイコンが左右対称にならないわけです。



.mobile-link-button {
background-color: $(link.color);
text-align: center;
}



ホームボタンを非表示にする方法


前回のカスタマイズ後に表示がおかしくなったので、以下のように修正しました。







<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><span class='entypo-home'/></a>
</div>

<div class='mobile-desktop-link'>

<!--###"PC版"を表示しない
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
###-->
</div>



具体的には、 blog-pager-home-linkblog-pager-newer-linkに書き換えた後、ページャー下に表示されるPC版を表示するリンクをコメント化しました。


ブックマークに登録する際にアイコンを表示する方法


iPhoneで言う「ホーム画面に追加」される時に、アイコンを使用します。ちなみに、EffektはNoにしています。





<link href='ここに画像URL' rel='apple-touch-icon-precomposed'/>



タイトル上に日付を表示する方法


タイトル上に表示される日付のスタイルを変更してみます。ちなみに、前回紹介した We Love Icon Fontsを使います。





<b:includable id='mobile-post' var='post'>の箇所を検索して、その下あたりにあるタグを書き換えます。


<h2 class='date-header'><span><data:post.dateHeader/></span></h2>



<h2 class='date-header'><span><span class='fontawesome-bookmark-empty'/>  <data:post.dateHeader/></span></h2>



.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
background-color: #FF0066;
}



パンくずリストがボックスからはみ出した場合に非表示にする方法



CSSでカスタマイズしたパンくずリストを、ボックスからはみ出した場合には表示しないようにしました。






と言っても、単にoverflow:hidden;を追加するだけです。


.breadcrumbs {
overflow:hidden;
zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0;
}




サイトマップのボタンを設置する方法


まず、前提としてサイトマップのページを作成します。これは、 過去記事で紹介したと思うので、今回は解説しません。


そして、私の場合は、以下のようにページャーに表示してみました。ちなみに、 We Love Icon Fontsを使用しています。 <b:includable id='mobile-nextprev'>を検索してその下あたり、具体的には、 home-linkのしたあたりに以下を追記します。


<!--###Older Mobile Menu###-->
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='home-link' expr:href='&quot;ここにサイトマップのURL&quot;'><span class='entypo-menu'/></a>
</div>



私の場合、モバイル版サイトマップは、 http://mba-hack.blogspot.jp/p/sitemap.html?m=1ですので、これを指定箇所に挿入します。





解説としては、 expr:を付けた属性の中で、任意の文字列リテラルを利用したい場合は、quot;で囲ってやることが必要になります。


そして、CSSにid:blog-pager-older-linkを指定しているためサイトマップアイコンは、"古い投稿へ"の左側に表示されます。


ちなみに、CSSでは、 idはページ中に一度しか登場しないというものらしいので、使い方は違っているかもしれません。


コメントフォームに「Disqus Wigdet」を使用する方法


Disqus Wigdetをモバイルで有効にします。




まず、 Disqusで検索し、以下の様なタグを見つけます。


<b:widget id='HTML1' locked='false' title='Disqus for XXXXX' type='HTML'>



そして、それに mobile='yes'を追加します。


<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus for XXXXX' type='HTML'>


「ウェブバージョンを表示する」をアイコンにする方法


レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由を読んで、非表示にしていた「ウェブバージョンを表示する」を復活させてみました。前から外すのはあまり良くないなと思っていたわけですが、色々カスタマイズしているうちにここら辺のレイアウトが崩れてしまったので、非表示にしていました。


ということで、面倒なのですが、やってみました。 mobile-desktop-linkとでも検索し、その辺りをカスタマイズします。新たに、 mobile-footermobile-buttonを作ることにしました。


<div class='mobile-desktop-link'>
<!--###"PC版を表示する"を消す
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
###-->
</div>
</div>

<div class='mobile-footer'>
<div class='mobile-button'><a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a></div>
</div>


CSSは以下のように書きました。

.mobile-footer {
margin:0 auto;width:100%;overflow:hidden;
}

.mobile-button a {
background: #06c;
border: 1px solid #CCC;
text-align: center;
color: #ffffff;

}
.mobile-button a:hover {
background: #ccc;
color: #fff!important;
}


ちなみに、 margin:0 auto;width:100%;overflow:hidden;とすることで、モバイルサイト閲覧時にバウンドしなくなります。





ターミナル画面からBloggerへ投稿する方法


GoogleCLを使って端末からBloggerにポストする


GoogleCLを使うとBloggerに投稿することができます。

sudo port install googlecl markdown

以下のシェルスクリプトを使うと Markdownでも書けます。自動の改行タグ挿入が少し厄介だったので、それにも対応しています。

#!/bin/zsh
## 使い方:
## $ blogger <file>
## 1行目がタイトル, 2行目がタグ
TITLE="$(awk 'NR==1' $1)"
TAG="$(awk 'NR==2' $1)"

case $1 in

    # ファイルの拡張子がMarkdownの場合
    *.md)

        ## 1-2行を削除
        sed -ie 1,2d $1

        ## 行末に改行タグ
        sed -ie 's/$/<br\/>/g' $1
        ## 空行に改行タグ
        sed -ie 's/^$/<br\/>/g' $1

        ## MarkdownをHTMLに変換する
        markdown $1 > $1.html

        ## 改行を削除
        tr -d '\n' < $1.html > $.tmp && mv $.tmp $1.html

        ## bloggerに投稿
        google blogger post --blog "MBA-HACK" --title "${TITLE}" --tags "${TAG}" $1.html


        ## 投稿した内容を表示する
        cat $1.html
        # w3m $1

        ## ブラウザで開く
        open -a Google\ Chrome "http://mba-hack.blogspot.jp/"
        ;;


    # ファイルの拡張子がHTMLかそれ以外の場合
    *)

        ## 1-2行を削除
        sed -ie 1,2d $1

        ## 行末に改行タグ
        sed -ie 's/$/<br\/>/g' $1
        ## 空行に改行タグ
        sed -ie 's/^$/<br\/>/g' $1
        ## 改行を削除
        tr -d '\n' < $1 > $.tmp && mv $.tmp $1

        ## bloggerに投稿
        google blogger post --blog "MBA-HACK" --title "${TITLE}" --tags "${TAG}" $1


        ## 投稿した内容を表示する
        cat $1
        # w3m $1

        ## ブラウザで開く
        open -a Google\ Chrome "http://mba-hack.blogspot.jp/"
        ;;
esac

MBA-HACKhttp://mba-hack.blogspot.jp/の箇所は、自分のブログのものに変更しましょう。ちなみに、シェルスクリプト作成は以下のようにします。

echo $PATH

cd /usr/local/bin/

vim blogger

chmod +x blogger

exec $SHELL

画像をPicasaに一括アップロードする


GoogleCLを使うと画像をアップロードできます。

mkdir -p ~/photos/cats/

google picasa create "Cat Photos" ~/photos/cats/*.jpg

特定のフォルダを作っておいて、簡単にアップロードするにはエイリアスを作っておきましょう。

echo "alias picasa='google picasa create 'Cat Photos' ~/photos/cats/*.jpg'" >> ~/.zshrc && source ~/.zshrc

Skitchを使ってスクリーンショットを撮る


Skitchには便利なショートカットがあります。これで画像を保存できます。

Cmd+ eを押しましょう。



画像投稿前にEXIF情報を削除する方法


画像をアップロードする前には、EXIF情報を削除することをおすすめします。EXIF情報とは、一般的に画像に含まれる様々な情報のことで、GPS位置情報も含まれます。
TIFF形式で画像についての情報や撮影日時などの付加情報を記録できるほか、縮小画像(サムネイル)を記録することができる。


http://e-words.jp/w/Exif.html


このため、画像をアップロードする前には削除するのが決まりの手順ということになります。ここで、EXIF情報を一括削除する方法を紹介します。exiftoolというものを使います。



brew install exiftool



フォルダ内にある画像のEXIF情報を一括削除するには、以下のコマンドを実行します。



exiftool -overwrite_original -all= ディレクトリ名



ここで、例えば、アップロードする前にこの作業を自動化するには、エイリアスやシェルスクリプトを作成しておくと便利です。


Vimによる執筆環境を整える方法


neocomplcacheでスニペットを自作する方法


今回は、 neocomplcache でスニペットを自作する方法を紹介します。スニペットとは、補完関数のようなもので、ブログの更新にも便利です。

まずは、必要なプラグインをインストールします。


Bundle 'Shougo/neocomplcache-snippets-complete'



そして、 :NeoComplCacheEditSnippets というコマンドを実行します。すると、スニペットを編集できます。


スニペットの書き方は、以下のようになります。


snippet code
abbr <pre class="brush: html;">
prev_word
<pre class="brush: shell; highlight: [0]; title: '${1}';"></pre>


neocomplcache_snippets


まず、 snippet で補完に必要なキーワードを指定します。そして、 abbr で表示される文字を指定します。 prev_word 以下に展開される内容を指定します。なお、 ${1,2,3} を入れることで、展開後の移動先を指定します。

また、設定ファイルに以下の様な内容を書いておくと、更に便利にスニペット補完が使えます。


" ユーザー定義スニペット保存ディレクトリ
let g:neocomplcache_snippets_dir = $HOME.'/.vim/snippets'

" スニペット
imap <silent>LK <Plug>(neocomplcache_snippets_expand)
smap <silent>LK <Plug>(neocomplcache_snippets_expand)

" :NeoComplCacheEditSnippets
noremap es :<C-u>NeoComplCacheEditSnippets<CR>



これで、指定したキーワードを入力し、 LK を押すと、指定した文字列が展開されます。


neocomplcache_snippets



HTMLの特殊文字を変換する方法


HTMLは、特定の文字列をそのまま表示することはできません。よって、そのような文字列を表示するには、ちゃんと表示出来るように変換する必要があります。以下の方法で簡単に変換できます。

mkdir -p ~/.vim/plugin

curl http://www.serendip.ws/resource/str2htmlentity.vim > ~/.vim/plugin/str2htmlentity.vim


そして、以下の内容を 設定ファイル に追記します。


vmap <silent> sx :Str2HtmlEntity<cr>
vmap <silent> sr :Entity2HtmlString<cr>



これで、変換したい文字列をビジュアルモードで選択し、 sx を押すHTMLで表示できる形で文字列が変換されます。

str2html



Blogger.vimでBloggerへ投稿、編集する


最初に、 Blogger.vim という`Vim Plugin`を紹介したと思いますが、Markdownは軽量言語にすぎません。よって、細かいところは表現できず、単に基本を素早く表現できるようにするためだけのものです。したがって、表現には限界があります。しかし、Blogger.vim を使ってMarkdown記法で書いたものを投稿した場合、その書式に従っていたとしても、形が崩れてしまうことがあります。

例えば、Markdownでは、<div>要素で囲い、前後を空行で埋めると、その要素の中では、HTMLがそのまま表現されます。しかし、私の場合、これを用いても回避できないエラーが`Blogger.vim`に出て投稿できないことがあります。

よって、そのような場合は、GoogleCLを使用して、BloggerにPostしましょう。

google blogger post --blog "MBA-HACK" --title "test" --user "xxx@gmail.com"  --tags "blogger" test.txt


なお、1行目はタイトルになるようですが、オプションを付けて指定しておかないと、2回繰り返されるようです。




Sublime Text2による執筆環境を整える方法


Sublime Package Control


C-`を押すとコンソール画面が表示されます。以下のコードを貼り付けて、 Enterを押してください。

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'


そして、 Cmd+ Shift+ pを押して、 installと入力します。ここで、 Enterを押すと、パッケージを検索し、インストールすることができます。



ちなみに、以下のようにショートカットキーを設定すると、installというテキストが自動入力されます。キーは、 Cmd+ Alt+ pです。


[
{ "keys": ["super+alt+p"], "command": "show_overlay", "args": { "overlay": "command_palette", "text": "install"}}
]


Markdown Preview


Markdownで書いたものをプレビューしたい場合は、ここで紹介するパッケージを導入します。まずは、パッケージインストーラーの検索で、markdown previewと検索し、 Enterを押します。以下の設定を書いておくと、 Alt+ mを押すことで、プレビューできます。

[{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser"} }]




Brewser Refresh


Brewser Refreshを導入することで、ショートカットキーを使ってブラウザを更新出来ます。

[
    {
        "keys": ["command+shift+r"], "command": "browser_refresh", "args": {
            "auto_save": true,
            "delay": 0.5,
            "activate_browser": true,
            "browser_name" : "Google Chrome"
        }
    }
]


Bloggerで使用する画像をPicasaで管理する方法


私がブログに Blogger を使用する理由の一つに、画像のアップロードのしやすさが挙げられます。GoogleCLをインストールしている状態で、例えば、 ~/Pictures/picasa/にスクリーンショットなどを .png形式で保存するようにしておきます。


# Picasaに「picasa」というアルバムを作る
google picasa create "picasa"

# Picasaの「picasa」アルバムに画像をアップロード
google picasa post -n "picasa" ~/Pictures/picasa/*.png

# Picasaにアップロードした画像のURLをすべて保存する
google picasa list "picasa" --delimiter " " --fields url-direct > ~/Pictures/picasa/test.html

# アップロードした画像のURLを表示する
ls ~/Pictures/picasa/*.png | wc -l | tr -d ' ' | xargs -J % tail  -n % ~/Pictures/picasa/test.html



これらのコマンドをまとめて、エイリアスにでも設定しておくと、使いやすいです。

alias picasa='touch ~/Pictures/picasa/test.html && rm ~/Pictures/picasa/test.html && exiftool -overwrite_original -all= ~/Pictures/picasa && google picasa post -n "picasa" ~/Pictures/picasa/*.png && google picasa list "picasa" --delimiter " " --fields url-direct > ~/Pictures/picasa/test.html && ls ~/Pictures/picasa/*.png | wc -l | tr -d " " | xargs -J % tail  -n % ~/Pictures/picasa/test.html | pbcopy && rm ~/Pictures/picasa/*.png'



これで、picasaコマンドを使うと,画像のアップロードと同時に、クリップボードにアップロードした画像URLが保存されます。 YankRing.vimなどを使って参照してください。


これでも面倒くさければ、取得したURLにHTMLタグを付けても良いかと思います。また、ブラウザに渡して確認してもよいでしょう。以下、参考までにコマンド例を載せておきます。


# HTMLコードに変換してクリップボードに保存し、出力する
cat ~/Pictures/picasa/test.html | sed -e 's/^/<img src="/g' | sed -e 's/$/">/g' | pbcopy && pbpaste

# クリップボードから参照する場合
pbpaste | sed -e 's/^/<img src="/g' | sed -e 's/$/">/g' | pbcopy && pbpaste

# クリップボードにURLが入っている場合、そのURLをGoogleChromeで開く
pbpaste | tr '\n' ' ' | xargs -J % open -a Google\ Chrome %