WordPressテーマ自作1.5

LINEで送る
Pocket

がじです。

ひな形のテーマができたのでPHPに書き換えていきます、といいたいところですが、前回レスポンシブデザイン要素を取り込み・・・とか書いておきながら全然できていなかったのでちょっとだけCSSを修正します。モバイルサイトベースの記表にします。

まず投稿記事一覧の70%表示をやめます。

#posts {
  float: left; <- 削除
  width: 70%;   <- 削除
  margin-bottom: 10px;
  -moz-box-shadow: 1px 1px 1px #808080;
  -webkit-box-shadow: 1px 1px 1px #808080;
  box-shadow: 1px 1px 1px #808080;
  border: 1px solid #CCCCFF;
}

サイドバーを可変サイズにして左寄せだったのをやめます。

#sidebar {
  float: left;  <-削除
  width: auto;  <-削除
  -moz-box-shadow: 1px 1px 1px #808080;
  -webkit-box-shadow: 1px 1px 1px #808080;

あとサイドバー内のウィジェットリストの表示のデフォルトをモバイル表示用の横並びに変えます。

      .widget li {
        line-height: 1.8;
        list-style: none;  <-削除
        float: left;  <-追加
        overflow: hidden;  <-追加
        padding-left :4px;  <-追加
        width: 0 auto;  <-追加
      }

最後にレスポンシブデザイン用に画面サイズに応じて上書きする記述をCSSを追加します。
今回は768px以上とそれ以下で表示が異なるようにしました。

/* movile */

/* tablet */
@media all and (min-width: 480px){
}

/* PC Style */
@media all and (min-width: 768px){
  #posts {
    float: left;
    width: 72%;
  }
  #sidebar {
    float: right;
    width: 26%;
  }
  .widget li {
    list-style: none;
    float: none;
    width: 0 auto;
  }
}

これで見た目が少し変わりました。

PC表示だと
140406_01

タブレット表示だと
140406_02

こんな感じ。

できたindex.html,CSS,noimage.pngをWordpressのthemeフォルダに専用フォルダ(ex.gaji_blue)を作って放り込みます。

WordPressの管理画面から外観>テーマに行くと
140406_03
スクリーンショットとか設定していないので微妙ですが、なんかいる!

この状態で有効化してみると
140406_04

名前をPHPに下だけで中身はHTMLなので、まだ正常に読めるはずもなくアレな感じですがここからコーディング開始です。

—以下広告—

HTML5 CSS3の新しい教科書 基礎から覚える、深く理解できる。

新品価格
¥2,700から
(2014/4/6 18:22時点)

LINEで送る
Pocket