最初にすること

ブログを始めて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);
 }

関連サイト

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

CSSで簡単に作れる見出しデザイン40選｜オシャレ装飾で見出しに存在感を

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

ferret-plus.com

登録の順序

画像を用意

512×512 ピクセル以上の正方形画像を用意してください。拡張子の指定は特に無いみたいです。

画像を登録

外観＞カスタマイズ　をクリックすると、カスタマイズ画面に切り替わります。

　サイト基本情報　をクリックします。

左側に「サイトアイコン」その下に「画像を変更」というスイッチがりますのでクリックして用意した画像を選択して登録完了です。

1. 「サイドバーのタグ設定」
2. 「サイドバーの表示順と表示内容を編集する」

サイドバーのタグ設定

テーマエディタを開く

何も設定していない場合は、赤枠内のような感じになります。

テーマエディタを開いて、編集していきましょう。

外観＞テーマエディタ

をクリックしてください。

場所は用意されていないので、自分で確保しましょう。私は、メインのタグの下に追加しました。

分からなくならないように、下のようなコメントを追加しました。

/ ****************************** 
 ** スライダー見出し
 / ****************************** 

サイドバーのタグはH3です。

.sidebar h3 {

の後に好きなように設定しましょう。内容はメインのタグと同じ感じになります。

ちなみに私の設定は、

/ ****************************** 
 ** スライダー見出し
 / ****************************** 
 .sidebar h3 {
 background:none;
   background: #222222; /背景色/
   padding: 0.5em;/文字周りの余白/
   color: white;/文字を白に/
   border-radius: 0.5em;/角の丸み/
 }    

です。

関連サイト

CSSで簡単に作れる見出しデザイン40選｜オシャレ装飾で見出しに存在感を

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

ferret-plus.com

サイドバーの表示順と表示内容を編集する

表示順序の変更

　外観＞ウィジェット　　をクリックしてください。

右の赤枠内がサイドバーに表示されている内容です。順番を変更するには、名称部分をクリックして上下にドラッグすると変更できます。

表示内容の変更

外観＞ウィジェット　　をクリックしてください。

左側のメニューからサイドバーに表示させたいメニューを選択し、プルダウンメニューをクリックして下さい。プルダウンメニュー内のサイドバーに✔を入れれば完了です。

チェックを確認したらスクロールバーを下のほうにスライドさせて「ウィジェットを追加」をクリックすると右の欄に選択した項目が追加されます。

最初に

Cocoon設定＞スキン タグ から画面下部にあるテンプレートがありますので、そこから選択してみて下さい。

全体設定を変更できるようです。

上手く切り替わらない場合は、こちらを確認して下さい。HTTPの設定や

まずは、これを選択して、気に入らなければ、以下の内容について設定するといいと思います。

ブログを始めて5ヶ月目で初めて知りました。

VSA-CYCLIST

自分で設定した段落で、約1年半運営してきましたが、用意されているスキンから選んで運営しています。

10記事位、書いたらスキンを設定するのがいいと思います。

スキンが変わると、画像などがマッチしなくなる場合があります。

テーマエディタに書き込むと、そちらが優先されるようです。

テーマエディタを開く

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

見出し、タグの装飾変更方法

「子テーマ用のスタイルを書く」以降の内容を変更していきます。

/ ****************************** 
 ** 子テーマ用のスタイルを書く
 / ****************************** 
 /必要ならばここにコードを書く/
 /* 見出しカスタマイズ / / H2 */

ブロックタイプ「T」のH2、H3、H4のタグの装飾を変更します。

デフォルト

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
   line-height: 1.25;
   font-weight: bold;
 }
 .article h3, .article h4, .article h5, .article h6 {
   margin-top: 35px;
   margin-bottom: 20px;
 }
 .article h4, .article h5, .article h6 {
   font-size: 20px;
   padding: 6px 10px;
 }
 .article h2 {
   font-size: 24px;
   margin-top: 40px;
   margin-bottom: 20px;
   padding: 25px;
   background-color: #f3f4f5;
 }
 .article h3 {
   border-left: 6px solid #777;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   font-size: 22px;
   padding: 6px 20px;
 }
 .article h4 {
   border-top: 2px solid #ccc;
   border-bottom: 2px solid #ccc;
 }
 .article h5 {
   border-bottom: 2px solid #ccc;
 }
 .article h6 {
   border-bottom: 1px solid #ccc;
 }
 @media screen and (max-width: 480px) {
   .entry-title, .article h2, .article h3, .article h4, .article h5, .article h6 {
     font-size: 20px;
     padding: 10px;
     margin: 6px 0 12px;
   }
 }

一度リセット

設定を一度リセットします。書き換えます。

 .article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
} 

私の設定

/ ******************************  
** 子テーマ用のスタイルを書く
/ ******************************  
/必要ならばここにコードを書く/
/* 見出しカスタマイズ /
/ H2 /
 .article h2{
  background:none;
  background: #222222; /背景色/ 
  padding: 0.5em;/文字周りの余白/ 
  color: white;/文字を白に/
   border-radius: 0.5em;/角の丸み*/
 }
 /* H3 /
 .article h3{
 border-top:none;
 border-bottom: 2px solid #ccc;
 border-left:none;
 border-right:none;
   background: #fff; /背景色/
   padding: 0.5em;/文字周りの余白/
   color: #222222;/文字色/
   border-radius: 0.5em;/角の丸み*/
 }
 /* H4 /
 .article h4{
 border-top:none;
 border-bottom: 1px dotted #ccc;
   background:  #fff; /背景色/
   padding: 0.5em;/文字周りの余白/
   color: #222222;/文字を黒に*/
 }
 /* H5 /
 .article h5{
  border-top:none;  border-bottom:none;
   background: #fff; /背景色/
   padding: 0.5em;/文字周りの余白/
   color: white;/文字を白に/
   border-radius: 0.5em;/角の丸み*/
 }
 /* H6 /
 .article h6{ border-bottom:none;
   background: #fff; /背景色/
   padding: 0.5em;/文字周りの余白/
   color: white;/文字を白に/
   border-radius: 0.5em;/角の丸み*/    
 }

関連サイト

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

CSSで簡単に作れる見出しデザイン40選｜オシャレ装飾で見出しに存在感を

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

ferret-plus.com

エラーが出たら、重複している命令はないか確認して修正していきます。