静岡 SEO対策　リップルSEO

やっと、ブログカスタマイズの記事を作成しました。
まだ、初回バージョンという事でわかりづらい部分もありますが、
少しは参考になると思います。

うまくいかない部分、不明な部分はコメント頂ければ改善していこうと思います。


今回は、メインイメージの画像の追加の方法を解説してみたいと思います。
まずは、例としてテンプレートを「シンプルオレンジ×グラデーション」にしてご説明します。



これをカスタマイズして、次のようにメインイメージを差し込んで
オリジナルデザインのブログにしてみたいと思います。



メインイメージが入るだけで雰囲気がぐっと良くなりますね。


まずは、メイン画像が必要です。
画像加工ソフトなどを使って　幅740ピクセルの画像を用意します。
縦のサイズはピクセルぐらいが良いと思いますが、
縦はお好きなサイズで結構です。

今回はこんな画像を作成しました。


ここで画像が作成出来ないって所が壁になると思います。
画像の作成については、これだけでもかなりの内容になってしまうので
申し訳ありませんが書籍などで調べて下さい。

メイン画像だけなら1万円～2万円程度で代行作成も可能です。



●画像のアップロード

管理画面の左メニューの「画像一覧」より
画像をオリジナルサイズでアップロードします。





●URLの確認

登録した画像をクリックすると保存されたURLがわかるのでこれを控えておきます。




画像だけが表示される



当ブログの場合は
//img02.eshizuoka.jp/usr/ripple/main.jpg
となっていました。


●スタイルシートににコードを追加

次に、左メニューより「テンプレート」へ行きます。
使用中のテンプレートの「カスタマイズ」をクリックします。






スタイルシートの項目に新しく次のコードを追加します。
一番下に以下のコードを追加します。

#main_img{
margin:10px auto;
}


●トップページにコードを追加

続いてトップページの中に
下記の赤い部分を追加し、画像のURLを先程調べたアドレスにします。
(大体26行目あたりになると思います。)

---------------------------------------------------------------------------------------------------
省略

<a name="top"></a>
<div id="container">
<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
<div id="main_img"><img src="//img02.eshizuoka.jp/usr/ripple/main.jpg" /></div>
<div id="content">

省略
---------------------------------------------------------------------------------------------------

最後に登録ボタンで完了です。
  

ホームページを高い金額で作成する必要もありません。
今使っているブログをHPの様に使ってはいかがでしょうか。

また、リップルで作成のメリットとしては、
9年間のSEOノウハウがありますので
SEO対応のブログを制作できます。
また、作成後のアドバイスも行います。

アクセス解析も無料で設置出来ますので、
本格的な運用も可能です。


eしずおかブログのフルカスタマイズ
5万円～
(一部カスタマイズなら1万円～でも)


●制作事例


藤枝市の英会話スクール


もと不動産


静岡の単身引越


お問合わせ・お申し込みは
050-3467-4898
メールの場合はこちら
  

eしずおかブログは、比較的カスタマイズがしやすいブログです。
但し、ネックとなるのがCSS(スタイルシート)の編集です。
これがどうしても一般の方だと難しいと思います。

しかし、eしずおかブログはテンプレートが少ないので
やっぱり、少しはオリジナリティーを出したいですよね。

ちょこっと、カスタマイズするだけだったら
なんとかなるかもしれません。

次回は、具体的なカスタマイズのトピックスを紹介しちゃいます。
リクエストがあればコメントどうぞ。  

今日はeしずおかブログをカッチョ良くカスタマイズする方法を
教えちゃいます。

といっても、千里の道も一歩から　と言うように
簡単にはいきません。

まずは、自分好みの背景カラーにしてみましょう。


さて、このブログですが
テーマは「ブルーＰＣ」を使用しています。




では、本題です。
管理画面にいって、左メニューのテンプレートをクリックします。






テンプレートの選択画面が出てきます。
「カスタマイズ」をクリック!




すると、次の画面が出てきます。
「スタイルシート」という所が今回変更する場所となります。



「スタイルシート：」の中はこんな感じになっています。
(テーマによって少し異なると思います。)
※スタイルシートは、デザインを管理していますので、
むやみにあちらこちら変更するとレイアウトが崩れてしまう恐れがあります。
変更は自己責任で行ってください。
なおテンプレートを指示しなおせば元に戻ります。

----------------------------------------------------------------------------------------------
@charset "UTF-8";

*{
    font-family:"verdana","helvetica","osaka","ＭＳ Ｐゴシック",ans-serif;
}

textarea,select,input {
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro",
"Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック","sans-serif";
}

body{
    color                                                :#000;
    margin                                            :0px;
    background                                    :#00145d;
    text-align:center;
}

以下省略
----------------------------------------------------------------------------------------------


上記の赤字に部分
background  :#00145d;

が背景の色の指定になっています。
#00145d を変更すれば好みのカラーに変身します。

●色の見本はこちらから
http://www.colordic.org/

例えば
#00145d　から　#3cb371　に変更すると
こんな感じになります。



これで背景の色が変更できました。