皆さんは、無料テーマのcocoonを使ってますか？
それとも各種有料テーマを使ってますか？
私は、cocoonを使ってブログを運用しています。
- SWELL
かなり多くのユーザーを獲得しているとてもシンプルでオシャレなテーマ操作も優しくて初心者向けのようです。 - AFFINGER
こちらも有名なテーマです。収益化ガチ勢の人たちが使っているイメージがあるプロテーマです。 - cocoon
私も使っている無料テーマです。ユーザー数も多く、初心者向けのイメージがありますが、実は、カスタマイズが難しいという難点があります。
まだまだありますが、有名どころで言えば、
この３つが有名かと思います。
無料っていう敷居の低さから
cocoonを使っているけれど、
AFFINGERがかっこいいんだよな。
そうそう、cocoonって意外と難しいんだよね。
SNSとか見ていると、
SWELLを使っている人が
すごくオシャレなサイトを運営しているのを見かけるし、
枠とかブロックがオシャレだよね。
あとは設定がすごく簡単らしいのよね。
まぁ分からなくもないね。
私も始めたばかりの時は、何だこれ…
めちゃくちゃ難しいじゃん。
って思ったもん。
やはりcocoonは、設定などの操作が難しくて挫折してしまう人が
多い印象を受けます。
ただ、私自身「cocoon」はとても優秀なテーマだと思っています。
これが無料で使えているということがすごいと思います。
cocoonテーマ使用者に向けて、
私のおすすめするカスタマイズ職人の方たちの
サイトを利用させてもらい、
ブロックや枠のCSSを入れる方法を解説する。
私自身、CSSやHTMLが全く分からず苦労したので、
CSSとHTMLについて、私なりに分かりやすく
説明してみたいと思いました。
それでは、本題に進んでいきましょう！！
1．CSSとHTMLについて
CSSとは…
CSS（カスケーディング・スタイル・シート）といい、
ネット上のプログラムのようなものだと思ってもらえれば良いです。
難しいことは覚えなくて大丈夫です。
私も、CSSを組むことはできないですし、
インターネット上には、職人の方々が
コピーして良いよ！と置いてくれているので、
それをコピーして使わせてもらいましょう！
HTMLとは…
HTML（Hyper Text Markup Language）といい、
登録したCSSを呼び出すための呪文と覚えておきましょう。
カスタマイズ職人の人たちのサイトで見つける
☟
CSSをご自身のWordPressにコピーして登録する
☟
CSSでオーダーメイドの枠やブロックを組み込んである状態
☟
HTMLコードを記事に貼りつければ、
CSSで組んだ枠やブロックが読み出される
うーん、全然分かりません。
ですよね笑
私も全然分かりませんでした。
では、例えばで行ってみましょうか。
例：風の魔法を覚えるために、魔法使いになりましょう！
訳：気に入った枠やブロックのCSSを見つけましょう！
例：魔法使いになって風の魔法「ウィンド」を覚えたぞ！
訳：CSSをWordPressのテーマ内にコピーしたぞ！
例：さて、使ってみましょう。
ウィンド！！
訳：記事内にHTMLを貼って使ってみましょう。
添付するぜ！！
このように、魔法を覚えさせる工程がCSSを登録するという工程、
魔法を出すために呪文を唱えるのがHTMLを貼るという工程になります。
ゲームが好きな人以外は分かりにくかったかもしれませんが、笑
大まかには、このような流れになります。
これが、CSSとHTMLの大まかな概要になります。
2．CSSによるカスタマイズを紹介しているサイトさま
では、実際に気に入った枠などを探してみる前に、
私がサイトを作る上で参考にさせて頂いた
カスタマイズ職人の方々のサイトをご紹介していきます。
2−1．ぽんひろ.comさま
まずは、ぽんひろ.comさまになります。
こちらのサイトでは、リストやボックスなど、
コピペで対応できるように素材を紹介してくれています。
私も、リストやボックスなどを参考にして
使わせてもらっているサイトさまですよ！
2−2．turiccoさま
続いては、はっちゃんさんが運営しているturiccoさまです。
このサイトは、cocoonテーマを使って運営している
とてもオシャレなサイトです。
とてもじゃないですが、cocoonで運営しているとは思えない程のカスタマイズをしていて、
カスタマイズ方法も記事にしてくれています。
私もめっちゃお世話になりました！
勉強になることがたくさん書いてありますよ！！
2−3．キラペット.comさま
続いては、キラさんが運営しているキラペット.comさまです。
こちらのサイトも、cocoonを使用しているサイトさまです。
キラさん自身がペットが大好きな方のようで、
ペットの情報もたくさん発信していますが、
私がビックリしたのは、そのサイトの仕上がりです。
こちらのサイトもcocoonだとは信じられないですよね笑
カスタマイズの方法も記事にしてくれていますので、
是非見ていただきたいサイトさまになります。
特に私はフロントページでお世話になりましたよ！
2−4．Y&K Studioさま
続いては、Y＆K Studioさまです。
こちらのサイトでもcocoonを使ったカスタマイズを紹介してくれています。
私の記事に使わせてもらっている目次は、
Y&K Studioさまが解説してくれている記事の目次なんですよ！
目次以外にも、アイコンボックスやFAQボックスなど、
実用的なものも紹介してくれている参考になるサイトさまです。
2−5．CSS Stockさま
そして最後に、おてとさんが運営している
CSS Stockさまになります！
CSS Stockさまのすごいところは、
なんといっても、紹介してくれている個数です。
私も、たくさん使わせて頂いてます泣
めちゃくちゃありがたいサイトさまです。
私のサイトは、以上の5つのサイトを参考に
カスタマイズしてきたブログになります！
たくさんあって迷っちゃうね…
自分で気になるものを探してみて、
ひとつずつ登録していきましょうね！
3．実際にCSSを登録してみましょう
では、今回は、CSS Stockさんで紹介しているものを
登録してみることにしました。
ちょうど引用ボックスが欲しかったので、これにしましょう！
まずは、そのままタップして下さい。
次の画面へ移行すると、色をカスタマイズできる画面に移るので、
ご自身で好きな色に変更しましょう。
色を決めたら、次へ進みます。
次の画面に進んだら、
HTMLコードが表示されている画面に変わるので、
このコードを右上のコピーボタンを押してコピーしましょう！
下にコピーしました。と表示されていたらOKなので、次に進みます。
コピーしたHTMLコードについては、
①ユーザー辞書に登録する
②プラグインのAdd Quick tagに登録する
上のふたつのどちらかの方法を利用して活用していきましょう！
好きな方で活用するもよし、
両方とも登録してしまうもよしです！
以前の記事で、使い方を解説しています。
使い方が知りたい方は、リンク記事をご参照ください。
今回は、スマホを利用することを前提にして、
ユーザー辞書での登録をやっていきます。
単語の部分に、先ほどコピーしたものを貼り付けます。
読み方も「いんよう」にして、保存します。
登録が終わったら、サイトに戻りまして、
次は、CSSコードが表示されている画面に移行しますので、
右上のコピーボタンを押せばOKです。
CSSを登録するため、WordPressのメニュー画面を開きます。
「外観」☞「カスタマイズ」で移動します。
カスタマイズ画面に変わったら、追加CSSをタップします。
追加CSS画面を開いたら、一番下までスクロールし、
改行して空白を作り、先ほどコピーしたコードをペーストします。
私は、画像のように「///引用ボックス///」
とわかりやすいように題名をつけてます！
貼り付けが終わったら、右上にある「公開」を押してカスタマイズを反映しましょう。
登録が終わったら、これで終了になります。
では、記事を書く画面でテストしてみましょう。
段落のところで、HTML挿入を選びましょう。
HTMLを入力するところで、
先ほどユーザー辞書に登録した
「いんよう」と入力してコードを貼り付けます。
すると、「html〜/html」までで囲われて入力されます。
そのまま、上書き保存してプレビュー画面を見てみましょう。
お？なんか変ですね…
何か不具合が起きて変な画面になってしまったようです。
もう一度、追加CSS画面を見てみましょうか！
何やら赤い表示でエラーが起きてしまっているので、
ここの部分を消してしまいましょう！
画像を撮り忘れたのですが、消してみたところ、
先ほどの大きいマークが消えてなくなっていました。
ただ、せっかくなので、
「font awesome5」で同じような物を
見つけて入れちゃいましょうか。
下の赤線の部分をユーザー辞書に追加しました。
- <i class=”fas fa-quote-right”></i>
☞Font Awesomeのフォントのコードです。 - <br/>
☞その後は、改行のコードです。
これでプレビューしてみましょう！
よし、まぁ良いとしましょう！！
4．おしゃれなカスタマイズにチャレンジしましょう
ここまで実際のスクリーンショットを使いながら説明してきましたが、
大体の流れ、やり方は分かって頂けたでしょうか。
まだ難しいかもしれないけど、
やりながら覚えてみようかな！
僕も頑張ってみます！！
うん！何事もやってみてトライ＆エラーだよ！
やってみないとできるようにもならないよね。
皆さんもやってみない内は、難しいと思いがちです。
まずはやってみて何が分からないか悩む、
また考えたり調べたりして、やってみる。
これを何回かやっている内にわかってくると思います。
少しずつでも理解できてくると、楽しくなってきますよ！
ぜひ、やってみて下さいね！
最後まで読んでくれて
ありがとうございました。
