ブログのデザイン変更しました(^-^)

お気づきの方も多いかも？しれませんが、最近当ブログのデザインが変わりました！

きっかけは、使用していた無料テーマ「ルクセルタス」を最新のバージョンに更新しましたら、いろいろとデザインが崩れてしまったことでした。

Luxeritas Theme | SEO最適化、レスポンシブ、高...

Luxeritas はSEO最適化済み、レスポンシブデザイン、高カスタマイズ性にも関わらず、Webページを高速に表示するための仕組みを満載した、無料の WordPress テーマです。

Luxeritas Theme

それで、これを機に、無料テーマ「コクーン」に鞍替えして、その中のスキンを適用してみることにしました。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

Cocoon

適用したスキンは「カラフルライン」というもので、当ブログの関連サイト「千葉の先っぽ」でも利用しているものです。

テーマとスキンを適用しただけではシンプルすぎますので、一番上の横長の画像や文字のサイズやサイドバーなどをいろいろ調整したり、CSSを記入したりして、それなりに出来上がりました(^-^)

/*タイトルを左側に寄せる*/
.header-in .tagline {
text-align:left;
	padding-left: 10px;
}

.header-in .logo {
text-align: left;
	padding-left: 10px ;
	
}

/*読み上げ機能関連*/

#voice-select{
	/*display: none;音声選択欄を表示しない場合に有効にする*/
        width:100%;
}


/*読み上げボタンを右側にする。左のままでよければ記入しなくてもよい*/
.wp_speech_contents-box{
	text-align: right;
}

/*画像キャプションの文字を大きくする*/
.wp-block-image figcaption {
	margin: 0;
	color: #444444;
	font-size: 1em;
	text-align: center;
	
}
/*サイトロゴのサイズや太さを変更し白い枠をつけ見やすく*/
.logo-header a span{

font-weight: bold;
font-size:1.5em;
text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0 -1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/*本文のワクに影をつける*/
.main{
	box-shadow:2px 2px 10px 0px #505c74;
	position: relative;
	background-color: #fcfcfc;
}

/*サイドバーのワクに影をつける*/
.sidebar {
    box-shadow:2px 2px 10px 0px #505c74;
	position: relative;
	background-color: #fcfcfc;
}

/*写真に影をつける*/
.entry-content img{
box-shadow:2px 2px 10px 0px #505c74;
}

/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a{
 background:#fff;
 border:1px solid #bbb;
 color:#666;
 padding:6px;
 margin:3px;
 border-radius:1px;
 text-decoration:none;
 font-size:12px;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover{
 background:#ff870f; 
 color:#fff; 
 border:1px solid;
}

よりすっきりと見やすいブログになったかな？と思いますがいかがでしょう？