【Blogger】Gistにコードを上げてシンタックス表示させてみた

シンタックスがうまく効かないよー

と嘆いていたら、知り合いのSEの方に、『gistにコード貼って、ブログに貼り付けるといいかも』って教えていただいたので、早速やってみた。
流行りには載ってみようｗｗ

元コードはこちら

やり方

1. Gist にアクセスする。すると、こんなページが表示される。

2. Gist description に、適当な説明を入れる。
name this file には、ファイル名を。(多分、ダウンロードするときのファイル名とかになると思われる)
Languageは、表示させるコードを選択。今回はHTMLにしてみました。
で、コードをベタッと貼り付けてpublic で保存するとこんな感じに。

3.最後に『show embed』というリンクを押して、読み込み用のscriptタグをコピーしたらブログに貼り付け。こんな感じ↓



案外簡単だった！！
これならわざわざタグ変換しなくても済むから、今度からこっちにしよう

【Blogger】ソーシャルボタンを配置してみた

Bloggerのデフォルトで表示されるSNSのボタンがイケてないなぁと感じていたので、
なんとかならんかなぁと調べて変えてみた。

参考サイト

Blogger にソーシャルボタンを設置する際に参考になったページとノウハウ
Blogger に Twitter & Hatena & Google+1 & Facebook のボタンを設置する
Bloggerへ各種ソーシャルボタンを各記事ごとに設置する方法

ホントはタイトルの下に配置したかったんだけど、
どこに配置すればよいのかわからなかったので、
とりあえず、コメント投稿のところに配置してみた。

<!-- Twitter & Hatena & Google+1 & Facebook -->
<div style='margin: 4px 0px 0px 0px;'>
<table><tr>
<td style='vertical-align:top;'>
<a class='twitter-share-button' data-lang='ja' data-via='自分のアカウント' href='https://twitter.com/share'>ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</td>
<td style='vertical-align:top;'>
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:data-hatena-bookmark-title='data:post.title + &quot; : &quot; + data:title' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;'/></a>
<b:if cond='data:post.isFirstPost'>
<script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</b:if>
</td>
<td style='vertical-align:top;'>
<script src='http://static.evernote.com/noteit.js' type='text/javascript'/><a expr:onclick='&quot;Evernote.doClip({providerName:\&quot;&quot; + data:title + &quot;\&quot;, title:\&quot;&quot; + data:post.title + &quot;\&quot;, url:\&quot;&quot; + data:post.url + &quot;\&quot;}); return false;&quot;' href='#'><img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/></a>
</td>
<td style='vertical-align:top;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</td>
</tr>
</table>
</div>

案外簡単でしたー。

【Blogger】beautyOfCodeを導入してみた

やっぱりシンタックスハイライトは入れときたいよなーということで、
前回に引き続き Blogger カスタマイズ Tipsまとめ を参考にさせていただきました。

1.beautyOfCode.jsを読み込むようにテンプレートにコードを挿入
headタグの中にコードを入れましょう。
私の場合はheadタグの一番最後に記述しました。
jqueryを読み込むのを忘れずに(ちょっとハマったｗｗ)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript">
<!-- jQuery / beautyOfCode-->
<script src='http://android-beryl.googlecode.com/hg/api/resources/jquery.beautyOfCode.js?r=b338c627a7179b4d9cb0258f7a719cc3917bf5a4'/>
<script type='text/javascript'>
//<![CDATA[
  <!--
  $.beautyOfCode.init({
  brushes: ['Xml', 'JScript', 'CSharp', 'Plain', 'Php', 'Ruby', 'Java'],
  theme: 'Eclipse',
  ready: function() {
  $.beautyOfCode.beautifyAll();
  $("#someCode").beautifyCode('javascript', {gutter:false});
  }
  });
  //-->
//]]>
</script>

2.ブログで使う場合

こんな感じで使うらしい。

codeタグの中に、XML/HTMLタグを書く場合は、変換ツールを使って記述しないといけないことに注意！

HTMLタグ変換ツール

<pre class="code">

  <code class="JScript">

   // ここにコードを書く

  </code>

</pre>

これで完了。

が、私のブログだとシンタックスが効かないのはどうしてだろう。。

原因は別にありそうなので、もうちょっと調べることにしよう。。。

【Blogger】テンプレートHTMLを編集してみた

いろいろBloggerのテンプレートを編集したいのだが、
どこをどー触っていいのか、よくわからなかったので、
基本的なところからまずやってみよー


ということで
ichi tasoさんの Blogger カスタマイズ Tipsまとめ 参考にさせていただきました。
(というか、ほぼそのままやってみたｗ)


このブログでやってみたのは、


Blogger テンプレート HTMLを編集

1. テンプレートに使用言語を指定する
2. ブログタイトルをクリックでトップページへLinkさせる
3. Titleタグのブログ名と記事名の記述を変更する
4. 記事内のタイトルにパーマリンク（Permalink）を付ける
5. BloggerのNavバー（ナビゲーションバー）を非表示にする
6. ガジェットのタイトルを「h2」から「p」タグへ変更する

の6つ(Blogger カスタマイズ Tipsまとめ とは番号が違いますのであしからず。。)

ざっとHTMLで触ってみた所感としては、

mobile版も一緒に書いてあるので、よくわからん感じになってたのかーということがわかった。

ただ、HTMLタグがどう記述しているか、なんとなくわかったので、

次はSNSボタンの配置をしてみようと思う。