サイタWeb・デザインスクールホームページ作成講座東京 自分で作る夢のマイホームページ作り講座 スクールブログ アメブロのカス...

アメブロのカスタマイズの仕方:かっこよく、そして読まれやすく!

みなさん、こんにちわ!

これからは日々のレッスンでやったことで、他の方のお役にも立てるような話題については、ブログにも書いて、後からでも読めるようにしていこうと想います!

今日は、アメブロのカスタマイズについてです!
私はアメブロで3つのブログをやっているのですが、CSSを編集したり、プラグインを追加したりして、自分の作りたいブログへとカスタマイズをしています!

アメブロのデザインはほんと気に入らなかったのでまさか自分がやることになるとはと想っていたのですが、集客広報を考えた時にアメブロは強力なツールになります!
でもテンプレートそのままではやりたいない!そんな人には必見の話題ですね。


CSSを編集してカスタマイズがしたい場合は、CSS編集用デザインというテンプレートを使います。


1.ヘッダー画像の挿入/入れ替え

(1)ヘッダー画像を画像処理ソフトなどつくります

(2)ブログデザインヘッダ・背景用画像の追加から、パソコン内のヘッダー画像をアップロードします。

(3)デザインの変更ーCSS編集をクリックして、編集画面を表示します。

(4)画像のアップロード後表示される、『この画像のパス』をコピーします。

(5)CSSの編集ページで、以下のCSSを入力します

.skinHeaderArea {
background:url(画像URL)lefttopno-repeat;
height:300px!important;/*高さ*/
}

画像URLの部分を、上でアップロードしたヘッダー画像のURLに変更します。

高さの数値を、ヘッダー画像の高さに調整します。


(6)タイトル、説明文を画像として埋め込んだ場合は、テキストのタイトル、説明文は表示されないようにCSSを追加していきます。


2.サイドバーの見出し背景色変更

(1)CSSの編集画面からサイドバーのタイトルを指定しているCSS部分を探して、
backgroundの色指定を変更します。

色が変わるとサイドバータイトルとヘッダー画像の間に隙間がないことが気になったので、先ほどの
サイドバーのタイトルを指定しているCSS部分にmargin-topを追加設定して、調整します。

.skinMenuHeader{
padding:5px 10px;
background:#e4e4e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
margin-top:5px;
}


3.サイドバーにどんな機能を入れるかの設定

管理画面のサイドバー配置設定で追加削除ができます。
どこに何を配置するかで記事が読まれるかどうかに影響していきます。



4.サイドバーにフリースペースを配置して、文章や画像を表示する

(1)管理画面のフリースペース編集で必要な情報をテキストやHTMLとして入力していきます。

タグで画像ファイルを指定して、フリースペースに表示をすることができます。

他にサーバーを持っていない場合は、新規投稿画面で画像をアップロードしてコードを生成することで、画像表示のためのhtmlタグさ生成されます。



5.プラグインを使って、グローバルナビゲーションを作成

(1)eznaviのjavascriptをフリープラグインに読み込みます。



(2)メニューに入れたいページ名とリンクをhtmlで入力します。色を変えたい場合はstyleで指定することができます。



色の指定の仕方は以下のようになっています。






6.本文の行間隔を広くして読みやすくする

行間隔を指定するCSSはline-heightです。

問題は、CSSを観て、どこが本文の文章を指定している部分かを把握することです。

通常は自分でつけるclass名ですが、ここではアメブロのテンプレートで決められているので、どこが何を表すか検索するなどして理解する必要があります。

新しく.articleText{}を追加して指定したところ、行間隔を空けることができます。


/* 記事テキストの行間 */
.articleText {
line-height:23px;
}




その他にもいろいろとアメブロの設定を変えることができます。

アメブロを始めたい方
すでに使用していけれどデザインや機能を変えていきたい方
アメブロの読者をさらに増やしたい方
のお役に立てたら嬉しいです。

ぜひご相談くださいね。

 

(2015年6月26日(金) 15:57)

前の記事

次の記事

この記事を書いたコーチ

自身の作品がグッドデザイン賞を受賞!実務・講師経験ともに豊富なので安心

目的・種類別にホームページ作成・作り方講座を探す

新着記事

マイホームページを自分でつくるって、 マイホームを自分でつくるのに似ていますね。 すでにできたものから選ぶと自分の理想とは違うし、 かといってオーダーしてつくってもらうと費用がかなりかかいます。 今日は、「自分でホームページ作成・WEB制作をする7つのメリット」について...

みなさん、こんにちわ。久しぶりの投稿です。 しばらくの間、大きな規模の制作を行っていたため、新規の生徒さんの募集を止めていましたが、新しい生徒さんを受け付けることにしました! これまでサイタでコーチをしてきて、ホームページを外注するのではなくて、自分たちで思うようなページをつくって...

みなさん、こんばんわ! 今日も、ある生徒さんの夢のマイホームページをご紹介します! ラ・シュシュという美容室のホームページです! 美容師である生徒さんが今年勤めていたお店を辞めて、独立してお店を開店するにあたり、自分でホームページを作りたいということで制作してきました。 こ...

みなさん、こんにちわ! これからは日々のレッスンでやったことで、他の方のお役にも立てるような話題については、ブログにも書いて、後からでも読めるようにしていこうと想います! 今日は、アメブロのカスタマイズについてです! 私はアメブロで3つのブログをやっているのですが、CSSを編集し...

みなさん、こんにちわ! 生徒さんの増加に伴って、一時的に停止していた体験レッスンの募集でした、本日再開しました! 1-2名限定で新規の生徒さんを募集します!! 私のスクールでは、ホームページ制作をデザイン・表現・コーディング・WEBプログラミング・マーケティング・SEO対策・ブロ...

ブログ記事 ページ先頭へ