はじめてのアメブロカスタマイズ【準備編】

アメーバブログでは、様々なデザイン
テンプレートが用意されていますが、
使っていく内に、自分だけのオリジナル
デザインにしたいなと思う方も多いと思います。

htmlタグやcssを理解出来ている人であれば、
結構簡単にデザインをカスタマイズする事が可能です。

今回は、アメブロカスタマイズを行うにあたり、
まずはブログの管理画面のどこに何があるのか。
その辺を覚えて頂きたいと思いまして、【準備編】と題しまして
ご紹介させて頂きたいと思います。

アメブロカスタマイズ可能なテンプレートの設定

まずは、アメブロカスタマイズを行うにあたり、
カスタマイズ可能なテンプレートを選択する必要があります。

カスタマイズ可能なテンプレートの設定の流れを
ご紹介させて頂きます。

ブログ管理画面

アメブロのブログ管理のページを表示すると、右上に三本線のアイコンがあります。
そのアイコンをクリックすると、メニューの一覧を見ることが出来ます。
一部のメニューは左のサイドバーにも表示されていますので、
そこから選んでもOKです。

デザインの変更

メニュー一覧のブログデザインに「デザインの変更」というメニューが
ありますので、クリックします。

「デザインの変更」は、ブログ管理画面の左サイドバーにも
表示されていますので、そこをクリックしても良いです。

カスタム可能

様々なデザインの一覧が表示されていますが、
下の方にスクロールすると、右側に「カスタム可能」という
メニューがあるので、ボタンをクリックします。

CSS編集用デザイン

CSSを使ったカスタマイズが出来るデザインは一つだけです。

カスタム可能デザイン一覧の左上にある
「CSS編集用デザイン」をクリックして下さい。

ブログデザインの表示確認・レイアウト変更

ブログのレイアウトを選びます。
後で変更する事も可能ですので、
とりあえず「３カラム・右ワイドメニュー」を選択します。

選択したら、「適用する」をクリックします。

ブログを確認する

一度、この状態でブログを確認してみます。
とてもシンプルなデザインのブログになってると思います。

このデザインをカスタマイズしていく流れになります。

ブログデザインのCSSの編集

先程の「ブログを確認する」ボタンの隣にあった
「CSSの編集をする」ボタンをクリックします。

ブログ管理画面の左サイドバーにある「デザインの変更」をクリックして
適用中のデザインの［ CSSの編集 ］をクリックすると
同じく、ブログデザインのCSSの編集のページが表示されます。

「ブログデザインヘッダ・背景用画像の追加」では
５枚まで画像をアップロードする事が出来ます。

ただし、扱えるファイルはgif、jpg、pngのみで、
１枚あたりのサイズは1MB以内というルールがあります。

次に、「現在使用中のブログデザインCSS」を見ます。

ここにCSSの設定がされていますので、
このCSSをカスタマイズして使っていく形になります。

ここまでが、カスタム可能なデザインテンプレートの設定の説明でした。
流れは理解出来ましたか？

では、ここからは、後はどんな部分をカスタマイズ出来るのか
説明させて頂きます。

フリースペース編集

ブログ管理画面の右上にある三本線アイコンをクリックすると
サイドバーメニューの所に「フリースペース編集」があるので
クリックします。

ここでは、サイドバーに好きな文章を表示させたり、
htmlタグも使えるので（一部使えないタグもあり）
画像を載せたりも出来ます。

JavaScriptは使えません。

プラグインの追加

ブログ管理画面の右上にある三本線アイコンをクリックすると
サイドバーメニューの所に「プラグインの追加」があるので
クリックします。

「フリーブラグイン」タブをクリックすると
ご自身で記述することが出来ます。
JavaScriptなども使えますが、半角3800文字相当までと
決まっています。

サイドバーの配置設定

フリースペースやプラグインの追加を行った後は、
サイドバーに配置設定を行わないと有効になりません。

「使用しない機能」の所に「フリースペース」や「フリーブラグイン」の
メニューが表示されていると思いますので、それを
右側の「使用する機能」の所にドラッグ&ドロップで配置します。

サイドバーに設定されている他のメニューも
使わないメニューは「使用しない機能」に移動すれば表示されませんし、
「使用する機能」のメニューも、表示順序など、ドラッグ&ドロップで
簡単に入れ替え出来ますので、お好きな表示になるように
設定して下さい。

設定・管理

ブログ管理画面の左サイドバーの「設定・管理」をクリックすると
ブログの各種設定やサイドバーの設定の項目が一覧で見れますので
ここから設定を行うことも出来ます。

まとめ

以上で、アメブロカスタマイズを行う前の
準備についての説明は終わりです。

カスタマイズの説明は、他のサイトなどでも様々なテクニックが
紹介されていると思いますが、
例えば「◯◯に◯◯の設定をして下さい」と書かれていた時に
どこをクリックすればそのページになるかなど理解出来ていれば
より早くカスタマイズの作業が進むと思います。

まずは、基礎の基礎として、
今回の記事内容を覚えて頂ければと思います。

今後、例えば「ヘッダー画像の変更について」など、
項目ごとにご紹介出来れば良いなと思ってます。

• Tweet
• 
• 

• 
• 
•