実践したい!「FC2ブログのテンプレート工房」のカスタマイズまとめ

  • LINEで送る

FC2ブログのテンプレート工房さんに掲載されているカスタマイズで、ぜひ実践していただきたいカスタマイズをまとめてみました!

目次

FC2ブログは簡単にテンプレートの複製ができます。
カスタマイズは必ずバックアップをとってから行いましょう。

FC2ブログ テンプレート複製

作業はテンプレートのHTMLとCSSを編集して行います。【参考】 編集ページの場所

ページタイトルの表示方法を変更する

【FC2ブログのテンプレート工房さんの記事 ⇒ ブログSEO (ページタイトル)

通常は「ブログタイトル 記事タイトル」と表示されるページタイトルですが、「記事タイトル ブログタイトル」と表示させるように変更しましょう。SEO対策に効果的です。

ただし、記事の通りに変更すると、トップページではブログタイトルの前にスペースが入ってしまいますので、以下のソースに差し換えることをおすすめします。

not_index_areaで囲った部分はトップページで表示されません。

<title><!--not_index_area--><%sub_title> | <!--/not_index_area--><%blog_name></title> 

パンくずナビゲーションを設置する

【FC2ブログのテンプレート工房さんの記事 ⇒ パンくずナビゲーション

パンくずナビゲーションは、今どこのページを見ているのかが分かりやすく、内部リンクも張られるのでSEO対策にも有効です。

方法は違いますが、当サイトもパンくずナビゲーションを設置していますよ♪

↓これがパンくずナビゲーションです。
パンくずリスト

以下のHTMLソースを表示したい場所にコピペしてください。

「lightflame」のテンプレートをお使いの方は、<!–▲▲ ヘッダー ▲▲–>のすぐ下に貼り付けると上手く表示されます。

「lightflame」の方は、そのままコピペすると中央寄せの表示になってしまうので、HTMLソースの2行目を以下のHTMLソースに差し換えてください。(text-align: left;を追加しました。)

<div style="margin: 0 0 0 20px; text-align: left; font-size: 75%; color: #666666">

【パンくずナビゲーションHTMLソース】

<!--▼▼ パンくずナビゲーション ▼▼--> 
<div style="margin: 0 0 0 20px; font-size: 75%; color: #666666"> 

<a href="<%url>"><%blog_name> HOME</a> 

<!--▼ カテゴリ ▼--> 
<!--category_area--> 
 > カテゴリー [<%sub_title> ] 
<!--/category_area--> 
<!--▲ カテゴリ ▲--> 

<!--▼ 月別アーカイブ ▼--> 
<!--date_area--> 
 > 月別アーカイブ [ <%now_year>年<%now_month>月 ] 
<!--/date_area--> 
<!--▲ 月別アーカイブ ▲--> 

<!--▼ 検索 ▼--> 
<!--search_area--> 
 > [<%sub_title> ] を含む記事 
<!--/search_area--> 
<!--▲ 検索 ▲--> 

<!--▼ 記事 ▼--> 
<!--permanent_area--> 
<!--topentry--> 
 > <a href="<%topentry_category_link>"><%topentry_category></a> 
 > <%topentry_title> 
<!--/topentry--> 
<!--/permanent_area--> 
<!--▲ 記事 ▲--> 

</div> 
<!--▲▲ パンくずナビゲーション ▲▲--> 

JavaScriptの外部ファイル化

【FC2ブログのテンプレート工房さんの記事 ⇒ javaScriptの外部ファイル化

JavaScriptを外部ファイル化することでHTMLソースがすっきりします。SEOに有効です。

ファビコンを設置する

【FC2ブログのテンプレート工房さんの記事 ⇒ ファビコンの作り方

ファビコンとはWebサイトのアイコンのことです。他のサイトとの差別化を図るのに良いですね。

↓これがファビコンです。
ファビコン

私はFavicon Editorを利用してファビコンを作成しました。

タイトル下にメニューバーを表示する

【FC2ブログのテンプレート工房さんの記事 ⇒ 横メニューバーをブログタイトル下に表示する

ブログタイトル下のメニューバーは目に留まりやすいので、うまく活用できるといいですね。

↓これがメニューバーです
メニューバーのカスタマイズ

管理者用記事編集リンクを設置する

【FC2ブログのテンプレート工房さんの記事 ⇒ 管理者用記事編集リンク

各記事から直接記事の編集ページに行くことができます。これ、便利ですよ♪

記事末尾に常に同じ内容を表示する

【FC2ブログのテンプレート工房さんの記事 ⇒ 記事文末にランキング投票や広告等を入れる

ランキングバナーや広告など、記事の末尾に常に表示しておきたいものがある場合に大変役に立つ設定です。

リンク先を同窓か開くか別窓で開くかを指定する

【FC2ブログのテンプレート工房さんの記事 ⇒ 同窓で開くリンクと別窓で開くリンク

同窓とは同じタブでリンク先に移動すること、別窓とは新しくタブを開いてリンク先に移動することです。覚えておきたい便利なタグの紹介記事です。

line

  • LINEで送る