30代は創造する

記事に画像を挿入します。

01.準備
画像サイズの設定をします。
　設定 ＞ メディア ＞ 画像サイズ ＞ サムネイルのサイズ
サムネイルのサイズを75x75に設定します。



02.記事を書く
投稿 ＞ 新規追加 より記事を書きます。



03. 画像をアップロードする
画面上のアップロード挿入のアイコンをクリックし、
画像をアップロードします。



04.画像を挿入する
アップロード後の画面で、代替テキスト、配置、サイズを設定します。
ここでは、配置を中央、サイズを中とします。



投稿に挿入を押下します。
画像が記事に挿入されます。



05. ソースの確認
HTMLタブをクリックし、ソースを確認します。

<a href="http://ranka.sub.jp/taroumatsu/?attachment_id=37" rel="attachment wp-att-37">
<img class="aligncenter size-medium wp-image-37" title="flower" src="http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/flower-300x225.jpg" alt="フラワー" width="300" height="225" />
</a>

img要素のclass属性の、
aligncenterが配置の中央を指定したときのクラス
size-mediumがサイズの中を指定したときのクラス
となります。
wp-image-37は、この画像固有のクラスです。


06.表示の確認、CSS編集
公開を押下し、記事を公開します。



この段階では、画像は中央に表示されていません。
style.cssに下記記述を追加します。

/* 記事内の画像 */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



中央に表示されましたが、IEで確認すると、画像に枠が表示されています。
下記記述をstyle.cssに追加し、枠を非表示にします。

div.post img  {border: none}

[0回]

記事個別のページを作成します。
編集するファイルは、index.phpです。
記事個別のページは、トップページに表示された記事のタイトルをクリックすると表示します。

01. タイトル
title要素に、記事のタイトルを追加します。
・記述
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
・出力
<title>太郎松の備忘録 &raquo; ０９タイトル</title>

02.前の記事、次の記事
前の記事、次の記事へのリンクを追加します。
・記述
<p class="pagelink">
<span class="oldpage"><?php previous_post_link(); ?></span>
<span class="newpage"><?php next_post_link(); ?> </span>
</p>
・出力
<p class="pagelink">
<span class="oldpage">&laquo; <a href="http://ranka.sub.jp/taroumatsu/?p=20" rel="prev">#08たいとるぇ</a></span>
<span class="newpage"><a href="http://ranka.sub.jp/taroumatsu/?p=25" rel="next">１０たいとる１０</a> &raquo; </span>
</p>

03. 調整
トップページを表示すると、前の記事、次の記事へのリンクが表示されています。



これを表示させないために、下記記述を追加します。
・記述
<?php if(is_single()): ?>
<p class="pagelink">
<span class="oldpage"><?php previous_post_link(); ?></span>
<span class="newpage"><?php next_post_link(); ?> </span>
</p>
<?php endif; ?>
・出力


<?php if(is_single()): ?> ～ <?php endif; ?>は、記事個別のページが表示されている場合に、内容を出力します。

[0回]

フッターを表示します。

01. フッターを表示する
・記述
<!-- フッター -->
<div id="footer">
<address>Copyright &copy; 太郎松の備忘録, All rights reserved.</address>
</div>
・出力


02.メールアドレスへのリンクを設定する。
コピーライトにリンクを作成します。
・記述
<!-- フッター -->
<div id="footer">
<address>Copyright &copy; <a href="mailto:<?php bloginfo('admin_email'); ?>">太郎松の備忘録</a>, All rights reserved.</address>
</div>
<!-- フッター -->
<div id="footer">
<address>Copyright &copy; <a href="mailto:tarouma2@gmail.com">太郎松の備忘録</a>, All rights reserved.</address>
</div>


03. 装飾
style.cssを編集します
p.pagelink  {overflow: hidden;
  width: 100%}

/* フッター */
div#footer  {clear: both;
  border-top: solid 3px #000000;
  padding: 6px 0}

address {font-size: 0.75em;
  font-style: normal;
  font-family: Verdana, sans-serif;
  margin: 0}

address a {color: #000000}

[0回]

トップページの記事を複数ページで表示します。

01. 1ページに表示する記事の件数を設定する
動作確認ができるように、2件に設定しました。
設定 ＞ 表示設定 ＞ 1ページに表示する最大投稿数



02.次ページへを表示
次ページへのリンクを表示します。
・記述
<p class="pagelink">
<span class="oldpage"><?php next_posts_link(); ?></span>
</p>
・出力
<p class="pagelink">
<span class="oldpage"><a href="http://ranka.sub.jp/taroumatsu/?paged=2" >次ページへ &raquo;</a></span>
</p>



03.前ページへを表示
次ページへのリンクを表示します。
・記述
<p class="pagelink">
<span class="newpage"><?php previous_posts_link(); ?></span>
<span class="oldpage"><?php next_posts_link(); ?></span>
</p>
・出力
<p class="pagelink">
<span class="newpage"><a href="http://ranka.sub.jp/taroumatsu/" >&laquo; 前ページへ</a></span>
<span class="oldpage"><a href="http://ranka.sub.jp/taroumatsu/?paged=3" >次ページへ &raquo;</a></span>
</p>



04. 表示する文字の変更
表示を、古い記事、新しい記事に変更します。
・記述
<?php if(is_home()): ?>
<p class="pagelink">
<span class="oldpage"><?php next_posts_link('&laquo; 古い記事'); ?></span>
<span class="newpage"><?php previous_posts_link('新しい記事 &raquo;'); ?></span>
</p>
<?php endif; ?>
・出力
<p class="pagelink">
<span class="oldpage"><a href="http://ranka.sub.jp/taroumatsu/?paged=3" >&laquo; 古い記事</a></span>
<span class="newpage"><a href="http://ranka.sub.jp/taroumatsu/" >新しい記事 &raquo;</a></span>
</p>

関数のカッコ内に文字を記述することで、表示を変更できます。
<?php if(is_home()): ?> ～ <?php endif; ?>は、
トップページの場合のみ、囲まれた部分を表示します。

05. リンクを左右に表示する
style.cssを編集し、リンクを左右に表示させます。

/* ページリンク */
span.oldpage  {float: left}

span.newpage  {float: right}

p.pagelink a  {font-size: 0.75em;
  color: #0c8bcd;}

p.pagelink  {overflow: hidden;
  width: 100%}

[0回]

画像を使ってデザインを行います。

01. 画像をアップロードする
使用する画像をアップロードします。

wp/　　← WordPressをインストールしたフォルダ
│
└　wp-content/
　　│
　　└　themes/
　　　　│
　　　　└　sample/
　　　　　　│
　　　　　　├　index.php
　　　　　　├　screenshot.jpg
　　　　　　├　style.css
　　　　　　└　images/　　← 作成
　　　　　　　　│
　　　　　　　　├　header.jpg　　← アップロード
　　　　　　　　└　titlebar.png　　← アップロード

02. ヘッダに画像を表示する
ヘッダに画像(header.jpg)を表示させます。
・記述
<p id="image"><img src="<?php bloginfo('template_url'); ?>/images/header.jpg" alt="*" width="760" height="200" /></p>
・出力
<p id="image"><img src="http://ranka.sub.jp/taroumatsu/wp-content/themes/sample/images/header.jpg" alt="*" width="760" height="200" /></p>

<?php bloginfo('template_url'); ?>は、テーマのディレクトリのURLを出力します。

03. 装飾（style.css）
style.cssを編集します。

/* ヘッダー */
div#header h1 {
  font-size: 1.875em;
  margin: 0;
  float: left;
  margin-bottom: 4px;
}

div#header p#desc {
  font-size: 0.75em;
  color: #444444;
  margin: 0;
  float: right;
  margin-top: 18px;
}

div#header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 20px;
}

div#header p#image {
  margin: 8px 0 0;
}

div.post h2 {
  background-color: #a3d2f2;
  background-image: url(images/titlebar.png);
  font-size: 0.875em;
  padding: 10px;
  margin: 0;
}
 

[0回]