今回の変更点です。
見出しh2,h3にグラデーションをかけた
h2はこうなりました⬇️
左上から白→グレーに変更h3はこうなりました⬇️
cocoonの見出しの変更は、こちらのサイトを参考に行いました。
こちらを見れば、どこのコードにどのコードがかかっているかがわかります。
グラデーションの設定には、こちらのサイトが便利です。
⬆️のサイトでグラデーションのコードを引っ張ってきました。
今回「テーマエディター」に入力したコードはこちら。
.article h2 {
font-size: 24px;
margin-top: 40px;
margin-bottom: 20px;
padding: 25px;
background: -webkit-linear-gradient(154deg, #ffffff, #C0C0C0);
background: linear-gradient(154deg, #ffffff, #C0C0C0);
}
.article h3 {
background: -webkit-linear-gradient(154deg, #ffffff, #EEE);
background: linear-gradient(154deg, #ffffff, #EEE);
}
ブログカードの表示、アニメーション
＜before＞
＜after＞
再びウェブアシビ様にお世話になりました。
ブログカードの表示が変わりました。
「ペコ」って黄色の紙が掛かっている感じになっていますね。
また、カーソルを合わせると⬇️のような動きをします、
ウェブアシビさんのコードを、ほぼそのまま使用しました。
各パーツの部分部分で微調整を行ったので、変更した部分のみ記載します。
.cat-label{
color: #090909;/文字色/
background-color: #F4FA58;/背景色/
margin: -8px 0 0 0; /高さ調整/
box-shadow: 3px 4px 5px -1px black;/シャドーの位置/
}
.cat-label::after
right: -6px; /左右の位置調整/
border-bottom: solid 8px #AEB404; /小さな三角の高さ、色/
border-right: solid 6px transparent; /小さな三角の横幅/
}
/* カードホバー時のアクション */
.entry-card-thumb:hover {
box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75);/シャドーの位置/
}
.entry-card-title{
line-height: 1.3; /行間/
}
フロントページのレイアウト変更
テーマ「Cocoon」では、
リンクを直接「段落」に入れることで、ブログカードのリンクが表示されるようになっています。
⬆️は「Cocoonレイアウト」で「2カラム」を選択し、その中にURLを入力することでこういった表示になっています。
僕の場合、ブログページのリンクを作りたい場合は、
段落一つに
「http://shiroinublog.com/blog/」と入力すれば⬇️のように表示されます。
正直まだ気に入っていないので、まだ手を加えるつもりです。
カードのホバーアクションと、角の調整等・・・
コメント