cocoonで検証していますが、swellも買ったためswellでも使っています。sangoも一緒のはずです。

【比較】SWELL/stork19/JIN:R/sango/Cocoon【テーマの違い、どっち!】

WordpressのテーマはSwell、ストーク、JIN:R、sango、Cocoonなどいろいろとありますが、Twitterの感想と自分の利用経験についてまとめていきます。【比較】SWELL/stork19/JIN:R/sango/Coc

ebookbrain.net

【Cocoon/Swell】WordpressでH2見出し上にGoogleアドセンスを挿入【応用編/完成コード】

実際はもっと複雑ですけど必要な部分だけ切り出しました。特定の記事を非表示、カテゴリの切り分け、4つ目5つ目にもアドセンスを追加しています。モバイルとPCの切り分けは今はやっていません。

////////////////////////////////////////////
// h2のウィジェット
////////////////////////////////////////////
function add_ad_before_h2_for_3times($the_content) {
//1つ目の広告タグを挿入
$ad1 = <<< EOF

<div class="iconbox">
PR記事:<a href="https://ebookbrain.net/" target="_blank" title="">リンク</a>
</div>

EOF;

$ad1_program = <<< EOF

<div class="iconbox">
人気記事:<a href="https://ebookbrain.net/" target="_blank" title="">リンク</a>
</div>

EOF;

$ad1_ebook = <<< EOF

<div class="iconbox">
人気記事:<a href="https://ebookbrain.net/" target="_blank" title="">リンク</a>
</div>

EOF;
	
$ad1_art = <<< EOF

<div class="iconbox">
人気記事:<a href="https://ebookbrain.net/" target="_blank" title="">リンク</a>
</div>

EOF;

//2つ目の広告タグを挿入
$ad2 = <<< EOF
<div class="ad-center">スポンサーリンク</div>
//アドセンスのコード

EOF;

//3つ目の広告タグを挿入
$ad3 = <<< EOF
<div class="ad-center">スポンサーリンク</div>
//アドセンスのコード

EOF;

//4つ目の広告タグを挿入
$ad4 = <<< EOF
<div class="ad-center">スポンサーリンク</div>
//アドセンスのコード

EOF;

//5つ目の広告タグを挿入
$ad5 = <<< EOF
<div class="ad-center">スポンサーリンク</div>
//アドセンスのコード

EOF;

/*
記事1, 記事2は非表示
*/
if ( is_single() && !is_single(array( 1, 2 ))) {

    $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
    if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
        if ( $h2s[0] ) {//チェックは不要と思うけど一応
            if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
                if(in_category( array('ebook', 'ebookstore', 'cinema', 'game') )){ //カテゴリごとにPR記事を変える
                    $the_content  = str_replace($h2s[0][0], $ad1_ebook.$h2s[0][0], $the_content);
                }else if(in_category( array('wordpress', 'programming') )){ 
                    $the_content  = str_replace($h2s[0][0], $ad1_program.$h2s[0][0], $the_content); 
                }else if(in_category( array('art') )){ 
                    $the_content  = str_replace($h2s[0][0], $ad1_art.$h2s[0][0], $the_content);  
                }else{
                    $the_content  = str_replace($h2s[0][0],$ad1.$h2s[0][0], $the_content);
                }
            }
            if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
                $the_content  = str_replace($h2s[0][1], $ad2.$h2s[0][1], $the_content);
            }
            if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
                $the_content  = str_replace($h2s[0][2], $ad3.$h2s[0][2], $the_content);
            }
            if ( $h2s[0][3] ) {//4番目のH2見出し手前に広告を挿入
                $the_content  = str_replace($h2s[0][3], $ad4.$h2s[0][3], $the_content);
            }
            if ( $h2s[0][4] ) {//5番目のH2見出し手前に広告を挿入
                $the_content  = str_replace($h2s[0][4], $ad5.$h2s[0][4], $the_content);
            }
        }
    }
  }
  return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times');

WordPressで記事中のウィジェットを追加(予備知識)

coccon開発者寝ログさんのオリジナルコードを元にカスタマイズ

ベースとなるソースコードは寝ログさんのものを使わせてもらっています。ありがとうございます。

本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法

1年ほど前、最初のH2見出し手前に広告を表示する方法を考えてみました。 この方法は、現在自分のテーマでも利用し…

nelog.jp

WordPress関連は初心者が多いせいか、結構まずそうなソースコードが転がっていることも少なくないのですが、わいひらさんはプログラマなので、綺麗かつ手堅いコードなのでそのまま利用させてもらっています。他にも良記事が多く助かっています。

上記のコードはちょっと手をくらえただけなのでカスタマイズってほどでもないですけど、子ネタですかね。

ウィジェットの投稿本文中とこのカスタマイズの違い

詳しくは調べていないのですが、Table of Contents Plusを使った場合、このカスタマイズは目次の上に最初の広告が表示されます。「ウィジェットの投稿本文中」は目次の下に表示されます。「ウィジェットの投稿本文中」は1ヵ所のみ表示する場合に使えます。

WordPressでH2の見出しの上にgoogleアドセンス/広告を入れる(解説)

上記の完成コードを簡単に解説しています。完成コードに最近手を入れたため、以下の記事は少し古いところもありますが、だいたいはわかるはず…。

特定の記事で広告をすべて非表示

特定の記事のみ広告を非表示にしたいことがあります。記事中のすべての広告を非表示にします。

if ( is_single() && !is_single( '1' )) {//投稿ページ1のなんとか記事は非表示設定

複数の場合はarrayを使います。’はあってもなくてもかまいません。

if ( is_single() && !is_single(array( 1 , 2 ))) {//投稿ページ1、2のなんとか記事は非表示設定

個人的には面倒なのでなしで。カテゴリの場合は、!in_categoryを使えばOKです。

if(in_category( array(‘a’, ‘b’, ‘c’) )) カテゴリごとに個別に表示する広告を切り分ける

次に、必要なポイントだけ、カテゴリごとに個別に表示する広告を切り分けます。主な用途はアドセンスではなくバナー広告やスマホで特定の記事をみてもらいたいときなんかに活用できますかね。

//2つ目の広告タグを挿入
$ad2 = <<< EOF

EOF;

//2つ目の広告タグを挿入(カテゴリB)
$ad2_b_category = <<< EOF

EOF;

if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
	if(!in_category('2')){
          	$the_content  = str_replace($h2s[0][1], $ad2.$h2s[0][1], $the_content);
	}else{
          	$the_content  = str_replace($h2s[0][1], $ad2_b_category.$h2s[0][1], $the_content);	//bカテゴリの広告
	}
}

複数カテゴリ指定する場合は次のとおり

if(!in_category(array('2', '5' )))

!マークはそうじゃないものです。ひっくり返さないようにしましょう。!をつけない書き方もありですよね。

そのうち、こんな感じになっていきます。

	  if(in_category( array('ebook', 'cinema', 'game') )){ 
            $the_content  = str_replace($h2s[0][0], $ad1_ebook.$h2s[0][0], $the_content);
          }else if(in_category( array('wordpress', 'programming') )){ 
            $the_content  = str_replace($h2s[0][0], $ad1_program.$h2s[0][0], $the_content);          
	  }else{
            $the_content  = str_replace($h2s[0][0],$ad1.$h2s[0][0], $the_content);
	  }

カテゴリのスラッグを変えないなら、数字よりこちらの方がコードとしてはわかりやすいです。

4番目と5番目のH2見出し手前にアドセンスのコードを追加する(追記)

今まではGoogleに認められた人しかアドセンスを3つ以上掲載できませんでしたが、配置数の上限が撤廃されたようです。そこで、4番目と5番目にアドセンスを追加する方法を紹介します。長文の人はどうしても記事下のアドセンスが視認性が低下しがちです。個人的にも長文記事が多いので^^;

//4つ目の広告タグを挿入
$ad4 = <<< EOF
<div class="ad_center">スポンサーリンク4番目</div>
EOF;

//5つ目の広告タグを挿入
$ad5 = <<< EOF
<div class="ad_center">スポンサーリンク5番目</div>
EOF;

同じようにやればいいだけですね。数字だけ間違えないようにしてください。

if ( $h2s[0][3] ) {//4番目のH2見出し手前に広告を挿入
  $the_content  = str_replace($h2s[0][3], $ad4.$h2s[0][3], $the_content);
}
if ( $h2s[0][4] ) {//5番目のH2見出し手前に広告を挿入
  $the_content  = str_replace($h2s[0][4], $ad5.$h2s[0][4], $the_content);
}

is_mobile()でPCとスマホとの切り分けはせず、レスポンシブ広告ユニットで対応

is_mobile()でPCとスマホとの切り分けをしている方もいるようですが、 アドセンスはレスポンシブ広告ユニットで対応しています。 そっちの方がすっきりするかな〜、また、Googleさんがレスポンシブ広告ユニットを使うといいよ、っておすすめしてくるので。

カスタム検索の他に、中央あわせも含めて解説しているので。アドセンスのカスタマイズまとめ記事をみてください

【デメリット】アドセンスの自動広告をやめた!オフにして半手動広告の方が効果的!?

アドセンスの自動広告をやめたのです!Cocoonの半手動広告の方が楽々だったので。アドセンスの自動広告の設定(オンオフ)アドセンスの自動広告は次の手順でいけます。広告 > サマリー > のタブ > 鉛筆の編集アイコン > 自動広告ON >

ebookbrain.net

is_mobile()で切り分ける

一応、is_mobileでも切り分けてみます。

functions.phpでis_mobileを作成。wordpressのテーマがsimplicityの場合、mobile.phpにこのコードが書かれているようなので追加する必要はありません。

/**
 * モバイルサイトの分岐(wp_is_mobile()の代替 ipadやkindleを含まないようにするため)
**/
function is_mobile(){
	$useragents = array(
		'iPhone',          // iPhone
		'iPod',            // iPod touch
		'Android',         // 1.5+ Android
		'dream',           // Pre 1.5 Android
		'CUPCAKE',         // 1.5+ Android
		'blackberry9500',  // Storm
		'blackberry9530',  // Storm
		'blackberry9520',  // Storm v2
		'blackberry9550',  // Storm v2
		'blackberry9800',  // Torch
		'webOS',           // Palm Pre Experimental
		'incognito',       // Other iPhone browser
		'webmate'          // Other iPhone browser
	);
	$pattern = '/'.implode('|', $useragents).'/i';
	return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

$ad2_pcと$ad2_mobileを作成。名前や並び順はわかりやすいものなら何でもokです。

$ad2_pc = <<< EOF

$ad2_mobile = <<< EOF

if文で切り分けるだけです、簡単ですね。

if( is_mobile() ) { //スマホ
	$the_content  = str_replace($h2s[0][1], $ad2_mobile.$h2s[0][1], $the_content);
} else { // タブレット・PC
	$the_content  = str_replace($h2s[0][1], $ad2_pc.$h2s[0][1], $the_content);
}

最後に該当デバイスで動作確認をします。

cocoonはシステム側が対応になり広告設定で簡単

システム側で対応してくれたようです。もうコードを書かなくてもいけます。これは楽でありがたいですね。

cocoon設定 > cocoon設定 > 広告

• レスポンシブの広告コードを1ついれる
• 本文中 > [ 広告の表示数を制御する ] -1でチェック。

広告（AdSense）を手っ取り早く設定する方法

Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

wp-cocoon.com

h3の見出しを使うことにより、h2すべていれても、うざい感じは回避できます。うちのサイトは長文も多いので助かります。

特定の記事のみ広告を非表示にすることもできます。

poripu(sango)もh2のアドセンスに対応

カスタマイザーにアドセンス記事内広告のコードを挿入して、チェックを選ぶだけです。

https://oldno07.com/poripu/articles-in-ad/

WordPressでH2の見出しの上にgoogleアドセンス/広告を入れる(豆知識編)

h2のタグにアドセンスを追加する際にうざったくならない方法(追記)

広告を追加しすぎるとうざったく見えがちです。このうざったさをださないために2つの方法が思いつきますね。

• 簡単な方法としてh3の見出しを併用する方法
• 2、4、6番目など1つおきにアドセンスをコードを追加する方法

1つおきの方法は広告のコードを全部に挟まなければいいだけです、1つの見出しの文章量がどの程度かにより感じ方も違うので、そのあたりを吟味して決めればOKでしょう。

危険!目次上にアドセンスを入れるとGoogleが警告?

目次の上にアドセンスは危険かもしれません。Googleからすぐなおせと警告がきたサイトが2サイトほどあります。^^;　なおしたら大丈夫でした!

目次の上にアドセンスを掲載している人もいますし、警告がこなかったサイトもあります。個人的な分析だと目次の前の文章が極端に短かったり、もしくは目次の前の文章がなかったりすると、ダメっぽいのではないかと。大きなサイズの広告を使っていたため、ファーストビューを広告で隠しているにひっかってしまったのでしょう。

だけど、全部の記事をチェックしなおすのも面倒です。

小さな広告よりも大きな広告にする方がよくモバイル用に小さな広告に切り分けるのも面倒だったので、現在1番目は外してひとつ下にずらしてあります。代わりににこのサイトではPR記事をいれるようにしました。ご参考までに。

swellで目次が出てこない(h2上に広告をいれる弊害)

swellで目次がでこなくなりました。ソースコードで確認すると目次があるため、他の要因で悪さしているなと思いました。

目次はh2絡みですから、このカスタマイズとswellの目次のプログラムがバッティングして、悪影響しているんだなと悟りました。表示優先度をかえたらでるようになりました。

Swellの目次上と目次下の制御

10だと目次上にでますね。

add_filter('the_content', 'add_ad_before_h2', 10);

15だと目次下にでますね。

add_filter('the_content', 'add_ad_before_h2', 15);

めでたく解決です。

Swellの目次が表示されない

上記の方法で解決したはずだったのですが、あるバージョンからSwellの目次が表示されなくなりました。

add_filter('the_content', 'add_ad_before_h2', 12);

12より小さいと表示されないようです。目次下なら問題なく表示されますが、目次上に表示したいです。コーディングで解決する方法は厄介だったので、問題となるSwellの目次自体を外しました。

久々にプラグインのTable of Contents Plusを導入して解決です。

cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】

目次のカスタマイズ覚書です。cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】cocoonの目次はデフォルトのHtmlを簡潔に表記すると、こんな感じです。<div class="toc"> <input type="ch

ebookbrain.net

カスタマイズする人は意外とSwellよりCocoonの方が扱いやすいかもですね。Swellはやや素人情報が多くてコーディングの情報が少なめです…。

小ネタでしたが、ご参考になれば幸いです。

個人的には5本ぐらいテーマを購入したので、もうかなり慣れました^^;
最近、日本の有料テーマは物足りず、購入していません。
日本のテーマの方が高いし…機能も物足りないため…。

ブログで使うのなら、Responsive Multi-Purpose Themeあたりで探せば使いやすそうです。スライダーは設定しなければ付かないので、必ずしも使う必要はありません。

WordPressの海外テーマ/テンプレート7選おすすめで安いのは?

使い勝手のいいテンプレートを多数、提供するSwiftIdeasさん(イギリス)

わりと実用的で売れ筋のテンプレートを提供するSwiftIdeasさんです。

SwiftIdeas

クリエィティブなポートフォルオからビジネステーマまで幅広いテーマを提供するDream-Themeさん

Dream-Themeさんは人気上位にいます。このテーマは3年前に作られたものですが、しっかりとアップデートされているようです。最終更新日は見るべきポイントです。テーマが更新されているか否かはLast Updateをチェックすればよいです。ギャラリーによいテーマです。

• Chocolate WPのダウンロード・仕様詳細
• Chocolate WPのデモ

Dream-Themeさんの最も売れ筋は、やはり多目的なテーマになります。

WordPress – The7 — Responsive Multi-Purpose WordPress Theme | ThemeForest

エレガントなテーマを作成するのが得意なpexetoさん

pexetoさんのデザインは、エレガント・ナチュラルなテーマが多いです。テーマのアップデートも管理画面からできるようですね。わりとサポートがマメな方です。サポートはCommentsから見れば、マメかどうかがわかりますし、そのテーマにバグがあるか否かなどもだいたいわかります。女性向けやナチュラルなサイトに向きそうなデザインです。

上記はポートフォリオのテーマですが、ポートフォルオの機能は使わなければいいだけなので、ブログとしても使えます。それか多目的なテーマを選ぶといいでしょう。

• Expressionのダウンロード・仕様詳細
• Expression のデモ
• pexetoさんのポートフォリオ

最新のテーマはこちらです。

• Storyのダウンロード・仕様詳細
• Storyのデモ

かわいいテーマを作成するのが得意なelemisさん(イスタンブル)

(注)Htmlバージョン

elemisさんは女性らしいかわいいデザインです。イスタンブルの二人組の大学生みたいです。最近、elemisさんはhtmlのテーマを作成し、Wordpressのテーマは、Themefoest内にいるエンジニアに業務委託しているようで、Wordpressバージョンは他の人の名義になっているようです。必ず、リンクが張られているので、すぐわかります。間違ってHtmlバージョンを買わないようにしましょう。^^;

• Loomのダウンロード・仕様詳細
• Loomのデモ
• elemisさんのポートフォリオ

themeforestで最も販売実績があるThemeFusionさん

Demo

ThemeFusionさんのテーマが1番売れているみたいです。

個人的にはそれほど魅力を感じないのですが^^;、僕にはわからない魅力がわかる人にはいいのでしょう。ノーマルだから使いやすいのかもしれませんね。あと、ユーザーレビューの表示方法がちょっとユニークですね。DarkとLight、要は黒白を切り替えられるテーマはよくあります。背景パターンを選べるテーマも少なくありません。ThemeFusionさんはこのテーマしか作っていないようですね。一点集中型で勝負の人なのでしょうね。

• avadaのダウンロード・仕様詳細
• avadaのデモ

売り上げ上位でショップつきのテーマを販売しているThemeNectarさん

Demo

ThemeNectarさんもひとつのテーマで勝負していますね。このかたも売り上げ上位に入っている方です。ショップつきのテンプレートでも60ドル超えることはありませんね。

海外のテーマは、たった10ドルちょっと足せば、ショップつきになります。ショップ以外にも、フォーラムつきのものなどがあるので、探してみるとよいでしょう。

メガメニューが標準搭載のものは多く、もう少し進むと、背景動画やショップつきのものがあります。しかも、ショップはレビューつきのショップであることが多いです。

• Salientのダウンロード・仕様詳細
• Salientのデモ

QODEさん

Demo

Themefoestで、常に人気上位にいるQODEさんのテンプレートです。
シンプルなデザインで機能の豊富さがウリのようです。

This item was featured on ThemeForest

も取っています。ユニークなテーマはトロフィーがもらえるようです。

• Riverのダウンロード・仕様詳細
• Riverのデモ
• QODEさんのポートフォリオ

imaginemさん

imaginemさんは格好いいテンプレートが多いです。エレガントっぽいものもありますが、男性よりのものも多いです。このテーマは若干古いものですが、格好いいので紹介しておきます。レスポンシブデザインに対応しています。

• Trineのダウンロード・仕様詳細
• Trineのデモ

アーティストのテーマはいろいろと癖のあるテーマもあります。＾＾；
仕事で使うのなら、ノーマルで基本機能が豊富なものがいいかもしれませんね。

タブやアコーディオンなどのショートコードは搭載されているものの方が多いです。

スライダーにアニメーションが設定できるものも結構前からはやっていますね。最近はアニメーションの仕方などが選べるものが多いですね。画像の表示方法に凝ったものが増えてきましたね。回転やフリップなど、いろいろ。他にも数字もカウンターみたいなものとか。

こうしてみると日本のテーマはまだまだ遅れている気がしますね。

デザインは日本語でも英語でもあまり関係ないし、そういう時代でもない気がするので、今のところ、海外のテーマの方が断然おすすめです。

こうしてみるとthemeforestの購入方法はこちらです。
WordPressのテンプレートthemeforestを購入する前のチェック事項 | eBook Brain

elegant theme(エレガントテーマ)

もうひとつの有名なテンプレート、エレガントテーマ。こちらはいろいろなテンプレートが使い放題です。

elegant theme(エレガントテーマ)の評判・評価(日本語対応)

エレガントテーマのdiviの完成例

エレガントテーマのdiviの完成例です。

レディース・メンズファッションやメンズ脱毛・コスメなどのサイトですね。クオリティを高めるためにまだまだテコ入れが必要ですけどね。エレガントテーマのdiviにはレイアウトなど豊富な機能があります。

子テーマの作成がおすすめ

子テーマを作成して運用しています。

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思います。style.

ebookbrain.net

10user

サイドバーの幅の変更

elegant theme(エレガントテーマ)のdiviって格好いいのですけど、ちょっとサイドバーが狭いと感じる人がいるかもしれません。

elegant theme(エレガントテーマ)の全体の横幅をITサイトの大手Ligのように広げています。テーマカスタマイザーからできるため、お好みでどうぞ。ちなみに全幅を1280pxに変更。そして、サイドバーが狭いので広げます。

/************************************
** エレガントテーマカスタマイズ
************************************/

@media only screen and (min-width:1100px){
	div#left-area {
		width: 72%; /* デフォルトはwidth: 79.125%; */
		border: none !important;

	}
	div#sidebar {
		width: 28%;
		border: none !important;
	}
}

サイドバーの区切り線が重なってしまうので消去。これは少し気づくのに時間がかかりました。

/*サイドバーの区切り線消去*/
.et_right_sidebar #main-content .container:before {
	display: none !important;
}

現在、固定にしていませんが、固定幅にしたい場合は下記のような感じでしょうか。300pxのバナーが置けなかったので。

/* サイドバーのサイズ調整 */
@media only screen and (min-width:1100px){
	div#left-area {
		width: 700px !important;
		margin-right: 30px;
	}
	div#sidebar {
		width: 320px !important;
	}
}

.et_right_sidebar #main-content .container:before {
	right: 350px;
}

メニューのロゴの位置を調整

ちょうどいいサイズのロゴをあげることも大事ですが、ロゴの位置をちょっと調整したいこともあります。

/*ロゴの位置を調整*/
#logo {
	padding-top:10px;
}

メニューのフォントサイズ変更

海外のテーマは日本語で利用するとフォントサイズを変更をしたくなることがしばしばあります。メニューのフォントサイズを変更します。!importantをつけないとダメです。

li.menu-item{
	font-size: 16px !important; 
}

フッターリンクの削除

フッターリンクの削除は許可されています。

通常、テーマのカスタマイザー フッター > 下部ナビ > DISABLE FOOTER CREDITSで消せますが、子テーマを利用していてうまく消えない場合はコードを追加しましょう。

/*フッターリンクの削除(子テーマを利用してうまく消えないとき)*/
#footer-info {
	display: none;
}

プラグインtable of contents plusでアンカーのアドレスが表示されない

elegant theme(エレガントテーマ) diviでは、wordpressのプラグインtable of contents plusのアンカーのアドレスが表示されませんでした。

こりゃ、なんか余計なコードを書かれたな、と(^^;。

プラグインtable of contents plusのカスタマイズはこちら!

cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】

目次のカスタマイズ覚書です。cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】cocoonの目次はデフォルトのHtmlを簡潔に表記すると、こんな感じです。<div class="toc"> <input type="ch

ebookbrain.net

もしかしたらソーシャルブックマークのアドレスが別になってしまうための対策かもしれませんが、うちのサイトではデメリットが多く、表示した方がよかったので、アンカーがしっかりと表示するようにしました。

調べたら

js/custom.js

に原因があり、jsファイルのこちらの部分を削除してあげればOKでしたね。

文字コードが欧米になっていたため、日本語コメントを入れる場合はUnicode(UTF-8)に変換します。

古いバージョンはプログラムのコードが若干違いますが、location.pathname.replaceで検索すれば大丈夫です。

/* 変更：Table of Contents Plusのアンカーアドレスが表示されないためコメントアウト
			if ( ( location.pathname.replace( /^\//,'' ) == this.pathname.replace( /^\//,'' ) && location.hostname == this.hostname ) && ! disable_scroll ) {
				var target = $( this.hash );
				target = target.length ? target : $( '[name=' + this.hash.slice(1) +']' );
				if ( target.length ) {

					et_pb_smooth_scroll( target, false, 800 );

					if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) {
						setTimeout(function(){
							et_pb_smooth_scroll( target, false, 40, 'linear' );
						}, 780 );
					}

					return false;
				}
			}
*/

Elegant Themesで投稿ページと固定ページの仕様が若干違う

Elegant Themesは投稿ページと固定ページの仕様が若干違います。たとえば、アイキャッチが固定ページはデフォルトで表示されません。

いくつか対応方法があるようですが、固定記事から投稿記事に移動しました。数も少なかったので。その際、Post Type Switcherというプラグインを使いました。urlを変えず移動できます。

Post Type Switcher

WordPress の投稿タイプを簡単に変更する簡単な方法

ja.wordpress.org

投稿ページに移動した場合、カテゴリはあとから設定しなおす必要があります。

Elegant Themesのgoogle analyticsの設定

設定項目が用意されています。

Divi > Them Options > integration > Add code to the < body > (good for tracking codes such as google analytics)

過去にプラグインなどを利用した記憶がある方は2重設定にならないように注意しましょう。

他のElegant Themes(エレガントテーマ)のカスタマイズ

extraのカスタマイズはこちらです。

elegant theme(エレガントテーマ) Extraのレビューとおすすめカスタマイズ

elegant theme(エレガントテーマ) Extraのレビューとついでにカスタマイズ方法をまとめておきます。全体のレビューはこちらから。管理画面からのカスタマイズ方法はみればだいたいわかるような気がします。ただ、cssの具体的なカスタ

ebookbrain.net

Elegant Themes(エレガントテーマ)の紹介

まとめ記事はこちらです。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。公式サイトはこちらです。入会する場合はJoin to downloadです。Elegant Themess Premium Wor

ebookbrain.net

全体のレビューはこちらから。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。公式サイトはこちらです。入会する場合はJoin to downloadです。Elegant Themess Premium Wor

ebookbrain.net

管理画面からのカスタマイズ方法はみればだいたいわかるような気がします。ただ、cssの具体的なカスタマイズ方法をいちいちコードから調べたり英語でぐぐったりが大変な人のために全部まとめておきます。

elegant theme(エレガントテーマ) Extraのレビューとデモ

Extraはelegant theme(エレガントテーマ) の中で最も使いやすい最新のwordpressのテーマです。レビューシステムなどを搭載しているだけではなくメニューのアニメーションなどが格好いいです。日本のテーマでメニューのアニメーションまで実装しているのはなかなかないですよね。

デモはこちらです。

Extra Theme | Just another WordPress site

www.elegantthemes.com

公式の紹介動画はこちらです。

エレガントテーマはデザインが格好いいだけではなく、2016年頃にテーマの管理画面がリニューアルされて一新されました。かなり使いやすくなりましたね。

elegant theme(エレガントテーマ) diviのおすすめカスタマイズ

もうひとつ有名なテーマdiviのカスタマイズはこちらにまとめました。

elegant theme(エレガントテーマ) diviのおすすめカスタマイズ

elegant theme(エレガントテーマ) diviのカスタマイズをまとめておきます。エレガントテーマのdiviの完成例エレガントテーマのdiviの完成例です。レディース・メンズファッションやメンズ脱毛・コスメなどのサイトですね。クオリ

ebookbrain.net

2user

運用は子テーマの作成がおすすめ

個人的には更新時に楽なように、子テーマを作成して運用しています。

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思います。style.

ebookbrain.net

10user

ほとんどのカスタマイズは管理画面からできる

サイドバーの幅を決めたり、フッターリンクを削除したりなどだいたいのことはテーマオプションやカスタマイザからできます。場所は管理画面左の下の方にあります。

Extra > Theme Option
Extra > Theme Coutomizer

Youtubeに20本以上の公式のチュートリアルが公開されています。Theme Optionは新しくなっているため、管理画面はぜんぜん違いますけど。でも、みればわかるレベルです。

elegant theme(エレガントテーマ) Extraの色変え

そのままでも利用できるのですが、好みのサイトにするため色変えをしています。子テーマを使う場合は!importantで書き換える必要がある場合もあります。

/* もろもろ色替え */
#top-header {
	background-color: #ff6d94;
}
#main-header {
	background-color: #fafafa;
}
#main-header a{
	color: #626262 !important;
}
.sub-menu {
	background-color: #fafafa !important;
	border-top-color: #ff6d94 !important;
}
/* ウィジエットタイトル */
.et_pb_extra_column_sidebar .et_pb_widget .widgettitle {
	background-color: #82c0c7;
	color: #626262;
}
.post {
	background-color: #f1f1f1 !important;
}
#footer {
	background-color: #393939;
}

elegant theme(エレガントテーマ) Extraのレビューシステムを消去

elegant theme(エレガントテーマ)にはレビューシステムを導入されているのですが、いらない場合はレビューシステムを消去します。使う場合はそのまま使いましょう。

/* rating-starsを消去 */
.rating-stars {
	display: none !important;
}

rating-starsで記事上も記事下も消えます。

rating-starsを消去に伴いコメントリンクの位置がずれるため調整します。記事上にあるコメントリンクのことです。クリックすると飛びますよね。

/* rating-starsの消去に伴いコメントリンクの位置がずれるため調整 */
.comments-link {
	position: relative;
}

.comments-link:after {
	content: '';
	position: absolute;
	top: 0;
	right: -9px;
	bottom: 0;
	width: 2px;
	background: #f1f1f1;
}

elegant theme(エレガントテーマ) Extraのモバイルメニューを消去

個人的にモバイルメニューを削除しています。なぜかというと、スマホで固定メニューを導入したいからです。

/* モバイルメニューの削除 */
@media only screen and (max-width: 1024px) {
	#main-header {
		display: none;
	}
}

固定メニューはプラグインを利用しています。Wordpressって本当に便利ですね。

Wordpressでスマホのヘッダーメニューを固定するプラグインまとめ

Wordpressのテンプレートはいまだスマホの固定のヘッダーメニューに対応していないものが多いです。そのため、jqueryのsliderなどが有名で個人的にも利用していましたが、 もっとお手軽にプラグインで実装できないのかを調べたところ意

ebookbrain.net

Elegant Themes(エレガントテーマ)のまとめ記事や公式サイト

Elegant Themes(エレガントテーマ)のまとめ記事や公式サイトはこちらです。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。公式サイトはこちらです。入会する場合はJoin to downloadです。Elegant Themess Premium Wor

ebookbrain.net

ご参考になれば幸いです。

公式サイトはこちらです。入会する場合はJoin to downloadです。
Elegant Themess Premium WordPress Themes

Elegant Themesの販売モデル

Elegant Themesは今まで年額モデルのみでしたが、１回払い(Lifetime Access)がモデルができたのが嬉しいところ。といっても、2013年ごろには１回払いに対応してくれたため、かなり前の話です。１回払い(Lifetime Access)モデルができた瞬間に、デザインなども格好良く気になっていたため、購入しました。

料金は、昔と比較すると、ちょっと価格はあがってしまいましたが、サポートが大変だからでしょうか。しかし、Elegant Themes内にある、さまざまなテンプレートを使うことができます。最近は、テーマ数は増やすよりも、テーマの更新の方が多いかもしれません。海外のコンテンツもサービスが充実すると、値上げ傾向にあります。

Elegant Themess Premium WordPress Themes

Elegant Themesの特徴や機能

エレガントのデザインが格好いい(かわいいものもあり)です。Webデザイナーはデザインの参考になるかもしれません。PSDファイルもすべてダウンロード可(１番安いライセンスはPSDダウンロード不可です)。

テーマにより多少機能が違いますが、次のような機能があります。
日本語のWordpressのテーマにはない機能ももりたくさんです。

たとえば、Diviの場合、

• レスポンシブWebデザイン(最近のテーマは対応されています)
• スライダー機能
• メガメニュー
• 背景動画
• Page Builderつき。レイアウトを自由自在に組み立てられるもの
• ヘッダーのナビゲーションはいくつかのパターンを選択可
• 縦のナビゲーションもあり
• 横スクロール型スライダー
• レビューつきショップ
• アイコン
• カスタムカラー
• ワンカラム
• セールのタイマー
• グラフ(円グラフ、数字、棒グラフ)
• 豊富なプラグイン(Developerライセンス以上)

などなど

もちろん、テーマにより多少できることは違います。いっぱい機能があるため、最初は基本的な機能を使いこなし徐々に作りこんでいけばいいのかも。

CSSのカスタマイズは、カスタムCSSが用意されているため、そちらに記述すれば、テーマを更新した際にも消えません。

サポート

サポートはかなりよいです。複数の人がサポーターがいるため、わりと早めに回答があります。早いときは数分で回答があります。もちろん、英語ですけどね。
シンプルな回答を返してくれます。

フォーラムの方も使いやすく、ミススペルがあった場合、再編集できます。テーマごとに文字列検索に対応。

英語の勉強にもなるかもしれませんし、中学生レベルの英語で対応可能かと思います。

日本語も含み多言語対応。そして英語という壁は小さな問題

たとえば、１番人気がありそうなDiviのログ(購入者フォーラムのログ)をみると、

The theme has been translated into the following languages
Japanese

日本語と書かれていますしね。

そして、Wordpressのカスタマイズは日本語でも英語でも、基本的に変わらないですからね。コードは英語なので。それほど難易度は高くありません。

個人的な評価としては、海外のテーマの方がおすすめです。日本語のテンプレートより、コスパもよく格好いいです。

Elegant Themess Premium WordPress Themes

Elegant Themesのカスタマイズ

当サイトでcssなどのカスタマイズ方法もまとめてあるため、よかったら参考にしてください。

elegant theme(エレガントテーマ) Extraのレビューとおすすめカスタマイズ

elegant theme(エレガントテーマ) Extraのレビューとついでにカスタマイズ方法をまとめておきます。全体のレビューはこちらから。管理画面からのカスタマイズ方法はみればだいたいわかるような気がします。ただ、cssの具体的なカスタ

ebookbrain.net

elegant theme(エレガントテーマ) diviのおすすめカスタマイズ

elegant theme(エレガントテーマ) diviのカスタマイズをまとめておきます。エレガントテーマのdiviの完成例エレガントテーマのdiviの完成例です。レディース・メンズファッションやメンズ脱毛・コスメなどのサイトですね。クオリ

ebookbrain.net

2user

Elegant Themesのテーマの自動更新対応

自動更新に対応しています。

ダッシュボード > 更新

から更新できます。外観 > テーマからはなぜか更新できないようです。

ただし、APIキーをいれてないと更新が失敗します。

エレガントテーマの会員サイトの

ログイン > API KEYS

にあるAPIキーを、WordPressの管理画面の

(テーマ名) > テーマオプション > 更新情報

にいれて保存しましょう。そうすると更新できます。

cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】

cocoonの目次はデフォルトのHtmlを簡潔に表記すると、こんな感じです。

<div class="toc">
  <input type="checkbox" class="toc-checkbox" id="toc-checkbox-1" checked>
  <label class="toc-title" for="toc-checkbox-1">目次</label>
  <div class="toc-content">
    <ol class="toc-list open">
      <li><a href="#heading1">見出し1</a>
        <ol>
          <li><a href="#subheading1-1">小見出し1-1</a></li>
          <li><a href="#subheading1-2">小見出し1-2</a></li>
        </ol>
      </li>
      <li><a href="#heading2">見出し2</a></li>
      <li><a href="#heading3">見出し3</a>
        <ol>
          <li><a href="#subheading3-1">小見出し3-1</a></li>
        </ol>
      </li>
    </ol>
  </div>
</div>

次のような仕様にカスタマイズしてみましょう。

• h2黒丸数字
• h3は数字を表記せず黒丸だけにする

Cocoonの目次、CSSの作り方

カスタマイズ方法はもともとあるリストタグのマルを消して、beforeに追加するという形をとっています。cocconは管理画面の目次からもリストタグを非表示にできますが、あえてデフォルト設定を使ってCSSのみで消しています。管理画面とCSS、両方で調整すると2ついじらないといけないので、1つの方がすっきりとするかなという考え方です。

/************************************
** 目次
************************************/
.toc-list {
  list-style-type: none;
  counter-reset: item;
}

.toc-list > li {
  counter-increment: item;
}

.toc-list > li > a::before {
  content: counter(item);
  background-color: #000;
  color: #fff;
  width: 24px;
  height: 24px;
  display: inline-block;
  text-align: center;
  line-height: 150%;
  border-radius: 50%;
  margin-right: 0.5em;
}

.toc-list > li > ol {
  list-style-type: none;
}

.toc-list > li > ol > li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #000;
  border-radius: 50%;
  margin-right: 0.5em;
}

table of contents plusのおしゃれなカスタマイズ・デザイン

WordPressのプラグインで有名なtable of contents plusのcssのカスタマイズやデザインなどをまとめておきます。覚書をかねています。

table of contents plusのWordpressのプラグイン【公式】

公式サイトはこちらです。

Table of Contents Plus

目次を自動で生成する、強力でユーザーフレンドリーなプラグインです。全てのページとカテゴリーリストを表示するサイトマップも出力することができます。

ja.wordpress.org

table of contents plusの行間

table of contentsの行間も調整すると綺麗に見えます。 設定にはないため、cssに追加ですね。

/* table of contents plusの行間 */
#toc_container li {line-height: 1.8;}


table of contents plusで数字を消してアイコンに置換

h3の見出しが増えるにつれ、2-1、2-2のような表記がうざったくなりました。そこで数字を削除して●を追加します。

span.toc_number.toc_depth_2 {
  display: none;
}

#toc_container .toc_list > li > ul > li {
  list-style-type: disc;
}


アイコンに切り替えたい場合、FontAwesomeを使う方法があります。擬似要素のbeforeを使います。

/* table of contents plusのh3の数字を削除し、FontAwesomeでアイコンを追加 */
span.toc_number.toc_depth_2 {
	display: none;
}
#toc_container ul ul li:before{
	font-family: FontAwesome;
	font-size: 18px;
	content: "\f040";
}

table of contents plusの設定にある、番号振りのチェックは入ったままです。

この方法以外に番号振りのチェックやtable of contents plusのcssを使わない方法もあります。

simplicityやコクーンはFontAwesomeが入っていたため、何もせずコードを書くだけで簡単に対応できましたね。

table of contents plusのタイトルの横にアイコンを追加

デザイン的に物足りないので、table of contents plusのタイトルの左にアイコンを追加することにしました。

FontAwesomeを利用しています。simplicityなどテーマによってはデフォルトで入っています。

#toc_container .toc_title::before {
	position: relative;
	font-family: FontAwesome;
	font-size: 14px;
	content: "\f0ca";
	display: inline-block;
	width: 40px;
	line-height: 40px;
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: baseline;
	speak: none;
	-webkit-font-smoothing: antialiased;
	color: #fff;
	background-color: #5f7b96;
}

table of contents plusでタイトルを左寄せ

タイトルを左寄せする方法です。

#toc_container .toc_title {
    display: inline-block;
    position: relative;
    margin: 0 0 0 40px;
}

おしゃれなカスタマイズ・デザイン(table of contents plusのcssを使用しない編)

table of contents plusでは、デフォルトのcssを読み込まない設定があります。より思い通りにデザインをカスタマイズする場合、こちらの方がいいかもしれません。読み込まない設定にしない場合、!importantなどが必要になる場合があり、cssが反映されない場合もあります。あと、わずかながら余計なcssを読み込まないため、こちらの方が軽くなります。

table of contents plusの設定

cssを読み込まない場合、table of contents plusの必要な設定は2つです。

チェックを外します。

チェックをいれます。

table of contents plusで簡単なデザインする

何もないので、背景ぐらいつけましょう。

#toc_container{
  background: #f9f9f9;
  box-shadow: 0 1.5px 2.4px rgba(0,0,0,.15);
}

輪郭のcssも簡単に効くようになります。

#toc_container{
  border: solid 2px;
  border-color: #0d8797;
}

サンプルです。色、margin、paddingなどはお好みでデザインしてください。

table of contents plusで疑似要素beforeの連番

最初、他の方法で作ってしまいましたが、こういうカウンタあるんですね。css素人なので知りませんでした。。覚書です。

この方法で作成する場合は、table of contents plusの番号振りはいりません。

/* h2の見出し */
#toc_container .toc_list {
  counter-reset: li; /*数字をリセット。必須っぽい*/ 
}
#toc_container .toc_list > li {
  list-style-type: none;
}
#toc_container .toc_list > li:before {
  counter-increment: li; /*連番のカウンタ*/ 
  content: counter(li); /*表示する*/
}

サンプルです。めもるため必要最低限のコードだけ抽出しました。jinというwordpressのテーマはこの方法で実装されていましたね。

table of contents plusのアンカーを綺麗にあわせる方法

小ネタの追記です。table of contents plusのジャンプ先の位置がずれるため、アンカーの調整をしました。

ジャンプすると、見出しの下にあわさります。 見出しによってマージンなどが違うため調整が必要ということですね。

初期値の30はWordpressのツールバーの高さのようです。「Enable smooth scroll effect」をチェックしていると 上級者設定の方に「Smooth scroll top offset」という項目が追加されます。これが位置が違う場所にあるからわかりにくい。。

でも、オフセットが調整できるわけですね。

日本語化している場合は「スムーススクロール」をチェックしていると、 上級者向けの「スムーススクロール先の余白」が追加されています。

移動中にユーザーがマウスをまわす可能性もあるため、多少ゆとりを持って設定した方がいいかもしれません。

あとキャッシュ系のプラグインを利用していたらキャッシュをクリアすること。

table of contents plusでアンカーが正常に飛ばない、一瞬表示されるけど戻る不具合

小ネタの追記です。table of contents plusのアンカー先にジャンプすると、一瞬表示されるけど、遷移先の記事の上部に戻るという、謎の現象が発生しました。

ただ、ちゃんと飛ぶアンカーもあるのです。

原因をさぐると、ブラウザの設定でjavascriptをオフにすると正常に動作します。

つまり、javascriptが悪さをしていることは確定。しかし、テーマやプラグインが原因ではなさそうです。

ちゃんと飛ぶアンカーもあるのです。という点を思い出しました。

はい。よくみたら、記事内にtwitterの埋め込みコードがありました。これ外したら解決しました。

twitterの埋め込みコードがjavascriptでした。

table of contents plusのFAQ

table of contents plusの目次が表示されない

バグがあるバージョンがあったようです。

表示されなくなったのは、上級者向けの見出しレベルでチェックが外れてしまったため、再度チェックすると表示されます。

table of contents plusのフォントサイズのcssが効かない

通常、プラグインの管理画面からフォントサイズを指定すれば終わりですが、とあるテーマでフォントサイズのcssが効かない状態になりました。結局、スタイルシートで直接書き換えました。

.toc_list a {
	font-size: 22px;
	line-height: 1.8;
}

また、上級者向けの設定に、

CSS除外 プラグインのCSSを読み込まない場合チェックを入れてください。

のチェックボックスもあります。こちらチェックを入れると、背景や中央寄せも消えて1からcssをカスタマイズできるようです。

このプラグインは設計が美しく、ほんとすごーくよくできていると思います。^^

ご参考になれば幸いです。

コクーン(cocoon)の評判!(WordPressのテーマレビュー感想!)

cocoonと海外のテーマの比較

ebookbrainではずっと海外のテーマを利用していました。海外のテーマは最先端の技術やデザインなどで学ぶことあるため、いくつか持っているといいかもしれません。

詳しくはこちらの記事をみてください。

WordPressの海外テーマ/テンプレート7選おすすめで安いのは?

海外のWordpressの人気テーマを紹介します。やっぱり、Webデザイナーごとにだいたい特色が決まっているため、最近、Webクリエイターごとにポートフォリオを確認するようにしていますね。個人的には5本ぐらいテーマを購入したので、もうかなり

ebookbrain.net

しかし、simpicityに乗り換えてcocoonに。cocoonは個人的に世界一優良なテーマのような気がします。

コクーン(cocoon)を使う理由として以下のような点があげられます。

大抵のテーマはここが足りないなあという不便さが後からでてくるものなのですが、cocoon利用時にほとんど不便さはありませんでした。

ほしい機能がぐぐるとそのまま入っているケースがほとんどです。

cocoonのデメリットとしてはデザインが味気ないところですけど、デザインはプログラミングをいじるというレベルでは、簡単なので自分でやればいいですよ。元から用意されたデザインではないためオリジナリティも高くなります。

デザインが面倒な人はSwellもおすすめ(Cocoonとの比較)

デザインが面倒な人はSwellがおすすめかもしれません。他のサイトでSwellを使っています。SwellはわりとシンプルでUIがよくて使いやすいテーマだと思います。

• Cocoonの方がよいところはカテゴリー別人気記事があることです。
• SwellはUIがよくて使いやすいです。
• Swellはある程度デザインされているので、そのままでもそれっぽくデザインが楽できます。

より詳しい比較記事はこちらです。

【比較】SWELL/stork19/JIN:R/sango【テーマの違い、どっち!】 | ithands

WordpressのテーマはSwell、ストーク、JIN:R、sango、Cocoonなどいろいろとありますが、Twitterの感想と自分の利用経験についてまとめていきます。 【比較】SWELL/stork19/JIN:R/sango/Co

ebookbrain.net

どちらもおすすめしておきますが、あとから乗り換えるのは面倒なので先に決めることが大事です。ただ、Swellは各テーマからの乗り換えプラグインがでているため楽な気がします。

CocoonからSWELLへ乗り換えるためのサポート用プラグイン

https://users.swell-theme.com/mypage/

個人的にはこのサイトはバリバリCocoonでカスタマイズしているため、このままいこうと思っています。

Cocoon(コクーン)のカスタマイズの方法(1ページ目)

基礎設定やCSSのデザインなどはこちらの記事にまとめました。

404 NOT FOUND | ebookbrain

ebookbrain.net

こちらの記事はプログラミングやプラグインの記載が多めです。

Cocoon(コクーン)のブログカードではてブを表示(内部リンクの完成版)

第一弾としては、現在、Cocoon(コクーン)のブログカードで、はてブを表示する機能はありません。そのため表示しました。

完成品はこんな感じです。はてブは画像ではありません。

電子書籍おすすめ徹底比較(2024年) 漫画や小説で安いアプリ/サイトはどこ!?

2024年改めて電子書籍のおすすめサイトを徹底比較してみることにしました。電子書籍元年(2010年)から電子書籍ユーザーであり、はてぶ・いいねも充実している記事なので見ていってくださいね。この記事とこの記事から分岐する記事で以下のことが詳し

ebookbrain.net

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思います。style.

ebookbrain.net

国内wifiルーター/simレンタルプラン比較100ギガ/300ギガ

格安simだけでは無理がでてきたので、、レンタルwifiについていろいろと調べてみました。興味本位で調べたのではなく自分用の回線を検討だったため、かなりしっかりと探してみましたのでよかったら参考にしてみてください。読むのが面倒な人のために結

ebookbrain.net

そもそもはてブがあまり多くはありませんが…。。

Cocoon(コクーン)のブログカードではてブを表示(作り方)

コクーンのサイトをみると、lib内の関数をカスタマイズする場合、子テーマのfunctions.phpにオーバーロードして利用できるようになったようです。あいかわらず丁寧に解説してくれているため、ありがたいです。コクーンを使う理由のひとつとしてソースコードが読みやすい点もあるでしょう。

lib内に、blogcard-in.phpがあります。simplicityと違って、ブログカードは内部リンクと外部リンクはファイルわけしたようですね。

途中でssl化したサイトのため、httpとhttpsのはてブを足して表示することにしました。簡単ではありますが、コメントを入れて解説しておきます。

// urlを置換してhttpのアドレスを用意
$http_url = str_replace( 'https://', 'http://', $url );
// httpとhttpsのはてぶ数をテキストで取得して合算(画像はあまりよろしくない)
$http_hatebu_count= @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$http_url}");
$https_hatebu_count = @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$url}");
$hatebu_count = $http_hatebu_count + $https_hatebu_count;

寝ログさんのサイトなどを参考にしました。

参考 [PHP]はてなブックマークのAPIを使って特定のURLのブックマーク数を取得する « Codaholic

参考 WordPressで個別ページのはてブ数をPHPで取得する方法

注意点ですがhttpのサイトで上記のコードを使うとはてブが2倍返しになってしまうので、不要なコードは省いてください。httpのサイトは下記のコードでいいですね。

$hatebu_count = @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$url}");

はてぶは画像なので、テキストで取得することにしました。コクーンの標準機能から画像ではてブを表示する機能は高速化の都合上、外されたようです。

余談ですが、いきなり合算値を取ろうと、get_hatebu_count();まわりのコードをみたのでけど、うまくいきそうな感じではありませんでした。リンク先ではなく記事のはてブをとってしまう。

記事上下に表示されているはてブですが、sns count cacheを使っている場合はそちらの値を拾ってくるようになっていましたね。sns count cacheを利用しているため、助かりましたね。sns count cacheは長らく更新されていませんが、Β版が公式からダウンロードできるようになっていましたね。

余談のめもが多くなりました。取得はokなので、あとは表示するだけです。

0の場合、表示しないためケースわけし、はてブの表示するコードを追加します。

  //取得した情報からブログカードのHTMLタグを作成
  //_v($url);
	if ($hatebu_count == 0) {

	  $tag =
	  '<a href="'.$url.'" title="'.esc_attr($title).'" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"'.$target.'>'.
	    '<div class="blogcard internal-blogcard'.$additional_class.' cf">'.
	      '<figure class="blogcard-thumbnail internal-blogcard-thumbnail">'.$thumbnail.'</figure>'.
	      '<div class="blogcard-content internal-blogcard-content">'.
	        '<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'.
	        '<div class="blogcard-snipet internal-blogcard-snipet">'.$snipet.'</div>'.
	      '</div>'.
	      '<div class="blogcard-footer internal-blogcard-footer cf">'.
	        $site_logo_tag.$date_tag.
	      '</div>'.
	    '</div>'.
	  '</a>';
		
	}else{

	  $tag =
	  '<a href="'.$url.'" title="'.esc_attr($title).'" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"'.$target.'>'.
	    '<div class="blogcard internal-blogcard'.$additional_class.' cf">'.
	      '<figure class="blogcard-thumbnail internal-blogcard-thumbnail">'.$thumbnail.'</figure>'.
	      '<div class="blogcard-content internal-blogcard-content">'.
	        '<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'.
	        '<div class="blogcard-snipet internal-blogcard-snipet">'.$snipet.'</div>'.
	      '</div>'.
	      '<div class="blogcard-footer internal-blogcard-footer cf">'.
	        $site_logo_tag.'<span class="hatebu">'.$hatebu_count.'user</span>'.$date_tag.
	      '</div>'.
	    '</div>'.
	  '</a>';

   }

$site_logo_tag.の後方に追加しました。

ちなみに、ブログカードにはてブに飛ぶリンクにいらないかな、と思って省きました。記事に飛んでほしいので。。そのあとはてブするか否かでいいかなっと。

最後にスタイルシートで装飾です。はてぶのスタイルシートは寝ログさんのサイトからそのまま拝借しました。

.hatebu{
    background-color: #FFD5D5 !important;
    color: #FF7979 !important;
    font-weight: bold;
    font-size: 12px;
    margin-left: 8px;
    padding: 1px;
}

WordPressで個別ページのはてブ数をPHPで取得する方法

以前、はてブAPIでwebサービスを作りたい全ての人に向けて書きましたという記事にはてブAPIの使い方がわかり…

nelog.jp

ありがとうございました。

ブログカードの外部リンクはblogcard-out.phpに記載があり、別コードのため、別途対応が必要です。とりあえず、外部リンクは対応していませんのでご了承ください。

コクーン(cocoon)のブログカードの色を外部リンクと内部リンクでわける

マウスオーバー時、外部リンクと内部リンクで色を変えてみました。

.blogcard-wrap{
	  background-color: #D9D0BE;
}

.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover{
	background-color: #c5c56a;
}

.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
	  background-color: #eebbcb;
}

アマゾンのブログカードを作る方法

別件になりますが、アマゾンもブログカードで表示できるようです。覚書程度に残しておきます。

楽天もAmazonアソシエイトも、たぶんTwitterなんかでシャアする短縮urlのアドレスがあります。

コクーンの場合、このアドレスを入力するだけでできあがります。コクーンはショートコードの設定もできますが、その機能とはまた別ものです。ブログカードの外部リンクで画像が出る機能を応用したようですね。素晴らしい発想ですね。アマゾンだけという場合も多いので、アマゾンだけならこの方が簡単ですね。

PA-APIを使えずとも手っ取り早くAmazon商品リンクを作成する方法

URLを貼り付けるだけで、手軽にAmazonアソシエイト商品リンクを作成する方法です。

wp-cocoon.com

新着記事だけではなく更新記事も表示できる

新着記事はウィジェットを追加すると、簡単に表示できますが、実は更新記事も表示できます。最近、更新記事も多くなっているため、この機能は素晴らしいですね。

テキストウィジェットを追加し、下記のコードを入れるだけです。

[new_list modified=1]

こうなります。

noteは振込はいつ!?遅い!?エクスポート機能なしでできない!?デメリットとメリット

2021.01.142026.02.02

vscodeでpandoc 3の使い方/商用利用やライセンスは?Re:VIEWとSphinxとの比較

2022.09.132025.11.12

Affinity Designer v2(アフィニティデザイナー)の書き出し(エクスポート)(ai/eps/svg/psd/png/pdf/互換性)

2021.09.032025.11.09

個人事業主の青色申告ソフトおすすめ!

2012.12.272025.10.28

freeeクラウド会計など対応税理士で安いのは!?

2017.09.302025.10.25

10件の更新記事を表示したい場合はこうですね。

[new_list modified=1 count="10"]

公式の使い方はこちらです。

新着記事一覧を表示するショートコードの利用方法

新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

wp-cocoon.com

さらに新着記事と更新記事に日付を表示します。ニュースサイトみたく。

/************************************
** 新着記事と更新記事に日付を表示
************************************/

.new-entry-card-date {
  display: block;
}

ebookbrainではフッターエリアに採用しています。

隠し機能ではないのですけど、コクーンにはいつのまにか実装されている機能が多いですね。実装スピードを早くて快適です。

コクーン(cocoon)導入でプラグイン不要になるもの

Classic Editor

実はClassic Editorもいらないのですよね。wpのプラグインがあるのにもかかわらず、ここまで対応してくれるのは素晴らしいですね。

Cocoon 設定 > Cocoon 設定 > エディター > Gutenbergエディターを有効にする

Gutenbergは別サイトで少し使ったのですが、あっさりと辞めました。

htmlで執筆することに何の抵抗もないため、せめてそちらでも使いやすくしてほしかったです。

Table of Contents Plus

Cocoon 設定 > Cocoon 設定 > 目次

ただし、目次の途中に飛ばしている記事がある場合、アンカーリンクが変わります。その場合、あえてTable of Contents Plusを使い続ける方法もあります。

Table of Contents Plusもコクーンもウィジェットでサイドバーに目次を表示することもできます。テーマsango風に使うこともできるのです。

Display WidgetsやWidget Options

cocoonでは、ウィジェットごとに表示・非表示の切り替えができます。この機能は昔から重宝しており、何気に便利です。

WordPressのプラグインにもあります。Display Widgetsはマルウェア問題がでていましたので、その代替にWidget Optionsがありました。

これらのプラグインはcocoonでは使う必要がありません。

WordPress Popular Posts

昔のSimplicityは、WordPress popular postsをインストールして人気記事を表示していました。しかし、WordPress popular postsは処理負荷の高いプラグインのためか、独自実装になりました。

しかも、カテゴリごとの人気記事、pvの集計もできるところは大きいのではないでしょうか。個人的にカテゴリ別人気記事は必須でした。

sangoやSWELLでカテゴリ別人気記事を表示する場合、WordPress popular postsやその補佐プラグインWPP Plus Widgetを使う必要があります。

リダイレクトのプラグイン

たまに利用していたリダイレクトのプラグインがいらなくなりました。

プラグインいらずでcocoonには投稿記事にリダイレクトurlがあります。古い記事を削除した場合に新規記事にリダイレクトできます。

たぶんこの機能を組み込んだのでしょう。

投稿・固定ページにリダイレクト機能を設置するWordPressカスタマイズ方法

WordPressサイトを運営していて、たまにこんなことがあります。 この投稿の内容はもう古いので、別の効果的…

nelog.jp

この機能も本来はプラグインやコードを組む混むなどの実装が必要です。cocoon以外のサイトでは上記のコードが役立ちます。

プロフィール関連のプラグイン

プロフィール関連のプラグインがいらなくなりました。

ユーザー > あなたのプロフィール > プロフィール画像のアップロード

必要に応じてプロフィール情報とsnsの設定します。あとはウィジェットを設定するだけです。

プロフィール画像やプロフィール情報、SNSページを設定する方法

Cocoonでは、記事の投稿者ごとにプロフィールを設定することが可能です。また、自前のプロフィール画像設定機能も保持しており、手軽に設定できるようになっています。

wp-cocoon.com

なお、このプロフィールの設定はコメントまわりの画像も同時に変更してくれます。

昔のコメント欄が自分が指定した画像にならない場合、2つの原因が考えられます。メールアドレスとipの情報が必要です。

コメントにWordPressのメールアドレスが入っていない場合、解決方法は簡単で、編集でメールアドレスを入れると表示されるようになります。

ipアドレスが消えているなんていうケースあるの？なんて思う人もいるでしょう。実は無料ブログからWordPressにツールなどで引っ越した場合、すべての情報が引っ越しされていない場合があります。ipアドレスが消えていることがあり、この場合、画像が表示されません。無理やり解決するなら、同じコメントを追加して日時をあわせるぐらいしか解決方法が思いつきませんね。。

AddQuickTag

Cocoon(コクーン)用というよりCocoonに乗り換えた際にAddQuickTagを辞めました。どうも管理画面のuiがあまり好きじゃなかったので。。またコードで簡単に実装できるため、プラグインをひとつ減らしておこうかな、という感じです。

「AddQuickTag」は使わず、現在はfunctions.phpだけで対応しています。

実はCocoonもこの仕組みを使っています。Cocoonの場合、個人的に使わないタグもあるため、もともと利用されているadd_quicktag_to_text_editorをオーバーライドして必要なタグのみ表示しています。このようにするとかなりすっきりとします。

// クイックタグを追加
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
  if (wp_script_is('quicktags')){
    // テキストエディタに追加するスクリプトを書く
  }
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );

スクリプトは以下のようになります。不要なタグを削り、必要なタグを追加しました。だいぶすっきりとしました。

/****************************************
	クイックタグを追加
****************************************/

if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
  if (wp_script_is('quicktags')){?>

    <script>
      QTags.addButton('qt-h2','h2','<h2>','</h2>');
      QTags.addButton('qt-h3','h3','<h3>','</h3>');
      QTags.addButton('qt-red','赤字','<span class="red">','</span>');
      QTags.addButton('qt-bold','太字','<span class="bold">','</span>');
      QTags.addButton('qt-marker','黄色マーカー','<span class="marker">','</span>');
	  QTags.addButton('qt-red-under','赤色マーカー','<span class="red-marker">','</span>');
	  QTags.addButton('qt-pre','pre','<pre class="css">','</pre>');
      QTags.addButton('qt-information','補足説明(i)','<div class="information-box">','</div>');
      QTags.addButton('qt-question','補足説明(?)','<div class="question-box">','</div>');
      QTags.addButton('qt-alert','補足説明(!)','<div class="alert-box">','</div>');
      QTags.addButton('qt-alert','いいねボックス','<div class="good-box common-icon-box">','</div>');	
      QTags.addButton('qt-alert','悪いねボックス','<div class="bad-box common-icon-box">','</div>');	
      QTags.addButton('qt-tw-profile','twitterプロフィール','?lang=ja','');
      QTags.addButton('qt-new-window','新ウィンドウ','target="_blank" rel="noopener"','');
    </script>
  <?php
  }
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );

スクリプトを追加するとき、phpの括弧の記述を忘れないようにしましょう。

参考記事です。simplicityの記事なのでコクーン用に自分仕様に書き換えました。

functions.phpに追記する形でテキストエディタにタグ挿入クイックタグボタンを追加した場合

パンくずリスト(Breadcrumb NavXT)

設定にありました。楽チンです。

Cocoon 設定 > Cocoon 設定 > 投稿 > パンくずリストの配置

• 表示しない
• メインカラム手前
• メインカラム
• トップメインカラムボトム（デフォルト）
• フッター手前

メインカラム手前とフッター手前は全幅で表示されてしまいます。あと上すぎ下すぎな気がします。

メインカラム手前にしました。

今まではBreadcrumb NavXTを使っていました。

Breadcrumb NavXT

訪問者に対し現在地へのパスを表示する「パンくずリスト」ナビゲーションをサイトに追加します。

ja.wordpress.org

コクーン(cocoon)導入後に追加した(残った)プラグイン

WP Fastest Cacheは残した

Cocoomには高速化の設定がありますので、それはそれでやりましょう。

しかし、WP Fastest Cacheにしかない設定もあるため、残しました。サーバーからのレスポンスが遅くなった場合、役立ちます。gzipの圧縮などは効きます。

Cocoonと設定がかぶらないようにしましょう。Cocoonで高速化の設定をした場合、html、css、js、ブラウザキャッシュの設定は抜いても問題ありません。

SyntaxHighlighter Evolvedからhighlight.jsに乗り換え

コクーンはhighlight.jsを採用しています。素晴らしい。

Cocoonは初心者に使いやすいテーマですが、わりとWordPressを使い込んでいる人にも嬉しい機能がもりだくさんです。

highlight.jsはすでに他のサイトで導入していたため、乗り換えることにしました。

Cocoon設定 > Cocoon設定 > コード > ハイライト表示をチェックいれるだけです。

[code]→<pre>
[/code]→</pre>

に置換が必要です。置換しないと表示がおかしなことになります。。

正規表現が苦手な人は正規表現は使わず、Search Regexで単純に文字列検索で2回置換すればOKです。

他の言語もこんな感じで置換していきます。そんな数は多くないですけどね。

[php]→<pre class="php">
[/php]→</pre>

[css]→<pre class="css">
[/css]→</pre>

html <pre class="html">
/html </pre>

Search Regexは文字のエスケープ処理は勝手にやってくるようです。

WordPressならこのぐらいですね。

[csharp]→<pre class="cs">
[/csharp]→</pre>

[cpp]→<pre class="cpp">
[/cpp]→</pre>

c言語ならこんな感じ。

class名はgithubのSUPPORTED_LANGUAGES.mdを参照。

highlight.js/SUPPORTED_LANGUAGES.md at main · highlightjs/highlight.js

JavaScript syntax highlighter with language auto-detection and zero dependencies. - highlightjs/highlight.js

github.com

公式リファレンスはこちらです。

Highlight.js Documentation — highlight.js 11.9.0 documentation

highlightjs.readthedocs.io

SyntaxHighlighter Evolvedはいらなくなり、またひとつプラグインが減りました。highlight.jsの方が見た目が格好いいのですよね。

highlight.jsからHighlighting Code Blockに乗り換え

コードブロックはファイル名が指定できる形で自力実装だったのですが、グーテンベルクに移行した際に、グーテンベルク対応、行数表示、指定行数指定、コピー、ファイル名指定などほしい機能が一通りあったため導入しました。htmlをアンエスケープしないのも便利

Highlighting Code Block

prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。 (Gutenberg とクラシックエディター共に利用可能)

ja.wordpress.org

プラグインをアンインストールしても、一応、コードブロックの形は残るのも決め手でした(事前に削除したことまで考える方なので)

Cocoonのコードブロックは2.03で廃止されてWordPressのコードブロックを使うよう促されていました。

Cocoonに導入する際はやや注意が必要です。

設定 > Cocoon設定 > 高速化 > JavaScript縮小化 > prism.js

行数が表示されないバッティング問題は以下の対処。

設定 > Cocoon設定 > コード > 行番号表示のチェックを外す

コクーン(cocoon)のSEO対策

カテゴリページをnoidex

なぜかカテゴリページに順位がついてしまう問題があった。

ただし、カテゴリページはそんなに順位があがらずむしろさがる。幸いcocoonにはno idexの機能がついていたため対応した。

設定 > Cocoon設定 > SEO > カテゴリーページをnoindexとする

タグはデフォルトでno indexになっていた

お役に立てば幸いです。

画像の最適化などいうほど変わりませんね。。WebPもios13は対応していません。画質を取るか速度を取るかのトレードオフになってしまいます。

だから、まず改善すべきはJavaScriptです。JavaScriptが原因になっていることがほとんどです。

個人的にテーマはこのサイトも含めてCocoonを使っているサイトが多いですが、sangoやswell、jinも同じでしょう。

WordPressが重い原因と改善【CocoonのJavaScript編】

Cocoonは高速化設定である程度最適化されているため、記事などに埋め込んだものが原因になりやすいです。

今回、最も効果があったのはTwitter系です。

PageSpeed Insightsが劇的に改善するTwitterのタイムライン

サイドバーにタイムラインを表示している場合、そのウィジェットを削除すると、

PCもモバイルもPageSpeed Insightsが劇的に改善します。

<a class="twitter-timeline" data-height="500" data-theme="light"
data-link-color="#2B7BB9"
href="https://twitter.com/account?ref_src=xxx">
Tweets by name</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>

• モバイル 37→77
• PC 53→99

このサイトはこれだけでOKと思ってしまいました。。

PageSpeed Insightsが改善するツイートの埋め込み

新規ページを用意して、ツイートの埋め込みがある箇所をがっつりと削ってそちらにコピペで一時退避させます。あとから戻せばOKです。PageSpeed Insightsが改善されたらツイートの埋め込みが原因です。

このスクリプトは全削除した方がよいです。

<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

少し埋め込んだ時期によってコードが違うようです。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

詳しい人は正規表現を使ってもいいですし、2回置換してもよいです。

今回、Search Regexで置換しました。使い方はこちらです。

404 NOT FOUND | ebookbrain

ebookbrain.net

ただし見た目が引用になってしまいます。。

1つだけ残すという方法も書いてありましたがあまりよくありません。個人的にはツイートの埋め込みが多い記事だけは次のコードを使わせてもらうことにしました。

【Twitter埋め込みした際の表示速度低下について】
以下の記事を参考に、カスタムHTMLで埋め込んだツイートの下にJSのタグを追記すれば改善します。
僕はこれで表示速度が48→83に改善しました。
最後の「/* Your code… */」はコメントアウトされないので、削除すればOK。https://t.co/9afGBrAOSJ

— まっと | 仮想通貨ブロガー (@mattblog_crypto) October 16, 2022

↑このツイートはあえて引用のままにしています。リンク先のコードを挟むと見た目がついて元通りになります。

そのまんま拝借しました。ありがとうございます。

たぶん元ネタはこちらで公式のコードを改変した形になりますかね。

X Developer Platform - X

Build with X's real-time data and APIs

developer.twitter.com

Cocoonの場合、投稿のカスタムJavaScriptに埋め込めばいいだけなので楽です。

多少重たくなるので、画像ツイートじゃなければこのコードもいらないかな。

あとはできるだけツイート数を減らす、記事を分割すると軽くなります。

どこまで許容できるかは各々違うかもなので自分の落とし込みどころを決めるとよい気がします。

WordPressが重い原因と改善【Cocoonの画像系】

画像は減色、圧縮することがおすすめです。意外と背景などが原因になりますね。

Google PageSpeed Insightsモバイルでは100kbpsを超えていると、結構もんだいになりやすいです。個人的にもともと圧縮していたため、それほど致命的ではありませんでした。

ただ1200ピクセルはアイキャッチだけかなという気もしました。Google砲狙いは1200なんですが、同じGoogleのPageSpeed Insightsにダメ出しをくらうジレンマを抱える感じです。

今後の記事は700に戻そうかなっと。

次世代フォーマットはGoogleが作ったWebPですが、iOS13は対応しておらず14以降です。個人的にテスト的に導入しましたが、そこまで効果を感じられなかったので、しらばく保留にしました。

WordPressが重い原因と改善【レンタルサーバーを変える】

サーバーの応答までの時間もあります。

ここはレンタルサーバーを変える方法があります。

エックスサーバーの場合、新サーバー簡単移転機能があります。

「新サーバー簡単移行」機能とは、旧サーバー環境（サーバー番号がsv1～sv13000.xserver.jp)をご利用のお客様が、「データコピー」「確認」「移行」の3ステップのみでより新しいサーバー環境へ簡単に移行することができる機能です。

https://www.xserver.ne.jp/manual/man_order_servertransfer_intro.php

この機会にxserverに乗り換えるのも手ですね。

格安レンタルサーバー!ワードプレスにおすすめで安いのは?【過去トラブルで比較/コスパ重視の最安は!?】

Wordpressのレンタルサーバーのおすすめで安いのはどれでしょう。単にスペックを比較するのではなく、今までいろいろなトラブルも経験しましたので、そのあたりを踏まえてメリット・デメリット、 過去に起きたトラブルなども紹介していきます。20

ebookbrain.net

1user

WordPressが重い原因と改善【プラグイン】

プラグインが原因になっている場合もあります。逆に高速化の手助けをしてくれるものもあります。

詳しくは以前書いたこちらの記事をみてください。

効果が高いキャッシュ・高速化のWordpressプラグイン徹底比較、おすすめはどれ！？

Wordpressの高速化をはかるために、必要な知識とWordpressのプラグインをまとめておきます。キャッシュのプラグインといえば、とにかくトラブルが多い！画面が真っ白になったり、500のサーバーエラーがでたり…。そのためプラグインを選

ebookbrain.net

10user

WordPressが速度が改善されたか調べる方法

GTmetrix

どのぐらい高速化をはかれたのか、速度のチェックするツールは多数でています。GTmetrixあたりが使いやすく有名です。

こちらではそれほどひどい値はでないかも。

GTmetrix | Website Performance Testing and Monitoring

GTmetrix is a free tool to test and monitor your page's performance. Using Lighthouse, GTmetrix generates scores for you

gtmetrix.com

Google PageSpeed Insight

ほかには、Google PageSpeed Insightsなどがあります。Google PageSpeed Insightsはモバイル(スマホ)とパソコンがわけて測定できるのが特徴です。Googleならではの安心感もあるかもしれません。

モバイルはかなり厳しい値がでやすいです。

ゴリゴリ削っていく感じになりやすいです。。

PageSpeed Insights

developers.google.com

Test my site

同じgoogleのサービスに、モバイルサイトの速度をテストをするTest my siteがあります。PageSpeedのモバイル値が遅くても、こちらで速ければそれほど悲観する必要はないかもしれません。

How speeding up your mobile site can improve your bottom line

Google's Official Digital Marketing Publication. Discover helpful mobile tools and resources to optimize your site or ap

testmysite.withgoogle.com

PageSpeedとTest my siteは、同じgoogleのサービスでも別サービスなので結構違います。

実機でテストする際に注意すること

実機環境で体験するのが1番よいです。

高速光回線でつなぐとなんとなく大丈夫だと思ってしまうため、つながない方がよいです。

PCでやるとあまり気付かないことが多いためスマホのWifi環境や格安simでやるとよいです。光回線があっても光回線を使っている人ばかりではないので。。5GのWiMAXも早いのでNGです。

格安simなどできる限り劣悪な貧乏環境を用意しましょう。

大事なのは貧乏人になりきることです。おすすめの回線はこちらです。

【比較】IIJmio/イオンモバイル/日本通信bモバイル/HISモバイル【どっち】

最安級の格安simはどこなのか調べました。【比較】IIJmio/イオンモバイル/日本通信bモバイル/HISモバイル【どっち】企業メリットデメリット値段回線HISモバイルesim対応上限設定機能データ追加が安いLineの年齢認証不可。データの

ebookbrain.net

Google PageSpeed Insightの各項目の対処方法

オフスクリーンの画像遅延読み込み

この項目はCocoonの高速化設定をすれば解決です。

ご参考になれば幸いです。

また、Amazonの本や楽天ROOMもPRが必要なの？みたいなところも調査しましたよ(最後の見出しに)。よかったら参考にしてください!

Cocoonで一括で楽々PRタグ挿入!(ステマ規制法対応)

全ての記事に入れたい場合

全体に入れたい場合はウィジェットに仕込んだ方が楽そうですね。カスタムHtmlに次のコードを入れます。cocoonには記事下という箇所があります。

<span style="font-size:12px">当サイトには広告が含まれています。</span>

(追記)CocoonにもまとめてPR表記する設定が追加されてました。

Cocoon > 広告 > PR表記設定

• 自動挿入ページ：「全ての投稿ページ」にチェック
• 自動挿入エリア：「メインカラム左上（小）」はチェックされている
• 表示テキストのテキスト（小）：「記事内に広告が含まれる場合があります」など文面を書き換える
• 除外カテゴリー：必要に応じて設定

小さいPRは次のCSSで調整可です。

.pr-label-s {
}

カテゴリごとにPR表記を切りたい場合

CocoonにもPR表記の機能が追加されたようです。

Cocoon > 広告 > PR表記設定

サイトによってはカテゴリまとめて除外設定が便利そうです。

カテゴリでまとめて除外設定

https://wp-cocoon.com/pr-label/

ただ、うちの場合はカテゴリごとでもないのですよね。Cocconの設定は広告が多いことが前提になっているようです。

雑記ブログで記事により変えたいけど一括挿入したい場合!記事ごとに表記を変えたい

うちの場合は広告記事の方が少ないためこのタイプです。

一括でPRタグをしこむ方法は次のような方法があります。

• 記事に冒頭に単純にはさむ → 手作業で時間がかかる
• beforeなどCSSの疑似要素使う → 分岐が必要
• カスタムフィールドやJSなどで追加実装 → ほんの少し難易度がある
• タグを使う → 記事ごとに分別しやすいし楽

タグなら一括で仕込めるし、楽かなと思いました。5分でタグに決定!

1. WordPressの投稿記事でキーワード検索する(もしくは漏れがなくやりたいのならカテゴリごとに絞って検索してPRをいれていけばよいです。広告が多いカテゴリからやるとだいたいの対応がはやいです。)
2. チェックして一括編集する

チェックボックスを入れる > 編集の[適用] > PRとタグを入れる >更新

Cocoonの設定で記事上にタグを表示すればおしまいです。

Cocoon設定 > 投稿

• カテゴリー・タグ表示：タグのみ
• カテゴリー・タグ表示位置：本文上、タイトル上

画像の上にしたい場合は少しカスタマイズが必要そうです。

サンプルです。1つでもASPから掲載依頼があったものはPRとしました。

電子書籍の雑誌読み放題/漫画サービスサブスク比較、月額/定額おすすめは?(2024年度版)

電子書籍の漫画や雑誌読み放題サービス比較していきます。月額/定額で安いおすすめはどれでしょう?電子書籍読み放題比較、ランキングではなく漫画数や雑誌数/タイトルで決めよう！電子書籍読み放題サイトを比較していきます。根拠のないランキングではなく

ebookbrain.net

タグならいくつかバリエーションを用意することもできます。他は「広告は含まれているけど、広告主は内容の一切関知していない」としました。

アフィリエイトの場合、広告主から修正依頼などを一度も受けたことないものですね。全承認の広告はこちらが多いです。審査があるものは広告主とやりとりが発生する場合も多く、PRになるものが多いです。

こちらは別バージョンのサンプルです。

【評判】Linemoの申し込みから開通まで(エントリーパッケージは?)

Linemoに乗り換えたので、Linemoの申し込みから開通までのリアル体験談です。mnp転入でミニプランに乗り換えました。スクショつきで解説します。linemoは最近20GBから30GBに変更になりました。詳しくはこちらをみてください。L

ebookbrain.net

雰囲気もSwellと一緒です。

Swellで一括で楽々PRタグ挿入!(ステマ規制法対応)

Swellはそれ専用の機能がありましたね。

このサイトはCocoonですけど、Swellも買って他のサイトで使っています。

カスタマイズ > 投稿・固定ページ > PR表記

投稿記事のクリック編集からも変更できるようです。一括編集からはできないようです。「クリック編集」のボタンを押してください。個別記事の対応はできますが、カテゴリは1つずつやらないため、少々面倒です。

SwellのUIはわりとわかりやすくていいですね。プログラミングをかくためコードブロックを表示するプラグインにもお世話になっています。

デメリットがないのかといえば、カテゴリ別の人気記事がないですね。雑記ブログではカテゴリ別人気記事が個人的で必須で…。

ステマ法規制景品表示法のアフィリエイト

「アフィリエイト広告」、「広告」、「宣伝」、「プロモーション」、「ＰＲ」等をいれろという広告主から依頼があったものだけ先に対応しました。

いわゆる情報商材を筆頭にマーケティングがヤバいのでステルスマーケティング規制しましょう景品表示法は、それ自体は別にいいと思いますけど若干対応が面倒という感じですかね。あと、個人的に広告なんてみればわかるので…ついてもつかなくても変わらないから意味がない…。

mybestはPRを表示しないらしい

mybestのランキングはほとんど参考にならないので、1ユーザーとしてはもうだいぶ昔から見るのを避けているサイトです。内容はたまにみるけどやっぱダメ…。僕ならそのランキングには絶対にしない、詳しい分野であればあるほどそう思います。その反面、価格コムは検索で絞り込めるため使います。

その余談はともかく、このチャレンジングは頑張ってほしいなという気がします。

ステマへの対応方針を明確化する「広告掲載ポリシー」公開https://t.co/vdVB4exC04

mybestはPR表記しないらしい。

その理由は

— SEO業界のパパラッチみう (@creditcardmiu) September 17, 2023

そして、その理屈でいうとコンテンツ主体で広告主に左右さないサイトもわんさかありそうですね。うちのサイトももちろんそうです。(*´ω｀)

マイベストさんのプレスリリース。10/1開始のステマ規制に向けて、各社続々とポリシー改定の動きを見せています。

・コンテンツの決定・制作はすべてmybestが自主的に行っています⁰・広告によって順位、内容は改変されません⁰・広告コンテンツにはPR表記を明示していますhttps://t.co/EZF6r0tvRZ

— 薬事法ドットコム【公式】 (@LLP_yakujihou) September 8, 2023

うちもコンテンツの決定・制作はすべてithandが自主的に行っています。

広告によって内容は改変されません、

個人的には広告のありなしで個人的なおすすめは変わらないという感じで昔からブログを運営しています。ASPから相談をうけても順番は変えるけど、文章(中身)は変えないよ！と。

mybestと違うのは、うちのサイトはランキングにしないから順番には特に意味がない。そもそもランキング系のサイトは根拠に乏しく、よくない気がしますね。ランキングより一長一短、人によってケースバイケースなので比較でしょうと!

情報弱者でない人ほど、ランキングなんか安易なサイトはみず比較検証しているサイトを探すはずです。

たとえば、うちは他のサイトはWiMAXをおすすめしているのはアフィリ報酬が多いだけなので、ソフトバンクのsimの方がいいですよとか教えていますし、プログラミングスクールからUmdeyの誘導もバッチりしています！まあ全否定はしないけど、基本Udemyでいいやん（｀・ω・´）うちみたいなサイトはレアですよ。

だから、他のサイトと結論がぜんぜん違うと好感触を持たれてコメントをもらったこともあります。

mybestの件、アフィとPRはまた違うからPRタグつけるのは違う気がするんよなぁ
もし本当に検証してあのランキングならリンクにはアフィリエイトリンクも含まれます的な注釈があれば十分では
どちらかと言うと気になるのはランキングの根拠の方

— ShoM (@ms___1027) September 19, 2023

ランキングはですね、人によって考え方、価値観が違うから無理がある気がしますね。そもそも論の話。僕はプログラミングをするため、わりとロジカルな方です。ライブラリや開発環境などで人のものを参考にすることがありますけど、できるだけ思考や思想が似ている人で一歩先にいっている人を参考にしますね。もちろん人と違う価値観も得るものはあるんですが、全体的に自分の意思決定するときは違うかなとなりやすいです。そもそも価値観があっていない人のランキングはどこまでいってもはまらないわけです。ピンとこないわけです。

僕がランキングというキーワードを使うときは、この広告が売上が高いのかな程度にしか参考にならない。自分が買い物をするときはランキングというキーワードは一切使いません。だからmybestとも相性がよくない＞＜

とりあえず、個人的にPRがつけるつけない程度でもめたくないありません。小さな問題なので。ASPや広告主から依頼があったものと掲載依頼があって掲載したものは全対応してます。

景品表示法もぼかして書いてあるので、

以下の実態を踏まえて総合的に考慮して判断します。

https://www.caa.go.jp/policies/policy/representation/fair_labeling/assets/representation_cms216_200901_01.pdf

リンク先の資料をみてもらうとわかりますが、消費者庁が曖昧なところがあっていまいちこのケースはどうなのみたいなのあるんですよね。まあ、そのうちわかってくるでしょう。

広告主の意向に判断されず主体的に行っているのかなら該当しませんし、Amazonのギフト件や楽天ポイントを1円でも受け取っているのがダメならうちのサイトでも該当します。ただ商品提供の方が受け取る金額が大きい場合もあります。ただ、商品提供はPR案件に該当しないらしいです。

このような曖昧な表記が混乱させるもとなのですよね…。

該当しないケースは以下のようなものがあるらしいです。

・事業者が、インフルエンサー等の第三者に無償で商品又は役務を提供してSNS等への投稿を依頼するものの、インフルエンサー等の第三者が自主的な意思に基づき表示（投稿）する場合

事業者が第三者の口コミなどを利用する場合であっても、良い口コミだけを抽出せず変更を加えることなく、
そのまま引用する場合

https://www.caa.go.jp/policies/policy/representation/fair_labeling/assets/representation_cms216_200901_01.pdf

うちのサイトは悪い口コミもピックアップしますね…。

mybest(マイベスト)のステマ規制の方針は無理!?Amazonの本もPR表記必須?(追記)

新しい情報が入りました。(´・ω・｀)

mybestぐらい大きなサイトなら直接、消費者庁に確認を取っていると思っていたのですが、Twitterをみるかぎり、どうやらそうではなかったらしいです。

こちらのサイトが参考になりました。詳しいことはリンク先をみてください！こちらの方は直接確認したっぽいですね。

Q3：例えば、Amazonで買った商品がよくて、そのAmazonページへの商品リンクをアフィリエイトとして貼るなどの場合も記載は必要か。

A：アフィリエイトであれば記載は必要となる。

Q4：一部の事業者において事前に行った独自調査の記事に対して、事後的にアフィリエイトを貼るのであれば、PRが不要としているが

A：事前・事後などは関係なく、間接的にでも事業者から報酬を得るのであればPR表記は必要となる。そういう法改正です。

https://suan.tokyo/myrule/#toc6

仮にこの通りであれば、mybestさんもまだ時間もありますし表記するのではないでしょうか。

これなら価格コムさんも表記しないといけませんね。

口コミサイトも表記しないといけませんね。

しかし、この問題は楽天ポイントを1ポイント、Amazonギフト券を1円でももらったら、PRの表記は必須と肝心な文章が抜けていた消費者庁の資料の作り方がそもそもよくなった気がしますね…もう根っ子の問題。また、1万円の商品をもらっても広告表記しなくてもいいけど、1円でももらったら広告表記しなきゃいけないゆがんだ側面があります…。

実態を踏まえて総合的に判断するとか曖昧なこと書いてあるんだもん！そんなこと書いたらいいように解釈するよ。このあたりがお役人仕事という気がしますね…。

つまり、上記でいうと、WebメディアもYouTubeも全部広告だよ！っという結論になりますね。お金が絡んでリンクがあるものはほぼすべて広告。少なくとも現在のGoogleのアルゴリズムは検索順位１位～10位はほぼそういうサイトしかでてきません！！

つまるところ、Google大丈夫なの?大手の低品質の記事多いよ…避けているサイトあるので…。最近個人的にGoogleの利用率も下がっています…。ドメインごと一切でなくなるChromeの拡張があるのでよかったら使うとよいかもです。Googleがクオリティ管理できなくなっているため、メインのPCでは実は使っています。(´・ω・｀)。

ただ、全部広告ならどこも差がでないから、消費者にWebのリンクは全部広告と徹底的に教えこむでもいい気にしますね。だって対応がブロガーさん大変でしょう。個人的にもPRのありなしで情報の判断なんかしませんからまったく役に立ちませんし、基本的にこんなことで時間を使いたくありません。…広告主やASPの配慮だけです。なんかお役所の仕事って抜本的な解決になっていないことが多いのですよね…。

うちはプログラミングの技術記事なども大変多く、全部の記事がAmazonの広告などではありません。このようなサイトは対応が厄介なのですよね。Amazonの本まで対応するとなるとひたすら面倒です…(´・ω・｀)。

とはいえ一括挿入はできますので、前半の記事をご参考にしてくださいね。

専門家ではないので、参考程度にお願いします。

PR!ブロガーさん、x(Twitter)利用者さん向けのツールをリリース!

最後にブロガーさん向けのツールを最近リリースしましたので、PRさせてもらいます(*´ω｀)。WordPressの記事や自分で作った文章、画像、動画をX(Twitter)に予約投稿できますよ。

詳しくはこちらの記事をみてください。

【比較】2024年twitter bot(X)の作り方(スプレッドシート)

スプレッドシートを使ったTwitterの自動投稿を提供しています。1つは2019年頃、販売を開始して今でも使えるもの(長年の実績とも言えますかね)。もうひとつ、Twitter API騒動があったのち、しばらくしたのち開発に着手してリリース。

ebookbrain.net

さっさと終わらせて、アプリのプロジェクト何本か抱えているため、そちらに専念します。Googleは検索エンジン部門はもはや微妙だけど、Googleのサーバーはなかなかよさそうです。firebaseに続き、AWSはやめてGCPの導入を進めています！（｀・ω・´）

ご参考までに。

【比較】SWELL/stork19/JIN:R/sango/Cocoon【テーマの感想レビュー】

差がでやすい機能と個人的に重視する機能で比較しました。

個人的にプログラミングをかきます。ブログカードは作ったことありますが外部リンクの方が実装が難しいため、そのあたりチェックですね

「プラグインで編集した特殊なパーマリンク」や「外部リンク」には未対応となっております。

https://jin-theme.com/manual/blog-card/

人気記事は意外と大事です。WordPress popularpostsというプラグインは重いことで有名だからです…。サーバー管理会社が注意が入った人もいるようです。

jin買おうとしたら、新しくjin:Rなるものが出ていて、どっち買おうか調べてたらSWELLの方がjinよりスマホ表示速度がかなり早いと言う記事が出てきて、お金ある人はどっちも買うんだろうな。と思いつつ

— こんふれ (@dskcpac1) September 28, 2023

現在、個人的にいろいろ検討してSwellとCocoonを使っています。Cocoonはバリバリとデザインをカスタマイズできる人ならいいかもです(このサイトはCSSやPHPでバリバリとCocoonを手入れしている)けど、今はSwellの方が楽かもです。

SANGOはデザインが好きなのですけど、ブログカードがショートコードなのが嫌でSwellやCocconをややSANGO風にしています。SANGO風にするのはそれほど難しくありません。Sango風のデザインにするには、サイドバーのプロフィールボックスとシェアボタンを変えればわりとっぽくなります。あとは人気記事は正方形を選び、アイコンボックスをつけるかぐらいですかね。アイキャッチ画像はっぽいものを購入します。

SwellやCocoonはURLを記入するだけでブログカードになります。

高速化などプログラミングの基盤がしっかりとしたものを選ぶことをおすすめします。デザインは自分にやるにしてもそれほどスキルいりませんし、外注するにしても安上がりだからです。

SWELL

UIもそれなりによく、ブロックエディターにこだわりをもたれて開発されているようです。Swellを買って使っています。

SWELL

• シンプルなデザインですが、使いやすいものなので、ある程度デザインがすぐに整います。
• 人気記事などは正方形のデザインも可能です。
• 利用者が多くて情報が豊富です。
• 複数サイト使えて買い切りです。

次のような高い機能性をもっています。

• 高速化の機能がついています。
• 波の映像が印象的ですが、トップページは動画をいれこんだり、画像のスライダーをつけたりも簡単にできます。
• PC・スマホともに固定バーにできます。

SWELL

Swellの購入体験談はこちらです。

【評判】SWELLのセール!安く買う!WordPressののテーマ! | ithands

SWELLを購入してこのサイトで使っています。 カスタマイズもまだ道半ばでこれからどんどんカスタマイズしていきます。 ワードプレスSWELLの評判 UIもそれなりによく、ブロックエディターにこだわりをもたれて開発されているようです。Swel

www.ithands.dev

コードブロックなどのプラグインも開発されており、個人的にはそちらでもお世話になっています。個人的に別サイトで使っています。

オープンケージ【ストーク（STORK）、ハミングバード（Hummingbird）、スワロー(SWALLOW)、アルバトラス(Albatros)の違い】

オープンケージはストーク（STORK）、ハミングバード（Hummingbird）、スワロー(SWALLOW)、アルバトラス(Albatros)などのテーマを販売しています。

OPENCAGE（オープンケージ）

各々の違いは次のとおりです。

他にもアルバトラス(Albatros)があります。

ブログ初心者のおすすめテーマ

SANGO
ストーク
THE THOR

無料テーマだと物足りないと感じる方はググってください。

しっかりSEO対策もされていて、デザインがプロ並み😌

ちなみに僕のブログはストークです。

— たんころ@VIog /ブロガー (@tankoro1021) October 5, 2019

かなみさん、お待たせしました( ◠‿◠ )

テーマと優しいデザインがマッチしてますね☺️🌸
ストークの柔らかい感じとも相性良さそうです🥳

KWボリューム、見出し構成なども素晴らしいと思います😌

さすが100記事超えの貫禄😏✨
ここまで継続できてることが既に凄い！！

僕も見習います🙌💦

続く

— えがちゃん@ブログ終了まで60日 (@muscle__movie) April 20, 2020

柔らかいイメージです。

僕のは地味にカスタマイズ結構やってるので、むずいですよね（スミマセン）

でもストークも良いテーマなので、おすすめですよ！

— マクリン (@Maku_ring) December 26, 2019

わりと有名なブロガーさんみたいですよ。その方も使っています。

OPENCAGE（オープンケージ）

ザ・トール

ランキングサイト・口コミサイト、絞り込み検索などが簡単に作れるようです。

THE THOR（ザ・トール）

アフィリエイターやオウンドメディアに人気のようです。

THE THOR（ザ・トール）

JIN:R（ジン)

JIN（ジン）はアフィリエイターのひつじさんが作られたテーマのようです。プログラミングの技術者は別途いるようです。

(追記)JIN:Rというテーマがでました。高速化の設定が見直されて記事販売ができるようですね。

けど、JIN（ジン）は使っておられる方は多いようです。

ひつじさんの公式Twiteerです。

https://twitter.com/hituji_1234?lang=ja

twitter.com

プログラミングをされている赤石さんの公式Twitterです。

https://twitter.com/cps_kazuya?lang=ja

twitter.com

sango

sangoはcssなどのwebサイト制作情報を配信しているサルワカさんが制作したテーマです。

sangoの口コミをみてみましょう。

WPテーマ
Luxeritas -> JIN -> THE THOR（すぐやめた） -> JIN -> SANGO

— しょたすて (@ShoTastemaker) May 6, 2020

GWに「ブログを始めたかったけど、忙しかったし、明日1日だけで、時間もないしな」

そんな人に朗報です

サーバーのConoHaWINGを年契約にする

ConoHaWINGにあらかじめ用意されてるWordPressのテーマCocoon（無料）かSANGO（有料）を選ぶ

数時間でブログ完成！

もちろん手続きの入力は必要

— カズ (@kazunocoto) May 5, 2020

sangoはレンタルサーバーのConoHaWINGさん提携しているのですね。cocoonも提携しています。

レンタルサーバーの比較記事はこちらです。

格安レンタルサーバー!ワードプレスにおすすめで安いのは?【過去トラブルで比較/コスパ重視の最安は!?】

Wordpressのレンタルサーバーのおすすめで安いのはどれでしょう。単にスペックを比較するのではなく、今までいろいろなトラブルも経験しましたので、そのあたりを踏まえてメリット・デメリット、 過去に起きたトラブルなども紹介していきます。20

ebookbrain.net

1user

公式Twitterはこちらです。

sango

SANGOの開発者は変わっていますね。

2021年1月〜SANGOの開発の主担当が catnoseからsteelydylanに変わりました。

https://saruwakakun.com/sango/sango-team

PORIPUも販売停止していますね。

平素よりPORIPUをご利用いただきありがとうございます。

リリースより5年、PORIPUの機能はほぼSANGO に実装された現状を鑑み、SANGO開発者様と相談した結果、今後の販売を停止する運びとなりました。

突然のご案内になってしまい、皆様にはご迷惑をおかけしますこと深くお詫び申し上げます。

— PORIPU（ポリプ）公式アカウント【販売終了】 (@Poripu_wp) May 24, 2023

Cocoon(コクーン)

現在、ebookbrainではCocoonを採用しています。

詳しくはCocoon(コクーン)の詳細記事をみてください。カスタマイズ方法も覚書程度にまとめました。

Cocoon(コクーン)のfunctions.phpカスタマイズ!

ちまちまとCocoon(コクーン)のカスタマイズをやっています。cssやphpのコードをまとめていきます。コクーン(cocoon)の評判!(WordPressのテーマレビュー感想!)cocoonと海外のテーマの比較ebookbrainではず

ebookbrain.net

404 NOT FOUND | ebookbrain

ebookbrain.net

Cocoonの評判を見てみましょう!

cocoon無料ですが、すごくいいテーマですよ！

ネットで検索すると情報も多いので、おすすめです☺️

— えりな＠ブログ歴21日 (@Erinalife12) May 11, 2020

お、ワードプレス移行されるんですね！
いまならJINかSANGOが安定でしょうかね～。
たくさん有料テーマ持ってる私ですけど、結局無料のcocoon使ってるというｗ
お好みにカスタマイズするならcocoon、有料でサクッと始めたいならJINって選択がおすすめかなと思います🙄

— 北海道ねっと公式＠編集長きた (@hokkaidosnet) April 3, 2019

そうです。カスタマイズできるところが楽しいのです。

同感・同感・同感🥰
私は慣れたら有料テーマでもいいかな？なんて思ったけど事足りてしまったので、手放す気が無くなっちゃいましたｗ

ブログで収益でたら、わいひらさんに御布施したいって常日頃思ってますが、道のりはまだ遠そうです😅（笑）

— こたかさんは転生しました😇 (@p_acatok) May 10, 2020

僕も運営サイトほとんどをCocoonにしちゃったくらい気に入ってます（笑）
特に個々のページ上で簡易アクセス数がわかるのがナイスです😍

— あんどりゅー@作曲・ブログ・Youtube (@Andrew80286) May 10, 2020

うちも海外のテーマは使っていたんですけど、どんどんコクーンになっていっています。

Cocoonの開発者、わいひらさんのTwitterです。お役立ち情報も結構ありますよ。

https://twitter.com/MrYhira?lang=ja

twitter.com

その他のWrdpressのテーマ

他にも、AFFINGERやクラウドテンプレートなどがあるようです。

【比較】ストーク/JIN/AFFINGER/sango/Cocoon【テーマの違い、どっち!?】

アンケートがありました。

wordpressテーマ、アンケート
CocoonとJINが本当に多い気がします。

ご協力よろしくお願いします。😊#wordpress

— macaron616 (@macaron616) March 18, 2019

【使っているブログテーマを教えてください】

WordPressのテーマ選びって最初めちゃくちゃ迷いますよね🤖

ブロガーの皆さん、
是非ともアンケートにご協力お願いします🐢#ブログ #ブログ書け #ブロガー

□選択肢以外のテーマ例
・THE THOR (ザ・トール)
・JIN(ジン)
・STORK(ストーク)
・賢威
など

— メカカメ🐢3つのブログを運営 (@mekakame_blog) April 28, 2020

cocoonが強そうです。

実際に海外の有料テーマから乗り換えましたが、使いやすいです。

404 NOT FOUND | ebookbrain

ebookbrain.net

ワードプレステーマの選び方

▶️無料テーマならCocoon
▶️デザインにこだわるならSANGO
▶️すぐに記事を書きたいならストーク、スワロー
▶️読みやすいデザインならアフィンガー5
▶️使いやすさで選ぶならJIN

僕は現在Cocoonを使用中。デフォルトデザインはダサ…
カスタマイズして使ってます。#ブログ

— T.Katahira@Webライター (@ttkkthr) April 28, 2020

cocoonも使いやすいですし、すぐに記事をかけますよ。

では、coccoonにデメリットはないのでしょうか!?

僕も初めての有料テーマなのでそのあたりは断言できないです、、、😂

そうです！コロブさんおすすめってことで決めましたー！
cocoonは僕も使ってて、使いやすいんですけどデザインが気に入らなかったのでやめました😂

— かずし@行動戦略家 (@kazushi_rere) March 23, 2020

cocoonのデメリットはデザインと言われますが、もともと白地がコンセプトだったはず！デザインはすればOKです。

新テーマ購入！！！！！！！！

何気に初の有料テーマ「STORK19」を買ったどおおおお！！！！！

コイツと共に、特化ブログ運営頑張っていきまぁす！！！！楽しみだ〜〜🥰🥰 pic.twitter.com/jvguVonUlz

— かずし@行動戦略家 (@kazushi_rere) March 23, 2020

無料テーマのcocoonがおすすめです。有料テーマにも負けないくらい機能性高くて、尚且つ使いやすいです。まずは、cocoonを試してみてはいかがでしょうか？by cocoonからAFFINGER5に切り替えて後悔した人

— なば｜データ分析教室Nava管理人 (@data_nava) March 1, 2020

STORK19は何気に人気なんですね。

OPENCAGE（オープンケージ）

cocoonは同感です。