「カスタムCSS」の活用事例(参考)

Graziosoの「テーマオプション」→「外観設定」で設定できる項目以外の箇所を変更するためには、Graziosoの製品ファイル内に含まれる「core.css」を編集する必要がありますが、この「core.css」というファイルは、Graziosoの仕様上ワードプレスの管理画面の「テーマ編集」からは編集・操作する事ができません。

この「core.css」を編集するためには、TeraPadなどのテキストエディタを使用して、Grazioso/css/core.cssファイルを書き換えた上でFTPソフトまたはサーバーのファイルマネージャー機能を使用してアップロードし、既存で存在するcore.cssファイルを上書きする必要がありますが、もっと簡単な方法としては「テーマオプション」→「外観設定」の一番下にある「カスタムCSS」の欄に任意のCSSコードを追加して保存する方法もあります。

「カスタムCSS」設定欄

bandicam 2014-09-15 15-59-12-881

当ページでは、お寄せ頂いたご質問への回答の中から、比較的簡単なカスタマイズ事例をいくつか掲載していますので参考にされて下さい。
なお、販売ページにも記載しておりますが、原則として個別のカスタマイズに関しましては無料サポート対象外となっております。お問い合わせに対しましては回答できる範囲内でなるべくお答えしておりますが、ご購入者がご自身でテーマを編集されて起きた不具合の修正等にはご対応いたしかねますので、あらかじめご了承ください。

テーマ全体の文字フォントを変更したい場合

下記に記載のコードを「カスタムCSS」の欄に追加し保存することで任意の文字フォントを適用することができます。

body {
    margin : 0 auto;
    padding : 0;
    font : 100%/1.5 'ここに任意の文字フォントを指定';    
    color : #ffffff;
    text-align: center;
    background: #ffffff;
}

※「ここに任意の文字フォントを指定」の部分をお好みのフォントに置き換えてください。

代表的なフォントの種類を参考までに掲載しておきます。

Meiryo, Tahoma, Verdana, Arial, sans-serif

MS Pゴシック, ヒラギノ角ゴ Pro W3, Arial, Helvetica

Hiragino Kaku Gothic ProN, Meiryo, sans-serif

 

投稿個別記事・固定ページのヘッダーの文字色・サイズを変更したい場合

投稿個別記事・固定ページのヘッダーの文字色を変更したい場合は下記のコードを「カスタムCSS」の欄にコピー&ペーストしてください。

.content-innerlead h1 {
    font-size: 4em;
    line-height: 1.25em;
    color: #FFFFFF;
}

上記コードの#FFFFFFの部分をお好みのカラーコードに変更してください。
4em の部分の数字のみ変更することで文字のサイズを変更できます。

なお、個別に投稿個別記事・固定ページのヘッダーの文字色を変更したい場合は各投稿記事・固定ページの編集画面から個別にヘッダー内のタグを設定できる機能を利用してCSSを改行無しに編集し、下記のような記載にしてご利用ください。

<style type="text/css">.content-innerlead h1 {font-size: 4em;line-height: 1.25em;color: #FFFFFF;}</style>

 


 

投稿個別記事・固定ページのヘッダーの背景色を変更したい場合

投稿個別記事・固定ページのヘッダーの背景色を変更したい場合は下記のコードを「カスタムCSS」の欄にコピー&ペーストしてください。

.container-innerlead {
  background: #19bb9b;
}

上記コードの#19bb9bのの部分をお好みのカラーコードに変更してください。


 

カスタムコードウィジェットの#1、#2、#3について

Graziosoの「テーマオプション」から「外観設定」タブで設定したカスタムコードウィジェット#1、#2、#3の文字色を反映させるためには、ウィジェットのテキスト入力欄上で<h1>タイトル</h1>や<p>テキスト</p>のように適切なHTMLタグで括っていただく必要があります。(HTML形式のタグで括られていない状態のテキストを入力しても文字色は反映されません)

なお、レスポンシブ対応の仕様上、Hタグにつきましては、H1のみが有効となります。(レスポンシブ対応の関係上、当該ウィジェットでH2~のタグに文字色等は反映されません)

また、固定ページや投稿記事ページ内では当該ウィジェットは正常に機能せず、あくまでもトップページにHTMLやJavascript形式のコンテンツを追加するための機能となっております。

念のため、使い方ガイドの当該ページ上にも追記しておきましたので下記URLよりご参照ください。
https://guide.grazioso.info/?p=328

ご参考までに、テキストに関しましては、HタグやPタグ以外にも、Fontタグをご活用頂くことでテキストのサイズや色などを自由に表現できることが可能です。

この記事を書いた人

Graziosoサポート

Graziosoのカスタマー担当。