この記事のタイトルは最初、「PC表示のカエレバのCSS設定に３日かかった話。」だったのですが、私が３日かかっただけでこの記事の手順を参考にしたらきっと３分でできるな！と思いタイトルを変えてみました。※できなかったらすみません。たぶんできると思うんだけど……。
本題
WordPressには簡単に見た目を変えてくれるテーマというシステムがあります。
見た目だけじゃなく色んな機能をもったテーマもあり、有料版とフリー版と色々あるのですが、CuruCumaはフリーで人気のSimplicity2というテーマを利用しています。
私が書かなくても色んな所でSimplicity2が使いやすく便利で仕方ないという記事がネットに溢れ返っているのであえて書きませんが、Simplicity2にはとってもお世話になっています。
ありがとうございます。
Simplicity2のサイト
実はWordPressを利用して色々躓いたりしているのですが、1番躓いて時間が長かったのがPCでブログを見た時のカエレバのCSSを設定することでした。
多分私のような問題で躓く人はいないかもしれません。
色んなQ&Aとか読んでみたんですが、みんなささっと解決しているなか、私だけ意味不明でした。私の理解不足知識不足のせいなんだけど……。今思えば根本的な所が間違っていた。
でもこんな記事があれば、3日も悩まずにすんだなぁと思ったので記事にすることにしました。
※この設定はSimplicity2にSimplicity2 Childをインストールした状態です。
スキンファイルもアップロードしているのですが、スキンファイルでCSSのを設定していないのでスキンファイルのアップロードが関係ないと思います。この認識が間違っていたらすみません。
こうやったらSimplicity2でカエレバのCSS設定できたよ！
手順 ①
1、ダッシュボードを開きます。（ブログのログイン画面から入っても良いです）
手順②
ダッシュボード画面に入ったら、「外観」をクリックします。
すると、「テーマの編集」が表示されるのでこれをクリックします。
手順③
「テーマの編集」を開くとコードを記入する画面が表示されます。
右上のまるで囲まれた箇所が、Simplicity2 Childになっているか確認してください。
違う場合はSimplicity2 Childを選び横の「選択」ボタンを押します。
テーマの編集 Simplicity2 child: style.cssと上に表示されるので、緑の四角い枠の中にコピーしてきたCSSや設定したいCSSを記入します。
手順④
こういう感じになると思います。
そして最後に「ファイルを更新」ボタンを押します。
以上で設定が終わりましたが、これをやってもカエレバの表示が変わらないという場合は、違うブラウザーでブログを開いてみるか、使っているブラウザーのキャッシュを削除してから再度ブログを読みこんでみてください。
私は最後はキャッシュのせいで変更した箇所が反映されませんでした。
後ずっと勘違いをしていましたが、外観＞カスタマイズ＞追加CSSの欄にCSSを記載していましたが、ここではなぜかCSSを設定できませんでした。
私の知識、理解度で今のところ、「追加CSS」の項目を何に使うのかわかりませんが、行く行くはこの謎も解明されるのではないかと思います。
ちなみにコピペして使わせて頂いたカエレバのCSSはこちらのサイトのCSSです。
色んなCSSがありますが、楽天やamazonのボタンがシールみたいで可愛かったのでこちらをお借りしました。
最後に。
カエレバでコードをコピーする時はデザインを「amazlet風-2（CSSカスタマイズ用）」に設定しておくのをお忘れなく～。
はぁー甘いモノが食べたい。
