コピペOK♪wordpress無料テーマCocoon♪ブログ名の文字装飾してみた

• タイトル画像を作成するのが面倒
• タイトルの文字を装飾したい

私がタイトルを画像ではなく文字にしているのは表示速度の為です(￣▽￣;)

「少しでも画像を減らしたいけれど、ただの文字表記だとつまらない」という私と同じ思いの方はタイトル文字を装飾して飾っちゃいましょう！

タイトルの文字色は「Cocoon設定」の「ヘッダー」タブの「ヘッダー色（ロゴ部）」のロゴ文字色で変更してください。

wordpress無料テーマCocoon♪タコピペ文の張り付け場所

「外観」→「カスタマイズ」→「追加CSS」の順にクリックしていってください。

wordpress無料テーマCocoon♪タイトルの文字装飾コピペ文

/*タイトルの文字加工*/
.site-name-text{
font-size:220%;
font-weight:bold;
text-shadow:5px 5px 5px #ffebcd;
}

コピペ文の中身を紹介

.site-name-text{

CSSの名前になります。

font-size:220%;

タイトル文字の大きさです。

font-weight:bold;

タイトル文字を太字に指定しています。

text-shadow:5px 5px 5px #ffebcd;

文字の後ろの影についての指定です。

１個目の数字：右に向かってどれだけ離すか
２個目の数字：下に向かってどれだけ離すか
３番目の数字：ぼかす大きさ

#ffebcd：影の色の指定

ブログ名の文字の影色を変更したいなら

#ffebcd　←　カラーコード

カラーコードは英語でも大丈夫です。

• ピンク　pink
• 赤　　　red
• 水色　　powderblue
• 紺色　　navy　

こんな風に英語を記入してもOKなんです。
私はピンクを使用することが多いので、英語でpinkとよく記載しています。

他のカラーコードを知りたい場合は、私の主サイトに記事を作成してありますのでそちらを参考にしていただければと思います。

タイトルの下に線を付けたいなら

background: linear-gradient( rgba(0, 0, 0, 0)60%, pink 100%);

これはグラデーションを応用してみました。
「rgba」表記をすると色の濃さを指定できるので、「0」で無色を指定。
上から60％まで無色です。
その下から100％まで（一番下までということです）ゆるくグラデーションをつけなさいと指定してあります。
グラデーションではなく、はっきりとした線がいい場合は、グラデーションが出来ないように、2番目の％を1番の％と同じ数字にしてください。

コピペOK♪wordpress無料テーマCocoon♪ブログ名の文字装飾してみた まとめ

最後の「タイトルの下に線を付けたいなら」は、CSSを作成しておくとマーカーとして使用できます。
でも、ブロックごとしか使用できませんが(;^ω^)
使用するときは、工夫が必要です。
通常の文字背景色を選択した後、「詳細設定」→「HTMLとして編集」をクリックして、文字背景をした文字の場所を探します。

例

<p>最後の「タイトルの下に線を付けたいなら」は、CSSを作成しておくとマーカーとして使用できます。<br>でも、<span class="sen_pink">ブロックごとしか使用</span>できませんが(;^ω^)<br>使用するときは、工夫が必要です。<br>通常の文字背景色を選択した後、<span style="background-color:#fdf2f2" class="tadv-background-color">「詳細設定」→「HTMLとして編集」</span>をクリックして、文字背景をした文字の場所を探します。<br></p>

<span style=”background-color:#fdf2f2″ class=”tadv-background-color”>

この文を加工します。

<span　class=”CSSの名前”>

でも文字背景色指定したCSSを使用すると、編集エディタ―には表示されないんですよね(￣▽￣;)