子テーマ"Stinger-minimum"を新しくなった「STINGER5」用に作りなおしました。

カテゴリー:WordPress    |    タグ:

子テーマ"Stinger-minimum"を新しくなった「STINGER5」用に作りなおしました。

最近新しくリリースされた「STINGER5
html5でレスポンシブにされており内容も充実して更にパワーアップ!

そんな「STINGER5」用にあわせて、以前作成した子テーマ"Stinger-minimum"デザインを作りました。

informationこの記事でのカスタマイズバージョン:stinger5ver20140822

STINGER5版"Stinger-minimum"

わかりづらいかと思いますが今回、時間の都合によりデモではなく画像になっております(T_T)

出来上がりの図(PC版)

testWordPress

出来上がりの図(iPadサイズ)

testWordPress-t

出来上がりの図(スマホサイズ)

testWordPress-s

全体の大きさは1040px、メインコンテンツのところは710px、サイドは代えずに作成しています。
ですのでダブルレクタングルもできるようになっています。
画像については、コンテンツの中だけ装飾をしておりmax-width: 96%;に設定してあります。

使い方などについて

子テーマ導入についてなど、簡単ですがさくっとこちらに書いています。

ご注意して頂きたいこと

前に書きました、こちらのことが関連しています。

このカスタマイザーはデフォルト(初期状態)で、子テーマ"Stinger-minimum"のCSSを書いていますのでその点だけご留意ください。

これを作ったあとにカスタマイザーに気づいたのはナ・イ・ショな!

子テーマ"Stinger-minimum"ダウンロード

ダウンロードはこちらから

Stinger5-Child Stinger-minimum

さいごに

今回STINGER5のものより少しブレークポイントを増やしています。少しだけ元々"Stinger-minimum"のデザインと違うところがあります。また今回はじめてレスポンシブの子テーマというものをつくったのできっとおかしいところや、ん?と思うところがあるかと思います。
なにかお気づきの点があれば教えてくださいね!

細かなところなどたくさん省きましたが、子テーマ"Stinger-minimum"で楽しんでいただければ幸いです。

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2014/08/23    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

カスタマイザー-i

新しくパワーアップされた「STINGER5」のテーマカスタマイザーを使ってみよう!

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

image

少しの手間をかけて抜粋部分を表示する。だってそれは読んでほしいから!

この抜粋部分に意図しないものが入ってしまい読んでほしいブログが残念な感じにならないように。 抜粋は

記事を読む

side-no

Stinger3でスマホ用子テーマを使っている方はここにご注意だ!と思ったところ

最近スマホ用子テーマを作成したのですが、その方のブログを見たときはっ!っとなり、気になったので。

記事を読む

Wordpress1

カスタムフィールドを使って記事下にまとめや今日の一言などいろいろと表示させてみよう!

前回このような記事 ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する を書いたのですが

記事を読む

ohajiki

ol要素をCSSで装飾(デザイン)する方法を実践したみたので備忘録

サイドバーの所に、WordPress Popular Postsを使ってランキングを表示させてみた際

記事を読む

コメントを残す

6件のコメント

  • 前原
    2014年9月9日 8:27 AM

    はじめまして 前原と申します。
    新しくなったStinger-minimumを使わせて頂いています。
    すっきりとした見やすいデザインがステキですね。

    お聞きしたいのですが
    記事内のリストul.olタグの文字を大きくするために

    /* 記事内の ul, ol タグ */.ol li {
    font-size: 16px;
    line-height: 25px;
    list-style-type: decimal;}

    .ul li {
    font-size: 16px;
    line-height: 25px;}

    .ul {
    list-style-type: disc;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 40px;}

    上記を
    小テーマ側のstyle.cssの一番下に
    追加してみたのですが
    フォントサイズが変更できません。

    kizi.ol liで囲んでもダメでした。
    お時間が許すのであればご教授願いたいと思います。

  • niji_mami
    2014年9月9日 9:24 PM

    はじめまして 前原さん(o´∀`o)
    コメント&ご利用頂きありがとうございます。

    ul.olタグの文字を大きくしたいとのご質問ですが、
    cssに記載する
    ul,olの前に.(ドット)を書かないで

    ul li{
    font-size: 16px;
    line-height: 25px;
    }

    こんな感じにしてみてください!

    また何かありましたらお気軽にコメントくださいね|*゚∀`*)ノ

  • 前原
    2014年9月14日 1:03 AM

    丁寧なお答えありがとうございます。
    教わったとおりにやってみたのですが
    何故かフォントサイズ変更できなくて
    ぐぐったりいろいろしていました。
    覚えたてのCSSの知識ではムリみたいです。
    CSSを本格的に勉強してからまた挑戦してみます。

  • niji_mami
    2014年9月14日 10:10 PM

    前原さん こんにちは!

    そうですか。。できなかったですか。。残念です(`;ω;´)

    検証ができなくて大変申し訳ないのですが、親テーマのcssを見ると、【.post ul】 とクラス名にpostが使われているので、一度こちらでお試しください。( *゚ェ゚)*_ _))ペコり

    ちゃんと文字が大きくできるといいなぁ。。。
    また何かありましたらお気軽にどうぞですw

  • みゆ
    2015年5月10日 3:20 PM

    .post ul
    で文字サイズが変えられました。
    なかなか解説されているところがなくて苦労していましたが、助かりました!

  • niji_mami
    2015年5月11日 7:50 PM

    みゆさん 
    こんにちは( ´∀`)

    なんだか解決できたようでよかったです(∩´∀`)∩
    コメントありがとうございました!

2件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2016年7月
    « 12月    
     123
    45678910
    11121314151617
    18192021222324
    25262728293031
電子書籍ストア BookLive!
PAGE TOP ↑