アメブロ無料テンプレートのカスタマイズ方法

スポンサーリンク

アメブロテンプレート「CAT」のカスタマイズ方法を紹介します。

上から順に設定をしていけば、必ず同じようになるので飛ばさないようにやってみてください。
もし、うまくいかない場合は、何回も読み直して間違っている部分を探してみてください。

まだ、アメブロ無料テンプレートCATをダウンロードしていな方は、下記のボタンからダウンロードページを見てください。

カスタマイズの手順

動画で見ながらやるのが一番やりやすいです。

動画が小さくて見にくい!という方は、動画の右下にある「シアターモード」を使ってください
※全画面だとやりにくいので、シアターモードでやってください!

記事を参考にする際は最初のテンプレートの設定だけは旧版になっているので注意してください。

カスタマイズの手順は全部で6つです。

  1. テンプレートをCSS用デザインにする
  2. 全体的なデザインを変更する(CSSの編集)
  3. 画像をアップロードする
  4. ヘッダー、背景、メニューを編集する(CSSの編集)
  5. グローバルメニューを追加する(フリースペース)
  6. 人気記事一覧を追加する(フリープラグイン)

基本的には、コピー&ペーストでできるので難しくないです。

ヘッダー画像だけは、先にご用意していただくようにお願いいたします。
ヘッダー画像のサイズは、横幅1500 × 高さ300が推奨です。

テンプレートをCSS用デザインにする

ダウンロードした、ZIPファイルを解凍します。

アメブロ無料テンプレートカスタマイズ1

解凍するには、ダブルルクリックして出てきたファイルを、外にドラッグすればできます。
「アメブロテンプレートCAT」のファイルが使えるようになります。

解凍できたら、中身を確認しましょう。
ファイルの中身は、全部で5つです。

アメブロ無料テンプレートカスタマイズ2

中身は

  • texture
  • アメブロテンプレートCAT
  • グローバルメニュー
  • フリースペース
  • フリープラグイン

が、フォルダの中に入っています。

テンプレートを変更する

アメブロのテンプレートを変更します。
アメブロにログインして、デザイン変更画面の下にある「カスタム可能」をクリックします。

アメブロ無料テンプレートカスタマイズ4

カスタム可能を選択しないと、CSS編集用デザインが出てこないので注意してください。

CSS編集用デザインを選択します。

アメブロ無料テンプレートカスタマイズ5
2017年ではこの画像ではない旧版のCSS編集用デザインを使用しています。

「2カラム・メニュー右」を選択します。

アメブロ無料テンプレートカスタマイズ6
2カラム・メニュー右以外では、動作確認していないです。

決定できたらCSSの編集を行なっていきます。

CSSの編集

CSSの編集では、ヘッダー、背景、メニューバーを変更していきます。

変更したデザインの所から、CSSの編集をクリックします。

アメブロ無料テンプレートカスタマイズ7

デザインの変更

CSSの全体的なデザインを変更します。

ダウンロードしあるフォルダから「アメブロテンプレートCAT」を開きます。

アメブロ無料テンプレートカスタマイズ8

テキストファイルなので、中にあるテキストを全部コピーします。

コピーの仕方は「CTRLキー+Aキー」で全選択ができます。
「CTRLキー+Cキー」でコピーができます。
アメブロ無料テンプレートカスタマイズ28
もし、コピーができなかったら右クリックでもコピーできます。
コピーを押しても、画面上では特に変化はありません。

コピーをしたら、今度は貼り付けをします。

CSSの編集画面が既に表示されているので、そこに全てを削除して、貼り付けます。

貼り付ける前に必ず最初に書いてあるテキストを別のメモ帳などに保存しておいてください!貼り付けて保存して、元ファイルがないから戻せないなど責任は一切取りません。

「CTRLキー+Aキー」で全選択をし、「CTRLキー+Vキー」で貼り付けができます。

アメブロ無料テンプレートカスタマイズ29

全選択することによって、最初に記載してあった文章は全て消えて変更されます。

元あった文章は全て削除してください、少しでも文章が残っていると正常に動作しないことがあるので注意してください。

この時点で、一回保存しておきましょう。

これで、全体的なデザインが変更されました。

各画像をアップロード

ヘッダーや背景を変更するための画像を先にアップロードしておきます。

背景画像とメニュー画像のアップロード

背景画像は「texture」、メニュー画像は「グローバルメニュー」を使います。

CSS編集画面の、上の方に画像をアップロードできる項目があります。
ブログデザインヘッダ・背景用画像の追加から、ファイルを選択しアップロードします。

アメブロ無料テンプレートカスタマイズ11

アップロードする画像は、「texture」と「グローバルメニュー」です。

アメブロ無料テンプレートカスタマイズ12

それぞれアップロードできたら、今度はヘッダー画像を追加していきます。

ヘッダー画像をアップロード

ヘッダー画像も同じようにアップロードをします。

推奨するヘッダーの大きさは、横幅1500 × 高さ300です。

ヘッダー画像の作り方が良くわからない場合は、「ヘッダー画像 作り方」で調べてみてください。

CSSの編集

アメブロのヘッダー画像、背景、グローバルメニューの画像を適用させます。

変更箇所は、CSSを貼り付けた一番下の部分の3箇所です。
テンプレートCATの変更箇所という項目があるので、変更する箇所はその部分より下です。

背景画像変更

変更するために、画像のURLをコピーします。

先ほどアップロードした背景画像を、「CTRL+C」でコピーしてください。

アメブロ無料テンプレートカスタマイズ13

テンプレートCATの変更箇所を探して、ブログの背景変更を探してください。

その中の「url(背景画像のURL);」の、(背景画像URL)の部分に貼り付けてください。

アメブロ無料テンプレートカスタマイズ14

この時に(  )は消さないようにしてください。

背景画像のURLを削除して、その部分に貼り付けるようにしてください。

ヘッダー画像の編集

アップロードしてあるヘッダー画像を選択します。

先ほどと同じように、CTRL+Cでコピーしてください。

アメブロ無料テンプレートカスタマイズ15

コピーできたら「url(“ヘッダー画像のURL”);」の、「ヘッダー画像のURL」の部分に貼り付けます。

背景画像を変更した下に、ヘッダー画像の変更箇所があります。

アメブロ無料テンプレートカスタマイズ16

この時に「(”     “)」の部分は消さないように注意してください。

消してしまうと、上手く画像が表示されません。

グローバルメニューの編集

グローバルメニューの画像は、緑色の画像です。

先ほどと同じように、「CTRL+C」でコピーします。

アメブロ無料テンプレートカスタマイズ18

ヘッダー画像を変更した所の下に、メニュー画像を貼り付ける場所があるので貼り付けます。

「url(“グローバルメニューのURL”)」の「グローバルメニューURL」に貼り付けをします。

アメブロ無料テンプレートカスタマイズ17

この部分も(”  “)を消してしまうと、正常に表示されません。

グローバルメニューを追加

グローバルメニューを追加していきます。

グローバルメニューは、フリースペースを変更する必要があります。
ダウンロードしているフォルダから「フリースペース」を開きます。

アメブロ無料テンプレートカスタマイズ20

フリースペースの中にあるテキストを、全てコピーします。

アメブロ無料テンプレートカスタマイズ21

フリースペース編集画面を開く必要があります。

「設定・変更」から、「フリースペース編集」をクリックして開きます。

アメブロ無料テンプレートカスタマイズ19

フリースペース編集画面が表示されるので、コピーしてあったテキストを貼り付けます。

アメブロ無料テンプレートカスタマイズ30

貼り付けたら、メニューバーの編集を行います。

緑色の「href=“#”」の、「#」部分に表示したページのURLをコピーして貼り付けます。

URLはページを開いている時のブラウザの上の部分に表示されています。

青色の「メニュー1」の部分を好きな文字に変更すると、メニューバーの文字が変更されます。
「メニュー1」から「メニュー5」を変更しましょう。

グローバルメニューの配置

フリースペースに入れただけでは、グローバルメニューが表示されません。

「設定・管理」から、配置設定をクリックします。

アメブロ無料テンプレートカスタマイズ33

使用しない機能の部分から、フリースペースを一番右上にドラッグして移動させます。

アメブロ無料テンプレートカスタマイズ34

これで、グローバルメニューが表示されるようになりました。

人気記事一覧の追加

アメブロの人気記事一覧は、必要ならば追加してください。

特に必要なければ追加しなくて良いですが、追加したほうが興味が湧くのでオススメです。

人気記事一覧を作成するには、「フリープラグイン」を開きます。

アメブロ無料テンプレートカスタマイズ25

開いたら、人気記事一覧のコードが表示されるので全てコピーします。

アメブロ無料テンプレートカスタマイズ26

コピーしたら、「設定・管理」の中にあるプラグインの追加を選択します。

アメブロ無料テンプレートカスタマイズ23

プラグインの追加画面が表示されたら、フリープラグインのタブをクリックします。

アメブロ無料テンプレートカスタマイズ24

フリープラグイン、入力画面が表示されるのでコピーしたコードを貼り付けます。

アメブロ無料テンプレートカスタマイズ27

貼り付けたら、タイトルとURLを変更します。

  • 緑色の部分が「アドレス(URL)」の変更箇所です。
  • 青色の部分が「タイトル」の変更箇所です。
人気記事一覧のタイトルは、好きなタイトルを決められます。
なので、必ずしも記事タイトルと一緒でなくても大丈夫です。

サイドバーの配置設定画面が表示されるので、フリープラグインを好きな位置に移動させます。

アメブロ無料テンプレートカスタマイズ31

フリープラグインを配置した位置に、人気記事一覧が表示されます。

画面が表示されない場合は、配置設定から表示をさせてください。

これで全ての設定が完了しました。

最後に

アメブロのカスタマイズで上手くいかない場所があったら、その場所をよく読み直してください。
記号が1つ消えているだけで、上手くいかない可能性があります。

また、質問や要望などありましたらお気軽にお知らせください。

スポンサーリンク

19 件のコメント

  • ヘッダーの新着デザインを試しに見ようと思ったら、間違えて「適用する」をおしてしまいました。
    その途端ほんの2週間ぐらい前にグローバルメニューを有料で設置してもらったばかりなのに
    そのグローバルメニューが全てきえてしまい、ショックを受けております。
    設置してもらったグローバルメニューは復活できますか?

    • 竹花さん

      グローバルメニューが消えてしまったのは復活できます。
      ただ、どのような方法で設置したのかがわからないので、どうやって復活させるかはその状況によって異なります。
      有料で頼まれたとのことなので、もう一度同じところにお願いするのが一番早いと思います。
      よくない業者でなければ、それくらいは快く無料でやってくれますよ。

  • お世話になります。すばらしいテンプレートの提供ありがとうございます。
    どうしてもうまくいかなくて、メニューのリンクから外部リンクへとばしたいんですが、
    アメーバ/外部リンクサイトアドレス
    のようになってしまいエラーになってしまいます。><
    どこまで私はドジなんでしょうか。
    できればアドバイスお願いしたいんですが、お返事お待ちしています。

    • 風の音さん

      テンプレートを使っていただきありがとうございます。
      修正できたみたいで良かったです。
      また、何か困ったことがありましたらいつでもご連絡ください。

  • ありがとうございます。こうして皆様の知識に支えられてなんとかブログも完成しそうです。またよろしくお願いします。本当に感謝です。

  • はじめまして、

    とても素敵なデザインですね。
    ただ、
    私も風の音様と同じく、
    メニューのリンクから外部に行くことができません。

    同じ理由であれば、
    ご教授いただきたく、
    お願いいたします。

    • 冬木様

      テンプレートご使用ありがとうございます。

      メニューのリンクから外部に行く事が出来ないのは、「6-1 グローバルメニューを追加」で説明している部分が原因です。

      <li><a class=”headerMenu1″ href=“#” rel=”nofollow”>メニュー1</a>

      と書かれた部分が5つありますが、

      <href=”#”>

      と書かれた部分が、飛ばしたい外部リンクを記入する部分です。
      この「#」の部分を、外部リンクに変更いたします。

      例えばこのHPへリンクを張りたい場合は、
      <li><a class=”headerMenu1″ href=“https://accesstheory.com” >アクセスセオリー</a>
      というように変更します。

      また、「メニュー1~5」と書かれている部分を変更するとがメニューバーに表示される日本語が変更されます。

      是非試してみてください。

  • akiyuki様、

    早速のご返答ありがとうございます。

    #を飛ばしたいURLに変更はしています。
    また、
    「お探しのページを表示できません。」
    のようなエラーは#のままでは出ないような気がします。

    フリースペースには下記を挿入しています。

    お忙しい中、恐縮ですが、
    よろしくお願いいたします。

    冬木

    • 冬木様

      書き方が2点間違えてしまっています。
      1. hppt:が抜けている
      2. rel=”nofollow”の前に「”」が余計に入ってしまっている
      1文字でも間違えてしまうと、正常に作動しないのでご注意ください。
      下記にそのまま使える文を載せましたので、コピーして張り替えて使用してください。

      この部分は削除しました。

      飛ばしたいURLの所にアドレスを入れてご使用ください。
      「””」マークは消さないように注意してください。
      上記のコードで問題ないと思いますので、一度試してみてください。

  • akiyuki 様、

    お手数をおかけします。
    上記コードに貼り替えました。
    結果ですが、
    ブログをご覧になっていただけますでしょうか?

    メニューがサイドに移動してしまいました。
    原因は何でしょうか?

    あと、サンプルをいただいたときは、
    rel=”nofollow”は記載されていませんでした。

    よろしくお願いいたします。

    冬木

    • 冬木様

      nofollowはコメント頂いた際に自動的にこのブログで処理されていたみたいです。
      冬木様がご自身で入力したのかと勘違いしてました。

      もしかしたらコメントからのコピペですと、上手くいかないのかもしれません。
      テキストファイルをメールで送信させていただきますので、そちらをご使用してみてください。

  • akiyuki様、

    メールありがとうございます。
    いただいたテキストを貼りつけました。
    Home以外は上手く飛ぶことができました。
    なぜでしょうか?

    たびたびすみません。

    冬木

    • 冬木様

      修正できよかったです。
      Homeにアドレス入力欄に冬木様のブログの同じアドレスが2つ入ってしまっています。
      確認して、1つを削除してください。

  • akiyuki様

    上記ご指摘の通り、
    オンマウスにすると二重にアドレスが記載されていますが、
    フリースペースの記載は1つです。

    先ほどのメールにフリースペースのコードを
    貼りつけ送信させていただきました。

    何度も恐縮ですが、
    よろしくお願いいたします。

    冬木

    • 冬木様

      確認したところ、2重になっていませんでした。
      それであれば、アドレスを「#」だけに変更してみてください。

      <a class=”headerMenu1″ href=”#”>

      という感じです。
      トップページに戻るという点では同じ意味ですので、これで大丈夫だと思います。

  • akiyuki様、

    出来ました!
    ありがとうございました。
    一文の得にもならないことに
    長々お付き合いさせてしまい、
    大変申し訳ありませんでした。
    サイト等、いろいろ拝見させていただきます。
    今後ともよろしくお願いいたします。

    繰り返し、
    ありがとうございました。

    冬木

  • 初めまして。
    素敵なテンプレートを無料でご提供して頂きありがとうございます。

    1つ質問をさせてください。

    ブログのイメージカラーを赤にしたいと思いまして、グローバルメニューを、赤(サイズ300×120)で作ったのですが、グリーンで反映されます。

    何度か、削除して最初からやり直しをしたのですが、5つのメニューはグリーンで表示され、左右の余白の部分は赤で反映されている状態です。

    メニューバーを赤で表示させるには、どうしたらよいでしょうか?

    お手数をお掛け致しますが、ご教授お願いいたします。

    • 初めまして。
      メールも同時に拝見いたしました。

      グローバルメニューのグリーンになっている部分関しましては、CSSの編集が必要です。

      CTRL+Fで検索ができるので「#headerMenu ul.menu{」を検索してみてください。

      その中に、
      border-bottom:3px solid #ff9600; /*リンク下の線のデザイン*/
      background-color:#43B134;/*リンクの背景色*/

      という部分があります。
      リンク下の線のデザインが黄色の部分で、リンクの背景色が緑です。
      これを「HTMLの色」でググって好きな色に書き換えて頂ければ設定が出来ます。

      よろしくお願いいたします。

  • コメントを残す

    メールアドレスが公開されることはありません。