【予告】ワードプレスのテーマをCocoonに変更します

ちびこママ(Chibiko_mama)です。今回はワードプレスのテーマを変更しますよ、というお知らせです。

当サイトは現在、「Sela」という無料テーマを使用しています。

女性向きの可愛らしいデザインが気に入っていたのですが、カスタマイズにカスタマイズを重ね、もはや原型をとどめておりません・・・(+_+)

時代はモバイルファーストという事もあり、思い切ってテーマを変更することにしました!

変更後のテーマは、「Simplicity 」で有名なわいひらさん(MrYhira)が新たに作成した無料テーマ、「Cocoon 」です。

ただいま全力で変更作業を進めております!

なるべく雰囲気は変えないようにするつもりですが、大きく変更になる部分もあります。その点を事前にお知らせしておきたいと思います^^


 

テーマ変更後の見た目はこんな感じになります

実はひっそりと英語ページを作っております。(英語自体は得意じゃないのでテキトーです、悪しからず。)

まずは、ほとんどアクセスの無い(笑)英語ページからCocoonに変更して、見た目を現在の状態に近くなるよう、CSSなどを調整しています。

ガラッと変えても良かったんですが、それはやっぱり勇気がいりますよねf^^;

 

Cocoonは至れり尽くせりのテーマなので、子テーマもはじめから用意されています。

ですので、まずは「追加CSS機能」を利用して変更後の見た目を確認しながらカスタマイズしていき、出来上がったCSSを子テーマの方に貼り付ける、という流れで作業を進めています。

関連記事 ≫ 【ワードプレス】追加CSSを使ってカスタマイズしてみよう!

Cocoonではワンカラムのデザインを選ぶことができます。(ありがたや・・・!)

でも、ワンカラムに設定すると任意のサイト幅を指定できないようなので(広い/狭いは選べるよ)、子テーマのCSSで調整しています。

Cocoonは元がシンプルなデザインゆえ、がっつりカスタマイズしたい方にもピッタリだと思いますよ^^Simplicityもそうでしたね♪

おすすめのページ ≫ CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選│サルワカ 

サイトスピードはかなり速くなると思います

Cocoonは機能満載でとてもご紹介しきれないので、ここでは割愛します(笑)これまでプラグイン頼りだった機能が標準装備になっていたりします。人気記事とか目次とかね。

プラグイン、かなり減らせる・・・!!(*’▽’)嬉嬉!

テーマ自体が高速化を重視しているので、サイトもかなり軽くできるかなー!と期待しております^^♪♪

特に、無料テーマでは貴重なamp対応なので、スマホから見る時にサクサク快速になるはず!お楽しみに☆(笑)

ウェブ絵本のスタイルが大きく変更になります

いま、ウェブ絵本には「Digital Publications」というプラグインを使っています。

こんな感じの、パラパラめくれる電子書籍を作ることができます

ダウンロードはこちら ≫ Digital Publications by Supsystic — WordPress プラグイン

ただ、残念ながらCocoonとは相性がよくないようで、絵本を挿入した部分がブランクになってしまいます。

ま、そんなこともあるよね、ってことで他の同様のプラグインをすべて試してみました。が、コレだ!というものがありませんでした・・・(ノД`)・゜・。

ページがめくりづらい・読み込みに時間がかかりすぎる・ページ送りの方向を選べない・などなど、各々最低一つはどうしても受け入れられないマイナスポイントがありました。

そこで、ワードプレスのプラグインはあきらめ、「BookBlock」というjQueryプラグインとやらを使うことにしました。

見た目はこんな感じになります

ダウンロードはこちら ≫ BookBlock: A Content Flip Plugin

これ、めっっっっちゃ苦労しました!(:_;)わたしjQueryとかjavascriptとかチンプンカンプンなんですよ!!(笑)

分かんないのに手を出したんですw

とりあえず、ダウンロードしたファイルをまるっとakaeho.netのルート直下にアップロードして、htmlファイルを作り、リンクで絵本ページを開くというシステムに変更しました。

言葉では分かりにくいと思うので、よかったらこちらのページを見てみてください。「READ」というボタンを押すと絵本ページが開きます。

 https://en.akaeho.net/hiragana_from-a-to-so/

 

パラパラめくれる絵本が外部リンクのような感じになってしまったので、別途、絵本のページを投稿内に画像で挿入することにしました。

そのままでは面白くないので、ちょっとCSSでしかけを施しました( *´艸`)

「position:sticky」というCSSを画像に適用してみました。

とても分かりやすかった参考サイト ≫ CSSのposition:stickyがすごく便利 │ q-Az

このCSSがどんなものかは上記のサイトをご覧いただくとして、わたしがCSSに書いたコードはこちら。

/*-----スクロール時に任意の要素を次の要素まで上部に固定する-----*/
.img-sticky {
 position: -webkit-sticky;
 position: sticky;
 top: 15px;
}

.img-stickyの部分は私が適当に付けたクラス名です。これを「追加CSS」か子テーマのスタイルシートに貼り付けたら、テキストエディタで以下のように画像タグを囲めばOK。

<div class=”img-sticky”>

<img src=”画像のURL” width=”幅” height=”高さ” border=”0″ />

</div>

 

どうですか?ちょっと紙芝居みたいな感じで面白くないですか?( *´艸`)←自己満足w

 

あ、こちら割と新しいCSSのようで、非対応ブラウザもあるようです。あんな風にならないよー?という方は、お手数ですが、ブラウザを変える等して見てみてください。

 

絵本をすべて一から作り直しているため、時間がかかりそうです

Cocoonに変更するにあたり、まずは絵本をすべて作り直さないといけないのですが、あかえほの絵本、5 0 冊 あ る ん で す・・・。

いまやっと10冊作り直したところなので、先は長い・・・(*_*)

まあ、どのみち、絵本はいずれ作り直そうと思っていたのでいい機会です。コツコツ頑張りますね(*^^*)♪

最後に

やったことある方は分かるかと思いますが、ワードプレスでテーマを変更するって、すんごい大変です(ノД`)・゜・。

作りこんでいればいるほど。

今回敢えて予告記事を書いたのも、途中で挫折しないためです(笑)

正直なところ、いつCocoonに切り替えることができるか、まったく目処がたっていません。でも、必ずやりきるとお約束しますので、気長にお待ちください(´▽`)

Cocoonのダウンロードはこちら ≫ Cocoon | SEO・高速化・モバイル最適化済みの無料WordPressテーマ

※現在ベータ版につき、ダウンロードには簡単なユーザー登録が必要となります。

 

最後までお読みいただきまして、ありがとうございました。

icon-clock-o 2018-05-17 icon-rotate-left  icon-user ちびこママ

あなたのシェアが励みになります!

Google+  B! Hatena  LINE  Pocket