副業ライフ

Buymaのバイヤーとして副業程度に稼いでおりました。今はBuymaを辞めてアフィリエイトに挑戦しています。

STINGER7のフォントを大きくした。あれっ、リストだけ小さいままだ。作業メモ

当ブログではアフィリエイト広告を利用しています

http://www.flickr.com/photos/16324044@N00/5402370840

photo by Eva the Weaver

  

新たにwordpressでクレジットカードのサイトも作ろうとしています。

今のところまだ全然進んでいませんが。。。今日は作業メモだけ書いておきます。

サイトを作るにあたって最初は色々テンプレートをためすわけだが、とりあえず最初にテーマ「stinger7」を入れてみる。

フォントが小さかったのでフォントを大きくしてみる。

STINGER7のフォントを大きくした。あれリストだけ小さいままだ。

STINGER 7はデフォルトの文字が14pxと小さいので、フォントサイズが16pxになるようCSSを追記してみました。STINGER 7のCSSの最下部に追記

 


p {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 20px;
}    

 

こんな感じでCSSを追記して変更を確認してみると、、、

 

あれっリストタグの箇所だけ14pxのままだ。

 

そりゃそうだ。

リストタグは別に14pxでしっかり指定されている。こんな感じで↓

2388行目あたり

 


    /*リスト */
    .post ul li {
        font-size: 14px;
        line-height: 27px;
    }

 

↑このリストタグ14pxの指定を変更してやればいい、もしくはCSSを最下部に追記すればいい。

ちなみに最下部にCSSを追記して変更が適用されるというのは最下部に追記したコードが優先されるからだ。

↓16pxに変更したい場合は、こんな感じでCSS最下部に追記すればいい

 


    
/* 基本の文字 */
p {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 20px;
}

/*リスト */

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

.post ol li {
font-size: 16px;
line-height: 27px;
}

 

↑こんな感じでCSSを最下部に追記すればリストタグのフォントも16pxになる。

完全に全体のフォントサイズを16pxにするには、ほかにもまだCSSを変更しないといけない箇所があるかもしれないけど。とりあえず全体のフォントサイズは16pxになる。

こうやってみてみると、全体フォントを16pxに変更するだけでもCSSをかなり調べながら変更しなきゃならないわけだ。CSSの編集になれていないとかなり時間がかかります。

私もHTML、CSSの知識は最低限しか知らないので今回はフォントサイズを変更するのはやめました。違うテンプレートを使うことにします。調べながらやればできないこともないが、意外と時間がかかるんですよねこういうカスタマイズは。

stinger7(6も同様)の特徴はpc表示のとき文字が小さく、スマホ表示は文字が大きい

stinger7の特徴をメモ。

stinger7のフォントサイズは、スマホ表示時は文字が16px、PC表示時は文字が14pxに設定されている。

メディアクエリで指定されているようだ。

2195行目あたり

 

/*media Queries PCサイズ
----------------------------------------------------*/

@media only screen and (min-width: 781px) {

/*--------------------------------
    各フォント設定
    ---------------------------------*/
    p {
        font-size: 14px;
        line-height: 23px;
        margin-bottom: 20px;
    }

 

2341行目あたり

まあ、メディアクエリ自体わからんので詳しくは説明しませんが、ようはサイズを狭めたときにフォントサイズが変更されるように設定されているようです。メディアクエリでPCサイズの場合はフォントが14pxになるよう指定されています。

stinger7(stinger6も同様)はPC表示のみ文字サイズが小さめで14pxで表示されます。でもって、スマホ表示にすると文字が大きくなり16pxで表示されます。

そんなこんなで、結局simplicityを使う

STINGERを使いたかったんだけどね、結局、文字が大きめがいいと思ったので暫定的にsimplicityを使っていきます。ほんとうはSTINGERをカスタマイズしてサイトをつくりたいけど時間がないのでやめときます。

STINGER3あたりは文字サイズも標準的なので文字が大き目がいい方はSTINGER3がいいかもしれません。stinger7(stinger6も同様)はPC表示だと文字が小さい印象がします。

デフォルトのままstinger7を使っている方も多く見受けられますが、やはり、サイトデザインは全体的に小さくコンパクトにまとまった印象になります。

 

最後に、色々リサーチして気がついたことがあります。それは、stinger7を使っているひとだけを検索する方法です。

 

stinger7を探す

以下のリンクからstinger7を利用しているサイトを探すことができます。(完璧ではないですが)

 

stinger7を使っている人を検索→

テンプレートstingerを使っている人だけを検索する方法

長くなったので次回につづく。

 

次回→テンプレートstingerを使っている人だけを検索する方法