WordPressのテーマ「Cocoon」は素晴らしい
まりん
わいひら様が作成された新しい WordPress 用テーマの「Cocoon」は、とても素晴らしい出来映えで、私も大のお気に入りです。
無料WordPressテーマ「Cocoon（コクーン）」を公開しました
SEO・高速化・モバイルフレンドリーに最適化した無料テーマCocoonの紹介記事。
nelog.jp
特に、以前のテーマ 「Simplicity」にも実装されていたスキン機能が良いですね。
私も、先日、私が作成したスキン「m-sora」をリリースしたところです。
新テーマ「Cocoon」のスキン「m-sora」を作ってみました。
まりんこんばんは。marine です。Wordpress 用のテーマ「Simplicity」の作者である わいひら 様が作成された新しいテーマ「Cocoon」ですが、早速導入して試しています。最初は、「Simpl...
web.no-koto.net
2018.05.07
「Cocoon」用のスキン「m-tomato」をリリースしたよ
そして、今日は、以前のテーマ「Simplicity」用のスキン「m-tomato」 を「Cocoon」用に最適化してみましたよ。
判りやすいように、主な特徴をキャプチャーしてみました。
全体はこんな雰囲気です。
段落とかの表示はこんな感じですね。
まりん
いかがですか？ 結構かわいいでしょ？
テーマ「Cocoon」用のスキン「m-tomato」のダウンロード
まりん
よろしければ、ダウンロードしてご利用くださいませ。
コメント
ほんとうに初歩的な質問ですみません。
m-tomatoのスキンを導入しています。
初心者なのでデザインがある程度完成しているのでとても助かっています。
ただひとつ、背景画像がうまく変更できず困っています。
オリジナルのものは画面を縮小してもしっかりピッタリなんですが、
自分で作って背景を置き換えると
下の方に空白ができたりしてしまいます。
もっとも良い背景画像の解像度や、
配置方法などがあるのでしたら、
教えていただきたいです。
スキンをご愛用いただき、ありがとうございます。
背景画像の件ですが、少し確認してから再度連絡させていただきたいと思いますので、暫くお待ちくださいませ。
komiya さま
背景画像の件ですが、オリジナルでは次のような内容をCSSに記述しています。
background:#fff url("./images/bg-m-tomato.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
２、３行目がぴったりフィットさせるための記述となります。
また、画像については、1860×1240のものを利用しています。
ご自身で用意された背景画像を利用されたい場合は、cocoonの追加CSSに上記のような記述をされると良いのかな？ と思いますので、一度お試しくださいませ。
ありがとうございます。
今から挑戦してみます。
「外観」の「カスタマイズ」ではなくて、
「cocoon設定」の「全体」の中にある「サイト背景画像」を設定すればよかったんですねー！
どうしてもできなくて困ってて偶然見つけました。
なんかおそらく、とんでもなくヘンテコな質問してたみたいです。
解消できてよかったです。
あ、なるほど。そういう状況だったのですね。
まずは、上手くいって良かったです。
cocoonに同梱されていたスキンの中で、ひときわやわらかく暖かい雰囲気を持ったm-tomatoひかれ、ありがたく利用させていただいています。
ひとつ番号付リストの数字のデザインのことで質問があります。
m-tomatoの白抜きの丸数字を他の形に変えようとおもっったのですが、上手くいきません。
m-soraで同じCSSの追加記述を試したら、数字部分のデザインを変えることができたので、m-tomatoのほうは違うやり方が必要なのかなとおもったのですが、私の知識の範囲外のようです。
他のスキンを使えばいいのかもしれませんが、我侭ながらこれじゃなきゃいやだと言うぐらい気に入ってしまったので、よろしくお願いします。
コメントありがとうございます。
気に入っていただけて、本当に嬉しいです。
白抜きの丸文字ですね。
ちょっと確認したいと思いますので、暫くおまちくださいませ。
カプリさま
番号付きリストの件ですが、元のCSSで次のような記述があり、そこでデザインしています。
変更する方法ですが、元のCSSを変更しても良いのですが、追加CSSに同じ記述を追加・変更するのが良いのではないかと思います。
お試しください。
以下、CSSです。
.article ol li::before {
position:absolute;
left:0;
top:5px;
counter-increment: number;
content:counter(number);
/* 数字のデザインを変える */
display: inline-block;
background: #ffb107;
color:#fff;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight: bold;
font-size: 16px;
line-height:27px;
border-radius: 50%;
width: 25px;
height:25px;
text-align: center;
text-shadow: -1px -1px 1px rgba(0,0,0,0.1);
}
面倒なことをお願いしてしまったようですみません。
おかげで思ったものに近い形にできました。
良い勉強になりました。
この度は大変お世話になりました。
ありがとうございます。
ご希望にかなったようで、良かったです。
良いサイトになると良いですね。