Bloggerにオリジナルナビゲーションバーを設置する

テンプレートの機能を有効に利用しオリジナルナビゲーションバーを設置

---

以前に「ラベル」をナビゲーションバーを設置する方法を紹介しましたが、今回は任意の項目で、しかも、簡単に表示する方法を紹介します

ガジェット設置

---

「デザイン」、Cross-Columnの「ガジェットを追加」、「HTML/JavaScript」を選択

ガジェットを編集

---

「タイトル」を空白にして次のようなコードを記述して下さい

 
<div id="menu">
<ul>
<li><a href="リンクURL1" target="_blank">タイトル１</a></li>
<li><a href="リンクURL2" target="_blank">タイトル２</a></li>
<li><a href="リンクURL3" target="_blank">タイトル３</a></li>
<li><a href="リンクURL4" target="_blank">タイトル４</a></li>
<li><a href="リンクURL5" target="_blank">タイトル５</a></li>
</ul>
</div>

オリジナルナビゲーションバー表示

---

このように表示されます

Bloggerの標準ナビゲーションバーを消してカテゴリをナビゲーションバーとして表示

標準ナビゲーションバー

---

これを消す

新たにナビゲーションバー表示

---

これを表示

標準で表示されているナビケーションバーを消す

---

「レイアウト」、Navbarガジェットの「編集」、ラジオボタンを「オフ」に設定

カテゴリをナビゲーションバーに表示

---

「レイアウト」、Cross-Columnの「ガジェットを追加」、「ラベル」ガジェットを追加、タイトルを消して「保存」

「表示」で「選択したラベル」にすると表示するラベルを選択できる

まとめ

---

ナビゲーションバーの設置で以前よりは見栄えするようになったがカスタマイズが困難
表示する順番を変えたり、ラベルに設定していない内容を表示するには「HTML」をカスタマイズしてナビゲーションバーを設置する必要がある
またの機会にその方法を記事にしようと思います

BloggerにSyntaxHighlighterを使ってソースコードを美しく表示する

SyntaxHighlighterダウンロード

---

こちらの公式サイトよりダウンロードして下さい

「 Click here to download」を押してダウントードして下さい

「syntaxhighlighter_3.0.83.zip」で圧縮ファイルがダウンロードできますので解凍して下さい

「syntaxhighlighter_3.0.83」フォルダが出来るのでフォルダごとローカルにコピーしておいて下さい

SyntaxHighlighterをBloggerに設置

---

テンプテートのhtmlを編集します
</head>のすぐ上にコードを足して下さい

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
  </head>

上記のコードはC#、シェルスクリプト、css、xml、sql,vbに対応しています
4行目～9行目
対応言語の一覧はこちらで紹介しています

読み込むcssによってテーマを変更できます
2行目
cssテーマの種類はこちらで紹介しています

Bloggerは少し特殊なためホスティングを使用してロードしています

サイトにコードを表示するコードを入れる

---

 
<pre class="brush:xml;auto-links:false;toolbar:false;highlight:[null];first-line:1"> 
    ここに表示させたいコードを記入
</pre>

brush:xml               xml言語
auto-links:false      オートリンク無効
toolbar:false           ツールバー非表示
highlight:[null]        ハイライトしない　する場合はhighlight:[1,2]
first-line:1               行番号を１から始める

特殊な記号は変換して記入します
<　→　&lt;
>　→　&gt;

Bloggerのサイドバーにカテゴリを設置

ラベルを設定

---

記事の「投稿の設定」で「ラベル」を設定します

例えば映画の感想を書いた記事だとしたら「ラベル」に「エンタメ」等と設定します
複数設定する場合は「,」カンマで区切って「エンタメ,映画」とします

サイドバーにカテゴリーを設置

---

左側の「レイアウト」を選択してサイドバーの「ガジェットを追加」を選択します

「ラベル」ガジェットを追加しそのガジェットを編集します
タイトルを「カテゴリ」にし、残りはお好みで試してみて下さい

Bloggerでプライバシポリーのページを設置する

Bloggerでプライバシポリーのページを作成してリンクを貼る

---

プライバシーポリシーの文書なんて考えたこと無かったのですが、今後、必要になるようなので色んなサイトを参考にして作ってみました
しかし、Bloggerにどように組み込めばいいのか？サイトを閲覧していると、「ベージ」と言う機能があるようなので、それを利用して、メインブログからリンクで参照できるようにしました

新しい「ページ」を作る

---

左側にある「ページ」を選択して下さい

上側の「新しいページ」を選択して下さい

タイトルは「プライバシーポリシー」にしました
記事内容に「プライバシーポリシーに関する内容」を記述しました

サイドバーに「プライバシーポリシーのページ」を表示するリンクを作成

---

左側の「レイアウト」選択して下さい

サイドバーの「ガジェットを追加」を選択して下さい

「ベージ」ガジェットを追加します

「ページ」ガジェットを編集します
タイトルは未入力の状態にします
「ホームのチェック」を外して、「プライバシーポリシー」にチェックを入れます

保存すればサイドバーに「プライバシーポリシー」ページを表示するリンクの完成です

作成したプライバシーポリシーのページ

---