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

WordPress等

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

スポンサー広告

最初にすること

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

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

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

テーマエディタを開く

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

 

 

タイトルの装飾変更方法

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

デフォルト

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

.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);
}

関連サイト

CSSで簡単に作れる見出しデザイン40選

CSSで簡単に作れる見出しデザイン40選|オシャレ装飾で見出しに存在感を
ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていたりしていませんか。今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるCSSの見出しを紹介した記事をまとめました。

コメント

タイトルとURLをコピーしました