フリーランスWebデザイナー・ななふの
デザイン、コーディングの勉強記録やTIPSなど

cocoon

WordPress

CocoonのSNSシェアボタンを縦表示に。まずはCSSだけでやってみよう

CocoonのSNSシェアボタンはデフォルトで横表示です。SNSシェアボタンを縦に表示させているサイトをよく見かけており、そちらのほうが洗練されて見えるかも?と思ってのカスタマイズです。CocoonでもちょっとしたCSSの変更で縦表示にできます。当ブログでは更にJavaScriptで表示ON/OFFを制御していますが、この記事ではそこまではせず、CSSでできる範囲にとどめて手順を書いています。
WordPress

ブログデザイン、マイナーリニューアル。Cocoon子テーマカスタマイズ色々

WordPress無料テーマ、Cocoonの子テーマをカスタマイズして使っています。前回に続いてマイナーリニューアル。動きが分かりやすいアニメーションが増えた感じです。Cocoonのタイムラインブロックや、iPhoneでも有効なスクロール中の背景固定。SNSシェアボタンの縦表示など。jQuery不使用。Intersection Observerを使用してブラウザの負荷軽減。
WordPress

ブログデザイン、リニューアルしました

とても使いやすい無料テーマ、Cocoonの子テーマをリニューアル。トップページと記事の一覧が別ページになるサイト型へ変えました。SVGモーフィングをスライダーの枠として実装してます。ハンバーガーメニューはアクセシビリティ対応のライブラリを使用しました。ふわっと表示するアニメーションを色々な部分に仕込んでいます。Cocoonを使っている方、カスタマイズの例として是非ご覧ください。
2023.02.16