従来のIntelベースのMacに比べて、AppleシリコンMacは高いパフォーマンスと効率性を誇ります。

しかし、Windowsをはじめとしたゲーム環境の構築が難しいという課題も残っています。

本記事では、AppleシリコンMacでどのようにゲーム環境を整えるか、具体的な方法とそのメリットを紹介します。

AppleシリコンMacとは

Appleシリコンは、Appleが独自に開発したプロセッサであり、これまでのIntelプロセッサからの大きな転換点となりました。

Appleシリコンチップ

以下に、主要なAppleシリコンチップの概要を紹介します。

• M1: 最初のAppleシリコンチップで、驚異的なパフォーマンスと効率を実現しました。8コアCPUと最大8コアのGPUを搭載し、統合されたメモリアーキテクチャが特徴です。
• M1 Pro: M1の上位モデルで、最大10コアのCPUと16コアのGPUを搭載。より高い処理能力とメモリ帯域を提供します。
• M1 Max: M1 Proをさらに強化したモデルで、最大32コアのGPUを持ち、プロフェッショナル向けのワークロードにも対応。
• M1 Ultra: M1 Maxを二つ組み合わせた構造で、デスクトップクラスのパフォーマンスを提供します。
• M2: 最新のAppleシリコンチップで、M1の後継モデル。さらに高いパフォーマンスと効率性を実現し、次世代のワークフローに対応します。

Appleシリコンのメリット

Appleシリコンは、以下のようなメリットを提供します。

• パフォーマンス: 高い処理能力を持ち、複雑なタスクやリソースを多く消費するアプリケーションをスムーズに実行できます。ゲームにおいても高いフレームレートと優れたグラフィック品質を提供します。
• 効率: 高いエネルギー効率により、バッテリー寿命が延び、長時間の使用が可能です。これにより、モバイル環境でも高性能なゲームプレイが楽しめます。
• 互換性: Appleエコシステム内でのシームレスな動作が可能で、iOSやiPadOSのアプリもMac上で実行できます。
• 統合メモリ: 高速な統合メモリアーキテクチャにより、データのアクセス速度が向上し、全体的なシステムパフォーマンスが向上します。

従来のIntel Macとの比較

AppleシリコンMacと従来のIntel Macを比較すると、以下の点で大きな違いがあります。

• パフォーマンスの違い: Appleシリコンは、同じタスクをより迅速に処理する能力を持ち、特にグラフィック処理において優れています。
• 効率性の違い: Appleシリコンはより少ないエネルギーで同等以上のパフォーマンスを発揮するため、バッテリー寿命が大幅に改善されました。
• ソフトウェアの互換性: Intel Macでは動作するがAppleシリコンでは動作しないソフトウェアも存在するため、特に古いアプリケーションやゲームにおいて注意が必要です。ただし、Rosetta 2を介して多くのIntel用アプリケーションもAppleシリコンで動作させることができます。
• 温度管理: Appleシリコンは発熱が少なく、静音で冷却性能が高いのも特徴です。これは長時間のゲームプレイや高負荷のタスクにおいて重要な利点となります。

AppleシリコンMacでゲームをプレイする上での注意点

1. ゲームの互換性

• ネイティブ対応: Appleシリコンに最適化されたゲームは高いパフォーマンスを発揮しますが、すべてのゲームが対応しているわけではありません。購入前に対応状況を確認しましょう。
• Rosetta 2: IntelベースのゲームはRosetta 2を介して動作する場合がありますが、パフォーマンスが劣ることがあるため、公式サイトやユーザーレビューで動作状況を確認することが重要です。

2. ストリーミングサービスの遅延

• インターネット接続の重要性: GeForce NowやGoogle Stadiaなどのクラウドゲーミングサービスを利用する場合、インターネット接続速度がゲーム体験に直接影響します。高速で安定したインターネット接続が必要です。
• 遅延の問題: ストリーミングゲームは入力遅延が発生することがあります。特に反応速度が求められるゲームでは注意が必要です。

3. コントローラーと周辺機器

• 互換性の確認: PlayStationやXboxのコントローラーはAppleシリコンMacで使用できますが、すべてのゲームがコントローラーに対応しているわけではありません。事前に対応状況を確認しましょう。
• 設定の最適化: コントローラーの設定やカスタマイズが必要な場合があります。適切な設定を行うことで、より快適なゲームプレイが可能です。

4. ソフトウェアの最適化

• 最新のアップデートを維持: ゲームおよびmacOSのソフトウェアは常に最新の状態に保つことが推奨されます。アップデートによりパフォーマンスや互換性の問題が解消されることがあります。
• 設定の調整: グラフィック設定やパフォーマンス設定を調整することで、ゲームの動作が向上する場合があります。特に高性能なゲームでは、適切な設定が重要です。

5. バッテリーと熱管理

• バッテリー消費: 高負荷のゲームはバッテリーを急速に消費するため、長時間プレイする場合は電源に接続することが推奨されます。
• 冷却対策: AppleシリコンMacは発熱が少ないですが、長時間の高負荷プレイでは温度が上昇することがあります。適切な冷却環境を整えることで、パフォーマンスを維持しやすくなります。

6. エミュレーターの使用

• 合法性と安全性: エミュレーターを使用してレトロゲームをプレイする場合、合法的にゲームを所有しているか確認することが重要です。また、信頼できるソースからエミュレーターをダウンロードすることも安全性を確保するために必要です。
• パフォーマンスの問題: 一部のエミュレーターは最適化されていないため、動作が不安定になる場合があります。適切な設定とエミュレーターの選択が重要です。

Macでプレイできるゲーム環境

ここからはMacでゲームをする際に知っておきたい「何がプレイできるのか」ということについて解説していきたいと思います。

AppleシリコンMacでプレイできるゲームの種類

まずは、「このゲームはできるの？」という疑問を、それぞれのプラットフォームに合わせてMacでプレイ可能かを解説していきます。

iOS対応ゲーム

MacでiOSゲームアプリをプレイする記事は別にまとめています。

AppleシリコンMacでは、iOSおよびiPadOSアプリをネイティブに実行することができます。これにより、以下のような利点があります。

• App Store経由でのダウンロード: iOS用のゲームを直接Macにインストールしてプレイできます。
• タッチスクリーン非対応の工夫: 一部のゲームはタッチ操作を前提としているため、キーボードやマウスでの操作に適応する必要があります。

ちなみに、過去にはipa（iOSアプリのファイル形式）ファイルがあれば起動できるものが多かったのですが、執筆時（updatedショートコードは投稿・固定ページ以外では利用できません。）においてはOS側で対策が取られているためネイティブに対応できるものの、AppStoreにおいて許可されているアプリ以外にはプレイできない場合がほとんどです。

PlayCoverというiOS/iPadOSラッパーを利用することで、仮想のiOS環境を構築してプレイできていた時期もあるのですが、こちらもmacOSのアップデートなどの影響で安定したプレイ環境とはなっていないというのが現状です。

しろくま

せっかく、AppleシリコンはネイティブでiOSアプリに対応しているのにディベロッパーがStoreで許可してくれないのはもったいないですね。

かめ

PlayCoverのような補完アプリがあっても、結局、OSのバージョンで対策されてしまうから基本的には純正の対応をされないとプレイ環境が整ったとは言い難いですね。

Android対応ゲーム

AndroidゲームをAppleシリコンMacでプレイするには、エミュレーターを利用します。

• BlueStacks: 主要なAndroidエミュレーターで、多くのAndroidゲームをMac上でプレイできます。
• 互換性とパフォーマンス: エミュレーターの性能に依存するため、すべてのゲームがスムーズに動作するわけではありません。

BlueStacksは有名なAndroidエミュレーターですが、BlueStacks XはmacOSに対応しているという記述があります。ただ、私の環境ではsupportされていないとアラートが表示されました。

一方で、BlueStacks macOS版はAppleシリコンMacには対応していないため注意が必要です。

また、試しにMacでWindows環境を再現できるWineでBlueStacks 5を起動してみましたが、こちらもインストールまではできるものの、今のところはうまくいかないようです。

しろくま

そもそも、Androidの仮想環境をBlueStacksで構築する、そのための環境をWineで作ってArmで起動するのは流石に回りくどすぎて環境としては安定しなさそうですしね。

Windows対応ゲーム

Windows用ゲームをプレイするには、いくつかの方法があります。

• Parallels Desktop: Windows仮想環境をMac上に構築し、Windowsゲームをプレイすることができます。ただし、仮想化によりパフォーマンスが低下する場合があります。
• CrossOver: Wineベースのソフトウェアで、WindowsアプリケーションをMac上で実行可能。ただし、すべてのゲームが完全に対応しているわけではありません。
• Boot Camp非対応: AppleシリコンMacはBoot Campをサポートしていないため、ネイティブなWindowsインストールはできません。

ちなみに、WineベースでMacをWindowsに対応させるGame Porting ToolkitについてもWWDC2024でGame Porting Toolkit 2のリリースが宣言されています。

つまり、もしかしたら現在の不具合を対応させたものが今後リリースされるかもしれないので、ゲーム環境を整えるのは2024年の秋ごろでも良いかもしれません。

Apple Arcade

AppleのサブスクリプションサービスであるApple Arcadeは、Appleシリコンに最適化された高品質なゲームを提供します。

• 専用タイトル: Apple Arcadeには、独占タイトルや高評価のインディーゲームが多数揃っています。
• クロスプラットフォーム: AppleシリコンMac、iPhone、iPad、Apple TVでシームレスにゲームをプレイできます。

ほぼiOSプラットフォームと同義になりますが、Appleデバイス専用のゲームプラットフォームということもあり、コントローラの最適化などは最も期待できるゲーム環境だと言えます。

Steamなどのゲームプラットフォーム

SteamはMac向けのゲームを提供しており、Appleシリコンに最適化されたタイトルも増えています。

• ネイティブ対応: 一部のゲームはAppleシリコン対応のネイティブバージョンを提供しています。
• Rosetta 2: 多くのIntelベースのゲームはRosetta 2を使用して動作しますが、パフォーマンスの低下がある場合があります。

後ほど記事にしますが、Steamアプリ自体はMacに対応したものがありますが、Steamで配信されているゲームがWindowsのみに対応している場合、Mac版Steamではプレイすることはできません。

そのため、Windows版SteamをWineなどの仮想環境を利用してインストールすることでMacに対応していない一部のSteamゲームもプレイ可能となります。

ただし、現状は主にグラフィックの描画処理やチート対策関連でエラーが起きるため、AppleシリコンMacにおいてゲームプラットフォームが正規に対応するまではメインプラットフォームとするのはハードルが高いと言えます。

クラウドゲーム

クラウドゲーミングサービスを利用することで、Macのハードウェアに依存せずに高品質なゲームをプレイできます。

• GeForce Now: NVIDIAのクラウドゲーミングサービスで、さまざまなプラットフォームのゲームをストリーミングでプレイ可能。
• Google Stadia: Googleのクラウドゲーミングサービスで、ブラウザ経由で高性能なゲームを楽しめます。
• Xbox Cloud Gaming: Xbox Game Pass Ultimateに含まれるクラウドゲームサービスで、幅広いタイトルをMac上でプレイできます。

PS5などのハード機

PS5などのコンソールゲーム機のタイトルをAppleシリコンMacで直接プレイすることはできませんが、リモートプレイ機能を利用することが可能です。

• PS Remote Play: PlayStationのリモートプレイアプリを使用して、PS5やPS4のゲームをMac上でストリーミングプレイできます。
• Xbox Remote Play: Xboxのリモートプレイ機能を使って、XboxのゲームをMac上でプレイ可能。

今回は、「初めてブログをカスタマイズしてみようと思う」くらいの、超初心者向けに、イチからCSSをカスタマイズする方法を説明しようと思います。

これができれば、大体のカスタマイズが自分でできるようになります。

気合い入れて更新します！

CSSについて３行で答える

興味はなかろうとも、CSSについて３行で説明します。

異論はあるかと思いますが、まずはこんな認識でご理解ください。

HTMLとCSSの関係

皆さんは、WordPressを立ち上げることができた方達なのでパソコンには詳しい方々かと思います。

なんとなく、サイトやブログっていうのは、HTMLっていう言語を使って作られているんだよ。
っていうことは知っていると思う。

いや、知らないかもしれないけど、それはそういうものなんです。

その、基本構造であるHTMLだけだと、文章や画像の出力はできるのですが、それだけだと単調な感じになってしまいます。

CSSは、単調なHTMLで出力された文章や画像たちを、「ここはこの色に、あっちはこんな形に！」という感じで、好きな色付けやデザインなんかを支持することができる命令文だと思ってください。

CSSの構造について

初心者こそXeory Baseをカスタマイズ【最初に知っておくべきこと】

どうも、ぶちくまです。WordPressのブログテーマ、Xeory Baseのカスタマイズをしてみました。シンプルで使い勝手がいいXeoryですが、個性的なブログにするには、HTMLとCSSの書き換えが必要になります。初心者でもできる内容に...

buchikuma.xyz

2024.03.22

一応、自分で説明してみたことがある。

ただ、今回はもっと優しく説明します。

CSSの基本構造はセレクタとプロパティと値

CSSにも言語みたいなものがありまして、英語で言うところの、「主語S、動詞V、目的語O」みたいなものがあります。

それが「セレクタ、プロパティ、値」です。

これに当てはめて、自分の希望を入力して行けばいいわけです。

初心者は「色」や「形」を変えることから始めよう

初心者としては、すでにある構造の「値」を変えていくと、好きな色や文字の大きさを変えることができる、ということから始めていきましょう。

CSSを適用する場所の名前「セレクタ」について

今回は「見出し」を変更していくので、CSSを適用させる場所は「見出し」ということになります。

ただ、セレクタに「見出し」と入力しても、残念なことに、WordPressはわかってくれません。

彼らの言語で指定してあげる必要があります。

デベロッパーツールを使って「セレクタ」を探そう！

今回は、実際にCocoonのサイトを使って、カスタマイズの練習をしましょう。

まずは、みなさん、お手元に「Google Chrome」はありますでしょうか。

なければ、ぜひにインストールしてみてください。

Chromeの機能にデベロッパーツールというものがあります。

いわゆる、開発者用の機能なんですが、これが大変に便利です。

下記のような画面が出てきますでしょうか。

ショートカットキーが苦手なら、Chromeの右上に３つの点が並んでる「メニューボタン」があると思いますので、そこをクリックして「その他」から「デベロッパーツール」が見つかるはずです。

この画面を見ると、大体の人が一気にやる気を失いますよね。

ぶちくま

まずは、字が細かい。
しかも英語。

でも大丈夫です。英語が読めなくても、カスタマイズはできます。

Cocoonスキンでカスタマイズすると映えるポイントまとめ

Cocoonのスキン機能でカスタマイズするなら、ココを変更すると効果的という部分をまとめてみました。これらをカスタマイズすることにより、Cocoonっぽさをかなり減らすことができるかと思います。

wp-cocoon.com

コクーンのサイトで、しかもカスタマイズしたい場所を示してくれているページです。

このページを使ってカスタマイズを学んでみましょう！

見出しを探してみる

今回は見出しですので、見出しが書かれている場所を探してみてください。

ちょうどよく、ページの中段に全ての見出しが並んでいるところがあるはず。

H2「見出し２」を変更してみる

デベロッパーツール側上部に、こじんまりと四角に矢印のカーソルがついているようなボタンがあるのは見えますでしょうか。

こちらを選択してもらうと、少しカーソルの形が両方向矢印に変わって、かつ、このカーソルで左側本文窓内のの任意の場所を触ると、なにやら、オレンジやら緑やら青い枠で触った場所が囲われませんか？

これでクリックすると、その場所を指定することができます。

指定されると、右側のデベロッパーツール側の表示部分も、指定した場所の、HTML情報と、CSS情報が表示されるはずです。

デベロッパーツール表示調整

もし、デベロッパーツールが小さく表示されて入れば、それぞれの窓を、ブラウザの大きさを変更するノリで広げることもできます。

ちなみに、上側がHTMLの情報窓。

下側（中段）がCSSの情報窓になります。

HTMLで見るべき情報

今回は、ごく簡単な部分から始めますね。

HTMLで見るべき部分は、
「本文で指定した部分は、HTMLではどのように記述されているんだろう」
ということです。

かつ、記述の何を見ているか、といいますと、今回で言えば、「CSSに影響を与えているセレクタが何なのか」というところです。

ぶちくま

、、、？

すいません、ちょっと飛ばしすぎましたね。

さらに説明を加えましょう。

HTMLでセレクタの名前が付けられている

CSSのセレクタ、というのは上記でお話しした通り、「変更したい場所」を示しています。

この、場所、という概念がわかりづらい。

サイトの大きな構造をみると、

• ‘メニューバーなんかが置かれている「ヘッダー」
• ブログの内容とかが書いてある「コンテンツ」
• さらにその横に補足的な情報を表示する「サイドバー」
• 一番下には「フッター」

があります。これらの中にコンテンツとして、画像や文章が収められているのです。

コンテンツ内には色々な要素が詰め込まれている

さらに、「コンテンツ」の中には、今回変更したい「見出し」や「本文（地の文）」、「タイトル」「リンク」などなどとにかくたくさんの要素でいっぱい。

色々な要素があっちこっちにちらばって、それらが合わさってコンテンツになっています。

基本構造となるHTMLの部分では、すでに一般的な名称として用いられている「h1」や「a」などの「タグ」から、自分で名前付けをした「class」や「id」など、たくさんの名前で「ここの構造は見出しにする」と指定しながら書かれています。

今はHTMLという基礎の段階で、色々な名前がすでにつけられている、ということだけ覚えておいてください。

我々は基本的にはHTML部分に触れずにカスタマイズを行なっていきます。

指定されたセレクタの名前を探していく、という作業をすることになります。

今回は、特にHTMLを見る必要はありません。

中級者編までHTMLはオアヅケ。

CSSで書かれているセレクタをみてみる

では、習うより慣れろ。スパルタぶちくまタイムです！

さて、中段CSS情報窓をみていきます。

セレクタの部分はここになります。
.article h2
なんと書いてあるかというと、「どっとアーティクル すぺーす エイチ2」ですね。

それぞれ、微妙に意味があります。

セレクタは細かく設定すべし

実はセレクタは「h2」だけの指定でも成り立つのですが、「h2」だけを書き込んだセレクタだと、メインコンテンツ以外でも、あらゆる部分の「h2」と名前が付けられた部分が変更されてしまうのです。

なので、セレクタの設定は、なるべく細かい名前付けが必要だということを覚えておいてください。

今回は、「h2」の前に「.article」という、「記事」という部分を指定している名前がくっついているということですね。

佐藤さんはひと学年に１０人くらいいますが、佐藤太郎と指定すると、クラスに一人くらいには絞れる、こんなイメージです。

プロパティをみてみる

さて、セレクタの名前を確認したら、次はプロパティ部分をみてみましょう。

プロパティは「何を変えるか」を指定する部分です。

今回のCocoonの見出しには複数指定されているので、何段にもなっていますね。

ざっくりいうと、

• 文字の大きさ font-size
• 外側の余白 margin
• 内側の余白 padding
• 背景の色 background-color

が指定されています。

プロパティ「背景色」を変えてみる

今回は、背景の色を一緒に変えてみましょう。

デベロッパーツールは便利なもので、色の指定ができるところには、小さな□がついていて、ここをクリックすると、自分で細かい色を決めることができます。

今回は、薄い青色にしてみましょうか。

画像のように、色を指定するカラーパレットのようなものがあらわれます。

一番上のグラデーションの部分で明彩度が指定できます。

その下のバーが色相ですね。青や、赤などの色味を決めるものです。

さらに下のバーが、少し難易度があがるので詳細は後日ですが、透明度を調整するものになります。

その下が大事なのですが
＃と6桁の英数字がでてますね。

これが、CSSで使う色の名前、というか番号になってます。
これをコピペして使うことになるので、ぜひ覚えておいてください。

背景を濃くして文字を白くする

いわゆる白抜きにする場合ですね。

今回はバックグラウンドという背景色を設定するプロパティがすでにあるので、これを活かして簡単なカスタマイズをしていきますね。

まず、バックグラウンドを濃い青にしてみます。

先ほどと同じ要領で、プロパティの＃の前ある◽︎をクリック。

色相バーで青っぽい色にしてから、明度と彩度を下げて黒っぽさを出します。

適当ですが、#215d98くらいにしました。

これくらいの濃さになると、文字が黒いとはっきり読めませんよね。

では、これからプロパティを追加していきます。

プロパティの設定の仕方

デベロッパーツールのbackground-colorの下あたりを適当にクリックして見てください。

「 : ； 」が現れたのがわかりますか？

今回は詳しいところまでは説明しませんが、ここにプロパティと「：」を挟んだ後に値を入力します。

今回は文字の色を変えるので、「color」というプロパティを入力します。

そのあとに「：」を入力すると、次の値を入力するところが点滅し始めます。

色は微調整しますが、まずは適当に「white」と入力しておきましょう。

すると、紺色の背景に、H2の文字が白くなったのがお分かりでしょうか。

これで、記事内のすべてのh2タグのついた文字がこの装飾に変わりました。

h3「見出し3」をカスタマイズする

次は少しだけ難易度があがります。

cocoonのH3見出しは、左側に濃い色の線が入って、さらに文字は四角く囲まれていますね。

これも同じようにカスタマイズしましょう！

色だけまずは変えてみる

おさらいです。

変えたい部分を選択する場合は、デベロッパーツールの上側の、◽︎に矢印ボタンを一度押してから、h3見出しをクリックしてみます。

すると、h3見出しの情報がでてきました。

次にデベロッパーツール内の中段、CSSをみます。

今度は、セレクタ（場所の名前）部分が「.article h3」という名前に変わっていますね。

つまり、このセレクタを選ぶといいですよ、ということです。

（正確には、cocoonで実際にCSSの影響を受けている記述がこれってことなんですけど、
とりあえず難しいことは置いておきましょう）

今度はプロパティの部分には先ほどとは違うものがたくさんありますね。

これは、簡単なカスタマイズの時によく使う、囲み線を入れるプロパティの、「border」というものになります。

borderの使い方

cocoonの見出しh3では、左端だけ太く設定する都合、四方向すべてに個別の指示を与えるために「bordear-場所」の指定が書かれたプロパティを使っています。

例えば、さらに下線を太くしたりして、色合いをうまく組み合わせると、少し立体のような表現を作ることもできます。

borderの「値」を調整する

borderの値は、「線の太さ、線の種類、色」で構成されています。

まずは難しく考えずに、既存のものをいじっていくことでカスタマイズしていきます。

今回は下線を少し太くするので、「1px→3px」に。

さらに影っぽさを出すためにもともとの色（color)より少し濃いグレーにしました。

左端の太い部分は少しはっきりとした青にすることで色合いのメリハリをつくります。

ついでに、おさらいです。背景色も設定しましょう。

プロパティは「background-color」でしたね。

こちらは少し薄めの青にして、文字を際立たせます。

ほんの少し立体っぽくなりましたね。
さらに上の線を、例えば「0px」にすることで、
上の線を形式上は消すことができます。

ついでに、さっと他の見出しも変えてみました。

見出しを変えるだけで、サイトがググッと引き締まった印象が出ますね。

個人的にはグラデーション色なんか入ってると、表現に幅がでるので好きですね。

実際に自分のサイトに適用してみよう！

はい。ここまでやりましたが、これをせっかくだから自分のサイトに使ってみましょう。

このやり方を覚えると、いわゆる「コピペでできる」系の、デザイン参考サイトのものをパクるもとい真似することができます。

あくまで、cocoonのやり方ですが、大体の他のテーマでも似たような方法を使っていきます。

WordPressのCSSを編集する

ご自分のWordPressのダッシュボードをみてみましょう。

「外観」タブ内に「CSS編集」という、いかにも、というものあるのでこちらをクリック。

この中にある、「CSS追加」というものにコピペする、というのが、一番安全で手軽なやり方です。

Cocoonの子テーマにCSSを直接記入する

ただ、今回はせっかく子テーマもインストールしているので、「テーマの編集」から、子テーマのCSSにコピペする方法を使ってみましょう。

【無料テーマ最高の出来栄え】迷わずCocoonをダウンロードする方法

無料テーマのCocoonのダウンロード方法を解説したページです。 また、最初に選ぶテーマとして、有料か無料か悩まれている、 あるいは無料テーマをダウンロードしたけどしっくりこない、という方に、 最初は有料テーマを利用することを検討してもらう、ことについても書いています。 注意点として必ず親テーマと一緒に子テーマもダウンロードして、子テーマを利用するようにしてください。

buchikuma.xyz

2024.03.22

個人的にはこちらの方が編集しやすいです。

ただ、場所を間違えると結構面倒なことになるので、慎重に。

こんな感じの画面になります。

ぶちくまはすでに記入されているのでいろいろ書かれていますが、もし初めて開いた場合だと、「必要ならばコードを書く」とコメントが書いてある以外には、真っ白なシートが広がっているかと思います。

しろくまさん

ここにコピペすればOKです！

コメントアウトに注意

その際、「/*必要ならばここにコードを書く*/」よりも下に書いてください。

この茶色い字は、コメント用の表示で、この中に書いたものはCSSの適応にならないよ、というものです。

しろくまさん

メモがわりに使います。

ぶちくまはこの中にコピペしてて何も変わらなかった、ってことがありました。

「/*見出し*/」みたいにメモしておくと、後々、また編集したくなった時に探すのが楽になります。

コピペしたら、赤いビックリマークが出ていないことを確認して、ファイルを更新を押します。

これだけでOK！

コピペしても表示されない場合

あるあるなんですけど、実は、コピペしてファイルを更新しても、自分のサイトを見てみてもデザインが変更されていないことがまぁまぁよくあります。

これは、だいたいが、キャッシュが残っていて過去のデザインが優先されている場合。

キャッシュを含めた履歴を消すと、ちゃんと新しいデザインが適応されることが多いですね。

cocoonにしてからは、キャッシュを消さなくてもデザインが更新されているようになっているのか、確認が楽チンで嬉しい限りです。

カスタマイズは実践が一番

超初心者編として、かなり膨大な画像を駆使して説明してみました。

ぶちくま

私もこの記事を書いた時には、まだ数ヶ月程度でしたが、たくさんカスタマイズ事例をみることで、少しはいじれるようになりました。

おそらく、まだまだ自由にカスタマイズするには技術と知識が足りないと思います。

でも、いいんです。

いろいろなサイトをみながら「これ真似したい！」と思ったら、まずはデベロッパーツールを使って、サイトの構造をのぞいてみると、とても勉強になります。

今回の記事では、カスタマイズの勉強方法さえ伝わればいいかなぁと思っています。

セレクタの選択や、プロパティや値をどう設定すればいいかは、やってみないと分からないことが多いです。

せっかくの自分のサイト、自分のスペースですから、自分の好きなようにカスタマイズしてみましょう！

とはいえどうしても自分で作れない場合は一度コピペしてみるのも手

あまり参考にはならないかもしれませんが、ぶちくまの見出しのコードを置いていきます。

/*見出し*/
.article h2{
font-size: 22px;
border-bottom: solid 3px #cce4ff;
position: relative;
padding: 15px;
}
.article h2:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
left: -1px;
width: 30%;
}
.article h3 {
font-size: 20px;
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border:none;
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
.article h4 {
position: relative;
border-top: solid 2px #cce5ff;
border-bottom: solid 2px #cce6ff;
background: #fafbfc;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
font-size: 1.1em;
}

.article h4:after {/*タブ*/
position: absolute;
font-family: "FontAwesome",'Quicksand','Avenir','Arial',sans-serif;
content: 'f0a7 POINT';
background: #5371cd;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}

オススメの参考書

まずはCSSってどんなものがあるのかな、という実例集が一冊あるといいですね。

サルワカさんなど、実例でCSSコードまで乗せてくれている親切なサイトはもちろんブックマークしておくとしても、手元に本が一冊あると捗ります。

現場でかならず使われているCSSデザインのメソッド

今回書かれているような、イマイチわかりづらいデベロッパーツールの便利な使い方なんかも書かれています。

古本屋に並んでるとテンションが上がる一冊。

Amazonで「現場でかならず使われているWordPressデザインのメソッドアップデート版」に関する詳細を見る

Amazon

楽天

Yahoo!ショッピング

HTML5/CSS3モダンコーディング

Amazonで「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)」に関する詳細を見る

Amazon

楽天

Yahoo!ショッピング

あくまでもCSSにこだわって色々やってみたい方の、かなり技術的な内容に踏み込んだ一冊。

初心者用ではないが、目を通しておくと将来的なサイト設計には役立つ、そう信じてる。

CSSシークレット

Amazonで「CSSシークレット ―47のテクニックでCSSを自在に操る」に関する詳細を見る

Amazon

楽天

Yahoo!ショッピング

CocoonはWordPressの無料テーマの中でも随一のクオリティを誇っていますが、
広告戦略も簡単にできるので初心者におすすめのテーマとなっています。
Google Adsenseの自動広告とマニュアル広告を併用させて、
さらに記事中の好きな場所に、ショートタグで簡単に広告挿入できるのも魅力的です。
アフィリエイトタグも使えて、定型文入力はお手のものです。

WordPressの無料テーマ、Cocoonはすごいぜ、って記事でこのブログを埋め尽くす計画施工中。
今回は広告についての機能をまとめてみました。
広告機能は今まで、テーマのPHPを直接編集することで苦し紛れに挿入したりしていたのですが、
Cocoonならその手間もいらないので、初心者におすすめです。
ちなみに、広告の挿入場所と広告の種類を変更するだけで、
本当に収益が倍くらい変わるから、ぜひ色々試してみてください！

Cocoonで収益倍加させるための戦略

CocoonはGoogleアドセンスの広告を表示させる場所を簡単に決めることができます。
しかも、画像などが入ったレスポンシブ広告と、いま大人気の「リンクユニット 」、
それぞれを選んで表示させることができるのです。

これがどれくらいすごいことかっていうと、

「収益が２〜３倍になる」（ぶちくま調べ）

くらいすごいんです。
実際に、ぶちくまのメインサイトの収益はCocoon変更後にほぼ倍まで上がりました！
もちろん、その間にブログ自体をカスタマイズしたり記事をリライトしたり、なんなりとしていましたが、
メインサイトはCocoonに変更後に明らかに「感触が変わった」と感じました。
もうね、全然違う。

その辺りのことを少し細かく説明していきます。

Simplicity時代からのブログ収益の変動について簡単に解説

ブログ開始当初

少し前の話になりますが、ぶちくまがGoogleアドセンス承認されて、
しばらくの間は特に対策もせずに（できずに）
そのまま、のほほ〜んとブログを更新していました。
もちろん、ブログ初心者なのでこれはこれでいいのですが（記事量産は最初の課題）
ちゃんと収益化を考えるとなると、広告の位置というのはとても重要です。

収益らしい収益とは言えないものの、「2018年新年あけましておめで」、くらいの時から
お年玉なのかアドセンスが急にやる気を出して、数千円ではありますが、
子供のお小遣いくらいは稼ぎ始めました。
一時的なものかと思って、こちらものほほーんと眺めていたのですが、
2月、3月と徐々に収益が上がっていく。

ぶちくま

あれ、これ稼げるんじゃね？

何やら感覚でそう訴えかけてくるものを感じたぶちくまは、
持ち前の野生の勘（なお、温室育ちの模様）のまま、
テーマをXeory Baseから「Simplicity」へと変更しました。

Simplicityに変えただけで収益が倍に

Simplicityは本当に目からウロコが飛び出て突き刺さるくらい、
素晴らしいテーマでした。
何がいいって、まずシンプルなデザイン、カスタマイズし放題でブログの記事なんて描いてられないという状況に。
そして、収益化も簡単にできるというところ。

Simplicityで収益化がラクになるってどういうこと

Simplicityでは、ウィジェットを使って、
本文のどこに広告（Google Adsense）を入れるか、
細かく決めることができるのです。
これがXeory Baseを使っていた自分からすると
「ワードプレスのテーマ選定って、本当に大事なんだ！」と感じさせる出来事でした。
しかも、Simplicityは無料。
このままこのテーマを使い続けよう！

ぶちくま

わいひら氏に魂を捧げるんや！

そう決意して、カスタマイズに明け暮れました。

わいひら氏、Cocoonリリース！

ぶちくまがSimplicityに移行した同時期に、そのSimplicityの生みの親である、
ぶちくまがブログ界で尊敬する３賢人の一人（あとの二人は知らない）、
Mr.わいひらが、Simplicityに代わる、
全く新しい、新時代というよりも超時代の、新人類というよりはニュータイプの、
ガンダムというよりはエヴァ初号機の、
2018年を代表するワードプレステーマ、「Cocoon」を発表しました。

ぶちくま

おいおい、マジかよ！

そう、思いました。
いやいや、Simplicityにどれだけの時間を費やしたと思っとるんじゃい！
もちろん、零細ブロガーの叫びなどわいひら氏には届きません。

何より、ぶちくまが言いたいのは、この一つです。

ぶちくま

新しいテーマを、ありがとう！

これまでのカスタマイズに費やした時間を全て水に流しても、
あまりにもCocoonは魅力的にみえました。
その辺りのことは、移行記事をご覧ください。

Cocoonにテーマ変更するメリット【ありがとうSimplicity】

Simplicityの作者、わいひらさんがCocoonという新しいテーマを提供してくれています。 今回はCocoon導入を迷われている方に背中を押すメリットについてまとめてみました。 無料テーマでここまでやられると有料テーマは商売上がったりですよ！

buchikuma.xyz

2024.03.22

Cocoonの広告機能がまじで神

この一言に尽きる。
Simplicityもよかった。
ただ、その倍はいい。
いや、倍なんて安い表現じゃ却って失礼だ。
あえて言わせてもらうなら
「すべての有料テーマを超えた無料テーマ」
これくらい言っていい。ちなみに有料テーマは使ったことない。
では、ようやく解説に移りたいと思います。

初心者に嬉しい、Google Adsenseはレスポンシブ広告のコードを貼るだけのお手軽設計

これが初心者には嬉しいと思います。
アドセンスは本当に奥が深くて、統計とか取りたい人だと、
一日眺めていても飽きないくらい、いろいろな視点から考察できる最高のおもちゃです。
ぶちくまは統計はあまり得意ではないので、1日せいぜい30分くらいしか見ませんが。
統計取ったりするなら、アドセンスを表示させる場所によって、
広告ユニットを個別に設定して、どの広告位置でどれだけクリックされたか、
みたいなことを調べたりもするのですが、
今回は基本、ぶちくまのような初心者が読者であると想定して割愛。

Cocoonを利用すれば、その広告ユニットは１つ（ないし２つ）作るだけで、もう運営することができます！
これ、本当にお手軽なんです。
Xeoryの時は、見出し前に投入したりするのに色々カスタマイズが必要でしたからね。

具体的な設定については本家Cocoonサイトにお任せします。
https://wp-cocoon.com/how-to-set-adsense/

どんな表示方法（広告の種類）がいいかも選ぶことができる

Cocoonでは表示形式の設定もできます。
「表示形式」というのは、先にも出てきた「リンクユニット 」（文字だけの広告）や、
「画像と文字のレスポンシブ広告」「記事内広告（記事に自然に溶け込んだ広告）」などを
自在に操ることができる、ということです。
記事の本文内なら、読者の邪魔をしないように、記事内広告にしよう、とか、
出だしの部分だとアイキャッチ画像とかぶるから、リンクユニット にしよう、
とか、いろいろ工夫ができるわけです！

それも、クリックひとつで！
面倒なコードの添付、コピペは不要なので本当に嬉しい限りです。

多分、この辺りの便利な構築は、Simplicityでも採用されるんじゃないかと思います。

最初は色々やってみるのが大事

Adショートコード利用で、より詳細な場所のしても可能

この機能を見たときに、驚きを通りこして今までのカスタマイズがいかに不毛だったか、
過去の自分を呪ったね。

使い方としては、本文記事内のどこに入れるか、を調整することになるので、

1. 記事の分量に応じて広告量の調整
2. 記事の内容に合わせて記事内広告を導入して自然なサイト作りを
3. 記事のアフィリエイトに合わせて、アフィリエイト広告までたどり着くための時間の調整（あえて記事内の広告量を減らす）

という使い方が考えられますね。
Googleアドセンスの基本的な広告の量を少なくすることで、
より意図的な誘導が可能となりますね。

adショートコードの簡単な使い方

あまりにも簡単なので、ユーザー辞書登録する必要もなく、

ウィジェット毎にアドセンス広告を投入してパフォーマンスを計測

アフィリエイトタグを使ってアフィ特化型サイトも悠々自適

https://wp-cocoon.com/how-to-use-affiliate-tag-manager/

この機能も涙がちょちょちょぎれますね。
ざっくり言うと「アフィリエイトタグを一元管理して一括編集できる」機能です。
ぶちくまはアフィリエイトはたまり多用していなかったのですが、
この機能が実装されたため、本格的にアフィリエイトにも力を入れていくことを決意しました。
それほどに便利です。

アフィリエイトの何が面倒かって、
まず、何度も同じ記事を書かないといけないこと。

最後の文面は一緒になるのでタグで一括管理でだいぶラクに

どんな記事を書いても、最終的に行き着くところがアフィリエイト誘導記事になるので、
最後の文面は大体一緒になるのが、ぶちくまのアフィサイトの印象なのです。
これって、書いてて全然楽しくない、いや読者は情報を求めてるのであってストーリー性なんていらないのはわかってるんだけどさ、ブツブツ。
これが、最後のアフィ部分を一元管理できるだけで、
ショートコードでワンクリックで設置できるなんて、
作業効率以上に、精神的にも負担がぐっと楽になりますね。

編集もタグをいじれば一括でできるので案件終了時の対応も楽チン

アフィをやっていると案件終了はしょっちゅうあります。
また案件内容の変更やサービスの改変によって、
リンクを変更することもしばしば。
これが何も考えずに記事にアフィ貼ってると、
「どの記事にどこのリンクを置いたかわからない」なんてことになって、
リンク切れ一括処理しなければいけないことも。
リンク切れチェッカーとかのプラグインもあるので、
対応できないことはないのですが、やっぱり大変は大変だと。

そういったときに、タグでアフィ広告は管理しておいて、
修正も一箇所でまとめてOK、これは便利です！
気になるのが、、、そう、お値段ですよね？
これが、今回は、大奮発で、、、無料！！
まぁそういうことです。

いかがでしたでしょうか。
Cocoonが便利すぎて鼻血でそうですね。
わいひら氏を支援するサイトがあれば情報教えてください。
有料テーマくらいの投げ銭できるといいですよね。
あるいは、Radioheadのin Rainbowsみたいに、
購入者が自分で値段決める、みたいなシステム。
まぁ、わいひら氏が望んでいるのかどうかはわからんども、
とにかくお世話になったから一生懸命、記事、書いてみる！

ではでは。

今回は、ぶちくまがcocoonカスタマイズしてきた中で、「初心者でもお勧めできるカスタマイズできる場所」をご紹介していきたいと思います。

具体的なCSSに関しては詳細記事をご覧ください。

1.見出しは一番簡単でしかもサイト色出しやすい！

見出しはとにかく簡単なのでお勧めです。

ただし、セレクタがあっていても、COCOON本来に記述されているborder（囲ったりしている線のこと）が邪魔をすることがあります。

border:noneにすることがお勧めです。

2.グローバルナビはアイコンを設定すると可愛く仕上がる

グローバルナビはカスタマイズすべきところがたくさん詰まっています。

ただ、労力的に考えると、スマホはグローバルナビ非表示でも困ることはないし、カスタマイズ優先度としては低いと思います。

サイトの水先案内グローバルナビもかっこよく仕上げる【Cocoonカスタマイズ】

WordPress無料テーマ最強のCocoonのカスタマイズ記事です。 グローバルナビを変更したい方に対して、CSSへの理解度毎に設定のポイントを解説しています。 Style CSS改編不要のものからアニメーションを駆使して魔改造する上級編まであります。 CSSコードのコピペで使用できるし、解説もあるので自分用にデザインしてもOKです！

buchikuma.xyz

2024.03.22

グローバルナビのアイコン設定

アイコンの設定はとっても簡単です！

WordPressのダッシュボード（編集画面）で、「外観」→「メニュー」を開くと、詳細な設定ができます。

そのなかで、編集するメニューを「ヘッダーナビ」にして、該当する項目をカスタム設定していきます。

「ナビゲーションラベル」というものがあるので、そこに例えば「ホーム画面」を変えるのであれば、

＜i class="fa fa-home"> ホーム

みたいな感じにすると、うちのブログみたいにメニュー名の前に、「家」のアイコンをつけることができます。

WordPress テーマ CocoonのメニューにFont Awesomeのアイコンを追加表示する方法

WordPress テーマ Cocoonは、標準でFont Awesome のアイコンフォントが組み込まれて（ロードされて）利用可能になっています。本記事では、Cocoonのメニュー項目にFont Awesomeのアイコンを加えて表示させる

www.blogging-life.com

こちらの「ブロギングライフ」さんは、コクーンのCSSカスタム意外にも、役に立つ情報がたくさんあるのでおススメです！

サブメニューも背景色や影をつけて見やすくするといい

Cocoonのグローバルナビでは、サブメニューを設定していると、びろーんとグローバルナビからサブメニューの一覧をみる事ができます。

ぶちくま創作ベースでは、背景に点線をつけて、少し布っぽさを出しています。

グローバルナビにアニメーションをつけて文字が現れるように

これは少し難しいので初心者にはお勧めできませんが、こういうことも可能だよってことで。

ちなみに、ぶちくま創作ベースではヘッダー画像もしたから時間差で挿入されるようになってます。

まぁ、スマホ流入がほとんどなので、目にすることは少ないかもしれませんが。

3.スマホ用サブメニューに点線など仕込む

だいたいCSSをいじる人は、PCでやるので、サイトチェックもPCばっかりになりがち。
スマホ環境も必ずチェックしましょう。

ちなみに、Cocoonのいいところは、スマホも最適化されていること。

スマホだと、スライドインボタンが簡単に挿入できます。

この中で、メニュー画面の設定が非常に崩れやすいのですが、こちらもいじったりする事ができます。

見出しっぽく、アイコンをつけたりするとメニューとサブメニューが区別できていいと思います！

4.トップページのインデックス一覧はカードタイプを活かしたカスタマイズを

インデックス一覧はこんな感じになっています。

少し浮き上がらせてカードっぽさを演出、リンクを認知させる

ぶちくまサイトでは、インデックスは「縦型カード２列」で設定しています。

やや縦長になってしまいますが、こちらをカードっぽく、さらに言えば「付箋」っぽくカスタマイズしています。

ADHD必須アイテムの「リマインダー」をイメージした、と過去記事で触れましたね。

少し浮き上がらせる事で、「ここはこの範囲がリンクになっているんだな」と、少しでも視認性、操作性、ユーザビリティの向上を目指してこうなりました。

最近また人気が出てきた「本文はこちら」誘導

最近はスマホがネットビューの主流となっていることもあって、「リンクであることを伝える方法」もはっきりさせたほうがいいね、って流れがあります。

Twitterで「リンク率が上がるぜ！」ってことで、「続きを読む」をブログカードに挿入する方法が流行りました。

ぶちくま

なんでも流行るんです、Twitterってのは。

まぁ、これはSimplicity使ってた人は、わかると思うんだけども、もともと「記事を読む」が実装されていて、こちらのカスタマイズが流行ってました。

しろくまさん

「記事を読む」をクリックするとページに飛ぶ仕組みだったわけですね。

テキスト部がリンクだと、スマホだとタップしづらいんですよね。

そこで、ブログカード全体をリンクにする流れとなりました。

そうなると「続きを読む」いらなくねってなって、廃れていったわけです。

Cocoonの場合はインデックスカード全体がリンク

Cocoonでは基本、ブログカード全体がリンクになるので不要なわけですが、大型のカードになると、「あれっ？　これってどこタッチしたらいいの？」ってなりがち。

とくに、最近はスマホですからね、タッチするまでリンクかどうかわからんですからね。
そういうわけで、「本文はこちら」を入れてみました。

色の変わっている「本文はこちら」をタップしてもらうと、ちゃんとリンク先に飛ぶことをしっかり明示したわけですね。

カテゴリ表示はリボン風

一応ね、マテリアルな感じを求めていったらね、なんかこう、細かいところまでカスタマイズしたくなってね。

こちらはみんな大好きサルワカデザインですね。

CSSで作る！綺麗なWeb用リボンデザイン22選

HTMLとCSSのコピペで使えるWeb用のリボンデザイン集です。横だけでなく、縦や斜めのもの、ボッ クスに折り込まれるような立体的なデザインのものまで揃えました。

saruwakakun.com

5.サイドバーのウィジェット「人気記事」「新着投稿」もカード風

これはもうエントリーカードと以下同文ですね。

まだやってませんが、こちらにも「続きはこちら」をいれてもいいかも。

「記事を読む」を入れてみた

詳細記事がまったく間に合ってませんが、「記事を読む」をカード内に挿入しました。

hoverするとウニョーンって伸びるうざい仕様です。

実はアイキャッチも少しだけ拡大されています。

6.サイドバーのタイトル（見出し）も見やすく変更

見出し関連は簡単にへんこうできるのですが、もちろんサイドバーの見出し、タイトルも、CSSでおしゃれに変更できます。

おしゃれ、と言えば、そう、サルワカ先生ですね！

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

saruwakakun.com

しろくまさん

オリジナルのカスタマイズがほとんどないな

見出しごとにアイコンをつけたい

まだ未実装、というかCSSがかさばるのが嫌でアイコンはひとつだけにしています。

7.「コメント」「関連記事」だって見出しでおしゃれにアイコン挿入

サイドバータイトルに以下同文ですが、こちらもセレクタ設定さえできれば、簡単に変更できます！

8.ボタンは「光らせたい」ならこのカスタマイズ！

ぶちくまサイトではボタン、光らせてます。

ちなみに、ぶちくまは光ってるボタンは絶対に踏みませんけどね。

ぶちくま

だって、怪しいじゃん！
ぜったい、「ワンクリック詐欺」じゃん！

だけど、どうやらクリック率が上がる、というよりは「ここがリンクだ」ってのがわかりやすくなるんでしょうね。

実装してます。→Cocoonのボタン側で光らせることに対応したので不要に。

9.吹き出しを左右で色変えてみました

サイトのテーマ色、「青」「オレンジ」で左右吹き出しコメントの背景色を変えてます。

繋げてくと、みづらくなってくるからね。

この吹き出しが欲しくて、Cocoonにしたんでした。

しろくまさん

しろくましかないってどうなのよ

ぶちくま

絵が下手だから準備に時間がかかるんです！

Cocoonにテーマ変更するメリット【ありがとうSimplicity】

Simplicityの作者、わいひらさんがCocoonという新しいテーマを提供してくれています。 今回はCocoon導入を迷われている方に背中を押すメリットについてまとめてみました。 無料テーマでここまでやられると有料テーマは商売上がったりですよ！

buchikuma.xyz

2024.03.22

10.バッジは一部だけ変更して簡単に「参照」「引用」がわかるように

べつに個別にクラス指定してもよかったんだが、Cocoonはバッジとかボタンとか、いろんな色が用意されているんですよね。

ぶちくまは一部の色だけ、この「バッジ」を変更して、

• 「ref (refernce) = 参照」
• 「source = 引用」

であることを示すようにしました。

今後、こういった引用表現は大事になってくるので、面倒でも、「引用、出典、参照」は明示したほうがいいですよ。

たとえばこんなバッジ、リンクはないよ

参照の場合はreferenceの略語で対応

11.ボックスも一部変更し「おすすめ記事」「check!」などが含まれた、おされBOXに

これは、いわば有料テーマでよく実装されているやつの、まぁ、うん、そうだ。
パクリですよね。

おすすめ記事の紹介が一発でできるので、個人的には、バッジとボックス、重宝しています！

怪しいリンクユニット風の箇条書きリストも

怪しさMAXのリンクユニット風箇条書きリスト｜読者を困惑させてもメリットなし

リンクユニット風の箇条書きリストをつくってみました。作成者の自分でも間違えてリンクユニット踏むレベルです。需要の有無よりもリンクユニット のカラー設定についての考察が役に立つと思われます。CSSコピペOKです。ご活用ください。

buchikuma.xyz

2024.03.22

こんな感じで、いかにも怪しいリンクユニット風の箇条書きリストも用意しました。

12.箇条書きリストもアイコン挿入

• 普段はこんなやつ。

13.補足説明BOXの微調整

こちらも一応、Simplicityから引き継ぎましたが、ぶちくまはCocoonデフォルトも結構好きなので、AMPの方ではデフォルトのままにしています。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

14.目次のデザインカスタマイズ

こちらはCocoonで目次が実装されたので、移行に伴い、余白の調整からセレクタの設定まで結構骨が折れました。

15.コード表示のためにクリックで現れるBOXをつくる

こちらはサルワカ先生のところに詳細あります。

まだまるっとCSSいただいてるだけなので微調整。

HTMLとCSSだけ！要素の表示・非表示を切り替える方法

こんなやつですね。

サンプル

16.「カエレバ・ヨメレバ」デザインの調整　アイコン設定など

TwitterではRinkerが大人気ですが、価格表示は誤誘導につながりかねないので保留中。
あと、プラグインは基本入れない。

でも、アナリティクス連携機能は魅力。

とにかく、カエレバ・ヨメレバはデフォルトも素敵デザインなので、とくにカスタマイズは不要かとは思ってる。

AMPはデフォルト推奨で。

Amazon商品リンク対応したので不要に

Cocoonが便利なAmazonリンク作成ツールを機能に盛り込んだので不要になりました。

Amazon商品リンク設定と使い方

これが超便利なので、RinkerとWPAPは不要になってありがたいっす。

Amazonで「人生を変える断捨離」に関する詳細を見る

Amazon

楽天

Yahoo!ショッピング

モバイル版がシュッとしたデザインになったので調整

モバイル版のYahooリンクが大きくなり過ぎたので少し手を入れました。

17.「アプリーチ」導入とCSS調整

すでに詳細記事あります。

Apple Music

Appleposted withアプリーチ

18.カードリンク全般のホバー時のエフェクトを追加

さいとうさんの記事がとても素敵です。

さいとうカスタムは有料テーマに負けないアニメーションも取り入れているので、参考におすすめしたいサイトです‼︎

https://s41t0h.jp/

s41t0h.jp

19.サイドウィジェットの「カテゴリ」を点線やアイコンを入れて見やすくする

もうね、ここまでカスタマイズすると
FontAwesomeを使わないといけないんじゃないかという、
妙な強迫症状がでてくるよね。

ベストなアイコン探すのって結構大変。
そんな時にはさいとうさんのブログですね。

https://s41t0h.jp/font-awesome-icon-matome/

s41t0h.jp

こういうのが欲しかった、という見事なリスト！

実際の画像

20.カルーセル実装したら背景色くらい入れとこう

Cocoonの魅力的な昨日に「カルーセル」機能という、おしゃれなECサイトなんかで、商品画像をぐるぐるまわしているあれ、なんとCocoonでもできます。

これは画像と背景の感じから
「あっ、これ絶対映画フィルムっぽくしたら素敵やん！」
と思って、こんなデザインになりました。

結構気に入ってます。

実際の画像はこちら

21. モバイルスライドインボタンの「サイドバー」

更新しました。

モバイルスライドインを設定している方も多いのでは？

サイドバー息してないから、カスタマイズ方法教えるよ！

どうせ読まれないサイドバーを有効活用する方法｜Cocoon改造

サイドバーはまったく読まれてないコンテンツになるわけですが、 これを少し目立たせて存在アピールするカスタマイズを行いましたので共有投稿します。 Cocoonのモバイルスライドインメニューボタンの改造記事になります。 「サイドバー」のアイコンと文字を変えて、別の要素に切り替えて内容を示すというカスタマイズです。

buchikuma.xyz

2024.03.22

22.RinkerのAMP表示を調整

もうね、全然更新が追いついていないけどね。
やることは一応やってるんです。

こんな感じでした。

取り急ぎ、載せておきました。詳細記事は随時更新していきます！

「CSS教えて！」という希望がありましたら、そのあたりの記事をなるはやで更新して見ます！

ブログカードに憧れてSimplicityに移ってきた経緯がぶちくまにはあります。昨今では「ブログカードは場所をとるし、クリック率が悪いので採用しない」と、味気ないテキストリンクを貼る輩も増えているご様子。

ぶちくま

いかん、いかんぞ！こんなに素敵なブログカードがあるというのに使わないなんて手はない！

と言いながら、今回はブログカードのカスタマイズ方法を伝授しつつ、リンクの貼り方についても少しばかり講義したいと思います。

WPテーマCocoonのブログカードカスタマイズ方法

ブログカードのカスタマイズについては中級者レベルとなります。

なので、今回は初級的な説明は一旦省略します。

初級編の記事は今後もう少し厚くしていくので、もう少しお待ちを。

【Cocoonカスタマイズ】超初心者でも自分好みに「見出し」を変える！

今回は無料のWordPressテーマで国内最高峰のクオリティの 「Cocoon」を使った見出しのカスタマイズ方法を、 これでもかってくらいに画像を使って説明してみました。 ほぼ何もできない状態の初心者の方でも、きっと自由にカスタマイズできるくらいの わかりやすさを目指したつもりです。 まずはその第一段階、Google Chromeのデベロッパーツールの使い方も説明しました。

buchikuma.xyz

2024.03.22

では、実際にコードを見ていきましょう。

私が実際に使っているCSSコード

/*cardの外観*/
.internal-blogcard,.external-blogcard{
padding: 0.5em 1em;
margin-bottom: 0.5em;
color: #5d627b;
background: #f4f4f4;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.33);
border-radius: 4px;
}
.internal-blogcard {
border-left: solid 5px #fd9435;
}
.external-blogcard {
border-left: solid 5px #86ceec;
}

まずは、外観の考え方です。

ブログカードの外観はクリック（タップ）できることを明確に

Cocoonのブログカードは、特に設定しなければ、カード全体がリンクとなっていて、カード上ならどこを押してもリンク先にいくことができます。

便利ではあるのですが、逆にリンクだとわかるポイントが薄いので、いまいちクリックされづらかったりもします。

カスタマイズのポイントと一緒に、どういったデザインが望まれているか考えていきましょう。

セレクタの設定の仕方

内部リンクは「.internal-blogcard」、外部リンクは「.external-blogcard」というクラスが割り当てられています。つまり、そういう名前がすでにつけられているってことです。

そのため、これらをセレクタ（変更する場所）に指定します。

ちなみに、ブログカード全体としては「.blogcard」でもよかったはずなので、２つ共通した外観デザインを設定する場合は、こちらのセレクタを使用してもいいと思います。

ぶちくまは２つのセレクタを指定して外観の大枠をつくり、内部リンクと外部リンクをそれぞれ、色を変えている、といったところですね。

デザインのコンセプト

これはいわゆる「付箋型」のボックスを採用しています。というか、ぶちくまのサイトは付箋だらけです。職場も付箋だらけにしてます。まさにぶちくまらしい、とも言えます。

また、全体に影をつけることで、「これは押せるボタンなんじゃないか」感をうっすら出しています。でも、それだけだとわかりづらいですよね。

カードの内部に「続きはこちら」などの文章を追加しておくと、リンクであることがわかりやすくなりますね。

「続きはこちら」などの文章の付け加え方

/*続きはこちらを挿入*/
.internal-blogcard:after,.external-blogcard:after{
font-family: "FontAwesome";
content: "…続きはこちら f14d";
font-weight: bold;
font-size: .8em;
color: #f4f4f4;
padding: .5em;
border-radius: 4px;
width: 45%;
background-color: #033b86;
margin-left: auto;
text-align: center;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

文章はcontentというプロパティを使います。

プロパティ、というのは「どういう変化をつけるか」という指示になります。

Contentは文字通り、文章を加える、という指示になります。

コードを見てもらえると、ダブルクオテーションで囲まれている部分、つまり「続きはこちら」の部分を変えると、好きな文字に変えることができます。「タップで続きを」とか具体的な指示を書いてもいいでしょう。

そのあとのアルファベットと数字は、Fontawesomeのアイコンになります。こちらもサイトを見ながら、リンクっぽさを出していくといいですね。

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new icons, styles, ...

fontawesome.com

わかりづらいプロパティの紹介

そのほか、プロパティについては使いながら説明していきます。今回はmarginとpaddingというものを実戦で見ていきます。text-alignについても調べ上げなければいけない状況に追い込まれたので使ってみました。

marginとpaddingで余白をつくる

marginとpaddingは余白をつくるプロパティだと思ってください。

ふたつの違いは、marginが外側の余白、paddingが内側の余白、とまずは覚えておいてください。

margin-leftをautoにすることで右寄せになります。

leftなのに右寄せとか意味わからんかもしれませんが、右側の余白を指定しないことで、合わせ技で「左の余白をしっかりとって」という意味になります。

結果、右寄せになります。右寄せはいろいろ方法はあります。股間のポジショニングの話はしていない

text-alignで文章を中央揃えにする

右寄せついでに。

今回、なんだかうまいこと文章の位置が決まらなかったので、プロパティで調整しました。

「text-align:center」で文章などを中央揃えにすることができます。

今回はこのくらいの説明にしておきましょう。

リンクはブログカードがいいかテキストリンクがいいか

結論から言うと、「適材適所」になります。便利な言葉やね。

では、どのようにその場にあった一番いいリンクが貼れるかというと、基本的な考え方は

• 「リンクに飛ばしたいか飛ばしたくないか」
• 「コンテンツに集中させたいかどうか」

この２点が重要になります。

リンクの作り方の基本

しかし、記事のテコ入れをしていると、我ながら「何を知ったようなことを」と言う気にはなりますが、過去の自分が気分良く書いているようなのでこのまま残しておきます。

外部リンクはアフィリエイト以外は飛ばさない

変な話ではありますが、外部リンクは貼っておきながら、本当はあまり貼りたくない、という思春期の女の子みたいな気難しさがあります。

必要な外部リンクとして、引用や出典があります。つまり情報源を明らかにすること。

これはとても大事なことで、引用した際にしっかりと情報源を記しておくことで、「正しい手順で引用しているのであって、パクリサイトではないんですよ」というメッセージになります。

パクリじゃないというメッセージをどれくらいGoogleさんが読みとって検索順位に影響を与えているかは、なんとも言えないところではありますが、少なくとも読者にとっては、信用できるサイトだという印象を与える、ポイントにはなります。

まぁ、普通に考えて、引用元の方が詳しい情報が載っていることが多いので、載せた方が利用者には優しいですよね（ここ、ポイントです）。

覆水盆に返らず、出てった訪問者は帰ってこない

ただ、一度出て行った読者はだいたい帰ってこないので、いわゆる「離脱」になります。

ブロガーにとってのベストは「自分のコンテンツを楽しんでファンになってもらうこと」
アフィリエイターのベストは「収益のためにアフィリエイトサイトに顧客を流すこと」になります。

言わずもがな、外部リンクの数は鍋の底にあいた穴と一緒で、開ければ開けるほど、せっかくためた大事なものがいろいろ流れていきます。

なので、必要なリンクでも外部に流出させたくない時は、特に目立たせないテキストリンクにする、なんて使い分けが有効と言えそうです。

内部リンクでも必要に応じてテキストリンクを使おう

じゃあ目立つブログカードばかり使えばいいかというと、それもやはり適材適所。

例えば、細かい内容が必要ないリンクはテキストリンクでいいわけです。

すでにお勧めとして記事で紹介していればタイトルだけでいいし、ある程度同一カテゴリのおすすめ記事として列挙する時なんかも、もう内容を伝えるのがタイトルコールだけで十分なら、テキストリンクで列挙の方が見やすいです。

ブログカードの弱点は何と言ってもかさばること

ぶちくまも何度かやってみましたが、
ブログカードは２枚続くだけで結構うるさい。
情報が溢れかえってくる感じ。
３枚続けると閲覧ページがブログカードで埋め尽くされたりすると、
やっぱりウンザリするわけですよ。

ブログカードはSANGOのように「サムネイル（アイキャッチ）＋タイトル」で十分

これも考え方によりけりではありますが。
ブログカードのメリットは、リンクを踏まずして内容がみえてくること。
アイキャッチとタイトルで十分情報が伝わるように編集してあるなら、
いっそ内容説明文(snippet)は非表示でもいいかもしれません。
これは、

.blogcard-snipet {
display: none;
}

で消すことができます。あとはタイトルと画像の大きさを調整すれば、有料テーマのブログカードも再現できるはずです。

サイト回遊率を上げるならつながりのあるリンクをつなげていくことが大事

これはブログ運営論みたいになってしまうけど、とりあえず記事はかけるだけ書いておいた方がいい。PVも収益も気にすることはない。とにかく思いついたことを記事にしていく。

５０記事は無心で書こう。５０記事の貯金ができたら、それらの記事の関連性をマインドマップのようにつなげていく作業をしていくといい。

まとめたり、あるいは分割して、ひとつの「かたまり」をつくっていきましょう。中心にまとめ記事をおいて、リンクでつなげていくといい。まとまりのない雑記ブログでも、アフィリエイトサイトばりに回遊できるようになるから。

まとめ

いかがでしたでしょうか。今回はブログカードの説明をしてみました。

コピペ自体は簡単ですが、余白の調整とか始めるとキリがないんだよね。

ではでは。

個人的にはプランナーとかもいいかなと思ってる。ただ、初心者の枕詞つけないと詐称になっちゃうから気をつけないと。

グローバルナビ、スマホだと表示されないんだけどね。（設定によりますが）逆にAMPを気にせずにガシガシとカスタマイズしてやりましょう。AMPはアニメーション制限があるからうまくいかないんだよね。

無意味なことほど、人間は一生懸命取り組めるのです。今回はアニメーションを取り入れましたので、上級向け（ぶちくま判定なのであくまでも素人レベルです）となります。

「へぇ、こんなこともCSSでできるんだぁ」くらいの気持ちでご覧いただければと思います。

グローバルナビカスタマイズで取り組むこと

1. アイコンを設定しよう（超初級）
2. グローバルナビの項目にサブタイトルをつけよう（超初級）
3. グローバルナビの背景色を設定しよう（初級）
4. 背景色にグラデーションを取り入れてみよう（中級）
5. グローバルナビをアニメーションを使って表示させよう（上級）

こんな感じになってます。

グローバルナビに求められるデザイン

まず、グローバルナビは何かっていうと、一番最初に読者が目にするカテゴリ名なわけです。

厳密にいえば、WordPress上の「カテゴリ」とは少し意味合いは変わります。

ここに表示させるのは「カテゴリ」だけではなく、問い合わせ先や、場合によってはプライバシーポリシー、サイト運営者情報としてプロフィールへのリンクを貼っておくこともあります。

「このサイトでは、こんな情報がありますよ」という、大雑把な分類名を見ることができるわけです。

そして、読者がサイトで迷子になった時にナビを頼りに正しい道筋に戻す役割があります。

特に、雑記ブログ（カテゴリがたくさんある）の場合は、グローバルナビの項目選定は、かなり重要になります。

そういったわけで、グローバルナビはサイトの顔でもあるので、求められるデザインは以下の通りです。

• サイトのメインカラーを取り入れる
• 文字は目立たせてサイト情報を伝える
• 最小限の情報を規則性を持って並べる

いいかえれば、個性と情報と整理ですね。

アイコンを設定しよう（超初級）

アイコン設定といえば、Cocoonブログのブロギングライフさんです。
https://www.blogging-life.com/cocoon/add-font-awesome-icon-to-menu/

アイコンの設定方法

WordPressのダッシュボード（編集画面）で、「外観」→「メニュー」を開くと、詳細な設定ができます。

「メニュー」編集画面で、メニュー項目から「ヘッダーナビ」を選択。
該当する項目をカスタム設定していきます。

「ナビゲーションラベル」というものがあるので、そこに例えば「ホーム画面」を変えるのであれば、

＜i class="fa fa-home"> ホーム

※半角の＜を使ってください。

みたいな感じにすると、うちのブログみたいにメニュー名の前に、「家」のアイコンをつけることができます。

アイコン探すときは、Fontawesomeホームページをご覧ください。

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free...

fontawesome.com

グローバルナビの項目にサブタイトルをつけよう（超初級）

こちらは不要ではあるのですが、
なぜかぶちくまサイトのナビ設定にすると表示が崩れてしまうので、
サブタイトルもしっかりつけておくことをお勧めします。
（本当はごちゃごちゃするから嫌なんだけど）

グローバルナビに補足説明文を記入する方法

グローバルナビの個別メニューアイテムに対して補足文（キャプション）を入力する方法の紹介です。

wp-cocoon.com

細かい方法は本家わいひら氏が丁寧に画像付きで説明してくれてる。

先ほどアイコン設定に使った「メニュー」編集画面で、細かい設定をするために、ページ上部の「表示オプション」をみつけて、そのタブを開くと、「説明」を追加するチェックボックスがあるからチェック。

すると、アイコンの時にも使った、各項目細かい設定に「説明」という、入力するボックスができているから、そこにサブタイトルを入れると、ナビ項目が２行で表示されるようになります。

大体は、日本語と英語、みたいな感じで表示させるパターンが多いです。

サブタイトルの付け方は以上です。
CSSをいじることもないので楽チンです。

グローバルナビの背景色を設定しよう（初級）

グローバルナビの背景色の設定はCocoonの設定画面でできます。
これはAMPや、サブカテゴリの表示の背景色にもなるので、
自分のサイトのメインカラーを使うことをお勧めします！

【Cocoonを使ってブログ作り】サイトのテーマを決めないと大変なことに

Cocoonを使ったブログ作りを解説しています。 今回はサイトのイメージを固めて、サイト全体のカラーリングについて解説しています。 また、設計図を作ることで、ブレなく、統一感のあるサイトを作成することができます。 マテリアルデザインとフラットデザインの特徴、メリット/デメリットについても。

buchikuma.xyz

2024.03.22

• WordPressのダッシュボードから、「Cocoon設定」タブを選択
• 「ヘッダータブ」を選択する。
• 「グローバルナビ」の背景色を設定する。

以上です。初心者にも優しいように、
独自の設定画面で簡単に色合いが決められるのがいいですね！

背景色にグラデーションを取り入れてみよう（中級）

ついてこれていますでしょうか。まずは興味のあるところから始めて、できることは徐々に増やしていくのがお勧めですぜ。

さて、この辺りからCSSをいじっていきます。

今回は意図的にグラデーションを取り入れてみました。

サイトの雰囲気とかはいいんですよ、ただ、やりたいからやるんです（どやっ）なんでも実践してみないと覚えないですからね。

まずはCSSコードをみていきましょう。

.navi-in>ul {
background: linear-gradient(to bottom,#8492f7,#0e50b9 30%,#033b80);
}

意外とシンプルでした。

ただし、背景色の値に、何やら見慣れぬ文字と、色が３色も使われています。

どういうことなのか、みていきましょう。

グラデーション(linear-gradient)の使い方

プロパティのbackgroundはよく使われるので覚えてきた方も多いかと思います。

ただ、値が、知らん！なんだこのアルファベットの羅列は！我々の知っているbackgroundの値は#ffffffとかだったはずだ！

と、いう気持ちでぶちくまはみておりましたが、中級者の皆さんは、ようは＃以下を自分の好きな色に調整すればいいだけです。

値の中にある30％は、色の折り返し地点が30％にある、ということです。

to bottomはそのまま、「下に向かって」ということです。

つまり、上から30％までは①→②の色で移行していく。残りの70％を②→③の色を推移していく、ということになります。

ぶちくまの期待した効果〜立体表現にグラデーションは便利〜

グラデーションを使って、立体を表現したかったんです。

つまり、上部は光の当たる部分で薄く、下部は影になる部分で暗く、みたいな。

かまぼこを真上からみたような感じで、「押せるかな？」と思わせるのが狙いです。

結論は、みていただければ分かる通り、少し狙ったようにするには、インパクトが弱いかな、というところ。

各項目のサイドにボーダー入れたりもしてみましたが、いまいちしっくり来ていない部分であります。

ぶちくま

まぁ、だいたいグローバルナビは触れるという認識があるでしょ？

からす

考えが甘い！　「当然こうだろう」という常識の押し付けが、一番ユーザビリティを下げる行動だから気をつけなさい！

グローバルナビをアニメーションを使って表示させよう（上級）

最後に、上級編ですね。
これは、正直に言おう。

ぶちくま

「アニメーションの勉強してたらどうしても使いたくなった！」

CSSを勉強していると、こういうことが、まぁまぁ、よくある。
アニメーションとしてはシンプルな、移動して定位置にいく、というやつ。
これは簡単なので随所に取り入れてみてほしい。

有名有料ブログテーマ風もこれで簡単導入

グローバルナビの項目を少しずつ登場させるアニメーション

ナビの各項目を少しずつずらして登場させるのは、少し大変でした。

何がって、、、セレクタがね。

各項目を抽出して選択する方法が、なかなか難しかったですね。

まぁ、みなさんは難しいこと考えずにコピペするがよろし

ぶちくまが使っているCSSコード〜アニメーション〜

/*naviのフェードイン*/
#navi .navi-in ul>li>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1.8s;
animation-fill-mode: forwards;
filter: opacity(0);
position: relative;
z-index: 4;
}
#navi .navi-in ul>li:nth-child(1)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 0.2s;
}
#navi .navi-in ul>li:nth-child(2)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 0.4s;
}
#navi .navi-in ul>li:nth-child(3)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 0.6s;
}
#navi .navi-in ul>li:nth-child(4)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 0.8s;
}
#navi .navi-in ul>li:nth-child(5)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1s;
}
#navi .navi-in ul>li:nth-child(6)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1.2s;
}
#navi .navi-in ul>li:nth-child(7)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1.4s;
}
#navi .navi-in ul>li:nth-child(8)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1.6s;
}

@keyframes fadeIn {
from {
transform: translateY(20px);
filter: opacity(0);
}
to {
transform: translateY(0px);
filter: opacity(1);
}
}

自分で組んでおきながら、久しぶりすぎてどこを抽出すればいいかわからんかった。動かなかったらぜひコメントください。

Keyframesの使い方（ごく基本）

ぶちくまも、正直keyframeを正しく動かすにはまだ知識が足りていない。なので、基本的な動き方だけ。

詳しいことはQiitaで学ぶと良いです。

【CSS3】@keyframes と animation 関連のまとめ - Qiita

はじめに animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。 簡単にアニメーションの設定ができるので、覚えると楽しいです。 そもそもアニメーションって？ アニメーションの意味をググ...

qiita.com

基本的には、keyframeに名前をつけておいて、該当する名前のアニメーションを適用できる、というものになります。

今回で言えば、「fadeIn」とういアニメーションを指定しておき、@keyframesで「fadeIn」の動き方を指定している、という感じですね。

アニメーション@keyframesの動き指定

簡単そうな@keyframesの動きからみていきましょう。

まず、transformで、動き方を指定します。

今回は下から上への動きになるので、Y軸方向に20px移動したところから始まりますよ、ということです。

From ~ to や、0% ~ 100%で変化のタイミングを調整します。

つまり、今回のkeyframesでは、

コード指示を翻訳するとこんな感じになります。

アニメーション@keyframesの時間設定の仕方

animation-durationでアニメーションが動いている時間を指定する

時間の設定は、動かしたい（アニメーションをかける）対象ごとに設定できます。

今回で言えば、「animation-duration: 0.6s;」の部分になります。

時間が短く、つまり動きを速くしたければ数字を小さくすればいいってことですね！

animation-delayで時間差で動き出すように設定する

animation-delayは、動き出すまでに、どれくらい遅くするか、つまり時間差を指定する時に使用します。こちらも数字をいじることで、設定できますよ。

セレクタはやや複雑なので、別の機会で説明しますが、内容としては、「各項目の一番左のものから順に、0.2秒ずつ遅れて登場する」ような設定になっています。この設定が、初心者にはかなり難しかったです。

ぶちくま

なかなか思ったところに適応されなくてね（涙）

意図せずサブカテゴリもアニメになったけどよしとした

グローバルナビのカスタマイズまとめ

いかがでしたでしょうか。

上級編が先に来てしまいましたが、今後、各レベルに合わせて、ゆっくり解説記事も書きますのでよろしくお願いします。うまく動かないときは、デベロッパーツールでひたすらいじってください。

最初はその繰り返しです。セレクタさえしっかり合えば、あとは微調整です。

からす

何事もまずは挑戦することが大事よ！

ぶちくま

こうやって記事にまとめると、さらに理解が深まるのでオススメです！
人に教えるのって、知識をまとめる作業が必要だからね！

ではでは。

少しだけ補足

2021年のぶちくまです。読んでいただいた方がいらっしゃればお疲れ様でした。何点か補足しておきます。

まず、グローバルナビにアニメーションは不要です。サイトの不具合がナビに起こると面倒です。ブラウザによって対応しないなどの問題が起きた時に、サイト訪問して最初に目にするグローバルナビがバグっているとサイトの信用に関わります。

グラデーションに関しても、ブラウザによってはうまく反映できないものがあり、結論で言えば「なるべくシンプルなデザインにしておいて、コンテンツに色（特色）を付ける」方が大事です。

この頃は、本当に楽しんでCSSに取り組んでいます。ただ、収益という面で言えばCSSデザインを初心者が工夫を凝らしたところでたかが知れています。時間効率で言えば細かいデザインのカスタマイズよりは記事を書いたり動画を撮影したり編集したりというあたりの方が重要ではあります。

ただ、やっぱりCSS含めてデザインを学んでおく方が、ブログを長く続けていく上では差別化できるポイントを増やすことはできます。少し矛盾しますが、コンテンツが出来上がってくれば、最後の詰めで読者を満足できるかどうかは、やっぱりデザインだったりします。

現在、「Rinker導入しようと思ったけどあきらめたぜ！」っていう、いかにも爽やかな記事を書いています（苦笑）

結局あきらめられずに、大きなネックの一つだったAMPで表示が崩れないカスタマイズをしてみました。

ただし、Cocoon限定です。（たぶん他のテーマでも大丈夫ですが、テーマCSSの影響を受ける可能性はあります）

CocoonならAMPも楽々CSS編集できる

Cocoonだと、子テーマのAMP CSSで簡単にカスタマイズできるのです！

これからの時代、ページ速度をGoogleも評価するようになるって話ですから、検索流入はAMP、そこからいかに離脱させずにサイト内を回遊してもらうか、というのが一つ、カスタマイズのポイントになってくると思います。

Cocoonはテーマで商品リンクができるようになった

なりましたねー、どんどん進化しますねー。

Amazonと楽天商品リンクモバイル表示をカスタマイズ｜Cocoon

Cocoonの商品リンクが素敵にアップデートされたので、モバイル版の形式だけ少しカスタマイズしてみました。Yahooのリンクだけ少し大きいなと感じたので、それぞれ同じ大きさにして、あまりみない丸いボタン風にしてみました。簡単なコードにしたので、さらにカスタマイズを深めてください。

buchikuma.xyz

2024.03.22

記事、書くよねー。

そういうわけで、ぶちくまはRinker卒業しました。

Rinkerの仕様変更で適宜修正の必要性が出てくる

SNS慣れしておらず、コメントがきていることに気づかず、せっかくのレスポンスに対応できずにすいませんでした。

今、Rinkerみてみたら、

などなど（もっとあると思いますが）不具合もみられていました。空白についてはコメントでいただいたのですが、当方では再現されておらず。

しかも、Rinkerが更新されるごとに、余計な余白がつくられたり。

プラグインは更新のタイミングでCSSやり直さないといけないのでしんどいですね。

コピペで楽々AMP用CSSコードを公開

一応、解説もしますから、色などの変更はご自由に行ってください。

ぶちくま

表示乱れてたらコメントください！

/******* AMP用rinker カスタマイズ*******/

/**ショップリンク**/
.yyi-rinker-links li {
    box-shadow: 2px 3px 8px -5px rgba(0,0,0,.25);
}
.yyi-rinker-contents .yyi-rinker-links a{
    display: block;
    margin: 0 auto 8px;
    text-decoration: none;
    font-size: .9em;
    text-align: center;
    color: white; 
    padding: 0.2em 2em;
    border-radius: 4px;
    }
.yyi-rinker-links .amazonlink a{
 background: #f6a306;
}
.yyi-rinker-links .amazonlink a:before {
    font-family: "fontawesome";
    content: "f118";
    margin-right: .5em;
   }
.yyi-rinker-links .rakutenlink a{
    background: #cf4944;
    }
.yyi-rinker-links .rakutenlink a:before {
        font-family: "fontawesome";
        content: "f25d";
    margin-right: .5em;
}
.yyi-rinker-links .yahoolink a{
    background: #e86e6e;
}
.yyi-rinker-links .yahoolink a:before {
       font-family: "fontawesome"; 
       content: "f07a";
    margin-right: .5em;
}
/**テキスト調整**/
.yyi-rinker-info .yyi-rinker-title p {
    font-size: .8em;
}
.yyi-rinker-info .yyi-rinker-detail .price {
    color: #f7a9a9;
}
/**外観調整**/
.yyi-rinker-contents {
border: double 3px #dbdbdb;
    box-shadow: 2px 3px 8px -5px rgba(0,0,0,.25);
}
.yyi-rinker-title {
    margin: 0 2em;
}
.yyi-rinker-detail {
    margin: 0 2em;
}
.price-box {
    font-size: 0.8em;
}
div.brand {
    font-size: 0.8em;
}
/**画像調整**/
.yyi-rinker-contents .yyi-rinker-image {
    width: 160px;
    min-width: 160px;
    margin: 1em auto;
}
/**黒ぽちlistを消す**/
ul.yyi-rinker-links {
    list-style-type: none;
}

他のコードが作用しているようだったら、優先度を上げるか、一度打ち消してからコード記入するといいかも。

カスタマイズのポイント

AMPに関しては、一応、モバイル専用なのであまりレスポンシブのことは考えずに構築しました。

AMPは実は書き込める文字数に制限がありまして、誠に個人的な事情により、あまり凝ったデザインにはできない実情がありまして。

かなりシンプルな感じになってます。

ホバー時のエフェクトとか入れたいなぁとは思ってるんだけどねぇ。

まぁ、ほら、人生引き算もうまく使わないと、みたいなところあるじゃないですか。

そういうことで（どういうことだ）

背景色の変更やアイコンを使って少しだけ個性的なデザインにする

一応、各ショップのリンク前に、アイコンを入れられるように、それらしいものは配置してみました。

本当はAmazonのアイコン、使いたいんだけど、アソシエイト的にはNGらしいですね、残念。

Amazon アソシエイトはロゴを勝手に使うとNG

問い合わせて聞いてみたところ、返答がありました。

背景色は暖色系でまとめましたが、Rinker的にYahoo!は青みたいです。

個人的にはYAHOOロゴの色が赤だからそのあたりをイメージして。

あとは文字の大きさですかね。あまり大きくなりすぎずに。

価格は少しだけ色を変えました。真っ赤だと派手なので、控えめなピンクに。

画像はセンターに置くように調整しましたが、使用する画像によって多分崩れます。

AMPはだいたい崩れるのでそういうものだと思ってあきらめてください（苦笑）

とくに変更無ければプラグインからCSSコピペでもOK

RinkerはプラグインにStyle.CSSがあるので、その純正コードをコピーして、そのままAMP用のCSSスタイルシートに貼ってもそんなに大きくは崩れないようです。

コピペでOKなRinkerカスタマイズ

冥土の土産にAMPじゃない、普通の方も置いていきます。

こちらは特にCSSの制限はないので、少し回りくどい記述がおおいかもしれません。

Rinkerのモバイル時のボタン配置をまっすぐ３行に

Rinkerのデザインで唯一耐えられなかったのが、小さめのスマホで見ると、ボタンと画像がごちゃつくこと。

なので、ある程度小さい端末で画面をみたときは、ボタンが縦に１列に並ぶようになっています。

これをするために結構時間がかかってしまった。。。

/******* Style.cssに貼ってねrinkerカスタマイズ *******/
/******* rinker *******/
@media screen and (max-width:522px) {
#content .yyi-rinker-box {
    display: inline-block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin: 0 auto;
}
#content div.yyi-rinker-contents ul.yyi-rinker-links {
width: 90%;
    display: block;
    text-align: center;
}
}
@media (max-width: 420px) and (min-width: 321px)
div.yyi-rinker-contents div.yyi-rinker-info {
    width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
    width: 100%;
}

カエレバとの比較用〜圧倒的にリンク生成はRinkerが優秀

なれればカエレバ のリンク生成も大変ではない。ただ、取得の際に検索用語つくったりとかは少し面倒。

だけど、AMPデザインもCocoonなら準備されているし、Yahooリンクが収益にならないのは少しもったいない。

※Cocoonの商品リンクに全て差し替えたので、カエレバ、Rinkerなどのリンクは取り外しました。

おまけにCocoon商品リンクも比較して

ちょいといじりましたが、比較用のCocoon商品リンクも貼ってみましょうか。

Amazonで「クリスタルガイザー 500ml×24本 並行輸入品」に関する詳細を見る

Amazon

楽天

Yahoo!ショッピング

ついでにWPアソシエイトポストについても

よく、Rinkerと比較されるWPアソシエイトポストですが、個人的にはRinkerよりも使いやすくて多用してました。（てへ）

WPアソシエイトポストの方が使いやすい理由

と、意外にもデザイン面で惹かれたんですよね。

使い勝手の良さそうな「利率表示」は、意外と使わない。というか、まったく使わない。

まぁ、それでも、圧倒的にCocoonテーマの商品リンクの方が使い勝手が良かったので、順次張り替え作業してます。

人知れずWPAPR2にも対応していた当サイト

実は、AMPにおいても、WPAPをのせたコードを作成して、ほとんど遜色のない二つのプラグインを、意味もなく使い回していた当ブログ。

ぶちくま

いつか比較記事でも書こうと思ってたら、不要になってた（ガクブル）

やろうと思ったことは、すぐに実行しないとダメですね。

こんな感じでつくっていました。

AMP用のCSSコード紹介（コピペ自由）

自由にカスタムっちゃってください。

/**ショップリンク**/
a.wpap-link-amazon,a.wpap-link-rakuten,a.wpap-link-yahoo{
    display: block;
    margin: 0 auto 8px;
    text-decoration: none;
    font-size: .9em;
    text-align: center;
    color: white; 
    padding: 0.2em 2em;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.33);
}
a.wpap-link-amazon,a.wpap-link-rakuten,a.wpap-link-yahoo{
	margin: 1em 2em;
}
/**各ECサイト調整、背景色とアイコン挿入**/
a.wpap-link-amazon{
 background: #f6a306;
}
a.wpap-link-amazon:before{
    font-family: "fontawesome";
    content: "f118";
    margin-right: .5em;
   }
a.wpap-link-rakuten{
    background: #cf4944;
    }
a.wpap-link-rakuten:before{
        font-family: "fontawesome";
        content: "f25d";
    margin-right: .5em;
}
a.wpap-link-yahoo{
    background: #e86e6e;
}
a.wpap-link-yahoo:before{
       font-family: "fontawesome"; 
       content: "f07a";
    margin-right: .5em;
}
/**テキスト調整**/
p.wpap-title{
    font-size: .8em;
}
.wpap-price{
    color: #f7a9a9;
}
.wpap-price{
	font-size: 0.8em;
}
span.wpap-date {
    color: gray;
}
.wpap-note {
    font-size: 0.8em;
    color: gray;
}
/**外観調整**/
.wpap-tpl{
border: double 3px #dbdbdb;/**周囲を囲むカスタマイズ**/
}
.wpap-price,.wpap-note,p.wpap-title{
    margin: 0 2em;
}
.price-box,div.brand {
    font-size: 0.8em;
}
.wpap-note{
	text-align: right;
}
/**画像調整**/
.wpap-image{
    width: 160px;
    min-width: 160px;
    margin: 1em auto;
}

こんな感じです。

通常ページ用CSSコード

/**WPAPカスタマイズ**/
/**リンクボタン調整**/
#content .wpap-tpl-with-detail .wpap-link a {
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.33);
    font-weight: bold;
    font-size: 1.2em;
}
/**ショップリンク色変更**/
#content a.wpap-link-amazon{
background: #f6a306;
}
#content a.wpap-link-rakuten{
    background: #cf4944;
}
#content a.wpap-link-yahoo{
    background: #e86e6e;
}
#content .wpap-tpl-with-detail .wpap-title {
    font-size: .9em;
}
#content .wpap-tpl-with-detail .wpap-price {
    color: #f7a9a9;
    font-size: .9em;
}
@media screen and (max-width:522px){
#content .wpap-tpl-with-detail .wpap-link a{
			font-size: .7em;
	}
#content .wpap-tpl-with-detail .wpap-link a span {
    margin: 0 0.5em;
}
}
/**スマホ縦一列**/
@media screen and (max-width:522px){
#content .wpap-tpl-with-detail .wpap-title {
    font-size: 14px;
    margin: 10px 0 5px;
    display: flex;
    display: block;
}
#content .wpap-tpl-with-detail .wpap-link a {
    margin: 0 auto;
    width: 90%;
    display: block;
    text-align: center;
    margin: 0.5em 1em;
}
#content .wpap-tpl-with-detail .wpap-link a span {
    margin: 0 0.5em;
}
}
@media screen and (min-width:523px){
	#content .wpap-tpl-with-detail .wpap-link a {
    width: 50%;
}
}

商品リンクについて考えてみる

2021年に追記しています。色々試しましたが、Rinkerは便利。とはいえ、慣れるとCocoon独自テーマの商品リンクが一番「対応しやすい」と思いました。

RinkerはCopia対応でより便利に

Rinkerは、有料プラグインのCopiaと連携することで、セール対応などのマイクロコピーを自動で出せるようになった（なったんだよな？）ということで、「リンクを貼るだけ」であとは勝手に売り上げも伸びる点でかなり便利です。元々便利だったのが、さらに便利になった。これはもう最強です。

羨ましいけど、作業がCocoonに慣れすぎた

では、当サイトでRinkerに統一したかと言えばそうでもない。というのも、自分でサイトを作っていると、何やかんや「Amazonの商品ページやレビュー」を確認するので、プラグインで完結した形で商品リンクを作ることもないと気づいたからです。

ぶちくま

Cocoon商品リンクは、Amazonのページを開いている状況なら、ブログに貼り付けるコード生成はブックマークレットを使えばすぐに作業は終わるしね。

これからブログを始める、という方は、Rinker×Copiaで自動でキャンペーン情報が表示されるようになった方が、「自分が情報をキャッチしていないがための取りこぼし」を避ける意味で大きなリスクヘッジになりうると思います。

一方で、「キャンペーン情報は自分で調整する」などの信念があったり、あるいは「商品を紹介するときはECサイトでの情報収集も兼ねている」という場合には、RinkerじゃなくてCocoon利用した方がブログテーマとしては安定するな、と思った次第です。

WordPress無料テーマで最強のCocoonを利用することになりました。
Cocoonは設定が簡単な上に、製作者のわいひらさんが親切なこともあって、
Cocoon利用者のフォーラムは毎日大にぎわいです。いいね。

https://wp-cocoon.com/community/

こんな感じで、みんなで支えあって、疑問があったら誰かが解消し、
そして自分もブログに慣れてきたら、誰かの疑問に答えてみる。
そうしていくことで、Cocoonはより洗練されていきます。
初心者には「カスタマイズ」と聞くとハードルが高く感じられるかもしれませんが、
「わからないことを自分で解決していく」ことは楽しいし、ブログ運営上大切な心構えでもあります。

アクセス分析をするためにタグマネージャーを導入しよう

さて、そんなわたくし、ぶちくまも、今回チャレンジしてみたことがあります。
それは「タグマネージャーの導入」です。
導入は簡単です。
ただ、タグマネージャーを有効活用していくことはとても難しいです！

なので、今回はタグマネージャー導入までの流れをお伝えしつつ、
アナリティクスと連携させて何ができるか、少しずつ解説していこうと思います。

Cocoonでタグマネージャーとアナリティクスの設定はすごく簡単

細かい説明はあとにして、とりあえずやるべきことだけみていきましょう。
大枠の流れとしては、

• Google タグマネージャーを設定する
• タグマネージャーの中に、アナリティクスの設定をいれる
• CocoonにタグマネージャーIDを入力する

なんと、これだけ！

まずはタグマネージャーに登録しよう

アカウントの設定を済ませておく

Google Marketing Platform - Unified Advertising and Analytics

Introducing Google Marketing Platform, a unified marketing and analytics platform for smarter marketing measurement and ...

www.google.com

こちらのURLにて、まずはタグマネージャーの新規登録をしていきます！
ブログをやる以上、Googleさんとは切っては切れない関係になります。

ブログ用のアカウントを用意しておくことをお勧めします！

さて、アカウントを登録したら、タグマネージャーを設定していきましょう。

タグマネージャー設定方法

左上部「アカウントを作成」リンクをクリック
アカウント名を設定する（ブログの名前でOK）
「コンテナ名」を入力（ブログURLやドメイン名でOK）
「コンテナの使用場所」は『ウェブ』で
※AMP用も必要になります。つまり、コンテナは２つつくることになります。
利用規約に同意する
コードが出てくるので、「GTM-〇〇〇〇〇〇〇」というコードをコピーしておく

ちなみに、画像付きで詳しい解説はCocoonのHPを確認することをお勧めします。
https://wp-cocoon.com/google-tag-manager-id/

こちらがわいひらさんの説明です。

Cocoonの設定

WordPressのダッシュボード（管理画面）から、
「Cocoon設定」という項目を選択する。

アクセス解析にある
「Google Tag Manager ID」の項目に、先ほどコピーしたものをペーストする。

Cocoon上の設定は以上です。簡単でしょ？

Google アナリティクスの設定

次は、アナリティクスの設定になります。

Googleアナリティクス設定方法

タグマネージャーと同様に、アカウントを設定します。
こちらは先ほど使用したGoogleのアカウントを使用するととてもスムーズです。

アカウント名は自分の愛称「ぶちくま」、
プロパティ名は自分のサイト名「ぶちくま創作ベース」なんかにしておくとわかりやすいですよ。

まずはアナリティクスのホーム画面を表示する

ホーム画面にいると仮定して、
左側のタブの、一番下に歯車マーク「設定」があるので、「設定」をクリックします。

縦長にメニューが表示されています。
「アカウント」「プロパティ」「ビュー」の列が出てくると思うので、
真ん中の列「プロパティ」に注目。
「プロパティ」列の３番目に、「トラッキング情報」があるのでそこをクリックし、
「トラッキングコード」をさらに選択。
すると、「UA-〇〇〇〇〇〇〇〇〇〇-●」みたいなコードがあるので、そちらをコピー。
これが、アナリティクスのトラッキングIDになります。

これはよく使うので、ここまでの道のりを覚えておいてください。

さて、コピーしたものをどこに貼るか

ここが間違えやすいポイントです。

間違えて、「Cocoon設定」には貼らないように！

アナリティクスはタグマネージャーの中に入れる

まずはやり方だけ説明します。

1. タグマネージャーの設定画面に戻る
2. 先ほど設定したコンテナ名でワークスペースにいく
3. 「新しいタグを追加」をクリック
   タグの設定画面に飛びます。
4. タグアイコンのあるあたりをクリック
5. タグのタイプを選択できるので「ユニバーサルアナリティクス」を選択
   トラッキングタイプは「ページビュー」のままでOK
   Googleアナリティクス設定に関しては今回はスルーでいい。
6. その下のチェックボックス□、、、これをチェック☑︎です！
   そして現れたトラッキングID入力欄、はい、ここです！
   こちらに、先ほどのアナリティクスのトラッキングIDをペーストです。
7. あとは、下のトリガー設定は「All Pages」を選択。
   最後に保存を忘れずに。
   タグ名は「アナリティクス」でいいです。わかればなんでもいい。

タグマネージャーの場合、今回行った編集を「公開」させる作業が必要です。
右上に「公開」ボタンがあるのでこちらをクリック。
すると、アプリのように、変更したらバージョンとして名前をつけるのですが、
これもとりあえず「アナリティクスの設定をしたよ」とでも名付けてやってください。
これを公開して、終了です。

お疲れ様でした！

ぶちくま

ここまでできれば、もうなんでもできるよ！

さっきスルーしたアナリティクス設定が気になる

スルーしてしまったアナリティクス設定がどうしても気になる場合はタグマネージャヘルプを参照してほしい。
https://support.google.com/tagmanager/answer/6107124?hl=ja

ざっくり言うと、自分のアナリティクスIDを変数として設定しておくと、
今後入力するとき楽だよって機能です。
オーバーライドは「変数」にかかわらず、入力したIDで上書きするよってことで。
こちらが必ず適応されると。

タグマネージャーが使えると解析が捗る

なぜタグの中に入れるか、というとこれがとても便利だからです。
そろそろ細かい説明をしようかと思います。

そもそもGoogle タグマネージャーが何者なのか

Googleタグマネージャーは一言で言うと、
「すべてのタグを一元管理できる」最強ツールです。
それ以上のことはぶちくまも知りません。
ただ、何か自分のサイトのことで「計測」したいことがあるとき、
自分のサイトに「しるし」をつける必要があったりします。
例えば、先ほどからぼくたちが一生懸命頑張っていたのは、何をしていたかといえば、
「アナリティクス」を起動させるための「しるし」をタグマネージャーの中にいれていたのです。
Google アナリティクスが自分たちのサイトを見つけて情報を集めるためにね。

タグマネージャーを使わなくてもページ分析はアナリティクスでできる

もし、情報分析をアナリティクスだけでまかなうのであれば、
タグマネージャを導入する必要はなく、
アナリティクスのアカウントを作って、
IDを先ほどのCocoon設定の、アナリティクスID入力欄にいれるだけでいいのです。
アナリティクス専用のタグコードはすでにCocoonに仕込まれている（はず）ので。

なぜ、一手間加えてまで、タグマネージャのアカウントを作って、
わざわざそのなかにアナリティクスのタグをつくってまで、利用しなければいけないのか。

それは、アナリティクスではブログ分析の限界があるから（どやっ！）

次週に続きます！

さて、次週のぶちくま創作ベースの内容は、

• アナリティクスのドル表記を円にする
• 外部リンクの計測をはじめる
• 読了率の読み取りをはじめる

の３本立てです。

どうぞ、お楽しみに！

サイドバーって、まったく読まれてないんですよ。知ってました？にも関わらず、人気記事一覧でアイキャッチの読み込みでローディングに負担をかけたり、意味もなくプロフィール貼ったりしてませんか？

ぶちくま

言っとくけど、それ誰にも読まれてないからな！

読まれていないというのは、このサイトのことですよ。では、今回の改善をご説明します。

Cocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】

WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。

buchikuma.xyz

2024.03.22

今回のCocoon大改造ポイント

1. サイドバーウィジェットのコンテンツを見直す
2. モバイルスライドインボタンの「サイドバー」を目立たせる
3. サイドバーに何が書いてあるか読者に伝える
4. カスタマイズを楽しむ

の４本立てになっています。

サイドバーウィジェットはすっきり見やすくする

まずはサイドバーウィジェットに関すること。

サイドバーは読まれないしクリックされない

知ってました？

サイドバーのクリック率って異様に低いってこと。先の記事で、タグマネージャー駆使して読了率とか調べようぜっていう記事があるのですが。

ブログカスタマイズで入れたパーツのクリック率を測定した結果

ブログカスタマイズで追加したパーツの利用率を定量的に把握すべく、クリックトラッキングを導入しました。その結果を共有します。

www.naenote.net

こちらの記事ですね。

NAEさんのサイトには、クリック率を調べる関係でその他の情報もいろいろと参考になることがありました。ありがとう！

で、ですね。この記事をみて、驚いたことがですね。

・サイドバーは空気

、、、サイドバーは空気？

１行ですが、あえて引用してみました。サイドバー、空気らしいですよ。

ぶちくまも自分のサイトで調べました

私もタグマネージャーを駆使して、どこがクリックされたのか調べたのですが、

ぶちくま

いや、まじでサイドバー死んどる。

PC閲覧であれば、多分、目には入ってるとは思うんですよね。でも、ぶちくまのサイトも、もう８割がスマホ、しかもその半分以上がAMPという。

ぶちくま

やばい、時代、変わってる！

そういうわけで、うんうんと頭を抱えていた今日この頃なのです。

モバイルでサイドバーが読まれない理由

まず、サイドバーが読まれない理由はふたつあります。

1. サイドバーに有益な情報がないことを知っているネット巧者
2. サイドバーの存在を知らないネット亡者

この２択です。説明していきます。
その前に、少しだけCocoonのサイドバーについても解説。

WPテーマCocoonの優秀さにあぐらかいてた

実は、当方が利用させてもらっている、WPテーマ「Cocoon」なんですけどね、機能が豊富すぎて使いこなせない。

ぶちくま

そのくせCSSのカスタマイズには熱が入って逆に記事作成に力が入らないブロガーゴロシテーマ

ぶちくま流の利用術はまたいずれか書くことにして、レスポンシブ完全対応でモバイルでもPC閲覧ばりにスマートでコンパクトでシンプルな記事閲覧が可能となっているのですよ。

さて、みなさんは、

• スライドインメニュー派ですか？
• トップボタンを配置してグローバルナビに誘導する派ですか？

ぶちくまは、スライドインメニューボタンが欲しくて、XeoryBaseからSimplicityに移住、そのままCocoonに永住した口なので、当然、スライドインメニューボタンをこよなく愛しておるわけですよ。

スライドインボタンとは

ぶちくまのサイトをみてもらえれば一目瞭然ですが、この、一番下に貼り付けられた、５つのボタンのことですね。

ちゃんと、サイドバーって書いてあるんですけどね、これがまぁ機能していないわけですよ。

「Cocoon設定」の「モバイル」タブから設定できます。

サイドバーとは

きっと、この記事を読んでる方は、ある程度Cocoonの設定が終わって、
今はカスタマイズに精をだされてこの辺鄙なサイトまで足を運んでくださっているのだけど思うけど。

サイドバーはウィジェットで簡単に組み立てられるので、すっごく便利ですよね！

Cocoonは、スマホやPCごとに表示するかどうか選べるという、Simplicity時代からの便利な機能は踏襲している。なんとなく、人気記事一覧とかを並べてみたりしていますよね。

便利な機能だから、とりあえずありったけのウィジェットを詰め込んでみて、ごちゃごちゃ整理のつかない、居心地の悪いサイトになっていたり。

ぶちくま

えぇ、わたしのサイトです。

サイドバーはなぜ読まれないのか考察する

サイドバーの生存意義について考察します。

サイドバーに有益な情報が置かれていたことなどいまだかつてない

はい、私もブログ回遊を趣味というか生業にしている人種でありますが、正直、サイドバーをみて幸せ度数が上がったことなんて、ただの一度もない。

ビッグバナーが貼られているか、せいぜいがプロフィールくらいなもんで、よほど気に入ったサイトじゃないとクリックしないどころか、目も通さない。

そう、ネット依存度が高い人、探索レベルの高い人は、サイドバーなんか見ない。サイドバーに、有益な情報なんて、ない！偏見ですけどね。

「サイドバー」という単語で何があるか予想できる人なんていない

まぁ、そんな雑多としたサイドバーですから、Cocoonの優秀な機能をもってしても、サイドバーは読まれない。

むしろ、PCと同じ表示までできるが故に、人気記事やカテゴリ一覧なんかあっても絶対にクリックしない。まずは、本文あってのサイドバーなのだ。

とくにネット慣れしていない人には不親切なワード

「サイドバー」って、正直、なんなんだよ、という感じはある。

もちろん、我々ブロガーはコンテンツ作る側だから、サイト内を行き来しやすいように、人気記事のリンクを用意したり、場合によってはアフィリエイト貼ったりして、なんとか工夫を凝らしている。

でも、読者はそんなことは知ったこっちゃない！

なんだかわからない、フッターに固定されたサイドバーボタンなんかクリックしないし、
ましてネット慣れしていない人にとって

しろくまさん

「何これうまいの」

状態なんですよ。

ぶちくま

なので何が書かれているかわかるようなカスタマイズしてみた！

そう、それなら、何が書かれているかわかるようなカスタマイズをすればいいのだ！

というわけで、一応CSSコード貼っておきます。

モバイルスライドインの大改造方法

ここからカスタマイズ記事になります。
https://bibabosi-rizumu.com/cocoon-slidein-menu-button/

Cocoon界のカスタマイズといえばカウタックさんですね。カスタマイズする際には一度目を通しておくと、大体すでに着手されてます。

モバイルスライドインメニューボタンのCSSコード

/**** モバイルスライドインメニューのアニメーション編集 ****/
/* メニューアイコン */

.sidebar-menu-icon::before {
	content: 'f06b';/* アイコンはここに代入 */
	position: absolute;
    left: 0;
    right: 0;
    	animation: rotation 10s ease-in-out infinite normal;
	-webkit-animation: rotation 10s ease-in-out infinite normal;
}
/* メニュー文字 */
.sidebar-menu-icon::after {
	content: 'おすすめ';/* 文字はここに代入 */
	font-size: 12px;
	position: absolute;
	top: 2.2em; /* 高さの微調整 */
	left: 0;
	right: 0;
	animation: rotation 10s ease-in-out infinite normal;
	-webkit-animation: rotation 10s ease-in-out infinite normal;
}
/* 要素を重ねて入れ替える */
/* メニューアイコン */
.sidebar-menu-button:before {
    font-family: FontAwesome;
    content: "f1fd";/* 変化後のアイコンはここに代入 */
    position: absolute;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 1em;
    top: 0.15em;
     opacity:0;
     animation: rotation2 10s ease-in-out infinite normal;
	-webkit-animation: rotation2 10s ease-in-out infinite normal;
}
/* メニュー文字 */
.sidebar-menu-button:after {
    content: "まとめ";/* 変化後の文字はここに代入 */
    position: absolute;
    display: inline-block;
    width: 100%;
    text-align: center;
     font-size: 12px;
     top: 2.1em;
     opacity:0;
     animation: rotation2 10s ease-in-out infinite normal;
	-webkit-animation: rotation2 10s ease-in-out infinite normal;
}
/* キーフレームでアイコンを変化 */

@keyframes rotation {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: rotate(0deg);
  }
  30% {
    opacity: 0;
transform: rotate(360deg);
color:blue;
  } 
 75% {
    opacity: 0;
    transform: rotate(360deg);
  }
    80% {
    opacity: 1;
transform: rotate(0deg);
color:red;
  }
   100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@-webkit-keyframes rotation {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: rotate(0deg);
  }
  30% {
    opacity: 0;
transform: rotate(360deg);
color:blue;
  } 
 75% {
    opacity: 0;
    transform: rotate(360deg);
  }
    80% {
    opacity: 1;
transform: rotate(0deg);
color:red;
  }
   100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes rotation2 {
 0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  25% {
    opacity: 0;
    transform: rotate(0deg);
  }
  30% {
    opacity: 1;
transform: rotate(360deg);
color:blue;
  } 
 75% {
    opacity: 1;
    transform: rotate(360deg);
  }
    80% {
    opacity: 0;
transform: rotate(0deg);
color:red;
  }
   100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}

@-webkit-keyframes rotation2 {
 0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  25% {
    opacity: 0;
    transform: rotate(0deg);
  }
  30% {
    opacity: 1;
transform: rotate(360deg);
color:blue;
  } 
 75% {
    opacity: 1;
    transform: rotate(360deg);
  }
    80% {
    opacity: 0;
transform: rotate(0deg);
color:red;
  }
   100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}

結構悩んだContent変化

やってることはシンプルです。Animationを使って、時間指定して適当に変化させてるだけです。変化が自然になるように、微妙に色変えたり、回転させたりしてます。

まぁ、その辺りは趣味もある。

色は適当に書いただけだから、もし本当に使う物好きな人がいれば、自分のサイトのメインカラーに合わせたりするといい。

んで、意外と大変だったのが、animationで文字を変える、ということ。

CSSはスタイル変更のためのものだからコンテンツは変えられない

いや、そんなこと知らずにコード書いたから、書き終えてから動作しなくて絶望したね。

ぶちくま的には、Animationの時間経過に合わせて、「A→B→C→A」みたいなことを、

• 「25% content:”A”」
• 「50% content:”B”」
• 「75% content:”C”」

みたいな感じでやりたかったんですよ。

Chromeだと動くからタチが悪い

しかも、動作確認しているMacのChromeだとちゃんと動作するから、うかつにもちゃんと２〜３時間かけてコード書き上げてから、モバイル端末で動かないという事態に気がつく、というね。

ちなみに、Safariでも動かなかったから、自分の読者の９割以上が動作をみることができない無駄なコードになってしまったよね。

悔しいからユーザビリティとかおかまいなしに完成させた

はい。これはもうただの意地です。そういうわけで、コードとしてはかなり強引です。

たぶん、jQueryとかで、classを代入したりできればもっとシンプルなコードになっていたし、もっといろいろな動きができたことでしょう。

ぶちくま

ただ、もうCSS以外はいじらないって心に決めてる。

Javaまで手を出したら、ただのセンスのないアマチュアプログラマになっちまう。時間ばっかりとられるからCSS以外は触らないって、Simplicityの時に決めた。

仕方がないから親クラスに擬似要素くっつけてアイコン化させた

幸いにして、Cocoonではスライドインボタンひとつひとつにクラスをつけてくれていたので、
子クラスについている擬似要素の裏（普段目にするアイコン）に、
その親クラスであるdiv classに擬似要素をつけて隠しておくことで、
交互に出現させて、さも文字が変わっているようにしてみました。
んで、みやすいかどうかは別として、ちょっと目立たせるために回転と色をつけてみました。

本当はスクロール量でアイコン回転させたかった

見た目には楽しいスライドインボタンができて満足

こうして記事を書いていて、完成してよかったと思うのだが、正直、本来の目的が果たせたカスタマイズになっているかは、まだなんとも言えない。

つい、完成した勢いと安い発泡酒のアルコールのせいで、こんな駄文をひたすら打鍵している。駄文であればあるほど、筆が進むのは不思議な話である。

おすすめカスタマイズポイント

果たしてどこかでコピペされて似たようなカスタマイズがされるのかは甚だ疑問ではあるけど、もしも導入したらここのリンク貼ってください。

真似してくれたサイトがあったら嬉しいなぁ。

カスタマイズできるポイント解説

カスタマイズと言えるほどのものではないのですが、念のために自分の試行錯誤の過程のログをとっておきます。

コンテンツをわかりやすく伝えるワードを

おすすめはcontentの” 文字 ”部分を変更して、サイドバーの中に何があるか、情報を端的に示せるといいと思います。

「記事一覧」とか、プロフィールがサイドバーにあれば「プロフ」とか、フォローボタンを置いてあれば「フォロー」もありですね。

ちなみに、６文字以上の場合は、文字サイズの調整が必要ですね。小さい画面だと全部見れなくなります。

アイコンはお好きなものを

アイコンに関しては、fontawesomeから好きなものをお探しください。当サイトのアイコンセンスについての言及はお控えください。

カラー変更はシンプルでいい

カラーを変更する場合は、「red」とか「blue」とかで十分かと思います。

アニメーションを使うと、ゆっくりとグラデーションで変化していくので、単純な原色でもいろいろな色合いが楽しめます。

回転は２パターン用意

今回はサイドバー用のコードだけを貼っておきますが、@keyframesの中にある、transformのrotate（値）の、値の部分が（角度）になります。

360度以上も回転できるので、720にすると二回転します。

当サイトの場合だと、メニューアイコン部分が二回転バージョンになります。ぐりんっ！って感じで、一瞬で変化する感じですね。

ぶちくま

現在はメニューアイコンのアニメーションはやめました。楽しかったんですけど、エラー対応が大変でですね。

〇〇％とアニメーション時間を調整して頻度を決める

ちなみに当サイトの場合はメニューアイコン（左）が15秒で全体の2％の間に変化。右のスライドバーアイコン（右）は10秒で、全体の5％の時間で変化するように調整されています。

２つのアイコンの変化を一緒にするのであれば、必要なコードの量が減っていいですね。

個人的には、頻度は少ない方が、「あれ、今このアイコン変わらなかった？」という感じがして興味を持ってもらえるかと思います。

きつね

頻回すぎると目障りです。

最後に、個人的に、こんなサイドバーだったらみてもいい、をランキング形式にしてお届けしてさよならです。

こんなサイドバーが好きだランキング

こんなサイドバーにしたい、というあたりをランキングにしてみました。サイドバーの編集時に参考にしてみてください。

５位　どこを読んでいるかわかる道しるべサイドバー

いわゆる、目次をサイドバーに表示しておいて、自分がだいたいどのあたりを読んでいるかわかる、っていうやつですね。

SANGOなんかでは実装されているようだ。あれはサイドバーとしての役割を果たしているいい例だ。

４位　いっそ読まれないことをいいことに広告めっちゃ貼る

読まれないならここぞとばかりに広告だらけにするのも一つの手かなと思っている。サイドバー埋め尽くすビッグバナーを常設したい。

表示するだけで収益になる広告もあるので、そういったものを消化してしまうという手もなくはない。

３位　同一カテゴリ内アイキャッチ記事を紙芝居みたいに

これは取り入れたいなぁと思いながらなかなか時間がなくてできないのだけど、スライドショーみたいに、同一カテゴリ内の記事のアイキャッチを、3秒ごとに切り替えるやつが欲しいなぁ、と思っている。

なるべくサイドバーは一画面に収まるようにしたいし、その場合だとスペースが限られるので、他記事の誘導はこんな感じで済ませたい。

ただ、PCのような常に表示してあるサイドバーならいいけど、モバイルビューワーだと邪魔になるだけだと思って、まぁ、結局手は出さないでいるわけだ。

あと、カテゴリの役割が最適化されていないといけないわけだ。

２位　記事内優秀リンクまとめ

どうせ目次がみられるのなら、記事内で「ちょっと気になるから後で読もうかな」というリンクをサイドバーに貼っておけると、読者としてはすごく助かる。

もちろん、ネット世界の住人たちは、あとで読むときは、「Pocket」や「Feedly」を使ったり、別タブを開いたりして対処してるとは思いますけどね。

１位　物販リンクまとめ

これもまたリンクのまとめ。どんだけリンクまとめたがってるのか。

記事の最後に、「紹介した商品」をまとめて表示すると「記事の内容を吟味した上で、どれを選ぶか」を離脱させずにサイト内で完結することができます。

ぶちくま

ブログ記事は読み終わったら「終わり」だと認識して、すぐに離脱する人がほとんど。一度紹介した物販リンクでも、記事途中までわざわざ戻ってクリック・タップしてくれるひとは少ないですよね。

サイドバーで大事なことは「本記事をいかに読みやすくする」か

• 副業はブログなんかよりも裁縫や手芸の方がよっぽどおすすめ。
• 保育園入園で必ず発生するイベント。
• でも、みんなができるスキルじゃない。
• つまり、副業チャンス。

ブログ50記事が達成できずに挫折されたみなさん、こんばんわ。もし達成されていて順調に運営されているようであれば、さようなら。

「書くことが苦手」なあなたは苦手分野で頑張るよりも、得意分野で頑張った方が、ずっと素敵な「あなた」になれる。

というわけで、オススメの副業、一緒に考えましょう。

Amazonで「確実に稼げる minne ハンドメイド 副業入門」に関する詳細を見る

Amazon

楽天

Yahoo!ショッピング

裁縫・手芸で副業を始める際に知っておきたいこと

まずは基本的なことから解説していきます。焦らずじっくりと「知ること」から始めていきましょう。

副業で一番勧めたいのは「裁縫」「手芸」である理由

まずは結論から。副業の勧めは「裁縫」「手芸」です。

これは圧倒的に需要が多い上に、生活スタイルの多様化と文化的背景の変化により、以前ほど「手芸ができない」人が増えているからです。

ぶちくま

保育園とか、いまだに「お母さんは手芸ができる」前提で事細かにサイズや縫い方まで指定してくるけど、まず、お母さんが保育園担当じゃなくてお父さんは家庭科で手芸やってないパターンすらあるよね。

よめくま

女性だとしても、ミシンが使えるかというと「家庭科の授業」でしかやったことがなくて、覚えてないしいちから始めるには「買えるのに？」っていう気持ちの方が強いよね。

副業の基本的な考え方は「人が嫌がること、できなことをやる」

これはブログにも通ずるところです。

「人が嫌がること、できないこと」はお金になります。

ブログも、50記事書ける人が少ないから、金になるんです。情報だって、調べるのが面倒だから、代わりに商品の情報を調べて、答えを提示することでお金になるんです。note買って、情報収拾まで人任せにするブロガーに未来なんてないんですよ。

もしも、あなたの身の回りに「これ、面倒だな」「これできないんだけどどうしたらいい」というワードが転がっていたら、あなたの副業チャンス到来です。

「裁縫」を強いる保育園のおかげで副業チャンスが来た

例えばぶちくまの最近の副業チャンス。

入園や進級に際して２、３月に開かれた説明会で「手作り品」の準備を求められ「大変だった」という声をよく聞く。子供が使うシーツやエプロン、スモック（遊び着）などを「手作りで」と園から求められることが多いからだ。

https://www.sankei.com/article/20150412-P2H5UI24PRMNFFDCTVPOSQ6O6I/

「入園グッズは手作りで」幼稚園・保育園から求められ母親は…｜産経新聞

こんな感じで、保育園に入ると「それまでやってこなかった裁縫を全家庭に強制させられる」というイベントが発生します。これ、強制イベントなんで、需要は毎年、しかも全国的に発生します。

もし、あなたが裁縫ができるのであれば、いくらでも稼げます。プロの手芸店に依頼すると、結構高いんです。

でも、シーツ塗ったり、名札つけたりは、ミシンがあれば意外とできます。意外とできるけど、「できない」「わからない」人が、すごく多い。

ぶちくま

例えば、あなたがミシンを使えるだけで、１件何千円の商売ができるんです。

手芸・裁縫の副業の始め方

とはいえ、手芸や裁縫で副業を始めてみようと思っても「何から始めていいものか」と悩んでしまいますね。私も紹介するからには自分なりに調べてみました。

今は商売の始め方も「メルカリ」「ココナラ」ですごく簡単

スマホで完結してできる副業が、とにかく熱い。メルカリ、ココナラを使わない手はないんですよ。競争は激しいけど、注目が集まれば集まるほど、お客さんは増える。

ココナラで依頼するハードルが下がれば、裁縫で名札付けだってお金になりますよ。ただ、少し工夫は必要になりますけどね。

裁縫技術も人に誇れるくらいまで高めれば、「手芸」として商品かもできるし、裁縫は本当にオススメ。何より楽しい。

メルカリで始めるならオリジナルグッズ

メルカリを一度でも利用したことがある場合は、想像しやすいと思います。多くの方は「リサイクル」のような感じで自分の使ったもの・中古品を出品されると思いますが、その要領で「自分の作ったもの」を売ればOK。

メルカリの場合、それなりに利用規約を読み込む必要があるのですが、ハンドメイドでキャラクターや有名人の画像などの素材を使っていると取り下げられる可能性があります（著作権・パブリシティ権の侵害）

また、手芸・裁縫のオーダーメイドはトラブルには発展しやすいので、最初は「自分で作ったものを公開する」ことから始めていきましょう。つまり、先に商品の9割を完成させておき見本のようにして、この見本を基礎に「名札縫い付け位置」などを依頼者の相談を受けながらつけていくイメージになります。

この辺りは、実際に自分でメルカリを覗いてみるといいと思います。検索欄で自分の作れそうなもの（鞄、写真入れなど）のオーダーメイド品、オリジナル作品で検索してみるといくらくらいで売れるか把握できます。

ココナラで始めるなら

個人的には、メルカリである程度商品が売れるようになったらココナラを利用して顧客のオーダーを受けながら必要な分だけを受注しながら、丁寧に対応して単価を上げていくことをお勧めします。

ぶちくま

メルカリは割と売れるんですが、競争率が高くて単価が下がりやすいのと、顧客対応の数ばかりが増えて対応面での時間の浪費が増えるんですよね。

ココナラの場合は、依頼者とのコミュニケーションスキルも必要にはなりますが、依頼に対しての単価交渉もしやすく、自分の空いた時間に作業に打ち込めるようになります。

しろくまさん

メルカリで同じことをやろうとしても、「もっと安くして欲しい！」の対応で泣く泣く商品価格を下げて出品するようになったのが、依頼を受けて仕事量を調整して、単価も納得のいく形で依頼者の要望も拾い上げられるようになるので、「仕事しているな」と実感できますよ！

【PR】

minneとCreemaを使い倒すのが手芸販売の基本

手芸の場合は「minne」「Creema」といった専門サイトもあるほど、今は副業が簡単にできます。固定ファンがつけば、サイトを介す必要がなくなるので、仲介手数料分も自分の収益とすることができます。こうなると、もう強い。

ぶちくま

「手に職」が本当に大事な意味を持つ時代になりました。

メルカリで簡単にものを売れるし、何か専門的な技術があれば「ココナラ」で売れる。手芸品まで技術を高めれば、minneとCreemaで売れる。場合によっては、ファンがつく。ファンがつけば、ブランディング展開も可能。

minneとCreemaってなんだ？

簡単にいえば、「ハンドメイド作品を専門に売ることができるサイト」です。ハンドメイド作品に興味がある方は必ず目を通すサイトなので、需要と供給がマッチしやすいです。

しろくまさん

どちらがいいかはサイトの雰囲気などを見ていただいて、気に入った方がいいと思います。

ぶちくま

まずは、（著作権には気をつけながら）マネになってもいいから似たようなことから始めてみると、何をしたらいいのかが見えてきますよ！

minneとcreemaの比較表

どちらも大体のところでは一緒です。後発のminneの方が広告をうまく組み合わせて知名度は高いですね。

コミュニティが盛り上がっているところ（作家数も利用者数も多い）方が、継続して続けた時にファンがつきやすく、将来の収入が安定してくることが見込めます。

基本情報

販売できるもの

各種機能

【PR】

まずは「自分の得意」と「収益」をつなげることから始めよう！

このページのまとめとしては、まずは「あなたの得意は武器になるし、収益にもつながる」ということを知ってもらうことから。

ぶちくま

私の場合は、つまらない文章しか書けないけど、書くことは諦めなかったからなんとか細々と副業で暮らすことができています。

大事なことは、「やってみること」と「続けること」、たったこれだけ。たったこれだけですが、やってみる前だとこのハードルが非常に高い。だから、みんな「始める」ことができないで「始められない理由」を探すんですよね。

ぶちくま

少しでも興味があってこのサイトを見にきたのはきっといいきっかけになると思います。できそうなことを探すだけでも立派な最初の一歩です！

まずは各種サイトを眺めながら、自分の得意なこと・できることを発見してみてください。

【PR】

ココナラで「できること」を探す！

【PR】

【minne】の作品を見てみる！

裁縫を勧める理由をまとめる

裁縫や手芸は、スキルとしては高いですが、特別な資格は不要なので「勉強する」最初の行程をすっ飛ばして「とにかくやってみる、スキルは経験で積み上げる」という分かりやすい行程からスタートすることができます。

ぶちくま

つまり、仮に今の時点では裁縫・手芸に興味があるだけ、という方にもチャンスはあるということ。興味・関心こそが大事なエッセンスだったりします。

裁縫が安定して顧客獲得できる理由

裁縫は本当にいいですよ。

上で書いたような、WordPressの技術やら、プログラミングで付加価値つけるとか、そんなことは必要ない上に、ニーズは幅広いので「あなた」が求められる可能性は高い。

始められるだけで、あなたは他の副業希望者よりも一歩前に出られる。オススメですよ。

洋服も手芸もカバンも小物もデザインやサイズの好みは千差万別だから面白い

裁縫をお勧めするのは、デザインの好みに違いがあるから。オリジナリティが売りにしやすいんですよね。

さらに、サイズの問題もあるから「本当はこのデザインの服が欲しいけどサイズがない」とか、細かいオーダーに対しても対応できる。

顧客のニーズが広ければ広いほど、あなたの裁縫技術が売りにできるんです。

裁縫はブログよりもスタートするハードルが高い分競合は減る

裁縫や手芸のハードルを高めているのは、技術が必要な上に「ミシン買う」とか、最初の一歩のハードルが高い。

Amazonで「アックスヤマザキ」に関する詳細を見る

Amazon

楽天

Yahoo!ショッピング

よめくま

うちはわざわざ買いましたよ。そんなに高くないやつでも十分だよ。

でも、今までミシンに見向きもしなかった人間からすると、急に数万円の出費があると、「嫌だなぁ」って思うところ。使うのだって、今だけなんじゃないの？って思うし。そもそも最初は使い方もわからないし。

原価に対する利益率はすこぶる高い

しかし、一度始めてしまえば、驚くほど原価は安い。（もちろん、物による）

洋服が如何に暴利で売っているかは、歳末セールをみるたびにみなさんが感じていることだと思います。「1万円で売っていたシャツ」だって、シーズン過ぎれば半額以下。

ブランドを売りにしている洋服の末路は半端ないですよ。ブランドがあったって、売れ残りは売れ残りですからね。

時間価値をどれくらい高められるか

原価が安い分、あとは収入を上げるのは「自分のスキルとセンス」になります。

スキルに関してはある程度のところまでは数をこなすことであげることはできますが、世間の需要とスリわせることができるか、というのはセンスが必要。

ぶちくま

逆にいえば、のんびり構えてないでアクティブに「相手が欲しいものを提案できる力」があると収益はどんどん伸ばすことができる、ともいえますね。

競合が高ければ高いほど有利になる裁縫技術

洋服のマーケティングと個人洋裁はまったく違う売り方ができます。

アパレルマーケティングはブランディングと大きなパイ取り

いわゆる洋服屋さんは、マスマーケティングの世界です。

ある程度ターゲット層を決めますが、買い手となる相手のわからない状態でとりあえず大量のデザインをつくってみて、気に入ったものを買ってもらう、ので無駄撃ちも多い。

無駄撃ちに関しては、セールでターゲット層をかえて売り出す。高く売れれば儲けが大きい。商品自体は買えずに、ブランディングを変えるわけです。

ただ、売れ残りのリスクに合わせて、安く売ることで高い商品が売れないという、ジレンマもある。
大量に作ることで安くすることはできるが、服は「みんなと同じ」じゃ売れなくなる。

みんなと違う、をそれぞれに作ると今度はターゲット範囲が狭くなるし、コストが高くなる。ニーズを「ブランド化」することで「みんなが欲しいもの」にするには、今の「多様なニーズ」には対応できない。

このような、アパレルマーケットの現状があるのではないか、と推察する。詳しいことは詳しい人に聞いてみてほしい。

ファッション・アパレル業界におけるWEBマーケティングリテラシーの欠乏と過信から脱出する方法

個人手芸はブランディングできるしマーケットも取れる

つまり、大きな会社だからこそできないことを、我々は狙っていけばいいのです。

自分で広告を打ち出して、自分で捌ける分の顧客を獲得して、適正な報酬を得ることができれば、十分に稼ぐことはできます。

何より、「自分の好きなこと」「自分で表現したもの」が売れた時の、達成感ありますし、承認欲求も、「いいね」の１００倍くらいの価値がありますよ。

売れる商品ができるとブログも書けるようになる

せっかくブログを始めたのだから、そのブログも最終的には活用しましょう。

50記事書けなかったあなたも、裁縫を始めるだけで、50記事なんて速攻で書けるようになります。少なくとも、ネタがない、ということはなくなるはずです。

裁縫関連の記事は大量生産できる

例えば、あなたがこの記事に何らかしらの感銘を受けて、ブログの記事作成をやめて、裁縫を始めたとする。すると、不思議なことに、ブログも書けるんですよね。

「裁縫」の始め方もかけるし（副業は今後しばらくはトレンドですからね）おすすめの「手芸作家」を書いてもいい。

手芸作家のつながりができれば情報交換サロンをやってもいいし、PVがとれれば、そのまま自分の商品を紹介するページでを「売って」、人気が出れば「ブランド化」もできるわけです。

そもそも、書きたいことがあれば、そんなにネタに悩むことはないんですけどね。

ぶちくま

ブログが書けないと言っている人は、まだ、動機が弱いのかもしれないよ。

まとめ：需要が無限回路で供給が減る裁縫・手芸はチャンス

手芸・裁縫がチャンス、という内容で記事を書かせていただきました。読んでいただいた方、貴重なお時間を割いていただきありがとうございました。

手芸・裁縫の副業ポイント

• スキルとしては貴重
• 需要も10年くらいはありそう
  （保育園や小学校はなかなか変わらない）
• 収益の方法、参入の敷居は下がる（ココナラ、minneがいい）

minne、Creema作家が増えることを願う

そういうわけで副業の１番のオススメとして、「裁縫」をあげてみました。

まぁ、もとはといえば先に挙げたminneとかcreemaの商品が好きで、作家さんがもっと増えたらいいなぁ、という希望でもあるんですけどね。

ブログがだめでも、他にも自分を活かせる副業はありますよ、というお話でした。

【PR】

ココナラで「できること」を探す！

【PR】

【minne】の作品を見てみる！

他にも見つかる、あなたのできること

ここから先は、裁縫や手芸以外にも、もしかしたらあなたにできることがあるかもしれない、という内容になります。

ぶちくま

このカテゴリは「ブログで稼ごう！」という方にも情報を発信しているので、ブログと他の何かを組み合わせてもいいよね、というあたりのことを解説しています。

サイト開設ができたあなただってWordPress開設で稼げる

「ブログを諦めて他の副業を探している」あなたにだって、できる副業はあります。

WordPressで挫折するブロガーがいるくらいだから代わりに開設したらいいじゃない

そう、ブログに挫折したあなたもすでに、他の人がなかなかできない「WordPress開設」という荒技を成し遂げているじゃないですか。

WordPress開設を「ココナラ」で売っている人だっています。あなたはすでに、他の人ができないことを副業にできるチャンスがあるのです。

ただ開設するよりもプラスαできるかで収益は雲泥の差

さすがに、WordPress開設で「稼げるか」っていうと、実際には難しい。しかし、そこにさらに色をつけていけば他と差別化ができる上に、ちょっとの違いで「何万円」も違うサービスに変えることだってできる。

• プログラミングができれば、HP制作までできる
• デザインとCSSができれば、HPデザインになって、オリジナルのサイト開設に大きな付加価値をつけることができる
• マーケティングや営業の力があれば、「ブログに商品価値をつけるHOW TOやアドバイザー」だってできる

例えば、本業で営業をやっていればそれだけで武器になる。逆に、ブログでWebマーケティングを実践していれば本業にだって生かせる。

しろくまさん

このページの主題である「手芸」「裁縫」だって、トライしてみることでわかることが増えるし、「趣味」の領域で本業の顧客との会話のタネになるかもしれない。

ぶちくま

頑張ったことで直接成果に結びつかないと「無駄なことをした」と思いがちだけど、引き出しの数は確実に増えているので、あとはどのタイミングで開けるか、つまり努力を収益につなげるかがポイントなんですよね。

その時に役立つのがあなたの本業の力

どんどん自分を売り出しましょう。最終的に肩書きに箔がつけられるのは「あなたが何をしてきたか」ですよ。

会社でのあなたの実績じゃなくていいんです。会社の実績を売りにすればいいんですよ。

「〇〇社で10年間営業に従事しマーケティングを学ぶ」だけでも、「フリーランスでうんぬん」よりも、わたしは評価します。

本当にブログ記事のネタないの？　本当に本当？　そんなので諦めてもいいわけ？

、、、まぁ、こんな感じでですね、記事ネタなんていくらでもあるわけですよ。これなんかは他の記事書いている時に、ちょっと気になって書いただけです。

もちろん、これで「裁縫」を始める人はあまりいないと思いますが。調べてみると、裁縫、結構いけなくもないと思うんですけどね。少なくとも、書けないブログに時間を費やすよりはよっぽど有意義だと思います。

んで実際には「裁縫」は儲かるの

これは本当にやりようだと思います。

先に言ったように、minneやCreemaで市場は開けたと思いますし、買う側も、出す側も、それこそ「メルカリ」のような気軽さで手芸品を買えるようになりました。

ぶちくま

この「敷居の低さ」は、先駆者たちにとっては脅威で、才能のある新規参入者がどんどんパイを奪っていく。常に自分も追われる立場になるので、変化に対応し続ける姿勢は大事ですね。

しろくまさん

ブログや副業にトライできる人なら、これからどんな変化があってもそれを楽しんdね乗り越えられるようになると思うけどね。

おっさんおばさんになるとブランド品とかどうでもよくなるのよ

子供生まれて、ブランド品とか興味なくなると、こういう「手作りのかわいい」がすごくいいんですよね。

需要はかなりあると思いますが、同時にメディアの力もあって（以前、主婦でも簡単に稼げる、みたいな感じで手芸が取り上げられていたような）参入した方もかなりいるようです。

本気でやるなら覚悟はいると思いますが、そもそも、好きなことならやりがいもあると思うので、個人的には、本当にオススメしたい「趣味」アンド「副業」だと思います。