旅行記事まとめ買ってよかったものプロフィール2020年もじっくり書いていきます。2018.04.27スポンサーリンク先日、ブログテーマをCocoonに変更しました。関連記事:シンプルイズベスト。ブログテーマを「Cocoon」に変更しました!自分のメモがてら、カスタマイズ内容をブログで記事として公開しておきます。Cocoonに変更して情報を求めている方は参考にしてください。Imageの設定サイトの高速化設定をするまとめ:Cocoonの良さを消さない範囲で自分色に。ロゴを自前のものにするまず手を付けたのがこれ。影響ないと思いますが、毎回表示されるものなので圧縮してサイズを落としています。ブログテーマを変えたタイミングでキャッチフレーズを「いいね!」を集積する個人メディアに変更しています。ヘッダーのロゴを画像に変更する方法ヘッダーにあるロゴを用意した画像に変更する設定方法です。wp-cocoon.com記事とウィジェットの見出しをカスタマイズはじめはデフォルトデザインの見出しで運用していましたが、簡単に差別化できる部分なのでカスタマイズしました。このへんのデザインはしっくりくるまで試行錯誤すると思います。見出しのデザインテンプレートと、サイドバーウィジェットの見出しのカスタマイズは、それぞれ以下のリンク先を参考にしました。CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。chaosリリース当初から何かと話題になっている無料WordPressテーマのCocoonですが、Simplicityと同様に機能はこれでもかってくらい盛り沢山なのに対して、見た目的にはちょ...unlimitedchaos.netGoogleタグマネージャのトラッキングID設定せっかくなので、このタイミングでGoogleタグマネージャを導入しました。以下に貼ってあるCocoonのマニュアルページを見ながらやれば迷うことはなし。Googleアナリティクスもこれで同時に設定されるので追加の処置は必要ありません。GoogleタグマネージャのトラッキングID設定方法タグマネージャ登録をするとアナリティクスのトラッキングID登録は不要です。Analytics解析を正確に集計するためにやったことプロフィール画像や情報、SNSページの設定ツイッターやインスタグラム等のSNSボタンに自分のアカウントを設定。「Amazon」のところには「ほしいものリスト」へのリンクを設定することができます。これまで外部公開用のほしいものリストは作ってなかったので、これを機に作りました。プロフィール画像やプロフィール情報、SNSページを設定する方法Cocoonでは、記事の投稿者ごとにプロフィールを設定することが可能です。自前のプロフィール画像設定機能も保持しており、手軽に設定できるようになっています。基本的には以下のCocoonマニュアルページの通りに設定。アクセス集計はちょっとだけ負荷がかかるようですが、サイドバーの人気記事表示に使いたいので有効化しました。アクセス集計機能の説明Cocoonのアクセス集計機能に関する解説です。使用することで、管理者はアクセス状況を把握しやすくなるという利点もありますが、多少なりともサーバーに負荷をかけてしまうという難点もあります。wp-cocoon.comGoogleアドセンスのコードを入れる基本的には以下のCocoonマニュアルページの通りに設定。広告の配置は今後試行錯誤しながら見直していくつもり。広告(AdSense)を手っ取り早く設定する方法Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。wp-cocoon.comグローバルナビのメニューを設定Cocoonはページトップにアピールしたいリンクを配置することができます。今後、ここには「はじめに読んで欲しい記事10選」とかをつくって貼るのもいいかも。自分なりの特色が強く出る部分と思うのでカスタマイズするのがたのしみ。パソコンなどで表示されるグローバルナビメニューの設定方法です。サブキャプション機能で補足説明を入力することも可能です。wp-cocoon.comAMP対応CocoonはAMP化が標準搭載されています。AMP化は設定ページでチェックボックスにチェックを入れるだけ。AMP化のためのプラグインは不要です。AMPのチェックを入れてから数日待てば、GoogleにAMPページがインデックスされていきました。テーマをAMP対応する方法Cocoonテーマの投稿・固定ページをAMP化してモバイル端末での表示を速くする方法です。wp-cocoon.comロゴ表示部分の幅を狭くする細かいところですが、ロゴ表示部分の幅をデフォルトよりも狭めに変更しました。一度250pxに指定してから、やっぱ150pxに落ち着いています。これはほとんど自己満足の世界。ヘッダーのロゴを画像に変更する方法ヘッダーにあるロゴを用意した画像に変更する設定方法です。wp-cocoon.comフォントを変える(メイリオにした)Cocoonはフォントを変更できるので、メイリオに変更しました。これもかゆいところに手が届いていて嬉しい機能。サイトの全体のフォントを変更する方法Cocoonデフォルト機能のサイトフォント変更方法です。管理画面から手軽に変更することが可能です。wp-cocoon.comブログトップに検索を入れるこれはずっとやりたかったカスタマイズ。前のテーマではできなかったカスタマイズだったので、ものすごくうれしい。Cocoonデフォルトのウィジェット機能まとめCocoonのデフォルト状態で利用できるウィジェット機能を見やすくまとめてみました。wp-cocoon.com検索窓に表示するデフォルト文字列の設定2018年9月時点ではCocoon公式の機能としてはまだないようなので、以下のフォーラムを参考に実装しました。ブログ内検索の中の文字列変更お世話になっております。ウィジェットで「検索」がありますが、検索BOXの中に表示される文字列が「ブログ内を検索」となっています。これを「サイト内を検索」という文字列に変更したいのですが。テーマと関係無いかもしれませんが、よろしければお教えください。wp-cocoon.com記事の中に著者情報を入れる控えめながら存在感をアプールできる機能があったので、設定しておきました。Cocoonデフォルトのウィジェット機能まとめCocoonのデフォルト状態で利用できるウィジェット機能を見やすくまとめてみました。Reserved.の表示をカスタマイズデフォルトはブログをはじめた年である「2015」でしたが、ここを「2015–2018」に変えました。あわせて、一番下までスクロールしてくれた人向けのメッセージも一言載せました。フッターデザインの変更方法フッターにある「ロゴ」と「フッターメニュー」と「クレジット表記」の配置を変更する設定方法です。wp-cocoon.comカエレバの表記を変更Cocoonではなにもしなくても、デフォルトで「カエレバ」とか「ヨメレバ」の表示がいい感じになります。2018-05-07AmazonKindle楽天ブックス楽天kobo7netそれを活かすために「Amazonで最安値をチェック!」のような表記を「Amazon」だけに変更しました。Regex」というプラグインで一括置換しました。表示するようになっています。これまでのテーマはその機能がなかったので、手書きで「最終更新日」を書き加えていましたが、不要になったので消しました。ワイルドカードの書き方はこの記事を参考にしました。Regexで全記事の文字列一括置換!正規表現を使えばhtmlタグも一発!最近、テンプレートを変えようかなと思ったことがあります。実際に変更はしなかったのですが、その時文字列を一気に変換する必要があるなと!と感じました。正規表現も使えるのでhtmlタグも一発です。www.danna-salary.comコメント欄とトラックバックを消す個人的にはつかっていない機能なので、設定から消しました。公開用の「ほしいものリスト」を作成して公開しました。Amazonほしい物リストを一緒に編集しましょうamzn.asia参考にしたのは以下の記事。ところで、Amazonの欲しいリストに入れている商品がいきなり届いたらどう思いますか?めちゃくちゃ嬉しくないでしょうか?僕なら飛んで喜びます。いうのも、先日、ツイッターを見...non-suger.hatenablog.com関連記事:新しいコミュニケーションツールとして「Amazonほしいものリスト」をつくりました!AMP用のアナリティクス設定AMP化するとアナリティクスの設定変更が必要なので、以下を参考に行いました。GoogleタグマネージャでAMP用のトラッキングIDの設定方法Cocoonテーマで、Googleタグマネージャを用いてAMPページの計測を行う方法です。通常のWEB用コンテナとは別に、AMP用コンテナを作成して、IDを新規作成する必要があります。wp-cocoon.comCocoon設定「投稿」タブ内で関連記事をオンにして「AdSense関連コンテンツユニット」にチェック記事下に「関連コンテンツ」の広告パーツを表示するようにしました。表示数を3行✕4列にして、さらにAMPでもいい感じに表示できるよう出し分けの設定をしました。CSSで沈み込むボタンの実装Cocoon自体のカスタマイズとはまた別だけど、最近やったのがこれ。好きなところでこんな感じのボタンが作れて便利だし、沈み込むギミックがかわいいです。ブログトップへ参考にしたのはdelaymaniaさん。近年、CSSでボタンをデザインすることが多くなりました。ボタンのデザインが出来たら、次はマウスオーバーしたときのアニメーションもつけたくなりますよね。Image画像だとカッコ悪いので、かっこいいクロワッサンの画像を投入しました。IMAGE画像を自前で用意した画像に入れ替える方法です。wp-cocoon.comサイトの高速化設定をするCocoonはサイトの高速化設定をチェックボックスひとつで行うことができます。PHPバージョンが古い状態で試したらブログが真っ白になって焦りましたが、最新にしてから再度試したらうまくいきました。ちなみに、Jetpackの圧縮機能ももともとONにしています。画面外の画像読み込みをあえて遅らせることでページ表示を高速化するプラグイン「LazyLoad」と同じ機能はJetpackでも実現できてるっぽいので、LazyLoadはこのタイミングで消しました。関連記事:WordPressブログでつかってるプラグイン14個(2018年5月版)。Cocoon導入で5個減。関連記事:ネットオウル「ミニバード」のPHPバージョンを最新版にアップデートする方法Cocoonおすすめのサイト高速化設定Cocoonと相性の良いページの高速化設定方法の紹介です。Insightsで高得点が狙えます。加えて、ページキャッシュプラグインや、画像最適化プラグインを利用すれば、より良い良いパフォーマンスを目指すことも可能かと思います。wp-cocoon.comまとめ:Cocoonの良さを消さない範囲で自分色に。今回のカスタマイズで気をつけたのは「できるだけCocoonの良さを消さない」こと。カスタマイズでごちゃごちゃさせてしまっては、せっかくのテーマの持つ良さが失われてしまうので。何かカスタマイズしたら追記します!お知らせ。激混みのコインロッカーはもう卒業。コピー\書いているひとのSNSをみてみる!/ダーマスyawnシンプルイズベスト。Keyconfig復活!Embedlyと平行して使い分けていくことにしたよ。2016.12.072019.12.31BackWPupのバックアップ設定が不適切だとサーバ容量が圧迫されるので注意!2016.12.032017.03.12Lightroomから複数の写真を一括でリサイズ、リネームしつつWordPressにアップロードする連携プラグインが神。【2020年版】Bluetoothレシーバーをつかって自宅のスピーカーを無線化する方法。スマートスピーカーも熱い!2016.02.082020.01.12ツイッターでのチケット譲渡でトラブルを避けるため抑えておきたいポイント4選+α2017.07.242019.04.27100均で売っている「りんごの芯抜き」をつかってみたら想像以上の素晴らしさだった件。2016.01.092019.01.08iPadとnasneの組み合わせが最強すぎてなんも言えねぇ。4&1の交換用グリップ「SMART-GRIP」を購入したの巻。PiにVNCでリモートデスクトップ接続する方法2016.03.112018.08.052台のディスク間で定期的なミラーリングを構築する方法。音楽や写真のバックアップにも。Imageの設定サイトの高速化設定をするまとめ:Cocoonの良さを消さない範囲で自分色に。見ぬあなたに毎日グッドなバイブスをお届けします。Keyconfig復活!Embedlyと平行して使い分けていくことにしたよ。2016.12.072019.12.31ブログ記事ネタの管理方法は「WordPressの下書きに集約」が快適2019.04.302020.01.19Lightroomから複数の写真を一括でリサイズ、リネームしつつWordPressにアップロードする連携プラグインが神。Writerで間違いない。【2020年版】Bluetoothレシーバーをつかって自宅のスピーカーを無線化する方法。スマートスピーカーも熱い!2016.02.082020.01.12ツイッターでのチケット譲渡でトラブルを避けるため抑えておきたいポイント4選+α2017.07.242019.04.27100均で売っている「りんごの芯抜き」をつかってみたら想像以上の素晴らしさだった件。2016.01.092019.01.08iPadとnasneの組み合わせが最強すぎてなんも言えねぇ。4&1の交換用グリップ「SMART-GRIP」を購入したの巻。PiにVNCでリモートデスクトップ接続する方法2016.03.112018.08.052台のディスク間で定期的なミラーリングを構築する方法。音楽や写真のバックアップにも。Pencilを内部に収納できるiPadケースを買いました!ちょっと重いのが難!2019.04.272020.01.11Feedlyで特定のサイト/ブログを開いた時にウェブサイトに飛ばされる現象の解決法2019.04.262020.01.12Withingsのスマート体重計「body+」を購入しました。Keyconfig復活!Embedlyと平行して使い分けていくことにしたよ。2016.12.072019.12.31BackWPupのバックアップ設定が不適切だとサーバ容量が圧迫されるので注意!2016.12.032017.03.12Lightroomから複数の写真を一括でリサイズ、リネームしつつWordPressにアップロードする連携プラグインが神。【2020年版】Bluetoothレシーバーをつかって自宅のスピーカーを無線化する方法。スマートスピーカーも熱い!2016.02.082020.01.12ツイッターでのチケット譲渡でトラブルを避けるため抑えておきたいポイント4選+α2017.07.242019.04.27100均で売っている「りんごの芯抜き」をつかってみたら想像以上の素晴らしさだった件。2016.01.092019.01.08iPadとnasneの組み合わせが最強すぎてなんも言えねぇ。4&1の交換用グリップ「SMART-GRIP」を購入したの巻。PiにVNCでリモートデスクトップ接続する方法2016.03.112018.08.052台のディスク間で定期的なミラーリングを構築する方法。音楽や写真のバックアップにも。Imageの設定サイトの高速化設定をするまとめ:Cocoonの良さを消さない範囲で自分色に。タイトルとURLをコピーしました。