子テーマ"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

関連記事

wordpress_stickers_everywhere

アイキャッチ(サムネイル)画像の大きさを変更する【Stinger3カスタマイズ】

いくつかお問い合わせを頂いたので、アイキャッチカスタマイズについてこの記事でお返事とさせて頂こうと思

記事を読む

wordpress_stickers_everywhere

【WordPress】とっても簡単に目次を入れてくれるプラグイン「Table of Contents Plus」

このブログでも使用しているこのプラグイン。いろいろなところでお目にかかることがあり、面白そうだなと思

記事を読む

mac

WordPressの自動挿入されるpタグを削除する方法

WordPressにはpタグを自動挿入してくれる機能(auto paragraph)というものがあり

記事を読む

Wordpress1

コメント欄をカスタマイズしたので備忘録メモ(コメントとトラックバックを分ける)

現在このブログでのコメント欄はJetPackのコメントを使用しています。 これです! が、こ

記事を読む

shortcode-i

簡単にショートコードが使えるようになるプラグイン「Shortcodes Ultimate」

すごく簡単にショートコードが使えるようになるプラグイン「Shortcodes Ultimate」を導

記事を読む

コメントを残す

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年12月
    « 12月    
     1234
    567891011
    12131415161718
    19202122232425
    262728293031  
電子書籍ストア BookLive!
PAGE TOP ↑