WordPressテーマを「Simplicity2」から「Cocoon」に変更後、すぐに行ったこと。

こんにちは。

WordPressテーマを「Simplicity2」から「Cocoon」に変えてみています。
細かいカスタマイズはこれから(^^;)

今回は、テーマ変更の理由や、変更後すぐに行ったカスタマイズについて書きますね。

なぜテーマを変えたのか？
テーマ変更後すぐに行った、CSS追記。
適度にカスタマイズする楽しさ。

なぜテーマを変えたのか？

もともと「Simplicity2」が大好きで、変えるつもりがなかった私。
テーマ変更って、カスタマイズをやり直す必要があったりして大変ですし……

そんな折、なぜ急にテーマを変える気になったかというと、個人的に大好きなきたみりゅうじさん（@kitajirushi）の新サイト「お、いいねいいね面白いと思ったコトを書くブログ」を拝見して、その見やすさ・読みやすさにびっくりしまして。

私の中で、きたみりゅうじさんといえばこの本。

フリーランスを代表して申告と節税について教わってきました。

created by Rinker

¥1,980(2021/09/20 08:19:01時点 Amazon調べ-詳細)

とにかく分かりやすい！
税金についてここまで分かりやすく書かれた本を他に知りません。
（他の本を読んでも、用語などが理解できない……）

タイトルに「フリーランス」とありますが、フリーランス以外の方にもおすすめですよ♪(^^)

きたみさんのサイトを拝見して、「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;
}

このコードは、こちら↓を参考にさせていただきました。