ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑭記事のタイトルを見やすくするCSS】

ブログ

こんにちは
ニワトリです

『自分のブログを見やすく
 オシャレにしたい・・・』

『デフォルトも悪くないけど
 カスタマイズしたい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

今回は記事の下にある関連記事を整える
方法を紹介していきます!

当ブログ記事の下の関連記事は
このようになっています。

今回のカスタマイズ
  • 記事タイトルの設定
  • 記事タイトルの編集

記事のタイトルを設定する方法

cocoon設定のデフォルトは
上の画像のようになっています。

イケてないですよね・・・

記事タイトルの設定方法
  • 記事タイトルの設定
  • 記事タイトルの編集

記事タイトルの設定をする

やり方
  • wordpressメニュー
  • cocoon設定
  • 投稿

カテゴリ・タグ表示設定

  • カテゴリ・タグ表示
    ・カテゴリ・タグ1列
  • カテゴリ・タグ表示位置
    ・タイトル上

設定が完了したら
左上の「変更をまとめて保存」を押します。

ファイルを保存を押さないと
変更内容が反映されないため気をつけてください!

記事タイトルの設定はこれで終わりだよ!

【コピペでOK!】記事タイトルのデザインをCSSで調整する

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター
  • スタイルCSS

スタイルシート用追加CSS

/************************************
** 本文記事タイトル
************************************/
header.article-header.entry-header {
text-align:center;
}
.article-header h1 {
position: static;
font-size: 1.4em;
color: #333333;
background-color:#fff;
line-height:1.8em;
text-shadow: none;
margin:0;
padding: 1.5em .95em 1.1em;
}
.eye-catch{
box-shadow: 0px 3px 7px 0 rgba(0,0,0,.2);
}
.eye-catch img{
height:auto!important;
-webkit-filter:none;
filter:none;
opacity:1;
transform: none;
width: 100%;
}
a.cat-link, a.tag-link{
font-size:.7em;
border-radius:10px;
border:0;
margin:0.5em;
padding:0 0.5em 0;
background:#90C31F!important;
color:#fff!important;
}
.cat-link:hover ,.tag-link:hover {
opacity: .5;
transition: all .3s ease-in-out;
}
.entry-categories-tags {
margin-bottom: 0.4em;
}
.date-tags{/*日付・更新日*/
font-size:1.2em;
color:#7b7b7b;
top:5px;
right:0;
left: 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
div.date-tags span.post-update{/*投稿・更新の入れ替え*/
order: 1;
}
span.fa.fa-history::before{/*更新アイコン*/
content:”\f021″
}
div.date-tags span.post-update,div.date-tags span.post-date{
margin-right: 10px;
}
@media (max-width:1023px){
.entry-categories-tags.ctdt-one-row {
padding: 0;
}
}
@media (max-width:420px){
.article-header h1 {
font-size: 1.2em;
}
.date-tags{
top:3px;
}
}
@media (max-width:834px){/*画面幅834px以下のとき、本文周りの空白を非表示*/
main.main, div.sidebar {
padding:0;
}}
@media screen and (min-width: 601px) and (max-width: 834px){/*画面幅601px以上834px以下のとき、本文周りの空白を表示*/
div#content.content.cf{
margin:1em;
}}

span.fa.fa-history::before{/更新アイコン/
content:”\f021″

上記1か所の””は半角で入力しなおす
必要がありますので手打ちしてください。

『”(全角)』を打った後に変換を押し
『”(半角)』に打ち直してください。

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

スマホとPCで変更したデザインが反映しているか確認する

パソコン
スマホ

変更した記事タイトルが
スマホとPC画面の両方で
反映しているか確認をします。

記事タイトルが上の画像のように
表示されていれば設定は完了です。

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回は記事タイトルについて
紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

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