WordPressトップページ内容変更2

 
WordPressトップページ内容変更の今回は2回目です。

テーマ(テンプレート)は同じく「BIzVektor」

前回でメインの画像の下にあった、

ブログの一覧や3つの画像を削除した後からの

スタートです。

 

まず、最初にCSSの設定が必要です。
 

外観 > CSSカスタマイズとして

以下を CSSカスタマイズに書きます。
 

#enclose_v{

width: 90%;

background-color: #fbfbfb;

padding: 30px;

border-radius:8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

}

 
できましたら、「CSSを更新ボタン」を押します。

 

ブログの一覧や3つの画像を削除した後

 
トップページに戻ります。

青く囲んだところに、記事を入れてみたいと思います。

今回は、文章だけのものですが。写真や、見出し、

イラストを加えてみると いいと思います。

 

今回は まず最初に、トップページの空欄に流し込むコード

作りから、始めます。ダッシュボードから投稿 >

新規追加 として [投稿の編集]画面を開きます。
 

ダッシュボード 投稿 > 新規追加

 

 

ビジュアルモードにして、 表示したい記事を書いていきます。

 
表示したい記事

 

できましたでしょうか、

 

そうしましたら、 HTMLモードに変更します。

Word Press独自のコードができています。

簡単にコーディングができました。こちらのコーディング済の

コードは、後々、最後の作業にて使いますので、

更新ボタンを押し そのままにします。

 

次に  ダッシュボードから外観、

テーマの編集を選んでクリックします。

 
ダッシュボード>外観>テーマの編集

 

 

テーマの編集ページの右側に 縦に ~PHPがならんでいますので。

その中から、module_topPR.php を探して クリックします。

画面が開きます。

 

module_topPR.php

 

ここには、トップページにある3つの画像を

表示するためのPHPプログラムが書かれています、

ですので、 その上側に、記事を貼り付けることが

できます。

 

最初に、 PHPが書いてある部分で満たされていますので、

下側に下げます。

 

PHPが書いてある部分で満たされていますので、 下側に下げます。

 

画面一番上に、

<div id="enclose_v">

画面一番下に、以下を書きます。

</div>

 

これにて、角丸の白いエリアがの準備ができました。

このエリアの中に記事を書いていきます。

このページの最初のほうで作った、

Word Press(ワードプレス)

独自のコードコードを

<div id="enclose_v">

この中に流しこんでください。 ~

</div>

流し込めましたでしょうか。

画面下にある、ファイルを更新ボタンを押します。

ファイル更新ボタン

 

公開ページを見ると以下のようになっています。

 
完了

 

完成しました。