【Cocoon】【超簡単】タイトルを編集する

この上のタイトルを編集したいと思います。他のサイトも探しましたが私に出来そうなのがありませんでしたので、今までの知識の応用でうまく行ったので記録しておきたいと思います。

最初にすること
テーマエディタを開く
タイトルの装飾変更方法
私の設定
関連サイト

最初にすること

ブログを始めて5ヶ月が経ちました。Cocoon設定である程度設定することが出来るようです。Cocoon設定＞スキンで画面下部でテンプレートのようなものを選択出来るようになっています。

まずは、この中から選択してみると良さそうです。

VSA-CYCLIST

ブログを開設して、直ぐに、「私の設定」で1年以上サイト運営してきましたが、今は、元々用意されているスキンを使っています。

雰囲気が変わるので、イラストなどが合っていない気がしますが手遅れです。

ある程度記事を書いたら、スキンを選択してみるのがいいと思います。

個別に作り上げたい場合は、以下の方法でやるといいでしょう。

テーマエディタを開く

外観＞テーマエディタ
をクリックしてください。

タイトルの装飾変更方法

実は、見出しの変更方法と全く同じです。

デフォルト

はっきりとはわかりませんが、多分これがデフォルトかと思います。

.article h1 {
    line-height: 1.25;
    font-weight: bold;
}
.entry-title {
    font-size: 26px;
    margin: 16px 0;
    line-height: 1.3;
}

見て分かった方もいらっしゃると思いますが、H1のデータを設定するだけです。他のところに不具合が出るかについての詳細は、まだ未確認ですが、見つけ次第対策を考えたいと思います。

「子テーマ」にはH1の編集欄がないんですよね。。。

プログラムを追加します。

リセット

設定を一度リセットします。書き換えます。結局このプログラムは全部なくなりますが。

.article h1 {
padding: 0;
background: none;
}

私の設定

色合いが今一なので変更を考えて居ますが、タイトルの変更は成功したので記載します。

.article h1 {
  padding: 15px 5px;
  background:#ffe5e5;
  font-size:26px;color:#1f3134;
   -webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffe5e5,15px 15px 1px -4px rgba(0,0,0,0.2);
   -moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffe5e5,15px 15px 1px -4px rgba(0,0,0,0.2);
  box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffe5e5,15px 15px 1px -4px rgba(0,0,0,0.2);
 }

下の形に変更しました。今のところ満足です。

.article h1 {
         font-size:28px;
         font-family:bold;
         text-shadow: 0 1px 0 #ccc,
                0 2px 0 #c9c9c9,
                0 3px 0 #bbb,
                0 4px 0 #b9b9b9,
                0 5px 0 #aaa,
                0 6px 1px rgba(0,0,0,.1),
                0 0 5px rgba(0,0,0,.1),
                0 1px 3px rgba(0,0,0,.3),
                0 3px 5px rgba(0,0,0,.2),
                0 5px 10px rgba(0,0,0,.25),
                0 5px 5px rgba(0,0,0,.2),
                0 10px 10px rgba(0,0,0,.15);
 }