Cocoonの記事の装飾部品をカスタマイズしてみた！
初めましての方も、そうでない方も、訪問ありがとうございます！
こたか(@kotacalog)です！
Cocoonカスタマイズ、装飾部品編です！
過去にトップぺージとサイドバーのカスタマイズをしたので、そちらも確認してもらえると嬉しいです。
Cocoonの標準の装飾での十分なんだけど、カスタマイズしたことによって雰囲気がちょっと…と思ってしまった私。ここまで来たら、通常の装飾も少しカスタマイズしよう！と決意しちゃいました。
ということ、今回は記事を書く上でよく使う装飾部品をカスタマイズしました。
そこまで難しいカスタマイズではないですが、誰かの役にたてば幸いです。
記事の装飾部品のカスタマイズ
ここからはカスタマイズの内容を個別に紹介しますが、あくまでも一例です。
カスタマイズを行う際は、ご自身で必ずスタイルシートのバックアップを取得したり、ある程度CSSの知識を勉強し、自己責任でお願いします。
また、私はClassic Editorを使用しています。ブロックエディター（Gutenberg）を使用していればCSSのカスタマイズしなくても似たような装飾が可能かもしれません。
見出しの装飾
H2,H3,H6のデザインを変えてます。H2,H3は角に丸みを持たせました。H3は今までとガラッとかえました。
H6は普段は使うことがないので、サイドバーの見出しと同じ装飾を設定して、アクセント的な役割に。汎用性ありそうな気もする。
ボタンの装飾
丸みを持たせ、色合いも薄くしてみました。見た目も少しスリムになったかも。
ちなみに、囲みボタンも同じように設定しましたがこちらは有料テーマのようにキラっと輝く装飾入れてます。
色合いを統一するとなんとなくオシャレに見えるし、光ってるとかっこいい。
光る装飾の仕組みと作成手順は以下の通り。(詳細はでざなりさんを参照してください。）
- アニメーション専用のクラスを作る。
- 光らせる部品（ボタン）のクラスにoverflow: hiddenを設定する。
- ボタンのクラスのbefore要素に作成したアニメーションを呼び出すクラスを設定する。
タブボックスをカスタマイズ
ぶっくまーく。私はタブボックス使う時に箇条書きなんか入れること多いかも。
- 箇条書きリストって汎用性があるよね。
- お腹空いた。
タブボックスと言っていいのかと思えるくらい変えちゃったけど…。個人的にはこちらのほうがデザイン的に使い勝手いいので気に入ってます。
タブのラベルをいじるだけで変えられるので全然難しくないです。
ブログカードに『続きを読む』の文言を追加
内部リンクのブログカードに『続きを読む』の文言を追加しました。有料テーマでよく見かけるカスタマイズです。
外部リンクには文言追加してません。外部リンクには『Check』なんて文言を追加してもいいかもしれませんね。
ボックス（アイコン）のアイコンをスマホでも横表示に
PC表示だと横長のボックス（アイコン）の表示ですが、スマホでみるとアイコン部分が一番上にきてちょっと不格好になってしまいます。
なので、スマホでも横にアイコンが来るようにカスタマイズしました。
スマホ対応にするために、@media screen and (max-width: 480px)｛｝内にも追記しなければなりません。この辺のカスタマイズがすんなり出来るようになると、レスポンシブデザインでのカスタマイズが可能です。
各カスタマイズ編に続く
以上、記事の装飾部品に関するカスタマイズの紹介になります。
装飾部品はあまりカスタマイズしすぎてしまうと本来のテーマの良さが損なわれてしまう恐れもありますので、ほどほどにするのがオススメです。
カスタマイズに凝り過ぎて記事の執筆時間が確保できなくなってしまっては本末転倒です。カスタマイズに時間をかけすぎないよう注意しましょう。
とはいうモノの、自分好みの装飾部品があると記事を書く作業が一気に楽しくなりますよ！
低コストでブログを始めるならスターサーバーがオススメ！[PR]
当サイトはスターサーバー 
を使用しています。
- 月額200円～(税抜)からWordPressが使える。
- 初期設定費無料キャンペーンが定期的に行われている。
- サーバーと一緒にドメインの契約・管理も可能。
- 大きな不具合もなく常に安定して稼働している。
- A8.net
のセルフバック対象。
ブログの収益化を目指すためにはランニングコストを抑えるのも大切です。
２週間のお試し期間もあるので、有料サーバーの契約に悩んでいる人は一度試してみてはいかがでしょうか？
趣味として楽しむ人にとってもコスパが抜群です！
Comment