こんにちは。
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テーマの変更って本当に大変だし面倒なのですが、適度にカスタマイズするのは楽しいなあと思います。
今後しばらく、当ブログの表示でおかしいところがあるかもしれませんが、少しずつ直していくつもりです。
よろしければコメントなどで「表示おかしいよ!」と申告していただけるとすごく助かります(^^)
ではでは(^^)/
コメント