全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

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)

前の記事

次の記事

この記事を書いたコーチ

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

自分で作る夢のマイホームページ作り講座
栗林賢 (ホームページ作成)

新宿・高田馬場・池袋・練馬・石神井公園・秋津・小手指・入間市・仏子・所沢・西武新宿

ブログ記事 ページ先頭へ