Bloggerを始めてからここ数日で弄ったこと : wararyoが何かしてるよ的な

去年から一応開設はしていたこのブログ、
ついこの間からようやく本格的に始めようと考え、
3日間ほど結構Bloggerいじってました。

その弄ったものをちょっとまとめてみたいと思います。

ヘッダー画像変更

とりあえずはここからですよね、ブログの顔なんで。
とりあえずPhotoshopで新HPように作ってた画像をちょっと加工して、ヘッダー画像を作りました。
んで、ヘッダー画像を設定するわけですけど…
Blogger自体にヘッダーに画像を設定する機能があるのを知らなかったorz
知らなかったならどうしてたかというと、
わざわざテンプレートデザイナーからCSSを直接弄って、
background-imageに画像を設定、タイトルの文字を消してました。

自分と同じように、ヘッダーに画像を設定する方法を知らない人が一人くらいいると信じて…！
ここに方法を書いておきます。（普通の人にとってはもはや当たり前かと思いますが）

ダッシュボード > レイアウト > ヘッダー部分の右下にある「編集」

からイメージを変更することができます。
ま、まさか、「レイアウト」だったなんて！！！
自分はてっきりテンプレートマネージャーに設定項目があると信じてたので、
こんなところ見なかったのですよ(´・ω・`)

その他デザインの変更

ここはどうでもいいので急ぎ足で紹介します。
1.ブログ記事の周りに影を追加
2.投稿のタイトルに影を追加、既読のリンクの文字色変更
3.<h4>にスタイルを設定（ブログ記事内の見出し）
4.投稿のフッターに角丸を設定
5.ページ全体（背景を除く白い部分）の右下左下に角丸
6.フッターの背景色などを変更

正直そこまでいじってません。

記事ページのタイトルなどのカスタマイズ

Bloggerでは、それぞれの記事の個別ページにアクセスすると、
titleが”ブログ名:記事のタイトル”となるようです。
コレを、以下の記事を参考にさせていただいて、”記事のタイトル : ブログ名”
となるようにしました。

クリボウの Blogger Tips: Blogger ブログのページタイトルを「投稿タイトル | ブログタイトル」の順にする方法 - http://www.kuribo.info/2012/02/blogger_19.html

要するに、テンプレート > HTMLの編集から、

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

を、

　
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
  <b:else/>
    <title><data:blog.pageTitle/></title>
  </b:if>
</b:if>

に、するだけですね。

ついでに、ヘッダーにあるサブタイトルも、個別記事ページにまで表示されるとくどいので、
トップでは表示して、個別記事ページでは表示しないようにします。

同じように、

　
<p class='description'><span><data:description/></span></p>

を、

　
<b:if cond='data:blog.pageType == "item"'> 
  <p class='description'><span></span></p> 
<b:else/> 
  <p class='description'><span><data:description/></span></p> 
</b:if>

に、します。

こちらは以下を参考にさせて頂きました。
個別ページ毎に、description（ブログの説明）を自動的に変更する方法 - gogoToRoTAN - http://gogotorotan.blogspot.jp/2010/04/description.html

コードのハイライト

さっきもちょっと使いましたが、コードのハイライトを設定しました。
これは調べると「BeautyOfCode」を使っている人が多いようですが、
なんとなく「SyntaxHighlighter」を使用しました。

これはやってみると以外と簡単で、
Syntax Highlighter Scripts Generator ‹ Blogger Widgets | Tips | Tricks | Templates : Way2Blogging - http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator
から、コードを生成して、これまたHTMLの編集からそのコードをheadタグ内にコピペするだけです。
使用するときは、

　
<pre class="brush: plain" title="タイトル">　
/*ここにコードを入力*/
</pre>

これを投稿画面の上部「HTML」ボタンから記事のHTML編集に移って、コピペするだけです。
また、"brush: plain"のplainをjavaやcsharpなどに変更することで、各言語に対応するようです。

※コードにはHTMLエンコードをかけてくださいね。
　自分はC#でHttpUtility.HtmlEncodeを使ってツールを作りましたが、
　適当に検索したらWebのツールが見つかると思います。

検索向け説明の設定

記事も長くなってきたのでコレも簡潔にすまそうと思います。
以下を参考にさせて頂きました。
Bloggerでmeta descriptionを個別に設定する方法｜R14 - http://r14g.blogspot.jp/2011/04/bloggermeta-description.html

SEO的にもいいですよね！

終わりに

これからもじわじわと改良していきたいと思います。
以上です！

2012年6月8日金曜日