WordPressテーマを自作5

LINEで送る
Pocket

がじです。

WordPressテーマ自作も5回目(実質6回目)です。
書いてるコード量は少ないのですが、微妙なデザイン調整に時間を取られて進捗がよろしくない状況です。

前回までで、Topページは大体完成しました。
今回は単体記事表示ページを作っていきたいと思います。

変更するコードはsingle.phpです。
index.phpと先頭と最後は同じで、div class=”post”の中身を変更します。

                <div class="post">
                    <div class="post-header">
                        <div class="post-content">

でこの状態で記事を表示させてみると。

140518_01

一応表示はされてますが、コードの引用部分とかカレンダーの表示が素のままで見栄えがよろしくないです。
ということでstyle.cssをちょっとだけ修正します。

まずはコードの引用部分のStyleを暗めの色で表示させます。

          .post-body blockquote {
            background-color: #000011;
            color: #eeeeff;
            margin-top: 5px;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 5px;
            padding: 3px 3px 3px 3px; 
            border: solid 2px #000000;
          }
          .post-body pre {
            background-color: #000022;
            color: #eeeeff;
            overflow: auto;
            padding: 3px 3px 3px 3px;
            margin-top: 5px;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 5px;
          }

次はカレンダーの表示部分。カレンダーはwp-calendarというIDのテーブルで表示されますので、#wp-calendarのcssを修正

table#wp-calendar {
    padding:  0.2em;
    width: 90%;
    float: center;
    margin: auto;
    margin-top:2px;
    margin-bottom:2px;
    border-collapse: collapse;
}

table#wp-calendar th {
  border: 1px solid #00c;
  background-color: #44f;
}

table#wp-calendar td {
  border: 1px solid #00f;
  background-color: #aaf;
  text-align: right;
  margin-right: 2px;
  padding-right: 2px;
  border-collapse: collapse;
}

この状態で再表示すると
140518_02

うん、だいぶいい感じです。
残りはコメント欄の設定と固定ページの作成です。
次回くらいで終わるかな。というか終わらせたいです。/(^-^;)

—以下広告—

WordPress Perfect GuideBook 3.x対応版

新品価格
¥1,706から
(2014/5/18 12:03時点)

LINEで送る
Pocket