Windows Live Writerとは？

Windows Live Writer使い方ナビとは？って方はこちらを参照
⇒Windows Live Writerの使い方

Windowslivewriterで賢威専用文字装飾タグを登録する方法

それでは、ご説明していきます。

livewriterには、ある程度感覚的に操作できる装飾ボックスは搭載していますが、
これはあくまでHTML上での装飾になります。

賢威は賢威で、独自の装飾システムを完備しており
スタイルシート上に設定されています。

文字装飾の詳しい説明はこちらです
⇒賢威 スタイルシートの文字装飾タグ一覧

賢威は、このようにソース上でクラス設定する事で、
色や装飾タグを表示する事が出来ます。

例
<p class="red">○○○</p> ＝赤文字

<p class="box-yellow">○○○</p>＝ハイライト文字

ただこれらの文字は、livewriter上ですと。
ソースから直接記入しないといけないので、

このタグをワンクリックで表示させる方法をご紹介します。

これをワンクリックで表示させる方法として、
livewriterのプラグインを使って表示させます。

それがこれです↓↓↓

「Text Template」

とりあえず英語ですが、｢download now｣をクリックして
一通りインストールしてください。

無事にインストールが終わると、
livewriterのプラグインが追加されていますのでクリックします。

下にある「Add new template」をクリックします。

templateボックスが開きますので、

title：好きな名前
category：カテゴリーで分けたい場合記入します。
Inserted HTML:ワンクリックで表示したいタグを入れます。

これで「OK」を押すと保存してください。

もう一度Text Templateをクリックすると
項目が追加されていますので、ダブルクリックして表示させてください。

↓↓↓
〇〇〇

このように表示されれば完成です。

以上
Windowslivewriterで賢威専用文字装飾タグを登録する方法

でした。

Similar Posts:

• Windows Live Writerの使い方（記事の書き方）
• Windows Live Writerの使い方（インストールと初期設定）
• Windows Live Writerの使い方（全体部分の説明）
• Windows Live Writerの使い方（画像の挿入と編集方法）
• 賢威　スタイルシートの文字装飾タグ一覧
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する

トップページにFacebookのLikeBoxを設置する方法

それでは、FacebookのLikeBoxの設置方法についてご説明します。

Facebookソーシャルプラグインの取得方法

まずは、Facebookプラグインページよりタグを取得します。
⇒Facebookプラグインページはこちら

LikeBoxをクリックします。

表示するLikeBoxの設定を行います。
完成しましたら、[GetCode]でタグを取得します。

タグに種類は３種類あるので、IFRAMEをクリックして、iframe版を取得します。

賢威へLikeBoxを設置する場所を探す

次に取得したタグを賢威へ設置します。

今回はトップページへ設置する方法をご紹介します。

WordPressへログインして、ダッシュボード⇒外観⇒テーマ編集を進みます。

テーマ編集内の[メインインデックスのテンプレート]と言う項目が、
賢威のトップページを現しますので、
こちらを開き該当部分へタグを貼り付けます。

いろいろなタグが書いてあり、
どこがどこの部分かわからないと思いますが、
トップページの表示させたい場所を探します。

設置場所の探し方として、

なんと無く、<!–最新情報–>の辺りに、
「あああああ」と書いてどこに表示されるか実験してみます。

ここに表示されました。

最新情報のタグの上に書いたので、
トップページの最新情報の上に表示されます。

タグをよく見ると場所のヒントが隠されていますので、
どの場所に何が入るかを探してみてください。

LikeBoxを賢威のトップページ最下部へ設置する方法

上記の方法で、設置場所を探します。

トップページの最下部の場合は、該当タグが下記の部分になります。

</div>
<p><?php printf( __(‘Back to <a href="%1$s">%2$s</a>’,'keni’), get_bloginfo(‘url’), get_bloginfo(‘name’)); ?></p>

<?php endif; ?>

———————————
↓
ここに設置します。
↑
———————————
</div>
<!–▲メインコンテンツ–>

<!–▽:sidebar.phpを編集、またはWP管理画面のウィジェットで編集–>
<?php get_sidebar(1); ?>
<!–△:sidebar.phpを編集、またはWP管理画面のウィジェットで編集–>
</div>

ここのタグを設置します。

一緒に賢威専用の中央揃えタグで囲む事で、
ボックスを真ん中に設置する事が出来ます。

<div class="contents al-c">～</div>で囲んで上げます。

こんな形で設置して上げると、中央揃えのLikeBoxを設置する事が出来ます。

今回はトップページへの設置方法をご紹介しましたが、
サイドバーに設置したい場合は、ウイジェットの「テキスト」に
タグを貼り付ける事で可能です。

以上

賢威カスタマイズ トップページにFacebookのLikeBoxを設置する方法
でした。

Similar Posts:

• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• 賢威カスタマイズ　ウイジェット以外のサイドバー編集方法
• 賢威カスタマイズ 記事の下に｢あわせて読みたい関連記事｣を設置する
• 賢威　記事省略「この投稿の続きを読む」の表示を変更する
• 賢威カスタマイズ　コメント送信ボタンの横にランキングバナーを表示する
• 賢威　スタイルシートの文字装飾タグ一覧

コメント送信ボタンの横にランキングバナーを表示する方法

それでは、コメント送信ボタンの横のランキングバナーなどを
設置する方法をご説明します。

まずは、WordPressへログインして、
ダッシュボード⇒外観⇒テーマ編集へ進みます。

右側の一覧に「コメント」がありますのでクリックします。

左側に、「コメント」のソースが表示されます。

ソースを一番下まで、スクロールして、
下記部分を探します。

<?php endif; ?>

<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="<?php _e(‘Submit Comment’, ‘keni’); ?>" />
<?php comment_id_fields(); ?>
</p>
<?php do_action(‘comment_form’, $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>
</div>

<?php endif; // if you delete this the sky will fall on your head ?>
</div>

このソース部分の「<?php comment_id_fields(); ?>」 が
コメント送信ボタンになりますので、この直下にランキングバナーのタグを加えます。

<?php endif; ?>

<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="<?php _e(‘Submit Comment’, ‘keni’); ?>" />
<?php comment_id_fields(); ?>
<!– 人気ブログランキング –>
<a href=http://blog.with2.net/link.php?〇〇〇 target="_blank"><img src="http://image.with2.net/img/banner/banner_22.gif" width="88" height="31" alt="人気ブログランキングへ" /></a>
<!– 人気ブログランキング –>
</p>
<?php do_action(‘comment_form’, $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>
</div>

<?php endif; // if you delete this the sky will fall on your head ?>
</div>

このように赤字部分のように加えます。

こんな感じで表示されます。

応用編として、

<?php comment_id_fields(); ?>
<!– 人気ブログランキング –>
<a href="http://blog.with2.net/link.php?〇〇〇" target="_blank"><img src="http://image.with2.net/img/banner/banner_22.gif" width="88" height="31" alt="人気ブログランキングへ" /></a>
<!– 人気ブログランキング –>
</p>
<?php do_action(‘comment_form’, $post->ID); ?>

このように<a hrer=”~にスペースを開けると、

同じように、間が開きます。

以上
賢威カスタマイズ コメント送信ボタンの横にランキングバナーを表示する

でした＾＾

Similar Posts:

• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• 賢威カスタマイズ 記事の下に｢あわせて読みたい関連記事｣を設置する
• 賢威で記事を書く前に覚えたい、よく使うHTMLタグ
• 賢威カスタマイズ　トップページにFacebookのLikeBoxを設置する方法
• パーマリンク設定後に記事やページが404エラーで表示されない
• 賢威 ヘッダー画像（メインイメージ）の変更方法

WordPressでは、関連記事を表示される｢Similar Posts｣と言うプラグインがあり
今回はそのプラグインを使った説明を行います。

記事の下に｢あわせて読みたい関連記事｣を設置する方法

それではSimilar Postsを使った、関連記事の表示方法をご説明します。
まずは、Similar Postsのインストールから行います。

下記サイトを参考に、

1.Post-Plugin Libraryプラグイン
2.Similar Postsプラグイン

の２つをインストールしてください。

参考サイト
⇒WordPressに関連する記事を自動表示するプラグイン『Similar Posts』

無事にインストールが出来ましたら、
WordPress⇒ダッシュボード⇒設定に、
新しく｢Similar Posts｣と言う項目が出来上がっているので、
クリックして設定を行います。

上部の｢Placement ｣タブをクリックします。

Output after post:を｢NO｣にして、Saveを押して保存してください。

次に外観からテーマ編集をクリックします。
右の項目から、単一記事の投稿 (single.php)をクリックします。

ソースボックスの一覧から下記ソースを探します。

/>");</script></p>
<!–/ソーシャルブックマーク–>
</div>

<h3><?php _e(‘Tags’,'keni’) ;?></h3>
<div class="contents">
<?php the_tags(”, ‘、’, ‘<br />’); ?></div>

<div class="contents al-r">
<p><?php the_time(get_option(‘date_format’)) ;?> | <?php comments_popup_link(__(‘No Comments/Trackbacks &#187;’, ‘keni’), __(’1 Comment/Trackback &#187;’, ‘keni’), __(‘% Comments/Trackbacks &#187;’, ‘keni’), ”, __(‘Comments Closed’, ‘keni’) ); ?>
| <?php edit_post_link(__(‘Edit’),”,’ | ‘); ?></p>
<p><?php _e(‘Category:’,'keni’); the_category(‘ ‘); ?></p>
</div>

ソース部分が見つかったら、こちらのソースを追加します。

<h3>あわせてに読みたい関連記事</h3>
<?php similar_posts(); ?>

追加した例↓↓↓

/>");</script></p>
<!–/ソーシャルブックマーク–>
</div>

<h3>あわせてに読みたい関連記事</h3>
<?php similar_posts(); ?>

<h3><?php _e(‘Tags’,'keni’) ;?></h3>
<div class="contents">
<?php the_tags(”, ‘、’, ‘<br />’); ?></div>

<div class="contents al-r">

これで、関連記事を表示させる事が出来ます。
設置1時間ぐらいは、「関連記事がありません」と言う表記ができますが、
集計後徐々に表示されるようになります。

以上
賢威カスタマイズ 記事の下に｢あわせて読みたい関連記事｣を設置する
でした。

Similar Posts:

• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• 賢威カスタマイズ　コメント送信ボタンの横にランキングバナーを表示する
• 賢威　記事省略「この投稿の続きを読む」の表示を変更する
• 賢威カスタマイズ　ウイジェット以外のサイドバー編集方法
• 賢威カスタマイズ　コメント欄やトラックバック機能を消す方法
• 賢威カスタマイズ　サイドバーに「人気記事ランキング」を追加する方法

賢威の場合は、トップページのコンテンツ部分に
最新情報と最新記事10個がぐらいが並ぶブログ風になっていますよね？

この最新記事の表示を消して、サイト風のデザインへ変更する方法を説明します。

トップページをブログ風からサイト風へ変更する方法

賢威に限らず、WordPressなどのブログは、
トップページに最新記事が並ぶように設定されていますが、

トップページをサイト風に、
いろいろとコンテンツを盛り込みたい方のための方法をご紹介します。

まずはWordPressへログインします。
ログイン後⇒ダッシュボード⇒外観⇒テーマ編集と進みます。

右側の一覧から『メインインデックスのテンプレート (index.php)』をクリックします。

ソースボックスの一覧から
下記ソースを探して、赤字の部分を削除してください。

※間違って他のソースを消した場合は、ブログが表示されなくなるので、
必ずメモ帳などにソースをバックアップしてから行ってください。

<!–/ソーシャルブックマーク–>
</div>
<!–/最新情報–>

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

<div class="contents">
<?php the_content(__(‘Read the rest of this entry &raquo;’, ‘keni’)); ?>

<h3><?php _e(‘Tags’,'keni’) ;?></h3>

<?php the_tags(”, ‘、’, ‘<br />’); ?>

<div class="al-r">
<p><?php the_time(get_option(‘date_format’)) ;?> | <?php comments_popup_link(__(‘No Comments/Trackbacks &#187;’, ‘keni’), __(’1 Comment/Trackback &#187;’, ‘keni’), __(‘% Comments/Trackbacks &#187;’, ‘keni’), ”, __(‘Comments Closed’, ‘keni’) ); ?>
| <?php edit_post_link(__(‘Edit’),”,’ | ‘); ?></p>
<p><?php _e(‘Category:’,'keni’); the_category(‘ ‘); ?></p>
</div>
</div>

<?php endwhile; ?>

<?php posts_nav_link_keni(); ?>

<?php else : ?>
<h2><?php _e(‘Not Found’,'keni’); ?></h2>
<div class="contents">
<?php _e(‘Sorry, but you are looking for something that isn&#8217;t here.’, ‘keni’); ?>
</div>
<p><?php printf( __(‘Back to <a href="%1$s">%2$s</a>’,'keni’), get_bloginfo(‘url’), get_bloginfo(‘name’)); ?></p>

<?php endif; ?>

</div>
<!–▲メインコンテンツ–>

<!–▽:sidebar.phpを編集、またはWP管理画面のウィジェットで編集–>
<?php get_sidebar(); ?>
<!–△:sidebar.phpを編集、またはWP管理画面のウィジェットで編集–>

これで、最新記事の表示が消えますので、
divタグなどHTMLを使って、サイト風に仕上げる事が出来ます。

最新情報もすべて消したい場合は、

最新情報もすべて消したい場合ですが、
その上にある<!–最新情報–>～<!–/最新情報–>までのソースを消す事で
最新情報の一覧も消すことが出来ます。

<!–最新情報–>
<h2><?php _e(‘Latest Info’,'keni’) ;?></h2>
<div class="contents">
<dl class="news">
<?php newposts_icon_keni(5,0,0,"year"); ?>
</dl>
<!–ソーシャルブックマーク–>
<p class="al-r"><a class="m5-r" href="javascript:window.location=’http://b.hatena.ne.jp/add?mode=confirm&amp;title=’+escape(document.title)+’&amp;url=’+escape(location.href);"><img src=http://b.hatena.ne.jp/images/entry.gif
～～～～
ソース省略
～～～～
alt="このエントリーを含むはてなブックマーク" style="border:0;vertical-alt="Yahoo!ブックマークに登録" style="border:none" /></a><script type="text/javascript">document.write("<img alt=’ブックマーク数’ src=’http://num.bookmarks.yahoo.co.jp/image/small/"+location.href+"’ />");
</script></p>
<!–/ソーシャルブックマーク–>
</div>
<!–/最新情報—>

これで、最新情報も消すことが出来ます。

以上

賢威カスタマイズ トップページをブログ風からサイト風へ変更する
でした＾＾

Similar Posts:

• 賢威カスタマイズ 記事の下に｢あわせて読みたい関連記事｣を設置する
• 賢威カスタマイズ　ウイジェット以外のサイドバー編集方法
• 賢威カスタマイズ　トップページにFacebookのLikeBoxを設置する方法
• 賢威　記事省略「この投稿の続きを読む」の表示を変更する
• 賢威カスタマイズ　コメント送信ボタンの横にランキングバナーを表示する
• 賢威カスタマイズ　サイドバーに「人気記事ランキング」を追加する方法

通常コメント欄を使わない場合は、
WordPressの機能の１つで、固定ページ機能を使う事でも出来ますが、

固定ページでは記事が独立してしまいますので
管理が面倒な場合のコメント欄やトラックバック機能を消してしまいましょう。

賢威カスタマイズ コメント欄やトラックバック機能を消す方法

賢威以外でも、WordPressや多くのテンプレートやブログでは、
コメント欄やトラックバック機能が搭載されています。

ブログ風では無く、webサイトのように使いたい場合は、
どうしてもコメント欄などが邪魔になりますので、
その場合に消す方法をご説明します。

通常WordPressでは、コメント使わない場合は、
固定ページ機能を使うことも可能です。

この機能を使う事でコメント欄の無い記事を書くことが出来ますが、
記事１つ１つが独立して記事になり管理が面倒になります。

⇒WordPressの「投稿記事」と「固定ページ」の違いはこちら

そのため固定ページを使わずに、
コメント欄やトラックバック機能を消す方法をご紹介します。

コメント欄やトラックバック機能を消す方法

WordPressの場合は、
ログイン後⇒ダッシュボード⇒外観⇒テーマ編集と進みます。

右側の一覧か『コメント (comments.php)』をクリックします。

次にコメント (comments.php)に書かれているソースを全部消して下さい。

必ずメモ帳などにバックアップを取ってから実行してくださいね＾＾

これでファイルの更新を行うと、
コメント欄やトラックバック機能が綺麗に消えていると思います＾＾

これはPHPに変更を加えるカスタムですので、
出来るだけ固定ページを使用して構成しましょう＾＾

以上
賢威カスタマイズ コメント欄やトラックバック機能を消す方法
でした。

Similar Posts:

• 賢威カスタマイズ 記事の下に｢あわせて読みたい関連記事｣を設置する
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• 賢威+WordPressのテンプレート設定は「テーマの編集」から
• 賢威カスタマイズ　コメント送信ボタンの横にランキングバナーを表示する
• 賢威　記事省略「この投稿の続きを読む」の表示を変更する
• 賢威カスタマイズ　トップページにFacebookのLikeBoxを設置する方法

賢威の場合は、ソースが複雑で一部のプラグインが正しく表示出来ません。
WordPress3.1以上から搭載されたカスタムメニューも対応しておらず、
表示させるには少し苦労が必要になります。

そのための改善策として、いくつか回避方法はありますが、
今回はプラグインを使った対応方法をご説明します。

賢威での表示系プラグインの表示バグを修正する方法

賢威5.0で、カスタムメニューや一部の表示系プラグインを使用する場合に、
賢威のソースが複雑なために起こる、表示崩れを修正する方法を説明します。

本来の方法としては、ウイジェットを使わずに、
テーマ編集からsidebar.phpに直接ソースを記入する事で解決出来ますが、
HTMLが苦手な方のためにプラグインでの対処方法をご説明します。

Exec-PHPプラグインを導入する

ウイジェット内でPHPを実行出来るプラグインを導入します。

WordPressのダッシュボードより
プラグインの新規追加をクリックします。

検索で「Exec-PHP」と入れて検索します。

検索結果に表示されますので、
「今すぐインストール」をクリックして、インストールを完了させてください。

次にダッシュボードのユーザーから
あなたのプロフィールをクリックします。

プロフィールの一番下にある「Exec-PHP Settings」に
チェックを入れて適用させてください。

これでウイジェットでPHPの使用が可能になりました。

人気記事ランキング「Popular Posts」（表示系プラグイン）を導入

次に、サイドバーに表示させたいプラグインをインストールします。
今回は、人気記事ランキングを表示する「Popular Posts」を導入します。

Popular Postsのインストール方法は省略しますので、
インストール方法をしりたい方は、下記URLを参照ください。
WordPressに人気記事ランキングを表示するプラグイン-その２『Popular Posts』

無事にPopular Postsのインストールが終わると、
ウイジェットの一覧に「Popular Posts+」が表示されます。

本来のテンプレートだと、
このウイジェットをサイドバーにドラックすると表示出来ますが、
賢威では下記のように表示が崩れてしまいます。

こちらを使用ぜずに、
テキストに直接Popular Postsのphpを記入する事で
この表示崩れを修正できます。

人気記事ランキングプラグインのPopular Postsの場合は、

<?php popular_posts(); ?>

関連記事一覧を表示するプラグインsimilar postsの場合は、

 <?php similar_posts(); ?>

WordPressの3.1以降のカスタムカテゴリの場合は、

<?php wp_nav_menu( array('menu_class' => 'side-menu', 'container' => '' )); ?>

これで表示崩れは解決出来ましたが、

まだ少しおかしいですね・・・

賢威のサイドバーの場合は、

<ul class="side-menu">～</ul>タグでデザインを表示しているため、

Popular Posts側に入れて指定する必要があります。

ダッシュボードの設定よりPopular Postsをクリックします。

Outputタブをクリックして、タグを指定します。

これで保存してください。

これで無事に、

表示崩れが修正されていると思います。

注意ですがプラグインによっては、

親切で自動で表示される物がありphpがわからないものがあります。

その場合は賢威では使用する事ができませんので専用phpを探してくださいね。

以上

賢威カスタマイズ サイドバーに「人気記事ランキング」を追加する方法

でした。

Similar Posts:

• 賢威カスタマイズ　ウイジェット以外のサイドバー編集方法
• 賢威+WordPressならサイドバーはウイジェットで楽々設置！
• 賢威カスタマイズ　フッター回りのリンク整理方法
• 賢威カスタマイズ 記事の下に｢あわせて読みたい関連記事｣を設置する
• 賢威カスタマイズ　フッターにリンク集を配置する方法
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する

賢威の場合は、デフォルト画像より少し大きな画像を入れると
下に画像が伸びてしまい窮屈になります。

画像が大きすぎるとグローバルメニューと重なってしまう事がありますので、
この画像の高さを調整して中央に表示させます。

賢威カスタマイズ ヘッダー画像の高さ調節方法

それでは、方法をご説明して言います。

WordPressの場合は、
ログイン後⇒ダッシュボード⇒外観⇒テーマ編集と進みます。

中のスタイルシートを選択して
cool-whiteg12.css（クール版の場合）をクリックします。

※テンプレートによって名前が違います。
テンプレ名ーカラー/カラム数.cssになりますので、
ご確認ください。

/*——————————————————–
ヘッダー
——————————————————–*/

項目よりやや下のにある。

/*●ヘッダーロゴ*/
#header-logo{
    position: absolute;
    top: 27px;
}

/*IE6対策*/
* html #header-logo{ top: 20px; }

/*IE7対策*/
*+html #header-logo{ top: 20px; }

こちらのソースの修正を加えます。

top: 27px;の部分の数字を少なくすると、画像が上に上がります。
反対に数字を大きくすると、画像が下がります。

※注意
テンプレートの種類によっては、
ブラウザー別対策を行っている場合もありますので、
上で引いた数と同じだけ引いて表示します。

/*IE6対策*/
* html #header-logo{ top: 20px; }

/*IE7対策*/
*+html #header-logo{ top: 20px; }

【変更例】

/*●ヘッダーロゴ*/
#header-logo{
position: absolute;
top: 15px;
}

/*IE6対策*/
* html #header-logo{ top: 8px; }

/*IE7対策*/
*+html #header-logo{ top: 8px; }

このような感じになると調整完了です。

保存をして、ヘッダー画像を確認すると
下記のように変更されているはずです。

以上
賢威カスタマイズ ヘッダー画像の高さ調節方法
でした。

Similar Posts:

• 賢威 タイトル画像入れ替えてヘッダー部分の作成しよう
• 賢威テンプレートheadタグ部分の作成
• 賢威カスタマイズ　フッター回りのリンク整理方法
• 賢威 ヘッダー画像（メインイメージ）の変更方法
• 賢威 グローバルメニューの登録と表示方法
• 賢威　スタイルシートの文字装飾タグ一覧

アドレス部分にプロフィールを配置して運営サイトのリストやリンク集を置くことで
内部リンクや外部リンクアップにつながります。

賢威カスタマイズ フッターにリンク集や運営サイトリンクを配置する方法

それでは、方法をご説明して言います。

WordPressの場合は、
ログイン後⇒ダッシュボード⇒外観⇒テーマ編集と進みます。

中のスタイルシートを選択して
フッター (footer.php)をクリックします。

その中に、下記のようなソースがあるのを確認します。

<!–アドレスエリア–>
<div id="area01">
<h3>Address</h3>
<div class="access">
<p><img src="<?php bloginfo(‘template_url’); ?>/images/address-image.gif" alt="イメージ画像" width="169" height="99" /></p>
<p>〒111-1111<br />
京都府京都市テスト町11-11<br />
電話番号：075-111-1111 / FAX：075-111-1111</p>
<p class="accessmap"><a href="<?php bloginfo(‘url’); ?>/access-map/">アクセスマップ</a></p>
</div>
</div>
<!–/アドレスエリア—>

この<!–アドレスエリア–>～<!–/アドレスエリア—>の中の表示させたい場所に
フッター用リストタグ（下記）を挿入します。

<h3>リンク集</h3>
<div class="footer-menu m20-b clearfix">
<ul>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
</ul>
</div>

このように挿入例に従って設置してみてください。

【挿入例】

<!–アドレスエリア–>
<div id="area01">
<h3>Address</h3>
<div class="access">
<p><img src="<?php bloginfo(‘template_url’); ?>/images/address-image.gif" alt="イメージ画像" width="169" height="99" /></p>
<p>〒111-1111<br />
京都府京都市テスト町11-11<br />
電話番号：075-111-1111 / FAX：075-111-1111</p>
<p class="accessmap"><a href="<?php bloginfo(‘url’); ?>/access-map/">アクセスマップ</a></p>
</div>

<h3>リンク集</h3>
<div class="footer-menu m20-b clearfix">
<ul>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
</ul>
</div>

</div>
<!–/アドレスエリア—>

そうすると、下記画像のようにリンク集が設置されます。

Address部分との間のスペースを開けたい場合は、

通常に配置した場合は、１行で設置されるため窮屈な感じになってます。
賢威は、これにマージンタグを加える事でスペーズを開ける事が出来ます。

先ほど挿入したリストタグの見出し３（H3 ）部分にスペースを開けるように指示します

<h3>リンク集</h3>
<div class="footer-menu m20-b clearfix">
<ul>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
</ul>
</div>

<h3>リンク集</h3>
↓
<h3 class="m30-t">運営サイト</h3>

h3タグにマージンタグを設定してスペースを開けます。
※0/10/20/30/40/50/60で調整が出来ます。

参考
賢威 スタイルシートの文字装飾タグ一覧

そうすると隙間が空きました＾＾

以上
賢威カスタマイズ フッターにリンク集を配置する方法
でした。

Similar Posts:

• 賢威 フッター部分（footer.php）の設定方法
• 賢威カスタマイズ　フッター回りのリンク整理方法
• 賢威 ヘッダー画像（メインイメージ）の変更方法
• 賢威カスタマイズ　ウイジェット以外のサイドバー編集方法
• 賢威 タイトル画像入れ替えてヘッダー部分の作成しよう
• 賢威で記事を書く前に覚えたい、よく使うHTMLタグ

WordPressで記事を作成するには、
ログインしてブラウザー上から作成する必要があります。

どこからでも記事が書ける分便利ですが、
ネット環境によって様々なトラブルのリスクもあります。

Windows Live Writer（以下Writer）を使うことで、
オフライン（パソコン上）で記事を作成、管理してアップロードを行うことができます。

WordPressが苦手とする、
フォントサイズの変更や2行以上の改行も簡単に出来てしまい
WordPressを使う場合には是非Writerをオススメします＾＾

それでは、Writerの画像の挿入と編集方法について説明します。

Windows Live Writer使い方ナビ

1. Windows Live Writerの使い方（インストールと初期設定）
2. Windows Live Writerの使い方（全体部分の説明）
3. Windows Live Writerの使い方（記事の書き方）
4. Windows Live Writerの使い方（画像の挿入と編集方法） ←今ココ

Windows Live Writerの画像の挿入

それでは、writerの画像の挿入方法について説明します。

ホームタブからも挿入する事が出来るのですが、
もう１つ便利な方法があり、

追加したい画像をドラックドロップで追加出来ます！！
これ非常に便利ですよ！！

Windows Live Writerの画像の編集方法

それでは、画像の編集方法についてご説明します。

画像を追加した後に、画像をクリックした時だけ

上部のタブに｢画像ツール 形式｣タブが表示されます。
ここから画像の編集が可能になります。

画像ツール 形式タブ

画像ツール 形式タブの主な機能をご紹介します。

サイズ

追加した画像のサイズを指定できます。
小/中/大の他に、細かいサイズ指定も出来ます。

トリミング

トリミング設定を行うと画像の切り抜きが出来ます。

画像スタイル

回転

このように画像に回転や傾きを付ける事が出来ます。

画像の伜線

画像の伜線スタイルを簡単に設定できます。

このように簡単に画像パターンが設定できます。

画像の効果

画像に色を変更したり、シャープにするなど、
簡単な写真加工が可能です。

明るさやコントラストの変更や画像に透かしを入れることも出来ます。

プロパティー

画像にリンクを入れる場合に使います。

リンク先の設定

リンクURL例

ソース画像：画像が元サイズで拡大表示されます。

webアドレス：別のサイトのリンクなどを設定する場合に追加します。

リンクなし：画像がクリック出来なくなります。

代替えテキスト

画像にマウスを当てた時に表示される、
代替えテキスト（画像のalt属性）の設定ができます。

以上
Windows Live Writerの使い方（画像の挿入と編集方法）

でした。

Windows Live Writer動画マニュアル

Windows Live Writerの詳しい使い方に関しては、
きょんちさんが詳しい解説と動画マニュアルのレポートを作っていますので
是非こちらも参考にしてみてください。

⇒Windows Live Writerの使い方レポート

Similar Posts:

• Windows Live Writerの使い方（記事の書き方）
• Windows Live Writerの使い方（インストールと初期設定）
• Windows Live Writerの使い方（全体部分の説明）
• Windowslivewriterで賢威専用文字装飾タグを登録する方法
• 賢威インストール前のWordPress初期設定
• WordPressのプロフィール設定と変更方法

WordPressで記事を作成するには、
ログインしてブラウザー上から作成する必要があります。

どこからでも記事が書ける分便利ですが、
ネット環境によって様々なトラブルのリスクもあります。

Windows Live Writer（以下Writer）を使うことで、
オフライン（パソコン上）で記事を作成、管理してアップロードを行うことができます。

WordPressが苦手とする、
フォントサイズの変更や2行以上の改行も簡単に出来てしまい
WordPressを使う場合には是非Writerをオススメします＾＾

それでは、Writerの記事の書き方について説明します。

Windows Live Writer使い方ナビ

1. Windows Live Writerの使い方（インストールと初期設定）
2. Windows Live Writerの使い方（全体部分の説明）
3. Windows Live Writerの使い方（記事の書き方）←今ココ
4. Windows Live Writerの使い方（画像の挿入と編集方法）

Windows Live Writerで記事の書き方

Windows Live Writerで記事の書き方をご説明します。

記事作成には、｢ホーム｣タブと｢挿入｣タブを主に使います。
基本的には｢ホーム｣タブがメインで｢挿入｣タブがサブ的な要素として使います。

ホームタブ

ホームタブの主な機能をご紹介します。

投稿

複数アカウントを登録した場合は、
こちらからどのブログに投稿するか設定できます。
｢投稿｣をクリックする事で、ブログへ記事が投稿されます。

フォント・段落

フォントの変更やフォントサイズの変更が出来ます。

10.4フォントサイズの調整ができます。

12フォントサイズの調整ができます。

18フォントサイズの調整ができます。

リストタグを使う場合に使用します。

・リストタグ
・リストタグ
・リストタグ

1.リストタグ
2.リストタグ
3.リストタグ

引用タグ、他の記事や他の文章を引用した場合に使うタグです。

文章の右揃え、中央揃え、左揃えを指定出来ます。

ＨＴＭＬのスタイル

見出し１～６の設定ができます。

クリックすると登録されている見出し１～６の表示が可能です。

リンク

パイパーリンクを押すことで、リンクの設定が出来ます。

アンカーテキストやポップアップ設定、nofollowタグの作成も出来ます。

挿入タブ

次に挿入タブの主な機能をご紹介します。

区切り線

水平線は<hr />の挿入が出来ます。

改行のクリアは、テキストの折り返しを防ぐために、画像の後ろに挿入します。

記事の分割は＜Moreタグ＞を挿入します。

表（テーブル）

テーブルを挿入できます。
WordPressでは記事投稿でテーブルの設定ができないので重宝します。

メディア

画像については、次の記事で説明します。
画像の他にも、動画や地図(Bing地図のみ)、記事タグや絵文字の挿入が可能です。

動画については、
パソコン上からの動画の取り込みやyoutubeなどの表示が可能です。

以上
Windows Live Writerの使い方（記事の書き方）
でした。

Windows Live Writer動画マニュアル

Windows Live Writerの詳しい使い方に関しては、
きょんちさんが詳しい解説と動画マニュアルのレポートを作っていますので
是非こちらも参考にしてみてください。

⇒Windows Live Writerの使い方レポート

Similar Posts:

• Windows Live Writerの使い方（インストールと初期設定）
• Windows Live Writerの使い方（全体部分の説明）
• Windows Live Writerの使い方（画像の挿入と編集方法）
• Windowslivewriterで賢威専用文字装飾タグを登録する方法
• プラグインでWordPressをカスタマイズする！
• 賢威 フッター部分（footer.php）の設定方法

WordPressで記事を作成するには、
ログインしてブラウザー上から作成する必要があります。

どこからでも記事が書ける分便利ですが、
ネット環境によって様々なトラブルのリスクもあります。

Windows Live Writer（以下Writer）を使うことで、
オフライン（パソコン上）で記事を作成、管理してアップロードを行うことができます。

WordPressが苦手とする、
フォントサイズの変更や2行以上の改行も簡単に出来てしまい
WordPressを使う場合には是非Writerをオススメします＾＾

それでは、Writerの全体部分についてご説明します。

Windows Live Writer使い方ナビ

1. Windows Live Writerの使い方（インストールと初期設定）
2. Windows Live Writerの使い方（全体部分の説明） ←今ココ
3. Windows Live Writerの使い方（記事の書き方）
4. Windows Live Writerの使い方（画像の挿入と編集方法）

Windows Live Writerの特徴

それでは、Windows Live Writerの全体部分について説明します。

Windows Live Writerの最大の特徴は、
アカウント登録したブログのレイアウトやデザインそのままの状態で
パソコン上で記事の作成が出来ます。

プレビュー状態と言うか、
ブログに直接記事を書いている間隔で作成出来ます！！

Windows Live Writerを起動するとわかりますが、
上とサイドにナゾの空白が出てきます。

これは登録したブログのデザインを忠実に再現しており、
ヘッダーとサイドバーの部分が白紙に表示されて
記事部分だけが表示されている形になります。

ブログイメージそのままのデザインで記事が書けるので、
アップロード後に修正する必要が無くなるので大幅に記事作成が楽になりますよ＾＾

Windows Live Writerで記事の管理

新しい記事(N)

WordPressに対応しており、Writer上から記事の作成や固定ページの作成ができます。
writerに慣れると、WordPress側で記事投稿する事が無くなるぐらい全部出来ます。

管理パネル⇒新しい記事から、記事か固定ページか選択できます。

最近の記事を開く(R)

最近の記事を開くから▶にマウスを当てる事で最近の記事の取得が出来ます。

そして、
｢最近の記事を開く｣部分をクリックすると、管理ブログの一覧が開きます。

ここから過去の記事や固定ページなどの一覧を取得する事ができます。
記事検索も使えるので、過去記事を取得して修正するのも簡単に出来ます＾＾

保存(S)

作成した記事や作成途中の記事などを
パソコンやWordPress上に一時保存する事ができます。

保存した記事を開く場合は、｢ローカルの下書きを開く｣で開きます。

Windows Live Writerブログテーマ更新

Writerはブログアカウント登録時に
WordPressのテンプレート側のスタイルシートなどを読み込みます。

テンプレートを変更したり、
新しくスタイルシートで装飾設定を追加した場合には、

｢ブログアカウント｣から｢テーマの更新｣を行い、
再度ブログ情報を適用させて更新します。

更新を行うことで、ブログ側のデザイン情報を常に適用させる事が出来ます＾＾

WordPressの投稿画面との比較

Windows Live WriterはWordPressの基本機能は搭載されているので、
すべてWriter側で行うことが出来ます。

ただ表示名が違うので、比較とご説明します。

新規投稿画面

WordPressの投稿画面

↓

Windows Live Writerの投稿画面

WordPressでは出来ない、
フォントサイズの変更や2行以上の改行が出来るようになります。

ビジュアルエディタとHTMLエディタ

WordPress側のエディタ

↓

Windows Live Writerの投稿画面

writerでも直接HTMLソースの編集が可能です。
賢威のスタイルシートセレクタなどの調整も出来ます。

公開・抜粋・トラックバック・スラッグ設定

writerで右上にある、すべて表示をクリックして｢記事のプロパティ｣をから設定できます。

カテゴリー

Writerの上部バーよりカテゴリーの設定ができます。
writer上からでも新規でカテゴリーを追加出来ます。

ただカテゴリーのスラッグは設定出来ないと言う難点もあります。
自前にカテゴリは追加しておきましょう。

カテゴリを追加した場合は、
↑のボタンで最新に更新できます。

投稿のタグ

タグクラウドの追加も出来ます。
半角カンマで仕切ることで、追加する事が出来ます。

例：｢アフィリエイト,SEO,賢威,writer｣

こちらもカテゴリー同様にスラッグはつけれませんでの、
タグ登録後にスラッグを登録しましょう＾＾

これでWindows Live Writerの全体の基礎的な説明は終わりです。

Writerは、この他にもかなり細かい設定が可能なので
使いこなして見てください＾＾

以上
Windows Live Writerの使い方（全体部分の説明）
でした。

Windows Live Writer動画マニュアル

Windows Live Writerの詳しい使い方に関しては、
きょんちさんが詳しい解説と動画マニュアルのレポートを作っていますので
是非こちらも参考にしてみてください。

⇒Windows Live Writerの使い方レポート

Similar Posts:

• Windows Live Writerの使い方（記事の書き方）
• Windows Live Writerの使い方（インストールと初期設定）
• Windowslivewriterで賢威専用文字装飾タグを登録する方法
• Windows Live Writerの使い方（画像の挿入と編集方法）
• WordPressで記事投稿 HTMLエディタの使い方
• 賢威+WordPressならサイドバーはウイジェットで楽々設置！

WordPressで記事を作成するには、
ログインしてブラウザー上から作成する必要があります。

どこからでも記事が書ける分便利ですが、
ネット環境によって様々なトラブルのリスクもあります。

Windows Live Writer（以下Writer）を使うことで、
オフライン（パソコン上）で記事を作成、管理してアップロードを行うことができます。

WordPressが苦手とする、
フォントサイズの変更や2行以上の改行も簡単に出来てしまい
WordPressを使う場合には是非Writerをオススメします＾＾

それでは、Writerのインストールについてご説明します。

Windows Live Writer使い方ナビ

1. Windows Live Writerの使い方（インストールと初期設定）←今ココ
2. Windows Live Writerの使い方（全体部分の説明）
3. Windows Live Writerの使い方（記事の書き方）
4. Windows Live Writerの使い方（画像の挿入と編集方法）

Windows Live Writerインストール方法

WordPressの設定

Writerインストール前のWordPressの設定方法

WordPressダッシュボード⇒設定⇒投稿設定をクリックします。

XML-RPCにチェックを入れてください。
これでWordPress側の設定は完了です＾＾

Windows Live Writerインストール

Windows Live Writer 2011

マイクロソフトのWindows Liveからダウンロードします(無料)

うまくダウンロード出来ない場合

Windows Liveはマイクロソフトのフリーソフトなので、
パソコン購入時に最初からインストールされている場合もあります。
パソコンのスタートメニューを開き、
Windows Liveと言うソフトが入ってないか見てください。
入っていればインストールする必要はありません＾＾

またWindows Live Writer2011は、Windows Vista以上専用ツールです。
WindowsXPをお使いお方は、XP用をお使いください＾＾
⇒Windows XP 用 Windows Live Writer

Writerをダウンロード後に通常にインストールを行って下さい。

インストール後にWriterのアイコンが見つからない場合は、
スタートメニューからWindows Liveフォルダの中にインストールされています。

Windows Live Writer初期設定

それでは、早速Writerを起動してみましょう＾＾

Writerを起動すると、
初回に限り下記のようなアカウント追加画面が表示されます。

WordPressにチェックを入れて次へをクリックして下さい。

もしアカウント表示画面が表示されなかった場合は、

上の画像の①⇒②⇒③⇒④⇒⑤の手順でアカウント作成画面まで進みます。

ブログの情報を入力します。
ブログのURLとWordPressのユーザーIDとパスワードを入力して
｢次へ｣をクリックします。

自動的に、WordPress側の情報を読み取って設定してくれます。

これでWindows Live Writer初期設定が完了です。

複数のブログを管理している場合は、
上記の場所から追加したブログを切り替えます。

不具合なのか登録したブログが、ここに反映されない場合があります。
その場合はWriterを一度閉じて再度立ち上げると適用されてます。

Pingサーバーの設定

Windows Live Writerは、
通常のブログ同様に記事作成時に一緒にPing送信する事が可能です。

記事のインデックスを早めるSEO対策にもなりますので、
しっかりと入力しておきましょう。

Ping送信先については、こちらを参考に登録してください＾＾
⇒Ping送信先一覧！！現在稼働確認済ベスト25

以上
Windows Live Writerの使い方（インストールと初期設定）
でした。

Windows Live Writer動画マニュアル

Windows Live Writerの詳しい使い方に関しては、
きょんちさんが詳しい解説と動画マニュアルのレポートを作っていますので
是非こちらも参考にしてみてください。

⇒Windows Live Writerの使い方レポート

Similar Posts:

• Windows Live Writerの使い方（記事の書き方）
• Windows Live Writerの使い方（全体部分の説明）
• Windows Live Writerの使い方（画像の挿入と編集方法）
• Windowslivewriterで賢威専用文字装飾タグを登録する方法
• 賢威で記事投稿前にPing送信を設定しておこう！
• 賢威 グローバルメニューの登録と表示方法

コメントの設定方法

コメントを管理する前に、
コメントの設定がまだの方は、

こちらを参考にコメントの設定を行ってください＾＾
⇒WordPressのコメント関連の設定

コメントの管理方法

WordPressダッシュボード⇒コメントから編集が可能です。

コメントがあった場合、
｢コメント｣のバーの横に数字でコメント数を教えてくれます。

コメントがあった場合に一覧表示されますので、
この場所からコメントを管理できます。

コメント一覧で
黄色（クリーム色）は認証前のコメントでブログに表示されていません。
白色は既に認証したコメントでブログに表示されています。

各コメントにマウスを当てる事で、
そのコメントを認証、編集、削除など可能です。

認証待ち、認証済み、スパム、削除したコメントは↑で分類されており、
コメントの状況により管理する事が出来ます。

WordPressも完璧では無いので、
たまにですが普通の方がスパム欄に飛ばされている場合があります。

これだとせっかくコメントを頂いても、
スパムに入ってしまうと気がつかないので
定期的に除いて予期せぬ人がスパム認定を受けていないか管理しましょう＾＾

スパム解除する事で、通常のコメント欄に反映されます。
後は認証してあげるとコメントが表示されます。

以上
WordPressのコメントの管理方法

でした＾＾

Similar Posts:

• WordPressのカテゴリー作成方法
• WordPressの記事投稿画面の説明
• WordPressで記事投稿 ビジュアルエディタの使い方
• WordPressで記事投稿時の画像アップロードと編集方法
• WordPressタグクラウドの編集と管理方法
• WordPressで記事投稿 HTMLエディタの使い方

タグクラウドの編集と管理方法

それでは、タグの編集や管理についてご説明します。

WordPressダッシュボード⇒投稿⇒投稿タグをクリックします。

右側より今まで追加したタグの編集を行うことが出来ます。
クイック編集をクリックして、スラッグなどの表示が可能です。

あらかじめ新規タグの追加が可能です。

投稿画面などで追加したタグをここで一元管理可能です。

以上
WordPressタグクラウドの編集と管理方法

でした＾＾

Similar Posts:

• WordPressのカテゴリー作成方法
• WordPressの記事投稿画面の説明
• WordPressで記事投稿 ビジュアルエディタの使い方
• WordPressで記事投稿時の画像アップロードと編集方法
• WordPressのコメントの管理方法
• WordPressで記事投稿 HTMLエディタの使い方

通常の画像アップロードは、メディアから行いますが、
新規投稿画面からも画像の取り込みが可能です。

画像のアップロード方法

アップロード/挿入から｢画像の追加｣ボタンをクリックします。

自分のPCや他のサイトの画像URL、
既に取り込んだ画像などから取り込み可能です。

ファイルの選択をクリックして、
アップロードしたい画像を選択します。

]

タイトルと代替テキストを入力します。
その他は特に空白でOKです。

このように画像が挿入されて完成です。

画像の編集方法

挿入した画像をクリックすると、
画像の編集ボタンが表示されますのでクリックします。

画像の編集と詳細設定が可能です。

画像の編集

サイズ

挿入した画像の130％～60％まで画像サイズの変更が出来ます。

配置

タイトル：像のtitle属性
代替テキスト：画像のalt属性（代替テキスト）
キャプション：画像の下にルビが表示されます。

リンクURL

挿入した画像をクリックした時の動作を選択出来ます。

リンクURL例

なし：画像がクリック出来なくなります。

現在のリンク：画像が元サイズで拡大表示されます。

画像にリンクを張る：別のサイトのリンクなどを設定する場合に追加します。

詳細設定

サイズ

挿入した画像の130％～60％まで画像サイズの変更が出来ます。

CSSクラスを設定できます。

画像の回り込みをさせる場合に（賢威の場合）

・leftと入れると画像の右側に文字を回り込ませる事が出来ます。
・rightと入れると画像の左側に文字を回り込ませる事が出来ます。

以上
WordPressで記事投稿時の画像アップロードと編集方法

でした。

Similar Posts:

• 賢威カスタマイズ　フッター回りのリンク整理方法
• 賢威　スタイルシートの文字装飾タグ一覧
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• WordPressのカテゴリー作成方法
• WordPressの記事投稿画面の説明
• WordPressで記事投稿 ビジュアルエディタの使い方

HTMLエディタでは、HTMLタグなどソースが使えます。
ビジュアルエディターで作り最終調整で使う方や
HTMLエディタのみで作る方など様々です。

HTMLエディタの使い方

HTMLエディタの使い方について説明します。
記事投稿は、ダッシュボード⇒投稿⇒新規追加をクリックします。

• <strong>太字</strong>
• <em>斜体</em>
• <a href=”http://google.com”>リンク</a>
• <blockquote>引用</blockquote>
• <del datetime=”2010-01-29T04:45:10+00:00″>打ち消し線</del>
• <ins datetime=”2010-01-29T04:45:10+00:00″>下線</ins>
• <img src=”画像URL” alt=”sample” />
• <ul>リスト</ul>
• <ol>番号付きリスト</ol>
• <code>ソースコードを表示</code>
• <!–more–>投稿に区切り線を挿入

コンパネには基本タグしか登録されていません。
その他のタグは自分で調べて使用可能です。

WordPress上ではフォントサイズなどの変更が出来ないため、
HTMLタグでサイズ変更するか、賢威のCSS文字装飾タグを使って変更します。

参考
⇒賢威 スタイルシートの文字装飾タグ一覧

また、WordPressは自動<p>タグ調整を行うため、
<p>や<br />タグを連続しても２行以上の改行が出来ません。
そのためのまとめ記事がこちらです。

参考
⇒WordPressで連続改行させる方法まとめ

フォントサイズや、改行の問題など
WordPressは記事投稿は、初心者には少々難しいので、
当サイトでは、フリーソフトのWindowslivewriterの使用をオススメします。

⇒Windowslivewriterの使い方

以上
WordPressで記事投稿 HTMLエディタの使い方

でした。

Similar Posts:

• 賢威で記事を書く前に覚えたい、よく使うHTMLタグ
• WordPressで記事投稿 ビジュアルエディタの使い方
• WordPressの記事投稿画面の説明
• WordPressのカテゴリー作成方法
• WordPressで記事投稿時の画像アップロードと編集方法
• WordPressタグクラウドの編集と管理方法

ビジュアルエディタの特徴はワード間隔で記事の作成をする事が出来ます。

ビジュアルエディタの使い方

ビジュアルエディタの使い方について説明します。
記事投稿は、ダッシュボード⇒投稿⇒新規追加をクリックします。

↑の｢アドバンスツールバー｣を押すことで、
設定項目が増えて２段になります。

管理パネルの説明

｢B｣ 大文字に使います
｢I｣ 斜め文字に使います。
｢ABC｣ 打ち消し線に使います。

リストタグを使う場合に使用します。

・リストタグ
・リストタグ
・リストタグ

1.リストタグ
2.リストタグ
3.リストタグ

引用タグ、他の記事や他の文章を引用した場合に使うタグです。

文章の右揃え、中央揃え、左揃えを指定出来ます。

リンクを作るタグです。

Moreタグの挿入

｢続きはこちら⇒｣など、
記事の分割をする時に使います。

スペルチェックとフルスクリーン

段落タグです。見出し１～見出し６までが使用可能です。

文字の色を指定出来ます。

特殊記号

インデント

ああああ
ああああ
ああああ

文字を右にずらしたり出来ます。

１つ元に戻す
１つに進む

ビジュアルエディタでは、
フォントサイズの変更やスタイルシートセレクタが設定できません。
その場合は、HTMLエディタを使用して調整する必要があります。

以上
WordPressで記事投稿 ビジュアルエディタの使い方
でした。

Similar Posts:

• WordPressで記事投稿 HTMLエディタの使い方
• WordPressの記事投稿画面の説明
• 賢威で記事を書く前に覚えたい、よく使うHTMLタグ
• 賢威　スタイルシートの文字装飾タグ一覧
• WordPressのカテゴリー作成方法
• WordPressで記事投稿時の画像アップロードと編集方法

投稿画面の説明

WordPressで記事作成方法について説明します。

WordPressダッシュボード⇒投稿⇒新規追加をクリックします。

右上の｢表示オプション｣をクリックする事で、
新規投稿画面に表示する管理パネルを表示させる事が出来ます。

①記事タイトル

こちらが記事のタイトルになります。
記事にとってもっとも重要な場所なのでしっかりと考えてタイトルを付けましょう。

②記事の内容

WordPressではビジュアルエディタとHTMLエディタの２つを
使って記事の作成が出来ます。
記事投稿については後でご説明します。

③投稿時間の設定

この場所で様々な設定が可能です。

・ステータス
書きかけの記事を下書きとして保存したりする事が可能です。

・公開状況
通常は一般公開ですが、
限定のパスワード設定記事も簡単に作成できます。

・すぐに公開する
通常は、何も変更する必要はありませんが、
公開時間を未来に設定する事で投稿予約も可能です。
投稿時間を戻す事で表示の順番も変えることが出来ます。

④カテゴリー

カテゴリーにチェックを入れることで簡単に記事の分類ができます。

カテゴリーの作成方法については、こちらを参照ください
⇒WordPressのカテゴリー作成方法

⑤スラッグ

英数字で付ける事で、
記事名でパーマリンク設定を行っている場合に
URLスラッグの日本語化防ぎます。

パーマリンクについてはこちらを参照ください
⇒WordPressのパーマリンクを設定してURLを静的サイト化させる

⑥タグクラウド

投稿のタグを付ける事で、
カテゴリーとは別に記事の分類が出来ます。
使い方は、記事中の主なキーワードを抜粋して追加していきます。

ウイジェットで｢タグクラウド｣を追加する事で
このようにキーワードが配置され、
このサイトの重要キーワードが表示されます。

⑦記事の説明

記事の簡単な説明を記載します。

検索エンジンに記載される説明箇所にもなるので
必ず記入しておきましょう。

⑧トラックバック送信

トラックバック送信がある場合に、
相手のトラックバックURLをこの場所に挿入します。

Similar Posts:

• WordPressで記事投稿 HTMLエディタの使い方
• WordPressで記事投稿 ビジュアルエディタの使い方
• 賢威で記事を書く前に覚えたい、よく使うHTMLタグ
• 賢威　スタイルシートの文字装飾タグ一覧
• 賢威+WordPressならサイドバーはウイジェットで楽々設置！
• WordPressで画像をサーバーにアップロードする方法

WordPressのビジュアルエディタやHTML上でも、
文字のカラー変更やフォントサイズの変更も可能ですが、

しっかりとスタイルシートのタグを使うことで、
HTML構文が見やすくなり検索エンジンがクロールしやすくなると言われています。

賢威スタイルシート装飾タグ一覧

賢威タグ一覧を説明します。
基本的なHTMLタグについては、

⇒賢威で記事を書く前に覚えたい、よく使うHTMLタグ

を参考にしてください。

<p>タグと<span>タグの違い

Pタグとspanタグについては、
良く質問されますのでご説明しておきます

<p class="red">賢威スタイルシート装飾タグ一覧</p>
↓
賢威スタイルシート装飾タグ一覧

このように1行すべてを赤文字にしたい場合は、Pにredクラスを適用させますが、
一部の文字だけ赤文字にしたい場合にspnaタグを使用します。

<p>賢威<span class="red">スタイルシート</span>装飾タグ一覧</p>
↓
賢威スタイルシート装飾タグ一覧

このように、Pタグとspanタグを使い分けます。

応用合わせ技テクニック

スタイルシートのタグは、合わせて複数表示が可能です。

例：太字+赤文字+フォントサイズ大の場合
<p class="b red big2">半角で複数登録が可能です。<p/>

このように半角で仕切る事で複数のタグ登録が可能です。

文字のブロックからの距離や行間の設定

<p class="m○○-○">は、
上下右左など文字と文字の間隔の距離を設定できます。

○○は0/10/20/30/40/50/60ピクセルで指定可能です。
○はt/l/r/bで指定可能です。

<p class="m○○-t"> 上からのマージン距離
<p class="m○○-l"> 左からのマージン距離
<p class="m○○-r"> 右からのマージン距離
<p class="m○○-b"> 下からのマージン距離

画像の回り込み指定

<img src="画像URL" alt="代替えテキスト" width="サイズ" height="サイズ" class="right or left " />

right か left 属性を付ける事で、画像の回り込みが出来ます。

<class="left >属性を付ける事で画像の右側に文字を回り込ませる事が出来ます。

<class="right>属性を付ける事で画像の左側に文字を回り込ませる事が出来ます。

以上
賢威 スタイルシートの文字装飾タグ一覧

でした＾＾

Similar Posts:

• 賢威で記事を書く前に覚えたい、よく使うHTMLタグ
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• 賢威カスタマイズ　フッター回りのリンク整理方法
• 賢威カスタマイズ 記事の下に｢あわせて読みたい関連記事｣を設置する
• 賢威カスタマイズ　コメント送信ボタンの横にランキングバナーを表示する
• 賢威カスタマイズ　フッターにリンク集を配置する方法

WordPressなどブログは、記事が時系列に並び過去の記事が
読みにくくなります。

必ずカテゴリー設定を行い、分類分けしておきます。

だいたいの設定では、カテゴリー名が自動的にURLになるため、
後で変更するとSEO的にもあまり良くありません。

必ず記事を作った際には、カテゴリーに分類する事が重要です。

カテゴリーの作成方法

カテゴリーの作成方法についてご説明します。

WordPressダッシュボード⇒投稿⇒カテゴリーをクリックします。

カテゴリー名

名前にカテゴリー名を入力します。

スラッグ

次にスラッグ名を入力します。

スラッグとは、WordPressの場合は、
カテゴリー名が自動的にURLになるように設定されています。

とても便利な機能なんですが、
ほとんどの場合はカテゴリー名は日本語になるために、

↑のように日本語が混じったおかしなURL（日本語URL）になります。

そのために、カテゴリー名にスラッグを英数字で付ける事で、
URLの英数字に変換してくれます。

親カテゴリー

↓の画像のようにカテゴリーに階層を付ける事ができます。

階層の表示方法は、
カテゴリー設定から親カテゴリーと子カテゴリーを設定を行います。

次に外観⇒ウイジェットの｢カテゴリー｣から階層を表示にチェックを入れます。

これで階層表示可能です。

カテゴリーの表示方法

サイドバーにカテゴリーを表示する方法をご説明します。

WordPressダッシュボード⇒外観⇒ウイジェットをクリックします。

利用出来るウイジェットから｢カテゴリー｣をマウスでドラックドロップして
サイドバーに追加します。

WordPressのカテゴリーは、名前順に並んでしまうので、
プラグインを使ってカテゴリーの表示を固定します。

カテゴリーの並び替え方法
⇒賢威WordPress版でのカテゴリー内のリスト並び替え方法

作成記事をカテゴリーに分類する方法

記事をカテゴリーに分類する方法をご説明します。

記事作成時、右側のカテゴリーにチェックを入れるだけで自動的に分類分けされます。

ここから新規でカテゴリーの作成も可能ですが、
スラッグなどの設定もあるので出来るだけ自前にカテゴリーを
作成しておきましょう＾＾

このように綺麗にカテゴリーを作る事が出来ます。

以上
WordPressのカテゴリー作成方法でした。

Similar Posts:

• WordPressの記事投稿画面の説明
• WordPressで記事投稿 ビジュアルエディタの使い方
• WordPressで記事投稿時の画像アップロードと編集方法
• WordPressタグクラウドの編集と管理方法
• WordPressのコメントの管理方法
• WordPressで記事投稿 HTMLエディタの使い方

２つを簡単に説明すると

投稿記事 ⇒ アーカイブ所属になり時系列で表示されます。
固定ページ⇒ どこにも属さない単独ページとして表示されます。

「投稿記事」と「固定ページ」の違い

それでは２つの違いと使い方について説明します。

投稿記事

投稿記事を作成する事で、必ずアーカイブ所属になり時系列に表示されます。
通常のブログとして使う場合はこちらを使い記事の管理がしやすいです。
ブログ記事扱いなのでコメント欄やトラックバック欄があります。

ダッシュボード⇒投稿⇒新規追加より作成します。

固定ページ

固定ページは、どこにも属さない単独ページが出来ます。
そのため、自分でリンクを作る必要がありますが、プロフィールや紹介記事など
トップページから直接リンクさせたい時に使います。
また固定ページ扱いなので、コメント欄やトラックバック欄がありません。

ダッシュボード⇒固定ページ⇒新規追加より作成します。

通常の記事は、記事投稿で作り、
トップページからの直接リンクさせたい場合は固定ページを使います。

以上
WordPressの「投稿記事」と「固定ページ」の違い
でした。

Similar Posts:

• 賢威インストール前のWordPress初期設定
• WordPressのプロフィール設定と変更方法
• WordPressの記事一覧の件数を変更する
• WordPressのコメント関連の設定
• WordPressダッシュボード(管理画面)の表示方法の変更
• WordPressの管理パネルにログインする

すべての入り口になりますので、お気に入り追加するなりして覚えておきます。

WordPressにログインする

ログインする方法は３種類ありますので
ご紹介します＾＾

①WordPressの場合、すべての管理パネルの入り口は、
｢http://○○○/wp-admin/｣になります。

②もしくは、サイドバーの｢メタ情報｣からログインします。
※ウイジェットでメタ－情報を外した場合は表示されません。

③WordPressのVer3.11以降は、一度ログインすると、上部に管理バーが表示され、
そこからログインする事でも出来ます。

一番最初は、ログイン前のはずなので、
①か②のどちらかの方法で管理パネルの入り口へ移動します。

ユーザー名とパスワードを入力してログインします。

ログアウトは右上の｢ログアウト｣から可能です。

上段の管理バーを消す方法

WordPressのver3.11から搭載された新機能で
上部管理バーです。

直接ログインや操作ができて便利なのですが、
今まで使って無かった機能なので気持ちが悪いって方もいると思います。

これを従来の方式に戻すには、
ダッシュボード⇒ユーザー⇒あなたのプロフィールをクリックします。

管理バーの表示のチェックを外せば非表示になります。

以上
WordPressの管理パネルにログインする
でした。

Similar Posts:

• WordPressのパーマリンクを設定してURLを静的サイト化させる
• 賢威+WordPressならサイドバーはウイジェットで楽々設置！
• 賢威 ヘッダー画像（メインイメージ）の変更方法
• 賢威で記事を書く前に覚えたい、よく使うHTMLタグ
• 賢威 フッター部分（footer.php）の設定方法
• 賢威 タイトル画像入れ替えてヘッダー部分の作成しよう

Akismetはコメントスパム用プラグインで精度も非常に高いので、
必ず有効にして設定する事をオススメします。

基本的には初回以後の設定は入らず、自動でスパムを振り分けてくれますが、
初回に限りAPIキーの入力が必要になるので方法をご紹介します。

Akismetインストール設定

それでは、Akismetの設定についてご説明します。

Akismetは、WordPress本家のプラグインで使用するには登録が必要になり、
そのためにAPIキーが必要になります。

まずは、APIキーの取得方法からご説明します。

WordPress.com アカウントを取得

WordPress.comよりIDを取得します。

上部にある、｢今すぐ会員登録！｣をクリックします。

ちょっとわかりづらいですが、
ユーザー名の横にある｢signup for just a username｣をクリックします。
こちらを選択する事で入力項目を省略出来ます。

ユーザー名、パスワード、メールアドレスを入力して
登録をクリックします。

登録したメールに、本登録メールが来ますので、
｢アカウントを有効｣をクリックして、本登録してください。

登録したメール宛てに仮登録メールが届くので、
リンクを一度だけクリックして本登録の認証を行います。

メールのリンクをクリックすると、↑のサイトにつながるので、
これで登録完了になります。
もう一度メールを確認すると登録完了メールが来ています。

これで、WordPress.comの登録は終了です。
次に、AkismetのサイトからAPIキーを確認します。

⇒AkismetのAPI確認サイト

こちらに、先ほど登録したメールアドレスを入力してください。

メールの内にAPIキーが書かれているので、
それをコピペしておきます。

それでは、WordPressにログインしてAPIキーの登録を行います。

ダッシュボード⇒プラグイン⇒プラグインをクリックします。
最初から｢Akismet｣がインストールされているので、↑の図のように｢有効化｣します。

プラグインの画面の上部に、｢Akismet API キーを入力｣が表示されますので、
クリックして下さい。

APIキーの入力画面が出来ますので、登録して設定を更新します。

はい、これでAPIキーは登録できました。

これでAkismetの設定は終わりです。
後は自動で協力にスパムコメントを除去してくれます。

除去されたコメントは、

ダッシュボード⇒コメントで管理されており、
再度認証のし直しや完全削除がここで出来ます。

Akismetはプラグインの中でも、
絶対に導入したいプラグインNO1なので確実に設定しておきましょう＾＾

以上
WordPress用スパム対策プラグイン｢Akismet｣のAPIキーの設定方法
でした。

Similar Posts:

• プラグインでWordPressをカスタマイズする！
• 賢威インストール前のWordPress初期設定
• WordPressのプロフィール設定と変更方法
• WordPressの記事一覧の件数を変更する
• WordPressのコメント関連の設定
• WordPressダッシュボード(管理画面)の表示方法の変更

WordPressを使うと、FFFTPなどのアップロードツールが
無くても画像をサーバーにアップロード出来ます。

サイドバーに配置する画像などのアップロードに便利で、
一覧管理も楽々出来ますよ＾＾

メディア設定－画像のアップロード方法

画像をWordPressにアップロードする方法をご説明します。

WordPress⇒ダッシュボード⇒メディアから｢新規追加｣をクリックします。

ファイルを選択から、追加したい画像を選びアップロードします。

下記と通り簡単にWordPressに画像がアップロードされます＾＾
アップロードしたファイルURLと画像サイズを記録しておきましょう。

メディア⇒ライブラリをクリックすると、
今までアップロードした画像の一覧が表示されますので、
サムネイル付きで管理が簡単にできますよ。

WordPressを使うことで、FTPツールを使わなくても
画像をアップロードして管理する事が出来ますよ＾＾

画像イメージタグ<img>の使い方

ウイジェット編でも詳しくご紹介しますが、

先ほどアップロードした画像を、
サイドバーに配置する方法をご紹介します。

ダッシュボード⇒外観⇒ウイジェットをクリックします。

利用出来るウイジェットから、｢テキスト｣を選択して追加します。

｢テキスト｣はHTMLも使えるので、
画像配置やリンク集など、ほとんどをこの｢テキスト｣を使って作成します。

先ほど上記でアップロードしたファイルのURLと画像サイズを使って、
イメージタグを使用してタグを完成させます。

<img src="画像のURL" alt="代替えテキスト" width="横サイズ" height="縦サイズ" />

↓

<img src="http://xserver.afiri.in/wp-content/uploads/2011/04/mamebo.jpg" alt="プロフィール" width="160" height="159" />

このようになります。

記入が出来たら、保存してブログを確認してみます。

確認するとわかりますが、このように画像の表示されています＾＾

以上

WordPressで画像をサーバーにアップロードする方法
でした。

Similar Posts:

• 賢威 フッター部分（footer.php）の設定方法
• 賢威で記事を書く前に覚えたい、よく使うHTMLタグ
• 賢威+WordPressならサイドバーはウイジェットで楽々設置！
• 賢威 ヘッダー画像（メインイメージ）の変更方法
• 賢威 タイトル画像入れ替えてヘッダー部分の作成しよう
• WordPressで記事投稿 HTMLエディタの使い方

このバージョンアップについてご説明します。

WordPressのバージョンアップ方法

WordPressは、不具合の調整や新機能追加を頻繁に行っており、
バージョンアップなどリリースの際には、管理パネルにお知らせが来ます。

ただリリース直後はプラグインが対応していなかったり、
不具合が起こったりする場合がありますので気をつけてください。

0.1以上の大型バージョンアップ（3.1⇒3.2 2.9⇒3.0など）は
特に注意が必要です。

WordPressに慣れてない最初のうちは、
すぐにアップグレードせずに様子を見てバージョンアップしましょう＾＾

ネットで不具合が無いか調べるのも効果的です。

それでは、
WordPressのバージョンアップ方法をご説明します。

ダッシュボード上部から、｢更新してください｣をクリックします。

WordPress○○○-jaを選択します。
必ず｢JA｣を選択しましょう。
それ以外を選択すると、管理パネルが英語などになる場合があります。

｢自動で更新｣をクリックすると自動でバージョンアップは完了します。

以上
WordPressをバージョンアップ方法
でした。

Similar Posts:

• WordPressで画像をサーバーにアップロードする方法
• WordPressのカテゴリー作成方法
• WordPressの記事投稿画面の説明
• WordPressで記事投稿 ビジュアルエディタの使い方
• WordPressで記事投稿時の画像アップロードと編集方法
• WordPressタグクラウドの編集と管理方法

使いやすいように表示方法の変更などをご紹介します。

ダッシュボードの見方

左サイドバーにWordPressの操作パネルが固まっています。
プルダウン式になっており｢▼｣を押すことで、項目が表示されます。

ダッシュボードの表示方法の変更

ダッシュボードの表示項目を変更する事が出来ます

ダッシュボード内の右上にある｢表示オプション｣をクリックします。

この中で、ダッシュボードに表示する項目を選択出来ます。

ダッシュボードのカラーを変更する

WordPressには、ダッシュボードのカラーが2色用意されており変更する事が出来ます。

ダッシュボード⇒ユーザーから｢あなたのプロフィール｣を選択します。

管理画面の配色から好きな方にチェックを入れる事で変更出来ます。

以上
WordPressダッシュボード(管理画面)の表示方法の変更
でした。

Similar Posts:

• 賢威インストール前のWordPress初期設定
• WordPressのプロフィール設定と変更方法
• WordPressの記事一覧の件数を変更する
• WordPressのコメント関連の設定
• WordPressの管理パネルにログインする
• WordPressの「投稿記事」と「固定ページ」の違い

ブログの便利機能の１つにコメント機能があります。
コミニケーションや被リンクなど様々な活用方法あり、
どんどん活用して行きましょう＾＾

コメントを受け付けるように設定する

コメントの投稿を受け付けるかどうかを設定出来ます。

WordPress⇒ダッシュボード⇒設定からディスカッションをクリックします。

ディスカッションの設定から

・他のブログからのリンク通知を許可する (ピンバックとトラックバック)
・新しい投稿へのコメントを許可する

にチェックを入れます。

（通常はデフォルトでONになってます。）

コメント投稿時に名前をアドレスを必須にする

相手からのコメントをもらうときに、
名前とアドレスを入力必須にするか設定出来ます。

同じくディスカッションの設定から

・名前とメールアドレスの入力を必須にする

にチェックを入れます。

設定が完了すると、コメント欄の名前の横に（必須）と付きます。

コメントを階層表示にしてコメント返信出来るように設定する

コメントに最大10階層まで付ける事で、
コメントの返信出来るように設定出来ます。

設定⇒ディスカッションから

・｢コメント｢○｣階層までのスレッド (入れ子) 形式にする｣

にチェックを入れます。

これでコメント欄に返信ボタンが追加され
階層表示が可能になります。（最大10階層まで）

コメントの認証方法の設定

コメントをもらった時のアクションを設定出来ます。

同じくディスカッションの設定します。

自分宛のメール通知

コメントをもらった時や初めての人からコメントもらって保留状態の時に
自分宛にメールを送るかの設定です。

コメント表示条件

コメントをもらった時に、毎回手動で認証が必要な場合は、
｢管理者の承認を常に必要とする ｣にチェックを入れます。

一度認証された人は、自動で表示される場合は、
｢すでに承認されたコメントの投稿者のコメントを許可｣にチェックを入れます。 

コメントモデレーション

スパム対策など、何個以上リンクがある場合は認証待ちにするかを設定出来ます。

コメントにアバターを表示する

コメント欄にアバターを表示できように設定します。

設定方法は簡単で、
同じくディスカッションの設定から、アバタを表示するにチェックを入れて、
デフォルトアバターを選択すればOKです。

アバターの登録方法は、
Gravatarアバターに登録されている人が自動的に表示されます。

Gravatarアバター登録方法はこちら
⇒WordPressの自分や相手のコメント欄にアバター画像を表示する方法

以上
WordPressのコメント関連の管理の設定
でした。

Similar Posts:

• 賢威インストール前のWordPress初期設定
• WordPressのプロフィール設定と変更方法
• WordPressの記事一覧の件数を変更する
• WordPressダッシュボード(管理画面)の表示方法の変更
• WordPressの管理パネルにログインする
• WordPressの「投稿記事」と「固定ページ」の違い

こちらの設定方法をご紹介します。

投稿一覧の記事の件数の変更方法

WordPress⇒ダッシュボード⇒設定から表示設定をクリックします。

表示設定から「1ページに表示する最大投稿数」の変更を行います。

これで、表示数の変更が出来ます。
ただ、ここでの設定は、一覧ページすべて（トップページ、アーカイブ）共通です。

個別に記事の表示数を変更したい場合は、
WordPressプラグインなどを使用する必要があります。

プラグイン参考記事
WordPressで記事表示件数を変更するプラグイン『Custom Query String Reloaded』

以上

WordPressの記事一覧の件数を変更するでした＾＾

Similar Posts:

• 賢威インストール前のWordPress初期設定
• WordPressのプロフィール設定と変更方法
• WordPressのコメント関連の設定
• WordPressダッシュボード(管理画面)の表示方法の変更
• WordPressの管理パネルにログインする
• WordPressの「投稿記事」と「固定ページ」の違い

この設定を行うことでセキュリティー向上にもなります。
しっかりと設定しましょう。

プロフィールの設定方法

ブログに表示される名前を変更する。

WordPressのデフォルト設定では、
ログインIDがブログのニックネームになっています。

WordPressにログインする際に使う、
IDとpasswordのうち半分が流失する形になるので
セキュリティー上良くないです。

設定方法は、

WordPress⇒ダッシュボード⇒ユーザーより「あなたのプロフィール」をクリックします。

ニックネームに、表示したい名前を入力します。
次に、ブログ上の表示名を、設定したニックネームに変更します。

これでログインIDを隠すことが出来ます。

メールアドレスを変更する

同じプロフィール内にある、メールアドレスを変更します。

メールアドレスは、コメントの認証など様々な情報を送信してくれるので、
必ず設定しましょう＾＾

以上
WordPressのプロフィール設定と変更方法でした。

Similar Posts:

• 賢威インストール前のWordPress初期設定
• WordPressの記事一覧の件数を変更する
• WordPressのコメント関連の設定
• WordPressダッシュボード(管理画面)の表示方法の変更
• WordPressの管理パネルにログインする
• WordPressの「投稿記事」と「固定ページ」の違い

HTMLタグには様々な物があり目を背けたくなりますが・・
記事の作成やサイトのカスタマイズ程度なら実際に使うタグはそんなに多く無いです。

基礎だけでも覚えるだけでブログ作成の幅は一気に広がりますよ＾＾

これだけは覚えておきたいよく使うHTMLタグをご紹介します。
最後に賢威で使用出来るスタイルシートの一部をご紹介します。

よく使うHTMLタグ一覧

見出しタグ <h○>

h1からh6まであり、見出しタグとして使われています。
↑の「よく使うHTMLタグ一覧」と言うのは見出し3のタグを使用しています。

一般的な使い方としては、
h1は、サイトタイトル（ページ中1個）
h2は、記事タイトル（ページ中１～2個まで）
h3は、記事中の見出しタイトル（特に制限なし）
h4以降は、区切り見出しとして使用します。（特に制限なし）

使い方

<h3>よく使うHTMLタグ一覧</h3>

段落タグ<p>と改行タグ<br />

文字を書く上でもっとも重要なタグです。
文字と文字の段落を表します。
段落Pと改行brは、非常に似ていますが、使い方が違います。

Pは、文章が終わり次の行へを意味します。

段落<p>タグ例：

<p>むかしむかしあるところに、おじいさんとおばあさんがいました。</p>

<p>おじいさんは、村へ芝刈りに、おばあさんは山へ選択に行きました。</p>

brは、文字の折り返しを意味しており、
デザイン上２段などにしたい場合に使用します。

改行＜br /＞タグ例：

<p>むかしむかしあるところに、＜br /＞
おじいさんとおばあさんがいました。</p>

<p>おじいさんは、村へ芝刈りに、＜br /＞
おばあさんは山へ選択に行きました。</p>

このように使います。

強調ダグ（太字）<strong> 強調ダグ（斜体）<em>

文字を太文字にしたり、斜体にする場合に使用します。

<em>強調ダグ(斜体)</em>

<strong>強調ダグ(文字の太字)</strong>

リストタグ<ul>と<ol>

箇条書きにする場合はリストタグを使用します。
リストタグは、一般的に２種類あり使い分け出来ます。

点の場合は、
・桃太郎
・金太郎
・浦島太郎

<ul> 
<li>桃太郎</li> 
<li>金太郎</li>
<li>浦島太郎</li>
</ul>

数字の場合は、
1.桃太郎
2.金太郎
3.浦島太郎

<ol>
<li>桃太郎</li> 
<li>金太郎</li>
<li>浦島太郎</li>
</ol>

このようなソースになります。

その他の文字タグ

打ち消し線
<del>打ち消し線</del>

下線
<u>下線</u>

引用タグ
<blockquote> 
<p>引用文を入れます。</p>
</blockquote>

リンクタグ<a>

リンクを作るためのタグです。
<a href="リンクさせたいURL">アンカーテキスト</a>

例：ヤフーへのリンクを作る

<a href="http://www.yahoo.co.jp/">ヤフーへはこちらから</a>

ヤフーへはこちらから

このようになります。

応用として、別窓（ページを新しいブラウザーで開かせる）方法として
target="_blankタグを挿入します。

この場合は、

<a href="http://www.yahoo.co.jp/" target="_blank">ヤフーへはこちらから</a>

これで別窓で開きます。

画像イメージタグ<img>

画像を表示されるためのタグです。
※画像は自前にアップロードが必要です。
画像のアップロードについては、メディア設定でご紹介します。

イメージ挿入タグ
<img src=="画像のURL" alt="画像の名前" width="画像横サイズ" height="縦サイズ" />

例として、
http://kasegoo.info/wp-content/themes/wpdaidai/images/ws000657.jpg
にアップロードした画像を貼り付ける方法をご紹介します。

その場合はタグ

<img src="http://kasegoo.info/wp-content/themes/wpdaidai/images/ws000657.jpg" alt="プロフィール" width="160" height="159" />

このようになります。

画像とリンクの合わせ技

リンクボタンなどを作る方法をご紹介します。

お問い合わせボタンの画像をクリックすると、
お問い合わせページへ飛ぶようにリンクを張ります。

お問い合わせページ
http://kasegoo.info/kmail/

ボタンの画像は、
http://seo.siyo.org/wp-content/themes/buru3/images/otiawase.png
にアップロードしています。

<a href="http://kasegoo.info/kmail/">
<img src="http://seo.siyo.org/wp-content/themes/buru3/images/otiawase.png" alt="お問い合わせ" width="160" height="50" />

このようになります。

賢威ユーザー限定 基本装飾タグ一覧

賢威には、あらかじめスタイルシートが組み込まれており、
文字の装飾を行うことが出来ます。

スタイルシートとは、簡単に言うと装飾を加える特殊タグになります。

例えば<p>タグにスタイルを加える事で、
赤字にしたり、蛍光色にしたり、変化を加える事が出来ます。

使い方は、タグの中にクラス要素を入れて指定すればOKです。

<タグ class="スタイル">～～</タグ>

このようにクラススタイルを加えます。

■文字の色を変える

<p class="red">で囲むとこの色になります。</p>

<p class="blue">で囲むとこの色になります。</p>

<p class="green">で囲むとこの色になります。</p>

<p class="yellow">で囲むとこの色になります。</p>

<p class="navy">で囲むとこの色になります。</p>

<p class="orange">で囲むとこの色になります。</p>

<p class="pink">で囲むとこの色になります。</p>

<p class="purple">で囲むとこの色になります。</p>

<p class="olive">で囲むとこの色になります。</p>

<p class="lime">で囲むとこの色になります。</p>

<p class="black">で囲むとこの色になります。</p>

<p class="blue">で囲むとこの色になります。</p>

<p class="gray">で囲むとこの色になります。</p>

ハイライト色

<span class="box-yellow">で囲むとこの色になります。</p>

<span class="box-aqua">で囲むとこの色になります。</p>

<span class="box-gray">で囲むとこの色になります。</p>

<span class="box-red">で囲むとこの色になります。</p>

フォントサイズを変える

<p class="small">で囲むとこの文字サイズ</p>

<p class="big">で囲むとこの文字サイズ</p>

<p class="f20em">こんな大きさや</p>

<p class="f24pt">も可能</p>

■文字の表示位置を変える

<p class="al-c">文字の中央寄せ</p>

<p class="al-r">文字の横位置右寄せ</p>

<p class="al-l">横位置左寄せ</p>

画像の中央や右寄せも可能です。

<p class="al-c">

<p class="al-r">

<p class="al-l">

賢威のスタイルシートについては、別記事でしっかりご紹介します。
基本的なHTMLタグを覚えておくだけでも、サイト作成の幅は一気に広がりますよ＾＾

以上
賢威で記事を書く前に覚えたい、よく使うHTMLタグ
でした。Similar Posts:

• 賢威　スタイルシートの文字装飾タグ一覧
• 賢威+WordPressならサイドバーはウイジェットで楽々設置！
• WordPressで記事投稿 HTMLエディタの使い方
• 賢威 フッター部分（footer.php）の設定方法
• 賢威 タイトル画像入れ替えてヘッダー部分の作成しよう
• 賢威 ヘッダー画像（メインイメージ）の変更方法

WordPressを使うとプラグインを使うことで
メールアドレスなどを表に出すこと無く、簡単にお問い合わせや
メールフォームを作成出来ます。

Contact Form 7インストールする

WordPressにお問い合わせフォームを設置する方法ですが、
プラグインを使うことで簡単にできます。

ダッシュボードにログイン後に
プラグイン⇒新規追加をクリックします。

検索から｢Contact Form 7｣を検索します。

たまにバージョン８や似たような名前がありますが、
別のプラグインになりますので、必ずContact Form 7を探します。

インストールして、プラグインの有効化を行います。

有効化が完了すると、
ダッシュボードの｢設定｣の下に｢お問い合わせ｣が
出来ていますのでクリックします。

メールフォームの設定方法

お問い合わせをクリックすると下記カスタムフォームが出てきます。

カスタムしない場合は、デフォルト設定でも問題ありませんので、
固定ページに

を貼り付ければ、すぐに使用も可能です。

設定画面の説明ですが、
上の部分がフォームの部分で下の部分が送られてくるメール部分です。

①②③で書きましたが、
フォームやメールでタグが連動しており、
例えば、名前は[your-name] 、本文は[your-message]です。

｢宛先｣の部分も変更する事で送信先の
メールアドレスを変更出来ます。

メールフォームの作り方

詳しい使い方は、
Contact Form 7公式サイト（日本語）を参考にください。

ここでは、簡単な使い方を説明します。

例えば新しくテキスト項目を追加するとします。

フォームの横のタグの作成をクリックしてテキスト項目をクリックします。

新しくタグが発行されます。
サイズや行数などの調整は、公式サイトから確認くださいね＾＾

フォームに新しいタグを追加します。

メッセージ本文にも新しく追加します。

これでカスタマイズは完成ですので
保存をクリックしておきます。

[contact-form-7]のタグを
固定ページなどに貼り付けると、作ったフォームが表示されます。

はい、これでフォームが完成です＾＾

以上
WordPressでお問い合わせページを作成する
でした＾＾

Similar Posts:

• 賢威カスタマイズ　コメント送信ボタンの横にランキングバナーを表示する
• 賢威　記事省略「この投稿の続きを読む」の表示を変更する
• 賢威カスタマイズ　コメント欄やトラックバック機能を消す方法
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• 賢威カスタマイズ 記事の下に｢あわせて読みたい関連記事｣を設置する
• 賢威カスタマイズ　トップページにFacebookのLikeBoxを設置する方法

これはWordPressの仕様変更が原因で起こっている可能性が大きく
その対処方法をご紹介します。

WordPressのページが突然表示されない！！

この頃、賢威購入者の方やWordPress関連からの問い合わせで、
異常に多くなった質問がこれです！！

何で増えたんだろう？って思ってましたが、
自分のWordPressサイトを見てビックリ！
私も404で表示されなくなってました。。

はっきりとした原因がわかりませんが、おそらくWordPress3.1へ
バージョンアップした時に若干仕様が変わったのだと思います。。

今までは旧設定で問題無かったので、
この部分を詳しく書いている記事は少なく、記事の捉え方１つで
今回のエラー現象が起こります。。

今回のエラー原因は名付けて、
｢2重パーマリンク設定｣です(´･ω･`)

WordPressの設定でパーマリンク設定をしたのに、
上書きパーマリンクを設定したことによる原因です。

私が作った賢威設定マニュアルでもパーマリンク設定を紹介しているので
ここでエラーの人は多くなってしまったと思います。。

パーマリンク対処方法

それでは、対処方法をご紹介します

多くのWordPressの紹介ブログでもそうですが、
パーマリンクの設定方法に、

・｢/%category%/%post_id%｣
・「/%category%/%postname%/」

を紹介しています。

あ、この設定が間違っているわけじゃ無く、
SEO上、この↑の設定正しいので、ここは問題ありません。

ただ、ここでパーマリンクで設定した場合は、
記事やページ部分でもパーマリンクの設定をすると、

2重パーマリンク設定になるので、
スラッグ設定で対処する必要があります。

ページや記事作成時に、下記の場所に、
URLを設定してしまうと2重パーマリンク扱いになります。

ここはパーマリンクでは無く、
スラッグで対応します。

編集画面にスラッグが表示されていない場合、
①の表示オプションをクリックします。

チェック項目が出てくるので、②のスラッグにチェックを入れます。

これで編集画面の下部か右側に｢スラッグ｣項目が出てきますので
ここに設定したいURLを記入します。

もしくは、

記事や固定ページの一覧表示からマウスを当てて、
クイック編集からでもスラッグを付ける事が出来ます。

これで、更新を押して適用させると↓のように
パーマリンクでは無く、スラッグがつきます。
こうなっていれば、設定完了です。

これで無事リンクが表示されたと思います＾＾

以上
パーマリンク設定後に記事やページが404エラーで表示されない
でした＾＾

Similar Posts:

• WordPressのパーマリンクを設定してURLを静的サイト化させる
• 賢威カスタマイズ 記事の下に｢あわせて読みたい関連記事｣を設置する
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• 賢威WordPress版でのカテゴリー内のリスト並び替え方法
• 賢威カスタマイズ　コメント送信ボタンの横にランキングバナーを表示する
• 賢威カスタマイズ　ウイジェット以外のサイドバー編集方法

今回感じになります＾＾
↓（マウスを当てて見てくださいね）

実験①

実験②
賢威レビューとカスタマイズサポート

マウスオーバー時のへこませテクニック

WordPressだと、ダッシッボート⇒外観⇒テーマ編集から
中にあるスタイルシートからcool-whiteg○.cssを選択します。

※テンプレートデザインによって名前が違うので
テーマ名が付いたそれっぽい名前の物を探します。

スタイルシートを開き、最下部（場所はどこでも良いです。）に
各部分ごとにソースを追加すれば完成です。

各パーツのへこませたい部分を選んでソースを加えてあげれば出来ます。

/*–ヘッダー—*/
#header a:hover{ position:relative;top:2px ;left:2px; }

/*–コンテンツ—*/
#main-contents a:hover{ position:relative;top:2px ;left:2px; }

/*–グローバルメニュー—*/
#global-menu a:hover{ position:relative;top:2px ;left:2px; }

/*–パンくず—*/
#breadcrumbs a:hover{ position:relative;top:2px ;left:2px; }

/*–サイドバー2カラムの場合—*/
#sidebar a:hover{ position:relative;top:2px ;left:2px; }

/*–サイドバー3カラム時の左側—*/
#sidebar1 a:hover{ position:relative;top:2px ;left:2px; }

/*–サイドバー3カラム時の右側—*/
#sidebar2 a:hover{ position:relative;top:2px ;left:2px; }

/*–フッター—*/
#footer a:hover{ position:relative;top:2px ;left:2px; }

それでは、
実際に例を上げて説明します＾＾

例：
3カラム（このブログ）で
コンテンツ部分とサイドバー部分とフッター部分だけをへこませたい場合

/*–コンテンツ—*/
#main-contents a:hover{ position:relative;top:2px ;left:2px; }
/*–サイドバー3カラム時の左側—*/
#sidebar1 a:hover{ position:relative;top:2px ;left:2px; }
/*–サイドバー3カラム時の右側—*/
#sidebar2 a:hover{ position:relative;top:2px ;left:2px; }
/*–フッター—*/
#footer a:hover{ position:relative;top:2px ;left:2px; }

図のように、選んでソースに追加します。
追加したら、ファイル更新で自分のブログを確認してみてくださいね＾＾

以上
賢威カスタマイズ リンクをボタンを押した感じにへこませたい
でした。

Similar Posts:

関連する投稿はありません。

運営歴が長くなったり、カテゴリーが増えると、
下に長く伸びてしまいかっこわるいので、
この調整方法を説明します。

賢威カスタマイズ フッター回りのリンク整理方法

それでは説明します。
説明と言っても非常に簡単で、CSSにソースを加えればOKです＾＾

WordPressの場合は、
ログイン後⇒ダッシュボード⇒外観⇒テーマ編集と進みます。

中のスタイルシートを選択して
cool-whiteg○.cssをクリックします。

最下部付近にある

/*——————————————————–
フッター
——————————————————–*/
を探して、もう少し下にある

/*●フッターメニュー*/
div.footer-menu{ padding: 0; }

div.footer-menu ul{
    float: left;
    margin-right: 30px;
}
* html .footer-menu ul{ width: 247px; }

div.footer-menu li{
    display: block;
    margin-bottom: 5px;
    padding-left: 17px;
    background: url(images/icon/icon-footernavi.png) left 5px no-repeat;
}

のソース部分を探します。

div.footer-menu liの部分に2行のソースを追加します。

div.footer-menu li{
display: block;
margin-bottom: 5px;
padding-left: 17px;
background: url(images/icon/icon-footernavi.png) left 5px no-repeat;
float: left;
width: 260px;
}

1行目 float: left; を追加
2行目 width: 200～260px; ぐらいで追加

これを加えればOKです。
下記のように2列になったら成功です＾＾

以上
賢威カスタマイズ フッター回りのリンク整理方法
でした＾＾

Similar Posts:

• 賢威カスタマイズ　フッターにリンク集を配置する方法
• 賢威 フッター部分（footer.php）の設定方法
• 賢威　スタイルシートの文字装飾タグ一覧
• 賢威カスタマイズ　ヘッダー画像の高さ調節方法
• 賢威カスタマイズ　ウイジェット以外のサイドバー編集方法
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する

賢威テンプレートは、
最初からフォントサイズを大きめに、行間を広めに設定しています。

デフォルト状態でも十分に見やすいですが、
ブログスタイルによって調整したい方もいると思います。

そこでフォントサイズと行間の調整方法をご紹介します。

WordPressの場合は、
ログインしてダッシュボードから⇒外観⇒テーマ編集をクリックします。

中のスタイルシートを選択して
cool-whiteg○.cssをクリックします。

中央にある、

/*——————————————————–
メインコンテンツ（本文）
——————————————————–*/

のすぐ下にある、下記ソースを探します。

#main-contents{
    float: right;
    width: 570px;
    font-size: 1.4em;
}

フォントサイズの変更方法

まずはフォントサイズの変更について説明します。

この#main-contentsに書かれている、
「font-size: 1.4em;｣を変更します。

1.0em~2.0emの範囲ぐらいで調整してあげると良いでしょう＾＾
数を小さくすると、文字も小さくなります。

文字と文字の行間設定方法

次に行間の設定方法についてご説明します。

行間とは、タグで言うと＜br /＞の幅で、
｢shift+enter｣で行う文字の折り返しを指します。

行間についてですが、main-contents内に
新しくソースを加えて上げる必要があります。

line-height: 1.5; ←これを新しく挿入して加えます。

#main-contents{
    float: right;
    width: 570px;
    font-size: 1.4em;
}

↓↓↓↓

#main-contents{
    float: right;
    width: 570px;
    font-size: 1.4em;
line-height: 1.5;
}

これで行間の調節が可能になります。
デフォルト状態だとたぶん1.5ぐらいなので、
1.5を目安に上下させて上げれば良いと思います。

改行幅の設定方法

最後に改行幅の設定方法をご紹介します。

行間と違い改行幅はタグで言うと<p>～</p>を指します。
キーボード操作だと｢enter｣を押す、文字の2行目になります。

改行幅の設定方法は#main-contentsでは無く、
もう少し下にある下記部分で設定出来ます。

/*●コンテンツ*/
#main-contents .contents{
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #666;
    color: #333;
}

#main-contents .contents p{
    margin-bottom: 30px;
    padding: 0 10px;
}

この部分の
｢margin-bottom: 30px;｣
を調整します。

これで改行幅を調整出来ます。

今回は本文（コンテンツ部分）の調整について説明しました。
賢威は場所場所によって、フォントサイズや行間の変更が可能です。
サイドバーやフッターなど該当部分を見つける事で同じカスタムが出来ます。

以上
賢威カスタマイズ 本文の行間や改行幅、フォントサイズの変更方法
でした。

Similar Posts:

関連する投稿はありません。

両方の方法でも特に違いはありませんが、
賢威で対応していないプラグインやサイドバーの細かい調整を行いたい場合は、直接テーマ編集から行います。

ウイジェット方式以外のサイドバー編集方法

賢威WordPress版のウイジェット以外のサイドバーの
編集方法についてご説明します。

サイドバーについては基礎編として
ウイジェットで作成する方法がありますが

過去参考記事
⇒賢威+WordPressならサイドバーはウイジェットで楽々設置！

テーマ編集の「sidebar-.php」に
直接書き込む事で作成する方法もあります。

通常はウイジェットでの作成方法で問題ありませんが、
賢威で対応していないプラグインやサイドバーの細かい調整を
行いたい場合に便利な方法になります。

まずは、サイドバー「sidebar.php」とウイジェットの
関係についてご説明します。

賢威のWordPress版では、
サイドバーは、ウイジェットを優先して表示させます。

ウイジェットに残っている限り、「sidebar.php」は隠れた状態になります。 

sidebar-.phpを適用される方法

ダッシュボード⇒外観⇒ウイジェットから全て外します。

全部外すと自動的に「sidebar-.php」が適用される仕組みですので

ダッシュボード⇒テーマ編集から
「sidebar.php」に記入することで表示されます。

ウイジェットを使わずに、sidebar.phpに直接記入する最大の利点は
PHPやHTMLの使用が可能なので 細かい調整が出来ます。

サイドバーのソース図ですが、
下記を参考にするとわかりやすいと思います。

サイドバーのソース図ですが、
下記を参考にするとわかりやすいと思います。

<h3>ここがタイトル</h3>
<div class="contents">
<p>ここにテキストが入ります。</p>
</div>

必ず<div class="contents">から始まり</div>で閉じてください。
これでい１つの枠ができあがります。

ウイジェットと同じ機能で自動で表示できるPHP一覧

ダッシュボードで調整可能なWordPress純正PHPをご紹介します。

■カスタムメニュー

<!--カスタムメニュー-->
<h3>アクセスアップカテゴリー</h3>
<div class="contents">
<?php wp_nav_menu( array('menu_class' => 'side-menu', 'container' => '' )); ?>
</div>
<!--/カスタムメニュー—>

■カテゴリー

<!–カテゴリー–>
<h3>カテゴリー</h3>
<div class="contents">
<ul class="side-menu">
<?php wp_list_categories('title_li='); ?>
</ul>
</div>
<!—/カテゴリー—>

■検索エリア

<!--検索エリア-->
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<!--/検索エリア—>

■最近のエントリーエリア

<!--最近のエントリーエリア-->
<h3>最近のエントリー</h3>
<div class="menu">
<ul class="side-menu">
<?php echo add_classend_keni(wp_get_archives('type=postbypost&echo=0&limit=10', 10)); ?>
</ul>
</div>
<!--/最近のエントリーエリア-->

■RSS

<!--RSS-->
<div class="contents">
<p class="rss">
<a href="<?php bloginfo('rss2_url'); ?>">このサイトのRSSフィードを購読</a>
</p>
</div>
<!--/RSS-->

■アーカイブ

<!--アーカイブエリア-->
<h3>アーカイブ</h3>
<div class="contents">
<ul class="side-menu">
<?php wp_get_archives('show_post_count=0'); ?>
</ul>
</div>
<!--/アーカイブエリア-->

■管理者情報

<!--メタエリア-->
<h3>管理者情報</h3>
<div class="contents">
<ul class="side-menu">
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</div>
<!--/メタエリア-->

■タグクラウド

<h3>タグクラウド</h3>
<div class="menu">
<?php wp_tag_cloud(); ?>
</div>

タグクラウドの細かい設定方法（表示数や表示フォントなど）は

こちらから参照できます。

⇒タグクラウドを表示するwp_tag_cloud()

以上

ウイジェット方式以外のサイドバー編集方法でした。

Similar Posts:

• 賢威カスタマイズ　サイドバーに「人気記事ランキング」を追加する方法
• 賢威+WordPressならサイドバーはウイジェットで楽々設置！
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• 賢威 フッター部分（footer.php）の設定方法
• 賢威WordPress版でのカテゴリー内のリスト並び替え方法
• 賢威カスタマイズ　トップページにFacebookのLikeBoxを設置する方法

ヘッダーロゴのテキストタイプ⇒画像タイプに変更方法

ヘッダーのタイトルロゴの変更方法を説明します。
最初はブログ風でテキストで作成しても、
後から画像タイプに変更したくなる場合もありますね。

その場合の変更方法の説明を行います。
と言っても方法は簡単です。

賢威のテンプレートメーカーから
画像タイプとテキストタイプを用意してHTMLソースを
入れ替えるだけで変更可能です。

WordPress版でご説明しますが、

WordPressダッシュボード⇒外観⇒テーマ編集から
headertext.phpをクリックします。

このheadertext.phpが、ヘッダー部分のPHPパーツです。

<!–▼ヘッダー–>
<div id="header">
<div id="header-in">

<div id="header-logo">
<p id="logo-text"><a href="<?php bloginfo(‘url’); ?>"><?php bloginfo(‘name’); ?></a></p>
</div>
<div id="header-text">
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

</div>
</div>
<!–▲ヘッダー–>

headertext.phpの↑の赤字の部分がヘッダーのタイトル部分になりますので
この部分のソースを入れ替えます。

次にロゴタイプが画像の物のソースを手に入れます。

新たに賢威テンプレートメーカーから画像タイプでテンプレートを作り
テストでインストールして入手してもOKです。

ここからコピペでもいけます＾＾

<!–▼ヘッダー–>
<div id="header">
<div id="header-in">

<div id="header-logo">
<p id="logo-text"><a href="<?php bloginfo(‘url’); ?>"><img src="<?php bloginfo(‘template_url’); ?>/images/common/logo2.gif" width="342" height="84" alt="<?php bloginfo(‘name’); ?>" /></a></p>
</div>
<div id="header-text">
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

</div>
</div>
<!–▲ヘッダー—>

↑がヘッダーロゴ部分が画像タイプのPHPソースです。
赤字をコピーして、

<div id="header-logo">～</div>にコピペして入れ替えます。

これでテキスト⇒画像に変更が出来ます。

ロゴ画像の入れ替え方法については、
こちらを参照してください。
⇒賢威 タイトル画像入れ替えてヘッダー部分の作成しよう

以上
ヘッダーロゴのテキストから画像に変更する方法でした。

Similar Posts:

関連する投稿はありません。

背景色の変更には多くの画像の編集が必要になってきます。
まずはどの場所が賢威テンプレートの画像部分かを説明します。

FFFTPなどを使って階層を確認しておきます。

/レンタルサーバーの階層（wwwなど）/wp-content/themes/wp/images

このimagesにテンプレートの全ての画像が入ってます。

images
┣common 装飾全般の画像
┣icon アイコン画像
┣icon-big 予備のアイコン画像
┣other ブックマークアイコン
┗title         見出し画像

主にテンプレートの装飾関連は、commonとtitleフォルダになります。
最初のうちはわかりやすくするために、
imagesフォルダごとダウンロードしておくとと良いです。

ヘッダー部分の背景色の変更方法について説明します。

まずはヘッダー部分の背景変更からご説明します。

まずはWordPressダッショボード⇒外観⇒テーマ編集から
スタイルシートのcool-browng○.cssをクリックします。

スタイルシートのヘッダー項目までスクロールします。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    position: absolute;
    top: 30px;
    height: 78px;
    background: url(images/common/bg-header.gif) left top repeat-x #222222;
    font-size: 1.2em;
    color: #fff;
}

background: url(images/common/bg-header.gif) left top repeat-x #222222;

↑の部分がヘッダの背景制御部分になります。

次に、イメージが画像を確認します。
commonフォルダからbg-header.gifを探します。

細くてイメージ出来ませんが、↑の画像がヘッダー部分の画像です。

※賢威もそうですが、webサイトでは、
１つの画像を繰り返しリピートさせて表現する方法があります。

この画像を画像加工ソフトで作り替えます。

変更するのは色だけで、
必ず同じサイズで加工してください。

今回は「bg-header2.gif」として保存しました。

画像が完成しましたら、
同じcommonフォルダ内にアップロードします。

次にスタイルシートの部分をアップロードした名前で書き換えます。

background: url(images/common/bg-header2.gif) left top repeat-x #222222;

これでとりあえず背景色が変更されました。

ここで色々と色が合わなくなる場合があるので、
必要に応じてヘッダーの文字色の変更も必要になると思います。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    position: absolute;
    top: 30px;
    height: 78px;
    background: url(images/common/bg-header2.gif) left top repeat-x #222222;
    font-size: 1.2em;
    color: #fff;
}

/*●ヘッダーロゴテキスト*/
#header-logo #logo-text{ font-size: 20pt; }
#header-logo #logo-text a{ text-decoration: underline; }
#header-logo #logo-text a:link{ color: #fff; }
#header-logo #logo-text a:visited{ color: #fff; }
#header-logo #logo-text a:hover{ color: #c60; }
#header-logo #logo-text a:active{ color: #c60; }

#fffの部分の色を変更してください。

色見本はこちらを参考
⇒http://www.colordic.org/

ヘッダーのタイトル画像の変更方法はこちらを参考にしてください⇒http://kasegoo.info/keni/83/

とりあえずこんな感じでヘッダー部分は完成です。

コンテンツ部分の背景色変更方法

次にコンテンツ部分の背景色の変更方法を説明します。

同じcool-browng○.cssのコンテンツ全体部分までスクロールしてください。

/*——————————————————–
コンテンツ全体
——————————————————–*/

#main-image{
    position: absolute;
    top: 146px;/*最上部からの高さの指定*/
    background: url(images/common/bg-topimage.gif) center top repeat #111;
    border-bottom: 1px solid #000;
}

#main{
    padding-top: 336px;/*▲ページ最上部からの距離*/
   background: url(images/common/bg.jpg) repeat #020202;
    border-top: 1px solid #444;
}

background: url(../images/common/bg.jpg) repeat #020202;の部分が

↑の部分がコンテンツ部分の背景制御部分になります。

ヘッダーで説明したのと同じように、bg.jpgを探します

。

この画像を修正して変更したい色に変えます。
これも同じサイズで作成します。

今回はbg2.jpgで作成しました。
画像が完成しましたら、同じcommonフォルダ内にアップロードして、
cool-browng○.cssを書き換えます。

background: url(../images/common/bg2.jpg) repeat #020202;

これで保存します。

これでとりあえず背景画像の色は変わりました。

次に細かい設定に入っていきます。

■パン屑部分のフォント色調整■

パン屑ナビの部分を調整します。

/*——————————————————–
パン屑ナビ
——————————————————–*/

#breadcrumbs{
    position: absolute;
    top: 306px;/*▲ページ最上部からの距離*/
    left: 0;
}

#breadcrumbs li{
    float: left;
    padding: 0 10px 0 15px;
    background: url(images/icon/icon-breadcrumbs.gif) left 5px no-repeat;
    font-size: 1.2em;
    color: #fff;
}

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
中略
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
#breadcrumbs li a:link,
#breadcrumbs li a:visited{ color: #fff; }

#breadcrumbs li a:active,
#breadcrumbs li a:hover{ color: #cc6600; }

#fffがフォントカラーになりますので好きな色に変更します。

■角丸部分の調整

賢威は見出しが角丸になっている画像を使っており、
画像の端と背景色が丁度同じ色で表現されています。

背景色だけを変えると、↑の画像のように背景とのズレが生まれますので
見出し画像の修正を行う必要があります。

画像の場所は、

①bg-sidebar-top.gif
③btn-pagetop_off.gif
④btn-pagetop_on.gif
は、commonフォルダ内にあります。

②bg-contents-h2.gif
は、titleフォルダ内にあります。

各画像を下記のように修正して、アップロードします。

※①～④の画像については、
名前を変更せず同じファイル名として上書き保存してください。

名前を変えるとうまく機能しない可能性があります。

少し作業量が多いですが、
これで背景色の変更方法は完成です。

以上
賢威カスタマイズ クール版の背景色を変える方法でした。

Similar Posts:

関連する投稿はありません。

コンテンツとコンテンツの幅を縮める方法

賢威の中央の記事部分は<div class="contents">で
コンテンツを制御されています。

このコンテンツの幅を変更する事で
次のコンテンツまでの幅を調整出来ます。

まず説明の前に、下記をご覧ください

こちらは、
DIVボックスのコンテンツの関係です。
まずはこちらを覚えておいてください＾＾

次に賢威を見て見ます。

賢威ではこのように表されています。
margin-bottomとpaddingを変更する事で幅や高さを調整出来ます。

WordPressダッショボード⇒外観⇒テーマ編集をクリックします。
cool-whiteg○.cssをクリックします。

中央の

/*——————————————————–
メインコンテンツ（本文）
——————————————————–*/

よりさらに下にある/*●コンテンツ*/を探しましょう。

/*●コンテンツ*/
#main-contents .contents{
   margin-bottom: 20px;
   padding: 20px;
    background-color: #fff;
    border: 1px solid #666;
    color: #333;
}

上の図を参考に、
まずはmargin-bottom: ○pxを変更します。

次に、padding: 20px;を設定します。

ここで注意ですが、
padding:20PXは、縦横全て20px空けるように設定されています。

まずはこれを変更します。

padding: 20px 20px 20px 20px;

まずはこのように変更します。
padding:↑px →px ↓px ←px;
を表します。

/*●コンテンツ*/
#main-contents .contents{
   margin-bottom: 5px;
   padding: 20px 20px 5px 20px;
    background-color: #fff;
    border: 1px solid #666;
    color: #333;
}

このように変更します。
これで無事に幅や高さを縮まっています。

最新情報以外にも全てのコンテンツに適用されます。
個別に変更したい場合は、

#main-contents .contents2などを作成して、
テーマ編集に直接書き込んで変更する事が可能です。

以上
コンテンツとコンテンツの幅を縮める方法でした

Similar Posts:

関連する投稿はありません。

見出しは通常h1～h6まで使用出来ますので、
h5とh6を新しく追加する事も出来ます。

見出し5と６はSEO上ほとんど意味がありませんが、
設定しておくことでWordPressなどエディターで使用する際に
使い勝手が良いので必要であれば追加した方が良いです。

見出し5と見出し6の追加方法

通常の場合は、見出し5.6の設定がされていないので、

h5とh6を表示しても何も起きません。

WordPressダッシュボード⇒外観⇒テーマ編集をクリックして
cool-whiteg3.cssを開きます。

中段中程に、ある見出しの設定部分を探します。

H3が見出し3でH4が見出し4になりますので、
新しく、見出し5と見出し6をその下に記載していきます。

/*H5*/
#main-contents h5{
○○○○: ○○○
○○○○: ○○○
○○○○: ○○○
○○○○: ○○○
}

/*H6*/
#main-contents h6{
○○○○: ○○○
○○○○: ○○○
○○○○: ○○○
○○○○: ○○○
}

を追加してあげるだけで見出し5.6の追加が出来ます。

スタイルシートの設定については、
⇒とほほのスタイルシート入門を参考にして見てください。

スタイルシートの一応代表的な物を上げてみます。

フォント太字   
font-weight: bold;

フォントサイズ
font-size: ○em;

フォントカラー
color: #○○○○○;

テキスト配置
text-align: left / center / right /;

背景色
background-color: #○○○○○;

見出しの枠線
border: ○px solid #333;
border: [線の太さ] [線種] [カラー];

マージンの設定
margin: 1.0em 0 0 0;
margin: [上] [下] [左] [右];

余白の設定
padding: 0.3em 0.3em 10px 10px;
padding: [上] [下] [左] [右];

マージンと余白の関係はこちらを参照

とほほさんのスタイルシート設定を参考に追加してみてください。

ーーー表示例ーーー

/*H5*/
#main-contents h5{
    font-weight: bold;
    font-size: 1.1em;
    color: #000;
    text-align: center;
    border: 1px solid #333;
    margin: 1.0em 0 0 0;
    padding: 0.3em 0.3em 10px 10px;
    background-color: #999;

}

/*H6*/

#main-contents  h6{
    font-weight: bold;
    font-size: 1.2em;
    color: #FFF;
    text-align: left;
    border: 3px solid #600;
    margin: 1.0em 0 0 0;
    padding: 0.3em 0.3em 10px 10px;
    background-color: #933;
}

これで見出し5と6を設定して見ました。

このように追加されました。

以上
賢威カスタマイズ 見出し5と見出し6の追加方法！でした。

Similar Posts:

関連する投稿はありません。

バナーやコンテンツ追加方法の説明

今回は下記の【最新情報】の上に
新しくコンテンツを追加する方法を説明します。

WordPressのダッシュボード⇒外観⇒テーマ編集から
メインインデックスのテンプレート (index.php)をクリックします。

HTMLソースを確認して、
<!–最新情報–>の上の部分が、今回の該当部分になります。

<div id="main-and-sidebar1">
<!–▽メインコンテンツ–>
<div id="main-contents">

 

 

<!–最新情報–>
<h2><?php _e(‘Latest Info’,'keni’) ;?></h2>
<div class="contents">
<dl class="news">
<?php newposts_icon_keni(5,0,0,"false"); ?>
</dl>

PHPがわからなくても大丈夫です。
ここに直接HTMLソースで記入していきます。

今回は、新たにコンテンツとバナーを追加して行きます。
※画像はあらかじめFFFTPなどでアップしておきましょう。

<div id="main-and-sidebar1">
<!–▽メインコンテンツ–>
<div id="main-contents">

<div class="contents">

<h2>賢威レビューと評価一覧</h2>
<div class="contents">
<p class="al-c"><img src="○○○画像アップロード先" width="500" height="122" alt="○○○" /></p>
<ul> 
<li>テストテスト</li>
<li>テストテスト</li>
<li>テストテスト</li>
</ul>
</div>

<!–最新情報–>
<h2><?php _e(‘Latest Info’,'keni’) ;?></h2>
<div class="contents">
<dl class="news">
<?php newposts_icon_keni(5,0,0,"false"); ?>
</dl>

赤字が新たに追加したHTMLソースです。

これで「ファイル更新」すればOKです。

このように新しくコンテンツが追加されています。

その他、
最新情報の下に入れたい場合は、
<!–/最新情報–>より↓に記載します。

メインコンテンツの下に表示したい場合は、
<!–▲メインコンテンツ—>

<!–○○ｰｰ>を目安に配置したい場所に
HTMLソースを加えると表示されます。

わからない場合でも焦らずに、
適当に「aaaa」など記載してみて表示される場所を確認しましょう。
必ず見つかるはずです。

以上
賢威のトップページにバナーや新に、独自のコンテンツの追加方法でした。

Similar Posts:

関連する投稿はありません。

当たり前の質問ですよね。。
私も購入前に、本当にSEOに強いのか疑問でした。

ここでは、私のサイトなどをご紹介しながら、
SEO効果などをご紹介します！

賢威については、
今までの販売実績から多くの方がSEO効果を体感しており、

確実に検索順位が上がったり、
質の多いアクセスを呼び込む事に成功しています。

SEOになぜ強いのかは、こちらを参照ください。
⇒SEOに強い賢威テンプレートとは？

通常のテンプレートと違い、
根拠あるSEOテンプレートと言えます。

当ブログメインブログの結果です。
⇒ブログアクセスアップ!初心者でも最速SEO術

賢威5.0テンプレートに変えた直後の検索結果です！

変更直後、Googleではそれほど大きな違いは無かったのですが、
Yahoo!では、圏外⇒3位と急浮上しました。

こちらも同じように、
Yahoo!で圏外⇒4位に急浮上してきました。

一時的な結果では無く、
その後継続して、この付近の順位をキープしています。

続いて、
現在当ブログでレビューしているツールなどの
商品名での検索結果です。

これだけライバルが多いツールばかりなのに、
Googleにおいて、ほぼ１ページ目表示出来ているのが
わかるかと思います。

この賢威サポートページに関しては、
作成間もないのですが、

この驚きの結果なんです！

これってわかりますか？

２キーワードでの検索結果ですが、
これは、ただ検索で上位に表示されるキーワードを
探したわけじゃなくて、

Googleなどは、検索したときに、
その他の検索されているキーワードが多い関連キーワードを表示します。

その関連キーワードに表示された
キーワードでの検索結果なので、

検索されている数が多く！
賢威の非常に高いSEO効果がお解り頂けたと思います！！

確実に結果を出すテンプレート！
それこそが賢威なのです！

まずは検索結果圏外から脱出して、
検索結果１ページ目２ページ目の、
熾烈な上位争いに、一緒に参加しませんか！

賢威を手に入れれば実現出来ます！

賢威 レビュー・評価 関連記事一覧

• SEOに強い賢威テンプレートとは？
• 賢威5.0 5種類のテンプレートバリエーション紹介！
• 賢威の２つのSEOマニュアルのご紹介
• 賢威の６種類のサポートフォーラムに参加できます！
• 賢威5.0購入時の注意点とは！？
• マメボーｗから賢威ご購入の際の特典案内

どんな些細な事でも構いません。
こんな事、聞いて良いの？と思うぐらいな事でも構いません。
いつでもマメボーｗにご相談くださいね。

↓↓↓↓↓↓
マメボーｗへのメール相談はこちらです。

↓↓賢威5.0のご購入、申し込みはこちらです↓↓

Similar Posts:

関連する投稿はありません。

賢威は、
HTML版、WordPress版、Movable Type 版の
3種類が用意されてます。

これらの3タイプを使用する際に、
レンタルサーバーが必要になります。

アメブロやSeesaaブログなどの無料ブログでは使用出来ません。

一般的なブログのレンタルサーバー料金は、
月300円程度（ロリポップの場合）の料金が必要になります。

また、賢威はSEOの事を本気で考えた、
非常に効果的なSEOテンプレートです！

誰でも楽々設置！や簡単量産ツール！など、
良くある簡易HTMLツールではけっしてないので・・・

無料ブログもさわったことが無い初心者さんには、
決して楽に設置できるテンプレートじゃ無いかもしれません。

賢威そのものに、
サイト作成ツールは付属していませんので、
フリーのHTMLエディターや市販のサイト作成ツールが
必要になります。
(※賢威会員ページでオススメのフリーHTMLエディターの紹介されてます。）

決して難しいわけじゃありませんが、
最低限、本屋さんにある「できる！HTML」などの
HTMLの初心者本を一冊程度、購入しておいた方が良いです。

HTMLやCSSを覚えなくても多少の理解は必要になります！

難しいかも・・・自信が無いかも・・・
そう思った方へ

もしも賢威を購入して、
本気でネットビジネスやアフィリエイトを
行っていこうと思っている方には、

絶対必要な知識です！

賢威じゃなくても、
どの無料ブログを作る上でも避けては通れない知識です。

いずれ勉強するなら、
フォーラムや私の特典などを使って賢威で理解しませんか！？

賢威は難しいと書いている人も多いですが、
はっきり言ってやる気があれば、
賢威の購入は全く問題無いでしょう＾＾

なぜそう言い切れるのか！？

はい！
なぜって私がそうだったからです。

私も同じように、
賢威からSEO知識やHTML作成テクニックを学びました。

何度か本屋さんにも立ち読みに行きました＾＾；

今では、賢威をサポートをしながら
販売出来るようになってます。

私から購入頂いた多くの方も、
無料ブログ上がりの初心者さんでしたが、

多くの方が購入後にちゃんと
賢威でブログ運営を初めています。

だから大丈夫です＾＾

• 賢威の動画マニュアル！
• 賢威の通常マニュアル！

それに、私から購入して頂くと

• レンタルサーバーからの設置マニュアル！
• 無期限メール、スカイプサポートもあります！
• もしダメなら設置代行も行います！

必ずあなたが賢威を運営出来るように
バックアップ出来ます！

多くの方が、
私のサポートで賢威を運営を始めました！

その交流は、多くの方と今でも続いており、
今でも質問が来たり、逆に私がおしえてもらったり＾＾；

今ではお互いを高め合う大事な交流になっています！

そんなコミニティーも非常に大切だと思いませんか？＾＾

初心者で不安な方は、まずはメールをください。
できるだけバックアップしていきます。

一緒に賢威を作り上げていきましょう＾＾

賢威 レビュー・評価 関連記事一覧

• SEOに強い賢威テンプレートとは？
• 賢威5.0 5種類のテンプレートバリエーション紹介！
• 賢威の２つのSEOマニュアルのご紹介
• 賢威の６種類のサポートフォーラムに参加できます！
• 賢威5.0の実力 テンプレート使用後のSEO効果！
• マメボーｗから賢威ご購入の際の特典案内

どんな些細な事でも構いません。
こんな事、聞いて良いの？と思うぐらいな事でも構いません。
いつでもマメボーｗにご相談くださいね。

↓↓↓↓↓↓
マメボーｗへのメール相談はこちらです。

↓↓賢威5.0のご購入、申し込みはこちらです↓↓

Similar Posts:

関連する投稿はありません。

このフォーラムを使う事で、賢威作成時の疑問や質問、
ビジネスの悩みなど解決する事が出来ます。

賢威は発売以降、約5000人が購入しており
現在でも１日500人程度が行き交う活気あるフォーラムです。

• 初心者フォーラム
• ＳＥＯフォーラム
• WordPressフォーラム
• ネットビジネスフォーラム
• 協力フォーラム
• 雑談フォーラム

賢威作成についての質問や相談などは、

初心者フォーラムやWordPressフォーラムを
使って質問を行います。

賢威作成者の松尾氏も参加しており、
直接質問を回答してくれる事もあります。

SEOフォーラムやネットビジネスフォーラムでは、
新しいSEOテクニックやビジネステクニックなど、
まさに情報の宝庫です！

• Yahoo!やGoogleのアルゴリズム情報や
• 質の高い被リンクについての討論や
• あらたなSEO手法
• オールドドメインについての効果など

私もここでSEOを学びました！

通常じゃ見ることの出来無いレアな情報が
わんさか行き交っており、
ここを除くだけもで価値があります！

その他、賢威サポートページでは！？

その他賢威のサポートページでは、
各種メンテナンスのお知らせや、
サポート告知など様々な情報がアップされます。

フォーラムの他にも、
良くある質問集やSEO、サイト作成に
役立つツールがご紹介されています。

また初心者向けに、
通常マニュアルや賢威5.0動画マニュアルも用意しています。

すでに運営3年以上を超えた、フォーラムなら

初心者の方が、
賢威作成時ぶつかる疑問は、
ほぼ解決できるぐらいのボリュームがあります！

今まで積み上げてきた質問や回答などなど、
蓄積した情報がまた賢威の１つの魅力となっています。

賢威 レビュー・評価 関連記事一覧

• SEOに強い賢威テンプレートとは？
• 賢威5.0 5種類のテンプレートバリエーション紹介！
• 賢威の２つのSEOマニュアルのご紹介
• 賢威5.0購入時の注意点とは！？
• 賢威5.0の実力 テンプレート使用後のSEO効果！
• マメボーｗから賢威ご購入の際の特典案内

どんな些細な事でも構いません。
こんな事、聞いて良いの？と思うぐらいな事でも構いません。
いつでもマメボーｗにご相談くださいね。

↓↓↓↓↓↓
マメボーｗへのメール相談はこちらです。

↓↓賢威5.0のご購入、申し込みはこちらです↓↓

Similar Posts:

関連する投稿はありません。

これ単体だけでも数万円の価値がありそうな、
SEOマニュアルが付属します！

しかも二冊です！

従来のSEOマニュアルの基礎的内容から、
よりマーケティングやブランディングを意識した、
プロ的思考のSEO対策が学べます！

賢威のテンプレートを使う事で、SEOに強く上位に表示されます！

さらに、このSEOマニュアルを読むことで、

「なぜSEOに強いのか！」

「さらに上位表示へ表示するために何が必要か」

などが学べます！

それでは、二冊の賢威SEOマニュアルをご紹介します！

賢威5.0 内的SEOマニュアル（全186P）

賢威5.0 内的SEOマニュアル（全186P）

「内的SEO編」では、ソース構成･内部リンクの最適化をご説明 ！
SEOを効率化するツールのレクチャーから、
サイト構造・リンク構造の最適化、ソース構造の最適化、
順位リカバリのためのチューニング例を解説しております。

弊社では、多数のクライアント様のSEOチューニング業務を
行っておりますが、現在のYahoo！は内的SEOチューニングのみでも
上位表示することがあり、内的SEOの知識を極めているかどうかは
大変重要です。

内的SEOなどサイト作成に必要なツールの導入方法や
サイトを作る上でのキーワード選定、
戦略シナリオなどを説明しています。

サイト構成の最適化やリンクの構成、
ソースの最適化などよりSEOに好まれるための
内部構成がわかりやすく解説されています。

賢威5.0 外的SEOマニュアル（全86P）

賢威5.0 外的SEOマニュアル（全86P）

「外的SEO編」では、コンテンツ・外部リンクの最適化をご説明
現在、高いリンクスコアが与えられている外部リンクとはどういったリンクか？
ナチュラルリンクを効果的に集めるコンテンツプランニングとは
どういう方法か？
などなど、SEOを極めたSEOマスターにも必見の内容となっております。

外的SEOマニュアルでは、リンクをテーマとした
質の高いリンクを解説しています。

現在、検索上位に表示されているサイトは、
どのようなリンクをもらっているか？
効果の高い外部リンクは何か！？
など、どこを中心い何をする事で上位に表示できるかを解説してます。

リンク構成の基礎知識やサテライトサイト作成の注意点など、
有効な被リンクについてわかりやすく説明しています。

このように、賢威はテンプレートの他にも、
SEOマニュアルを読む事で、SEOの仕組みや
今後の戦略について学べます！

賢威は投げ売りテンプレートじゃない！
SEOの強さをちゃんと説明できる根拠あるテンプレートなのです！

賢威 レビュー・評価 関連記事一覧

• SEOに強い賢威テンプレートとは？
• 賢威5.0 5種類のテンプレートバリエーション紹介！
• 賢威の６種類のサポートフォーラムに参加できます！
• 賢威5.0購入時の注意点とは！？
• 賢威5.0の実力 テンプレート使用後のSEO効果！
• マメボーｗから賢威ご購入の際の特典案内

どんな些細な事でも構いません。
こんな事、聞いて良いの？と思うぐらいな事でも構いません。
いつでもマメボーｗにご相談くださいね。

↓↓↓↓↓↓
マメボーｗへのメール相談はこちらです。

↓↓賢威5.0のご購入、申し込みはこちらです↓↓

Similar Posts:

関連する投稿はありません。

賢威はタイプ別に５種類の
テンプレートが用意されています！

そして、その５種類の１つ１つが、

・HTML版
・Movable Type（MTOS5.0） 版
・WordPress版

の３種類に完全対応！

７種類のカラムレイアウトと
４種類のロゴ/アド有り無しに対応しています。

7レイアウト
1カラム
1＆2カラム・1＆2カラムリバース
2カラム・2カラムリバース
3カラム・3カラムリバース）

さらに4種類の
ロゴ画像有り・ロゴ画像無し
アドセンス有り・アドセンス無し
に対応しています！

さらに、テンプレートに
全10色のカラーが用意されており！

■■■■■■■■■■

つまり、これらのテンプレートを全部合計すると！！

1428種類の
テンプレートバリエーションが手に入ります！

※クリックすると全テンプレートが閲覧できます。

賢威はアップデート無料なので、
一度購入すると、このテンプレート全てがいつでも使用可能になります！

これだけ多くの細かい設定や、
多くの種類を提供してくれる、
SEOテンプレートは他には無いと思います。

それでは、個別にテンプレートを紹介していきます。

賢威テンプレート【コーポレート版】

企業サイトやビジネスサイトにオススメのテンプレート。
ロゴとメインイメージを変えていただくだけで、
信頼感のあるサイトデザインを構築していただけます。

賢威テンプレート【クール版】

デザインにこだわるサイトやブランディングサイトにオススメのテンプレート。
黒を基調とし、丸みを帯びたデザインを採用しています。クールな中にもどこか温かみを感じていただけるデザインです。

賢威テンプレート【情報比較版】

比較系サイトやポータルサイトなどにオススメのテンプレート。
挿入されるグラフ画像には「棒グラフ」や「折れ線グラフ」などの
直線的なグラフが多いと考え、直線が映える曲線を多用した
デザインになっております。

賢威テンプレート【プリティ版】

女性的なデザインを意識したテンプレート。
レシピ集のサイトや、素材配布サイト、雑貨販売サイトなどにオススメです。

直線的なモチーフを採用すると、どうしても男性的なデザイン
になりがちですが、グローバルメニューやサイドバーのデザインを
付箋紙的のようにデザインすることで、
立体的で温かみのあるデザインに仕上げました。

賢威テンプレート【講座版】

学術系サイトやノウハウサイトなど、
テキスト量の多いサイトにオススメのシンプルなテンプレート。
オススメのリンク色はデフォルトの「青」で、
顧客のユーザビリティーを最大限意識したテンプレートです。

これらの５種のタイプ別テンプレートを使用する事で可能です！

とは言っても、
通常の人間であれば、1428種のテンプレートなんか！
多すぎて管理出来るわけがありませんよね＞＜

でも大丈夫です。
賢威は、テンプレートを作成する際に、

【テンプレートメーカー】を使って作成します！

このテンプレートメーカーを使えば、

５種類のテンプレートやカラー/カラムの他に、

【ロゴタイプ（タイトルロゴ）変更】
テキストタイトルと画像タイトルと選べます。

【アドセンス領域設定】
テンプレートにアドセンス領域を作ってくれます。

【サイト名変更】
テンプレートに含まれるすべての「サイトタイトル」を決めることが可能

【コピーライト変更】
テンプレートに含まれるすべての「copyright」横の文字列が任意の文字列に 書き換わります。

【ヘッダエリアの縦幅】
ヘッダエリアの縦幅を調整できます。

など、様々な細かい設定が変更可能です。

使い方は非常に簡単なので、
知識が無くても直感操作でテンプレートが作れます。
変更した場所が、すぐにプレビュー表示されるので
誰でも簡単に作成できますよ！

賢威は、一度購入するだけで、
これだけ多くのテンプレートを使用可能になります！

今後サイトの量産する際や、
違うテーマでのブログ作成に多いに役立ちますので
ビジネスシーンで賢威は必需ツールとなるわけです！

賢威 レビュー・評価 関連記事一覧

• SEOに強い賢威テンプレートとは？
• 賢威の２つのSEOマニュアルのご紹介
• 賢威の６種類のサポートフォーラムに参加できます！
• 賢威5.0購入時の注意点とは！？
• 賢威5.0の実力 テンプレート使用後のSEO効果！
• マメボーｗから賢威ご購入の際の特典案内

どんな些細な事でも構いません。
こんな事、聞いて良いの？と思うぐらいな事でも構いません。
いつでもマメボーｗにご相談くださいね。

↓↓↓↓↓↓
マメボーｗへのメール相談はこちらです。

↓↓賢威5.0のご購入、申し込みはこちらです↓↓

Similar Posts:

関連する投稿はありません。

当ブログで紹介している賢威テンプレートについてご紹介します。

賢威のテンプレートが発売してから、早数年たちます。
その間に多くのSEOに強いと言われるテンプレートが

発売していますが、まったく衰えることなく、
いまだに多くのアフィリエイターや物販サイトなどの
ビジネスシーンで賢威はNO.1なSEOテンプレートとして
走り続けています！

それは、何故でしょうか？

賢威作者の松尾氏が、SEOの事を研究してしっかりと考えられた、
もっとも検索エンジンにサイト情報が伝わるように
考え抜かれたテンプレートだからです。

良くある検索エンジンの裏を付いた、
小手先のテクニックなどは一切使っておらず、
正当派なHTMLソースを追求しており、長い年月をかけても
SEOに強いテンプレートであり続けれます！

多くの小手先だけの裏SEOテンプレートなどがありましたが、
ほとんどがスパム判定でインデックス削除されたり
販売者が姿をくらませて音信不通になるケースが多い中。。。

賢威は、これだけの長い年月、
多くの方から支持と信頼を受けている
本物のSEOテンプレートと言えます。

私も多くのテンプレートを解析してきましたが、
いまだに賢威を完全に超えるSEOテンプレートは
存在しない！と断言しても良いです！

現在まででアップデートを重ね、賢威5.0が発売していますが、
今までのアップデートは全て無料！

一度購入すると永遠に新バージョンを使う事が可能です！

SEOマニュアルや各種フォーラムにも参加できるので、
同じ悩みを持つユーザーやSEOについて情報を共有できます！

賢威は、SEOテンプレートとしても！
賢威は、SEO教科書としても！
賢威は、SEOコミニティーとしても！

多いに役立つわけです！

賢威は何がSEOに強いのか！内部ソースを徹底紹介！

賢威には、ここでは伝えられないぐらいの
多くの魅力がありますが

まず一番の核となる、
「テンプレート」の内部ソースをご紹介します。

何より美しいHTMLソース

ますは、SEOテンプレートとして、当たり前の
W3CのHTMLチェックをクリア！

WCA1.0（Webアクセシビリティイニシアティブに配慮！

IE9、IE8、IE7、IE6、Firefox、GoogleChorome、
Opera、Netscape、Safariなど一通りのブラウザーで表示確認！

など当たり前の項目の他に、
何より、作成者の松尾氏がこだわったのは、
HTMLソースの美しさです！

読みやすいソースや見やすいソースは、
検索エンジンクローラーに正確に内容を伝えることが可能です。

見やすく使いやすいデザイン配置

賢威5.0の５種類のテンプレートの１つ「クール版」です。

賢威の良さは、ソースの美しさだけじゃありません。

• プロが選んだ、見やすいフォントサイズやフォント行間
• デフォルトでも十分に見やすいデザインとサイト構成！
• 海外トレンドを取り入れたデザイン配置！
• SEO以外にも使いやすさを追求した配置！
• フォント色やサイズ変更、アイコン等など全てスタイルシートで変更可能！

検索エンジンの事以外にも、
使う方や訪問者の事も一番に考えた、
使いやすいデザインテンプレートです。

賢威がSEOに強い真の理由！

賢威のSEOの本当の強さは、
見やすいソースや見やすいデザインだけじゃありません。

誰にもマネできない。
真のテクニックが隠されています！

まずは、通常のブログやサイトのHTMLソースの仕組みを説明

通常、左側がデザイン部分で右側がHTMLソースと言われ、
検索エンジンが読み込む部分です。

検索エンジンは、検索結果に表示するために、クローラーを使って
日々ネットを巡回してサイトの内容を確認しています。

クローラーは、各サイトの上から順番にサイトの内容を確認します。
上記に表示されている文章ほど重要だと判断して、
ページの評価をして、検索エンジンに表示させます。

上の画像だと
①ヘッダ⇒②パンくずリスト⇒③サイド⇒④記事⇒⑤サイド⇒⑥フッター
の順番に読み込んでページを確認していきます。

検索エンジンがページを確認する項目は、主に下記の２つです。

• この記事はどのような内容で書かれているか。
• 重要とされる場所が更新されているか？

ほとんどのブログは、統一されたデザインが多いので、
記事を作成しても、下の図のように、A⇒B.C.Dの記事が増えていきます。

ブログを作成したり、サイトを作成したり、
一番重要な部分は記事部分なはずですが、

こんな中央に表示してあって、
検索エンジンにちゃんと記事の内容を
理解してもらっているでしょうか？

賢威のテンプレートでは、
ここに着目してソースの配置に改良を加えています！

賢威では、独自の技術を使い、
通常中央に配置されてしまう記事部分を、
上段に配置されるのです！

デザインはそのままで、
HTMLソースの配置だけが入れ替わっています！

これにより、
ブログの内容や記事の内容を
より正確に検索エンジンに伝える事が可能なのです！

今までどうしても諦めていた配置部分を調整する事で、他のテンプレートよりも圧倒的に検索エンジンに好かれる事が出来るのです！

賢威は、SEOに強い！以外にも、
より正確な見込み客を導いてくれる事ができる
テンプレートなのです！

これこそが賢威のSEOの強さなのです！

賢威 レビュー・評価 関連記事一覧

• 賢威5.0 5種類のテンプレートバリエーション紹介！
• 賢威の２つのSEOマニュアルのご紹介
• 賢威の６種類のサポートフォーラムに参加できます！
• 賢威5.0購入時の注意点とは！？
• 賢威5.0の実力 テンプレート使用後のSEO効果！
• マメボーｗから賢威ご購入の際の特典案内

どんな些細な事でも構いません。
こんな事、聞いて良いの？と思うぐらいな事でも構いません。
いつでもマメボーｗにご相談くださいね。

↓↓↓↓↓↓
マメボーｗへのメール相談はこちらです。

↓↓賢威5.0のご購入、申し込みはこちらです↓↓

Similar Posts:

関連する投稿はありません。

クール版のデフォルトだと背景が灰色です。
あたらに追加した画像と背景が合わせにくいので
白にしたいと言う質問が多いです。

サイドバーの背景色の変更方法

このように、追加した画像と
背景色が違うので合わせにくいですね。。

それでは、説明していきます。

ダッシュボード⇒外観⇒テーマ編集をクリックし、
cool-whiteg○.cssをクリックして編集します。

/*——————————————————–
サイドバー
——————————————————–*/
↑のサイドバー表示のよりさらに下で、全体の中間ぐらいです。

/*●コンテンツ*/
#sidebar1 div.contents,
#sidebar2 div.contents{
    margin-bottom: 20px;
    padding: 15px 7px;
    background-color: #eaeaea; ← #fff にします。
    border: 1px solid #ababab; ← #fff にします。
}

#sidebar1 div.menu,
#sidebar2 div.menu{
    margin-bottom: 20px;
    padding: 5px 7px;
    background-color: #eaeaea; ← #fff にします。
    border: 1px solid #ababab; ← #fff にします。
}

※↑は３カラムの場合のCSSです。
２カラムの場合は、#sidebar1#sidebar２ ⇒ #sidebarになります。

４ヶ所を#fffに変更します。

これで保存して完成です。

このように背景色が白色に変更されました。

以上
賢威カスタマイズ サイドバーの背景色の変更方法でした。

Similar Posts:

関連する投稿はありません。

サイドバーの行間を変更する方法

賢威は、行間が広いので、
カテゴリなど非常に見やすい仕様なのでが、
見やすい分、数が多いと縦に長いリストなってしまいます。

この行間つ少し狭くする事で、サイドバーをスッキリさせます。

それでは説明していきます。

サイドバーのリスト表示は、
すべて<side-menu>のクラスタグで制御されているので
スタイルシートで設定変更可能です。

ダッシュボード⇒外観⇒テーマ編集をクリックし。
cool-whiteg○.cssをクリックして編集します。

/*——————————————————–
サイドバー
——————————————————–*/
↑のサイドバー表示のよりさらに下で、全体の中間ぐらいです。

/*●サイドメニュー*/
#sidebar1 ul.side-menu li,
#sidebar2 ul.side-menu li{
    width: 164px;
    border-bottom: 1px solid #afb2bc;
}

#sidebar1 ul.side-menu li a,
#sidebar2 ul.side-menu li a{
    display: block;
    padding: 10px 10px 10px 27px; ←が行間です。
    background: url(images/icon/icon-sidenavi01.png) 7px 15px no-repeat; ←矢印の位置です。
}

上記ソースの
padding: 10px 10px 10px 27px;
7px 15px no-repeat;
この部分を２つを変更します。

①行間の変更

まずは行間を決めます。
padding: 10px 10px 10px 27px;の意味ですが
padding: [上][右][下][左]の位置関係になります。

それでは、上下5px削ってみます。

padding: 5px 10px 5px 27px;に設定して更新しました。

はい、これで行間を狭くする事ができました。

②矢印の位置を決めます

次に、
矢印の位置を決めます。

7px 15px no-repeat;の意味ですが、
[左右]px[上下]px no-repeat;の位置関係になります。

矢印アイコンの高さ調整をするので、10px上に上げてみます。

background: url(images/icon/icon-sidenavi01.png) 7px 5px no-repeat;

にして設定を更新して見ましょう。

これで矢印アイコンの調整もできました。

③マウスオーバー時の矢印調整

最後の仕上げです＾＾
マウスを当てた時の矢印のアイコンも表示を変更しておきます。

ソースの少し下から、下記ソースを探します。

/*マウスオーバー時の背景の設定*/
#sidebar1 ul.side-menu li a:active,
#sidebar1 ul.side-menu li a:hover,
#sidebar2 ul.side-menu li a:active,
#sidebar2 ul.side-menu li a:hover{
    background: url(images/icon/icon-sidenavi01.png) 7px 15px no-repeat #0b4fb4;
    color: #fff;
}

background: url(images/icon/icon-sidenavi01.png) 7px 15px no-repeat #0b4fb4;

ここの7px 15px の部分も、
②で決めた矢印の位置と同じ数値を入力します。

7px 5px no-repeat;

これで決定して保存します。

はいこれで完成です＾＾

子カテゴリーの行間変更方法

親カテゴリと同様に、
子カテゴリーの行間を変更したい場合も、
基本的には同じです。

子カテゴリーの場所ですが、
li li と２つ並んでいるのが、子カテゴリーです。

#sidebar1 ul.side-menu li li a,
#sidebar2 ul.side-menu li li a{
    padding: 5px 10px 5px 27px; ←子カテゴリーの行間
    width: 127px;
    background: url(images/icon/icon-arrow.png)
13px 8px no-repeat; ←子カテゴリーの矢印アイコンの位置
}

マウスオーバー時の矢印アイコンの表示

#sidebar1 ul.side-menu li li a:active,
#sidebar1 ul.side-menu li li a:hover,
#sidebar2 ul.side-menu li li a:active,
#sidebar2 ul.side-menu li li a:hover{
    background: url(images/icon/icon-arrow.png)
13px 8px no-repeat #0b4fb4; ←マウスオーバー時の矢印アイコンの位置
    color: #fff;
}

これで、親カテゴリーと子カテゴリーの行間変更ができました。

以上
賢威カスタマイズ サイドバーの行間を変更する方法でしたSimilar Posts:

関連する投稿はありません。

WordPressのビジュアルエディタでは、 テーブルを作る機能がありません。
プラグインを入れる事で作成出来ますが、あまり使い勝手は良くないので
簡単にテーブルを組める方法をご紹介します。

簡単にテーブル＜table＞タグを作成する方法

divタグの出現以降、レイアウトでテーブルタグを
あまり使う事は無くなりましたが、

本来のテーブルタグの使用方法は、表やリストなどです。
表や簡単な枠を作るには今でも便利ですし。

リスト表示を作る場合には、積極的に使用していきましょう。

テーブルタグを作る方法ですが、

TAGが提供する、テーブルタグ作成ツールが非常に便利です。

テーブルタグ作成ツール

使い方は、簡単です。
タグを作成して、ソースを貼り付けるだけです＾＾

こんな感じでプレビューしながら作れるので
非常に便利です。

できあがったら、ソースをコピペして、
表示させたい部分に貼り付ければ完成です。

<table border="1" width="90%" height="200" cellspacing="0" cellpadding="1" bgcolor="#FFD700">
<tr>
<th bgcolor="gray">1-1</th>
<th bgcolor="gray">1-2</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>

このように表示されます↓↓↓

さらに応用＾＾

テーブルの先頭部分の

<table border="1" width="90%" height="200" cellspacing="0" cellpadding="1" bgcolor="#FFD700">

に

<table width="90%" height="200" border="1" align="center" cellpadding="1" cellspacing="0" bgcolor="#FFD700">

を加えると、テーブル全体が中央表示になります。

これは、TAGのテーブル作成ツールでも出来無いので、
必要ならば自分でソースに付け加えます

以上
賢威カスタマイズ 記事内に枠や表などのテーブルを作る方法でした。

Similar Posts:

関連する投稿はありません。

通常だと記事全文が表示されてしまいますが
｢この投稿の続きを読む｣を設定する事で、
記事の途中省略が可能です。

賢威カスタマイズ｢この投稿の続きを読む｣を表示する方法

記事の途中省略は非常に簡単です。

ダッシュボード⇒投稿⇒新規追加で
通常に記事を作成します。

記事を作成して、省略したい場所で、下記のMoreタグをクリックします。

下記の赤線内のタグが表示されれば、完成です。

次にサムネイル風にするために画像を回り込みする

次にサムネイル風にするために、画像の回り込みを選択します。

賢威には最初から、画像の回り込みタグが設定されているので、
そのタグを指定する事で、画像の回り込みが可能です。

WordPressでの回り込みタグの指定方法

画像をアップロード後に、画像の編集をクリックします。

次に、詳細設定タブをクリックします。

詳細画像設定のCSSクラスに｢left｣もしくは｢right｣を指定します。
※最初にCSSクラス内に違う英語が書かれてますが、消してOKです。

設定完了後に、｢更新｣をクリックして画像の編集を保存します。

記事投稿前に、プレビューで確認してみましょう。
見事に画像が回り込みしています。

行の高さなどは調整してください＾＾
これで完成です。

以上
賢威カスタマイズ｢この投稿の続きを読む｣で
省略してサムネイル風にするでした。

Similar Posts:

関連する投稿はありません。

トップメニューの表示方法

トップメニューの表示方法ですが、

ダッシュボード⇒外観⇒テーマ編集から
topmenu.phpをクリックします。

<ul id="top-menu">
<?php if (SITEMAP_KENI) : ?>
<li><a href="<?php bloginfo(‘url’); ?>/?sitemap"><?php _e(‘Sitemap’,'keni’);?></a></li>
ここに、新に<li></li>を追加します。
<?php endif ; ?>
</ul>

<li><a href="<?php bloginfo(‘url’); ?>/?sitemap"><?php _e(‘Sitemap’,'keni’);?></a></li>がサイトマップになりますので

表示させたい場所前後に、<li>～</li>を追加します。

ここで注意！
最後に来る<li></li>のみ、
endクラスを付けると後ろに丸みが出ます。

<li class="end">～</li>を付けます。

このように変更します。

例
<div id="top-in">

<ul id="top-menu">
<?php if (SITEMAP_KENI) : ?>
<li><a href="<?php bloginfo(‘url’); ?>/?sitemap"><?php _e(‘Sitemap’,'keni’);?></a></li>
<li><a href="http://○○/"> お問い合わせ</a></li>
<li><a href="http://○○/"> プライバシーポリシー</a></li>
<li><a href="http://○○/"> 特典紹介</a></li>
<li class="end"><a href="http://○○/"> 特定商取引に基づく表示</il>
<?php endif ; ?>
</ul>

</div>

これで完成です。

以上

賢威カスタマイズ サイト最上部のトップメニューの表示方法でした。

Similar Posts:

関連する投稿はありません。

グローバルナビの表示方法

通常グローバルナビの表示方法は、

賢威 グローバルメニューの登録と表示方法
を参照ください。

WordPress版ですと、

ダッシュボード⇒ページ⇒新規追加から作成する事で
自動的に、ヘッダー下のグローバルナビに登録されます。

ただ、ページで作ったすべてのページがグローバルナビに表示されるので、
ページを違う使い方や他のリンクサイトを表示させたい場合は、

この自動登録機能を切る必要があります。

グローバルナビにリンク集などを登録する方法

設定方法は以下の方法です。
ダッシュボード ⇒ 外観 ⇒ テーマ編集をクリックして
headertext.php を開きます。

以下のソースを探します。

<!–▼グローバルメニュー–>
<div id="global-menu">
<ul>
<?php globalmenu_keni(6); ?>
</ul>
</div>
<!–▲グローバルメニュー—>

この部分の
<?php globalmenu_keni(6); ?>
を消すと、ページとの連動がしなくなります。

後は、表示させたいサイトやページを直接記入していきます。

<ul>の下から、
<li>○○○</li>
で囲んであげれば、グローバルメニューが出現します。

例
<!–▼グローバルメニュー–>
<div id="global-menu">
<ul>
<li><a href="http://seo.siyo.org/">トップペー ジ</a></li>
<li><a href="http://tokuten.kasegoo.info/"> ご購入特典案内</a></li>
<li><a href="http://wordpress.siyouyo.com/">WordPress の使い方</a></li>
<li><a href="http://seo.siyo.org/profile/"> プロフィール</a></li>
<li><a href="http://seo.siyo.org/mail/"> お問い合わせ</a></li>
</ul>
</div>
<!–▲グローバルメニュー—>

このような感じで<li>○○○</li>で囲んで作りましょう。
これで自由にグローバルナビを配置する事が可能です。

以上
賢威カスタマイズ グローバルナビの表示方法の変更でした。

Similar Posts:

関連する投稿はありません。

WordPressのデフォルトで使用出来るサイドバーのカテゴリーは、
名前順で並んでしまうため、名前によってコロコロ順位が変わります。

色々方法はありますが、簡単なカテゴリの並び替え方法についてご説明します。

「Category Order」プラグインで並び替える

WordPressはバージョン3.0から、
カスタムカテゴリーが搭載され、並び替え可能になったのですが、

残念ながら賢威のテンプレートは対応しておらず、
レイアウトが崩れてしまいます。
（※対策として、テーマ編集からsidebar-1.phpに直接書き込む方法もあります）

そこで代用で使えそうなプラグインを入れる事で、
並び替えを可能にします。

インストールは簡単です。

ダッシュボード⇒プラグイン⇒新規追加をクリックします。

検索キーワードに

「Category Order」

と入れて検索します。

検索されて表示されますので、Category Orderをクリックして
インストール⇒プラグインの有効化を行ってください。

Category Order使い方

無事にインストールが終了すると、
ダッシュボード⇒投稿内にCategory Orderが追加されます。

Category Orderに表示されている、
カテゴリー名をマウスでドラックして入れ替えて保存すれば、
簡単にカテゴリーのリスト順番が変更できます。

これで本格的な、カテゴリーを使ったブログ構成が可能になります。

以上
賢威WordPress版でのカテゴリー内のリスト並び替え方法でした。

Similar Posts:

• 賢威カスタマイズ　ウイジェット以外のサイドバー編集方法
• パーマリンク設定後に記事やページが404エラーで表示されない
• 賢威カスタマイズ　トップページをブログ風からサイト風へ変更する
• 賢威+WordPressならサイドバーはウイジェットで楽々設置！
• 賢威+WordPressのテンプレート設定は「テーマの編集」から
• 賢威カスタマイズ　トップページにFacebookのLikeBoxを設置する方法

賢威テンプレートメーカーで作成時にも変更できますが、
テンプレート作成後の縦幅を調整方法をご紹介します。

ヘッダー部の縦幅のサイズ調整

縦幅のサイズ調整についてご説明します。

ダッシュボード⇒外観⇒テーマ編集から
cool-whiteg○○.cssをクリックします。

賢威では、絶対配置と言う手法をもちいており、
ヘッダーの縦幅を増やした分、他の部分の調整も必要になります。

何ヵ所かの変更が必要になりますので順に説明します。
※今回は、さらに30ピクセル増やすイメージで説明します。

1ヶ所目の変更部分（ヘッダー）

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    position: absolute;
    top: 30px;
    height: 80px; ⇒+30して110にします。
    background: url(images/common/bg-header.gif) left top repeat-x #222222;
    font-size: 1.2em;
    color: #000;
}

2ヶ所目の変更部分（グローバルメニュー）

/*——————————————————–
グローバルメニュー
——————————————————–*/

#global-menu{
    position: absolute;
   top: 110px; ⇒+30した140
    height: 36px;
    background: url(images/common/bg-navi.gif) left center repeat-x #06C;
    border-top: 1px solid #06C;
    border-bottom: 1px solid #06C;
}

3ヶ所目の変更部分（パン屑ナビ）

/*——————————————————–
パン屑ナビ
——————————————————–*/

#breadcrumbs{
    position: absolute;
    top: 158px;/*▲ページ最上部からの距離*/ ⇒+30して188
    left: 0;
}

4ヶ所目の変更部分（コンテンツ部分）

/*——————————————————–
コンテンツ全体
——————————————————–*/

#main-image{
    position: absolute;
    top: 178px;/*最上部からの高さの指定*/ ⇒メインイメージあるならここも
    background: url(images/common/bg-topimage.gif) center top repeat #111;
    border-bottom: 1px solid #000;
}

#main{
    padding-top: 188px;/*▲ページ最上部からの距離*/ 最後に+30して218
    background: #fff;
    border-top: 1px solid #444;
}

ヘッダ画像がある場合は、main-imageとmainの2ヶ所を変更します。

この4ヶ所を変更する事で、ヘッダーの縦幅調整が完成です。

以上
賢威カスタマイズ ヘッダー部の縦幅のサイズ調整でした。

Similar Posts:

関連する投稿はありません。

全体のフォントサイズと行間の変更方法

全体的なフォントサイズの変更方法をご説明します。

ダッシュボード⇒外観⇒テーマ編集から
common.cssをクリックします。

/*——————————————————–
レイアウトの初期設定
——————————————————-*/

html,body,#container{
    height: 100%;
}

body,pre{
    font-size: 62.5%; ←フォントサイズ
    line-height: 1.5; ←行間
}

この部分のソースを変更します。
62.5％と微妙な数値ですが、これはこれで非常に考えられた数値です＾＾

この数値を変更する事で、全体のフォントサイズと行間が変更できます。

個別にフォントサイズを指定する方法

各パーツ事のフォント修正方法を説明します。

すべて、ダッシュボード⇒外観⇒テーマ編集から
cool-whiteg○○.cssをクリックします。

パン屑リストのフォントサイズ修正

パン屑リストが長くなると、上記のように折り返しちゃいます。
カテゴリー数が多い場合は、フォントサイズを小さくします。

/*——————————————————–
パン屑ナビ
——————————————————–*/

#breadcrumbs{
    position: absolute;
    top: 188px;/*▲ページ最上部からの距離*/
    left: 0;
}

#breadcrumbs li{
    float: left;
    padding: 0 10px 0 15px;
    background: url(images/icon/icon-breadcrumbs.gif) left 5px no-repeat;
    font-size: 1.2em; ←1.0～1.1emで修正します。
    color: #000;
}

これでパン屑リストは完成です。

最新情報内のフォントサイズの修正

最新情報に表示される部分のフォントのみ変更したい場合は、

メインコンテンツ（本文）のグループにある、
ソース部分の中央よりやや下にあります。

/*●最新情報（定義タグ）*/
#main-contents dl.news{
    margin: 0;
    padding: 0;
}

#main-contents dl.news dt{
    float: left;
    margin: 0;
    padding: 0;
    width: 80px;
    position: relative;
}

#main-contents dl.news dd{
    margin: 0 0 10px 0;
    padding: 0 0 10px 0px;
    border-bottom: 1px dotted #aaa;
font-size: 90%; ←新たに追加してください。85％～95％推薦
}

font-size: ○○%;をさらに追加してください。
これで、最新情報のみフォントサイズが縮小します。

コンテンツ部分のフォントサイズ変更

中央のメインコンテンツ（記事部分）のフォントサイズの修正する場合です。

/*——————————————————–
メインコンテンツ（本文）
——————————————————–*/

#main-contents{
    float: right;
    width: 570px;
    font-size: 1.4em; ←フォントサイズを変更します。
line-height: 2.0em ←行間を空けたい場合は、新に追加します。
}

フォントサイズを変更する場合は、font-size: ○○em;を変更します。
標準設定より行間を空けたい場合は、line-heightをさらに追加します。

サイドバーのフォントサイズ変更

サイドバーのフォントサイズの変更について説明します。

３カラム使用の方は、sidebar1とsidebar2に分かれており、
sidebar1が左側サイドバーでsidebar2が右側サイドバーです。

/*——————————————————–
サイドバー
——————————————————–*/

#sidebar1{
    float: left;
    width: 200px;
    background: url(images/common/bg-sidebar.gif) center top repeat-y #2b2b2b;
    border-bottom: 1px solid #666;
    font-size: 1.2em; ←左側サイドバーのフォントサイズ
}

#sidebar2{
    float: right;
    width: 200px;
    background: url(images/common/bg-sidebar.gif) center top repeat-y #2b2b2b;
    border-bottom: 1px solid #666;
    font-size: 1.2em; ←右側サイドバーのフォントサイズ
}

右と左で2ヶ所の変更が必要になります。

その他の部分は省略しますが、
基本的には各パーツの「font-size: ○○」を探して変更しましょう。

以上
賢威カスタマイズ フォントサイズや行間の変更方法でした。

Similar Posts:

関連する投稿はありません。

賢威テンプレートでの文字（フォント）色の変更や
フォントサイズの変更方法をご説明します。

次にリンク色の変更方法も一緒にご紹介します。

全体のフォント色の変更方法

まずは、全体のフォント色から説明します。

ダッシュボード⇒外観⇒テーマ編集から
cool-whiteg○○.cssをクリックします。

/*——————————————————–
3、サイト全体の基本文字色
——————————————————-*/

body,pre{ color: #666; } ←＃000に変更

/*リンク文字*/
a{ text-decoration: underline; }
a:link{ color: #666; }
a:visited{ color: #666; }
a:hover{ color: #c60; }
a:active{ color: #c60; }

上記のソース部分のbody,pre{ color: #666; } を変更します。

デフォルトでは、＃666の中間グレーになっているので、
ブラックの＃000に変更します。

これで全体の文字色はブラックになったのですが、

一部、この部分だけ、まだグレーが残っているので
次に、ヘッダー部分のフォント色変更をご案内しまし。

cool-whiteg○○.cssからやや下のヘッダー部分のソースを確認します。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
    position: absolute;
    top: 30px;
    height: 110px;
    background: url(images/common/bg-header.gif) left top repeat-x #222222;
    font-size: 1.2em;
    color: #666; ←#000;に変更します。
}

上記のソースのcolor: #666; ←#000;に変更します。
これでヘッダー部分のフォント色もブラックが適用されます。

これで文字全体の色が変更できました。

リンク色の変更方法

次にリンク色の変更方法をご説明します。

リンク色を変更する前に、リンクの色には4種類の設定があります。

• 訪問する前のリンク色
• 訪問済みのリンク色
• マウスを乗せた時のリンク色
• マウスを乗せた時の訪問済みのリンク色

の４つの設定が必要です。
特に難しく考える必要もありませんが細かく設定ができます。

a:link { color: #666 }
訪問する前のリンク色

a:visited { color: #666 }
訪問済みのリンク色

a:hover { color: #c60 }
マウスを乗せた時のリンク色

a:active { color: #c60 }
マウスを乗せた時の訪問済みのリンク色

となります。
これを覚えておいてください。

ダッシュボード⇒外観⇒テーマ編集から
cool-whiteg○○.cssをクリックします。
※フォント色を変えた場所と同じ部分です。

/*——————————————————–
3、サイト全体の基本文字色
——————————————————-*/

body,pre{ color: #666; }

/*リンク文字*/
a{ text-decoration: underline; }
a:link{ color: #666; }
a:visited{ color: #666; }
a:hover{ color: #c60; }
a:active{ color: #c60; }

を好きなカラーに変更します。

カラー見本は、こちらを参照
⇒原色大辞典

私の設定例

/*リンク文字*/
a{ text-decoration: underline; }
a:link{ color: #0000ff; }
a:visited{ color: #0000ff; }
a:hover{ color: #ff8c00; }
a:active{ color: #ff8c00; }

私はこんな感じで変更してみました。

以上
賢威カスタマイズ 全体文字(フォント)色やリンク色の変更方法でした。

Similar Posts:

関連する投稿はありません。

西暦の表示方法や表示数など様々な変更できます。

最新情報の表示方法変更

ダッシュボード⇒外観⇒テーマ編集から
メインインデックスのテンプレート (index.php)をクリックします。

<!–最新情報–>
<h2><?php _e(‘Latest Info’,'keni’) ;?></h2>
<div class="contents">
<dl class="news">
<?php newposts_icon_keni(5,0,0,"year"); ?>
</dl>
<!–ソーシャルブックマーク—>

上記のソース部分の(5,0,0,"year")を変更します。

<?php newposts_icon_keni(記事数,�