こんにちは。
WordPressテーマを「Simplicity2」から「Cocoon」に変えてみています。
細かいカスタマイズはこれから(^^;)
今回は、テーマ変更の理由や、変更後すぐに行ったカスタマイズについて書きますね。
なぜテーマを変えたのか？
もともと「Simplicity2」が大好きで、変えるつもりがなかった私。
テーマ変更って、カスタマイズをやり直す必要があったりして大変ですし……
そんな折、なぜ急にテーマを変える気になったかというと、個人的に大好きなきたみりゅうじさん（@kitajirushi）の新サイト「お、いいねいいね面白いと思ったコトを書くブログ」を拝見して、その見やすさ・読みやすさにびっくりしまして。
私の中で、きたみりゅうじさんといえばこの本。
とにかく分かりやすい！
税金についてここまで分かりやすく書かれた本を他に知りません。
（他の本を読んでも、用語などが理解できない……）
タイトルに「フリーランス」とありますが、フリーランス以外の方にもおすすめですよ♪(^^)
きたみさんのサイトを拝見して、「Cocoon」の普遍的な見やすさに感心しきり。
そして、「きたみさんのところのような、見やすくて温かいサイトを作ってみたいなあ」と強く感じたのです。
「Cocoon」を使っているブログは多いけれど、ここまで「変えてみたい！」と感じさせられたのは初めてです。
テーマ変更後すぐに行った、CSS追記。
「Simplicity2」から「Cocoon」に変えたところ、「Google Analytics」のIDなどは引き継がれていました。（便利！！）
ところが現在うちのブログでは、LINEふうのバルーン表示をしていまして。
これはそのままではうまく引き継がれない。
ということで前段階として、「Cocoon」に変更する前に、背景画像のタグを変更。
<div class="line_back"></div>
という箇所を、
<div style="background-color: #7897C5;">
<!-- ここに会話を記入する -->
</div>
に変更しました。
これによって、「Simplicity2」から「Cocoon」にテーマ変更した後も、背景画像が表示されるようになります。
そして実際に「Cocoon」に変更してみると、既存の吹き出しがうまく表示されませんでした。
LINEふうの表示をしている箇所のタグを全て書き直すのも面倒……
そこで暫定的に、以下のCSSをカスタマイズ画面で追記しました。
/*******************************
* 左からの吹き出し
********************************/
.left_balloon {
position: relative;
background: #fff;
border: 1px solid #777;
margin: 10px;
padding: 10px;
border-radius: 15px;
margin-right: 20%;
clear: both;
max-width: 500px;
float: left;
}
.left_balloon:after,
.left_balloon:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.left_balloon:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 7px;
margin-top: -7px;
}
.left_balloon:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000;
border-width: 8px;
margin-top: -8px;
}
/*******************************
* 右からの吹き出し
********************************/
.right_balloon {
position: relative;
background: #85e249;
border: 1px solid #777;
margin: 10px;
padding: 10px;
border-radius: 15px;
margin-left: 20%;
clear: both;
max-width: 500px;
float: right;
}
.right_balloon:after,
.right_balloon:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.right_balloon:after {
border-color: rgba(133, 226, 73, 0);
border-left-color: #85e249;
border-width: 7px;
margin-top: -7px;
}
.right_balloon:before {
border-color: rgba(119, 119, 119, 0);
border-left-color: #777;
border-width: 8px;
margin-top: -8px;
}
/*******************************
* 割り込みを解除
********************************/
.clear_balloon{
clear: both;
}
このコードは、こちら↓を参考にさせていただきました。
あとは、「Simplicity2」で追加していたCSSをまるごと、「Cocoon」にも追記。
見たところGoogle検索の表示が若干おかしいので、後日修正するつもりです。
適度にカスタマイズする楽しさ。
今回、「Simplicity2」から「Cocoon」へとテーマ変更したところ、作者のわいひらさん（@MrYhira）が同じためか、引き継ぎがあって非常に楽でした。
ありがとうございます！
WordPressテーマの変更って本当に大変だし面倒なのですが、適度にカスタマイズするのは楽しいなあと思います。
今後しばらく、当ブログの表示でおかしいところがあるかもしれませんが、少しずつ直していくつもりです。
よろしければコメントなどで「表示おかしいよ！」と申告していただけるとすごく助かります(^^)
ではでは(^^)/
コメント