ライブドアブログ テンプレート変更手順

ライブドアブログ用のデザインテンプレートのうち、独自に作ったテンプレートに変更する手順について解説いたします。

ここでは例として、私のLINE@に友達追加してくれた方にプレゼントしているテンプレートを使って説明します。

ライブドアブログの事前準備とバックアップ

まず、ライブドアブログの管理画面にログインし、デザインを変更したいブログの「ブログ設定」をクリックしてください。

 

ライブドアブログのデザイン変更

 

「ブログ設定」が左サイドの場合もあります。

ライブドアブログのデザイン変更2

 

すると、ブログの各設定ができる画面になりますので、デザイン/ブログパーツ設定の項目にある「PC」をクリックします。

 

ライブドアブログのデザイン変更3

 

すると、デザイン設定画面が開きますので、「カスタマイズ」をクリックしてください。

 

ライブドアブログ カスタマイズ

 

CSSの他に

  • トップページ
  • 個別記事ページ
  • カテゴリページ
  • 月別アーカイブページ

の各HTMLが編集できるようになるので、各項目の内容を特典テンプレートの内容と書き換えます。

 

 

書き換えを行う前に、CSSと各ページHTMLの内容をメモ帳などのテキストソフトを使ってバックアップしておきましょう。

 

 

以上で、ライブドアブログ版特典テンプレートを設置するための事前準備は完了です。

ライブドアテンプレートの展開および設置作業

それでは実際に、CSSと各HTML部分を特典テンプレートの内容と書き換えます。

ダウンロードした特典テンプレートを用意してください。

 

ダウンロードされると、以下のようなZIPファイルが保存されます。

 

ライブドアブログ特典4色 ZIP

 

このZIPファイルを解凍してください。

 

ライブドアブログ特典4色 解凍

 

解凍が完了すると、フォルダ内には下の画像のように4つのフォルダと4つのテキストファイルが入っています。

 

ライブドアブログ特典4色 展開

 

まず初めに各ページのHTMLを書き換えます。

テキストファイルの各ファイル名が、ライブドアブログの各HTML編集ページに対応しています。

 

 

例として、トップページのHTMLを書き換えてみます。

 

「トップページ」と書かれたテキストファイルをダブルクリックするか、メモ帳などのテキストソフトで開いてください

 

 

メモ帳で開くと、以下のような画面が表示されます。

 

ライブドアメルマガ特典4色 メモ帳

 

文字が記載してある画面内のどこかをクリックしてから

  • Windowsの場合 Ctrl +A
  • Macの場合 Command+A

で全部を選択したあと、そのまま

  • Windowsの場合 Ctrl +C
  • Macの場合 Command+C

でコピーしてください。

 

ライブドアメルマガ特典4色 htmlコピー

 

 

次に、ライブドアブログの管理画面に戻ります。

 

ライブドアブログの管理画面に戻ったら、デザインカスタマイズ画面の「トップページ」をクリックしてください。

 

 

 

 

そして、下の赤枠の部分に先ほどコピーした特典テンプレートのHTMLデータを貼り付けてください。

 

 

貼り付ける際は、赤枠内のどこでも好きな部分で1回左クリックしたあと、

  • Windowsの場合 Ctrl +A で全選択してから Ctrl+Vで貼り付け
  • Macの場合 Command+A で全選択してから Command+Vで貼り付け

をするとスムーズにできます。

 

貼り付けが終わったら、一度「保存する」ボタンをクリックして保存しておきます。

 

 

トップページのHTMLを変更した要領で、

  • 個別記事ページ
  • カテゴリアーカイブページ
  • 月別アーカイブページ

の各HTMLを変更していってください。

CSSデータの書き換え

続いて、HTMLを書き換えたのと同じ要領でCSSデータを書き換えます。

 

特典テンプレートのフォルダに移動後、お好きな色が書かれたフォルダを開きます。

今回は、「黄」フォルダを開いてみます。

 

 

フォルダ内には「css黄」というタイトルのテキストファイルが入っているので、これをメモ帳などで開きます。

 

ライブドアメルマガ特典4色 css

 

HTMLを書き換えた時と同じ要領で全選択してからコピーします。

 

ライブドアメルマガ特典4色 css2

 

ライブドアブログのデザインカスタマイズ画面に戻り、今度は「CSS」の内容を書き換えて、「保存する」をクリックします。

 

 

 

 

以下のようなデザインでブログが表示されるようになれば、特典テンプレートの設定は完了です。

 

 

今後、全体の基本色を別の色に変えたい場合は、CSSだけ書き換えれば基本色が変えられます。

 

また、やっぱり元のデザインに戻したい!という場合は予めバックアップしておいたデータに書き換えれば、元のデザインに戻せます。