スポンサーリンク

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

ブログ

こんにちは。

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;
}

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

WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法
LINEでの会話のような吹き出し型バルーンをCSSで作成する方法です。会話文章にLINEっぽい雰囲気を出せるかと思います。

あとは、「Simplicity2」で追加していたCSSをまるごと、「Cocoon」にも追記。
見たところGoogle検索の表示が若干おかしいので、後日修正するつもりです。

適度にカスタマイズする楽しさ。

今回、「Simplicity2」から「Cocoon」へとテーマ変更したところ、作者のわいひらさん(@MrYhira)が同じためか、引き継ぎがあって非常に楽でした。
ありがとうございます!

WordPressテーマの変更って本当に大変だし面倒なのですが、適度にカスタマイズするのは楽しいなあと思います。

今後しばらく、当ブログの表示でおかしいところがあるかもしれませんが、少しずつ直していくつもりです。
よろしければコメントなどで「表示おかしいよ!」と申告していただけるとすごく助かります(^^)

ではでは(^^)/

0

コメント

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