画像の回り込み表示

画像の回り込み表示も可能です。

左に画像を表示して回り込みさせる場合

記述
<div class="imgl"><img src="画像のURL" alt="" /></div>テキスト<br clear="all" />
例

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

右に画像を表示して回り込みさせる場合

記述
<div class="imgr"><img src="画像のURL" alt="" /></div>テキスト<br clear="all" />
例

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

SEO対策について

お試版テンプレートのSEO対策についてです。

タイトルタグ

もっとも重要視されるタイトルタグは
より狙ったキーワードが強調させるために次のように設定しています。

トップページ
ブログタイトルのみ（So-netブログの言葉が付きません）

個別記事タイトル
個別記事タイトルのみ

カテゴリページ
カテゴリ名｜ブログタイトル

タグページ
タグ名｜ブログタイトル

その他の重要タグ

h1タグ
ブログタイトルに割り当てています。
どのページでもブログタイトルがh1タグになります。

h2タグ
・カスタムペインのHTMLを
　html_コンテンツ用_インフォメーションに貼り替えた場合

・個別記事タイトル

設置方法

テンプレートのソースは
別途お送りしているメール内のリンクよりダウンロードしてください。

お試し版テンプレートの仕様

• デザイン名：シンプル（simple）
• レイアウト：1種（2カラム右サイドバー）
• 色パターン：4色（青・黒・赤・緑）

テンプレートファイルの確認

ソースをダウンロードして解凍すると
kaeten-neo_so-net_simple_2カラム右サイド_お試版
というフォルダが収容されています。

そのフォルダの中身は
種類：PNGイメージはイメージ画像
種類：テキストはHTML・CSSのテンプレートソース　となります。

テンプレートの設置方法

貼り替えて頂くソースは次の４つです。

1. css
2. index用のhtml
3. コンテンツ用記事のhtml
4. コンテンツ用カスタムペインのhtml ⇒ html_コンテンツ用_インフォメーションに貼り替え

So-netブログの操作に慣れていない方は次のページを参考にしてください。
※別テンプレでの説明ですので貼り替えるファイル名は読み替えてください

1. 新規ブログの追加
2. KAETEN設置の為にデザインを追加する
3. CSSを書き替えする
4. HTMLを書き替えをする
5. コンテンツ用カスタムペインのHTMLを書き替えをする

KAETEN新バージョンはCSS3を使ってデザインしています

デザイン画像を一切使わずにCSS3を使ってデザインしていますので、画像をアップする手間も無く、ブログも軽く表示も早くなります。

ブログヘッダー、個別記事タイトル、カスタムペインタイトル、フッターは、CSS3でグラデーションのデザインを施しています。

タグ：CSS3

KAETEN So-net版 for CSS3 記事サンプル

KAETEN So-net版 for CSS3 記事サンプルの記事サンプルです。

記事タイトルにはＨ２タグを割り当てています。

<h3>Ｈ３タイトル</h3>と入力するとこのように表示されます。

Ｈ３タイトル

<h4>Ｈ４タイトル</h4>と入力するとこのように表示されます。

Ｈ４タイトル

リストタグも利用可能です。

<ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul>
と入力するとこのように表示されます。

• リスト１
• リスト２
• リスト３

<ol><li>リスト１</li><li>リスト２</li><li>リスト３</li></ol>
と入力するとこのように表示されます。

1. リスト１
2. リスト２
3. リスト３

続きを読む

タグ：KAETEN so-net CSS3