ブログタイトルをいじってた。

cocoon

WordPressで人気の無料テーマCOCOONのブログタイトルをちょっとカッコよさげにカスタマイズしてみたよ。

今回の説明は当ブログでも使用している感じの影を付けてみるよ!

WordPressいじってみた…。

まず、タイトルを編集するにはCSSを追加してあげる必要があります。

「ダッシュボード」の左にある「外観」の「カスタマイズ」をクリックします。

ページが移動したら「追加CSS」をクリックします。

CSSは以下の画像の「ここに入力していきます。」に書いていきます。

書き方は簡単!以下のコードをそのままコピペ!!

.site-name-text{
 background: #EEE url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAlSURBVBhXY/wPBAxAwMjICKIYmGAMqDgDiAdmwQSY4DJglQwMABSSDgJboIQfAAAAAElFTkSuQmCC) repeat;
 text-shadow: -5px -5px black, -4px -4px white;
 font-weight: bold;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
}

応用編にもチャレンジしてみる!

影の向きを変えてみる text-shadow

影の向きを変える場合は text-shadow を書き換えます。

◆右上から

WordPressいじってみた…。
text-shadow: 5px -5px black, 4px -4px white;

◆左下から

WordPressいじってみた…。
text-shadow: -5px 5px black, -4px 4px white;

◆右下から

WordPressいじってみた…。
  text-shadow: 5px 5px black, 4px 4px white;

影の斜線の向きを変えてみる background

斜線の向きを変える場合は background を書き換えます。

WordPressいじってみた…。
background: #EEE url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAmSURBVBhXY/gPBAwMDGAMAoxQDogHohiYkDmMjIwMTMgcBgYGBgB44BP4zL9BVQAAAABJRU5ErkJggg==) repeat;

以上こんな感じでタイトルをちょっとだけいじってみました。

良かったら使ってみてね!!

コメント