WordPressテーマ「Cocoon」のサイドバーのカテゴリー表示は、非常にシンプルなデザインになっています。, が、区切り線などがないため、カテゴリーの数が増えてくると、見づらくなることがあります。, そこで今回は、ちょっとしたカスタマイズでカテゴリーを見やすくする方法をお届けします。どなたでもかんたんにできますので、よかったら参考にしてみてください。, 階層表示をする・しないの設定は、WordPressのダッシュボード画面から行えます。, やり方はとってもかんたん。次に紹介するコードをCocoonの子テーマの「style.css」に貼るだけでできます。, カテゴリーのカスタマイズは、次のコードをコピーして、Cocoonの子テーマの「style.css」に貼ればOKです, ★カテゴリの行間が広いように感じる方は、次の方法でコンパクトにすることができます。, 下線の種類は「線の太さ 線の種類 線の色」という設定になっています。数字を変えると線の太さがかわります。, 「dashed」は「破線」を指定するコードです。これを「solid」にすると実線(ふつうの線)になり、「dotted」にすると点線になります。, 別のアイコンを使いたいときは、「FontAwesomeのユニコード」のところに、希望するアイコンのユニコードを入れます。, シンプルで落ち着いたデザインになります。この場合も「下線の種類」を変えて、お好みの線にすることができます。, 今回はCocoonをカスタマイズして、カテゴリーを見やすくする方法をお届けしました。, カテゴリーの表示が変わると、サイトの見た目もずいぶんと変わってくるかと思います。よかったら参考にしてみてくださいね。, 読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。, ゆずゆろぐ。は、日常の困ったことをゆるゆると解決していくサイトです。マイナーなネタが多め。PCをゆるゆるとたのしむネタも満載です。, 【Cocoon】カテゴリーの行間や文字サイズを変えて、コンパクトにするカスタマイズ. Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する!, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する!. インフィード広告とは? 「見出し1~6(h1~h6タグ)」「カテゴリー/アーカイブ見出し」に続いて、今回は「サイドバーの見出し」のカスタマイズについてまとめてみました。, WordPressテーマ Cocoonの「サイドバーの見出し」のデフォルトは、グレーの背景に黒文字で構成されています。, 「見出し1~6(h1~h6タグ)」のカスタマイズについては、エントリー記事「【WordPress】見出し(h1〜h6タグ)をカスタマイズする」で紹介しました。, 以上のカスタマイズでは、モバイルボタンレイアウトをスライドボタンに設定している場合は反映されません。, モバイルボタンレイアウト(「Cocoon設定」-「モバイル」-「モバイルボタンレイアウト」)は、, 「ボタンを表示しない(ミドルメニューのみ)」「トップボタン」に設定している場合は問題無いのですが、スライドインボタンに設定している場合は、別途設定が必要となってきます。, モバイルボタンレイアウトがスライドボタン設定の場合の「サイドバーの見出し」のカスタマイズは、下記の通りです。, 今回で「見出し1~6(h1~h6タグ)」「カテゴリー/アーカイブ見出し」「サイドバーの見出し」の各見出しのカスタマイズが完成しました。, 大学生と高校生の二人娘のパパで弱小ブロガー。初めてのPCはMZ-80C、その後MZ-80B、PC-8001/8801/6601/9801/88VA等を経て現在のメイン機はRyzen 7 3700X搭載の自作PC。WordPressテーマ CocoonとTHE THOR(ザ・トール)を使って3つのWordPressブログサイトを運営中。このサイトのWordPressテーマはCocoonを使用。PC関連のレビュー記事ご依頼承ります!, ZMASAa.blog Copyright © 2017-2020 ゆずゆろぐ。 All Rights Reserved. WordPressテーマ「Cocoon」のサイドバーにカテゴリーを表示させると、行間が広いことが気になる方もいるかと思います。 カテゴリー数が少ないうちはよいのですが、増えてくると縦に間延び... 手軽にWebアイコンフォントを使える「Font Awesome」が新しくなり、バージョン5となりました。 レイアウトだけでなく文字コードも、これまでのバージョン4.7.0と大きく変わり、混乱している... WordPressテーマ「Cocoon」は、エディタ画面(投稿画面)で記事のURLを入力すると、その記事のブログカードが表示されます。 たとえば、こんな感じでURLを入力すると このようにURLの部分がブログカードになって表... このブログのWordPressテーマをSimplicity2からCocoonに変更しました。 Simplicity2からCocoonへの移行は、先に関連サイトのほうでやっていたので手順的にはスムーズだったのですが、問題はレイアウト。 ... WordPressテーマ「Cocoon」を使い始めたら、ぜひカスタマイズしたいのが「ページネーション」です。 ページネーションとは、記事一覧などの下に表示される「別ページへのリンク」のことです。 これがページネーション デフォルト... Simplicityの後継テーマCocoonが公開されました。 Simplicity2からCocoonへの移行を考えている方もいるかと思います。 というわけで今回は、Simplicity2からCocoonに移行した際にやるべきことを... WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。 バランスのいいデザインなので、「この形はくずさずに、色だけを変えたい」という方もいるかと思います。 ... WordPressの無料テーマ「Cocoon」には、商品リンクをかんたんに入れられる「商品リンクのショートコード機能」がついています。 記事の作成中に、たとえばこんな感じのコードを入れると このような商品リンクがすぐにできて... COOLPIX B700、PENTAX K-70、OM-D E-M5、E-PL6とか. (WordPressテーマ THE THOR 使用) ワードプレス無料テーマコクーンを使ったウィジェットの追加方法と編集方法をご紹介します。ウィジェットを追加することであなたのブログがそれっぽくなってきますので、ぜひ入れていきましょう! *これはCocoon専用のウィジェットです。 表示位置で[サイドバー]を選択します。 [ウィジェットを追加]のボタンをクリックします。 サイドバーの設定欄に「[C]SNSフォローボタン」が表示されて設定画面が開きます。 ①タイトルを入力します。 簡単に言うと 通常iPadからcocoonのブログを見ると、サイドバーが右ではなく下に表示される という事です。 2018年9月6日に新しいバージョンcocoonがリリースされ、そちらをダウンロードするとタブレットでもサイドバーが表示されるようになりました! 必ず必要になるであろう、お問い合わせページを作成します。利用するプラグインは「Contact Form 7」です。このブログでも設定している『お問い合わせ』ページです。シンプルな内容ですが、こちらと同じデザインでよければ、ページ下部にCSS MASAa.net Cocoonは 1カラム または 2カラム に設定可能ですが、ページごとに1カラムにしてサイドバーを非表示にしたい場合の設定方法など、カラム操作をまとめています。初期状態は2カラム(右側にサイドバー)です。基本は2カラムにしておいて、以下の MASAa.blogからリニューアルしたガジェット好きmasaaのメインWordPressブログサイト 育児ブログ:うちのひと日記。を運営中。 ぶっちろぐ パソコン関連 記事一覧に溶け込むように広告が入れられます。 トップページの記事一覧に挿入する広告のことです。 パソコン選びのコツ 私はこのブログをiPadで書いたりカスタマイズも行なっているのですが、ちょっと気になっていた点が1つ。, 簡単に言うと通常iPadからcocoonのブログを見ると、サイドバーが右ではなく下に表示されるという事です。, 私は日頃iPadを横向きにしてブログ記事を書いているので、横向きにした状態で本文を見ると、記事が横にびよーーんと間延びしたような印象になるのが気になっていました。, ということで、ググったりcocoonフォーラムを拝見したりしながら解決することに成功。(なんか情報少なかった), 今回はiPadやタブレット表示でもcocoonのサイドバーを右側に表示する方法について書いていきたいと思います。, 無料テーマcocoonの作者であるわいひらさんが公開している掲示板で、使用登録すればテーマに関する質問などができます。, 直接書き込まなくても、回答などを見ているとカスタマイズや不具合に関するだいたいのことが解決できるので、何かあったときはいつもフォーラムを検索して解決方法を探しています。, そこで、対応している新しいテーマに更新する必要があるのですが、現状でダウンロードできる新しいテーマは公開されておらず、改良段階にある開発版のみとなっています。(2018年9月4日現在), 私は日頃iPadでブログを更新していることもあり、いますぐに変えたい!と思ったので開発版のcocoonの親テーマをアップロードして使用することにしました。, 開発版新しいテーマをダウンロードすると、タブレット(iPad)からの表示はこうなります。, iPadを縦にすると、サイドバーが下部に表示されるモバイルビューに切り替わります。, 日頃パソコンやスマホでしかブログを書いたり読んだりしないという方は気づかないと思うので、そういう方にとっては役に立たない記事ですがw、iPadを使ってブログ作業を行う私にとっては、サイドバーが表示されないことが気になっていました。, 少数派だからでしょうか、ネットで情報を探してもあまり解決策が出てこず少し苦労したので、今回は記事にしてみました。, サイドバーがあるのとないのとでは、デザインとしても、また記事の読みやすさも変わってくると思うので、気になっていたところが修正できて良かったです!, 1歳と5歳の娘を育てる主婦。 WordPressテーマ「Cocoon」のサイドバーのカテゴリー表示は、非常にシンプルなデザインになっています。が、区切り線などがないため、カテゴリーの数が増えてくると、見づらくなることがあります。そこで今回は、ちょっとしたカスタマイズでカ このブログでは、ブログやイラストのことについてひたすら語ります。, これはかなり初期のカスタマイズのため今のブログとはデザインが違いますが、このように全面に記事一覧が表示され、, 【2018.9.6追記】新しいテーマをアップロードすることで、この問題はまるっと解決されました!. (WordPressテーマ Cocoon 使用), WordPressテーマ 当ブログでは無料テーマcocoonをカスタマイズして使用しています。サイドバーのプロフィールの欄は、cocoonにデフォルトで付いていた機能を使って表示していますが、周りについている枠線を取りたいなぁと思ったのでやってみることにしました。... Cocoonでブログ運営を初めて数ヶ月が経ちました。そんなに大したカスタマイズはしてないのですが、ブログの小さなところをちょこちょこいじるのがとても好きです!今回はグローバルナビ「メニューバー」のカスタマイズです。上下に細い線をいれてメニ... メインブログで導入しているインフィード広告をこちらのブログでも導入してみることにしました。 ▼こんなやつですね▼ 無料WordPressテーマ Cocoon WordPress関連 Copyright © 2018 MASAa.net All Rights Reserved. ... 通常iPadからcocoonのブログを見ると、サイドバーが右ではなく下に表示される, テーマをcocoonではない別のものに変更し、古いバージョンのcocoonの親テーマを削除. (WordPressテーマ THE THOR 使用) チメブロ, WordPress blog site specialized in PC produce by masaa, WordPressテーマ THE THOR(ザ・トール)でのエントリー記事カード内の説明文を本文からの抜粋ではなく、自分の考えたショートな説明文を設定する方法についてです。WordPressの投稿画面に「抜粋」の項目が追加します。, WordPressテーマ Cocoonでの「タイトルやボタンをキラッと光らせる」カスタマイズについてまとめてみました。今回、エントリーカードと商品アイテムボックスのタイトル、SNSフォローボタンとSNSシェアボタンに採用してみました。, WordPressテーマ Cocoonでの「商品アイテムボックス」のカスタマイズについてまとめてみました。今回のカスタマイズでは「商品アイテムボックス」のスタイル変更と商品タイトルを表示位置にあわせた改行に変更等を行いました。, WordPressテーマ THE THOR(ザ・トール)での「メニューパネルのCLOSEボタン」カスタマイズについてまとめてみました。今回のカスタマイズはメニューパネルをスクロールしてもCLOSEボタンを追従して表示するようにしました。, WordPressテーマ Cocoonでの「ヘッダー内のキャッチフレーズ位置調整」についてまとめてみました。今回のカスタマイズはキャッチフレーズの下側マージン設定とヘッダーの上下マージン調整に関するカスタマイズを行いました。, WordPressテーマ Cocoonでの「イメージ画像やアイコンを点滅させる」カスタマイズについてまとめてみました。今回、ヘッダーのサイトロゴ、ヘッダーのSNSアイコン、サイドバーの検索ボックス内のサーチアイコンに採用してみました。, WordPressテーマ THE THOR(ザ・トール)でのマスク系エフェクト利用時の「アイキャッチのマスク上テキスト」のカスタマイズについてまとめてみました。アイキャッチのマスク上テキストに対しフォント体、サイズ、カラー等を設定しました。, WordPressテーマ Cocoonの「サイドバーの見出し」については以前にもカスタマイズを行ってきました。今回「サイドバーの見出し」に対して、改めて「見出し1タイトル(h1タグ)」と同じデザインを採用してみました。, 【レビュー記事】WonderFox HD Video Converter Factory Pro, 動画変換ソフトウェア『WonderFox HD Video Converter Factory Pro』のレビュー記事です。ビデオを500種類以上の形式に変換、切り取り/マージ/特殊効果などの編集、動画ダウンロード等を行うことができます。, EaseUSのiPhoneデータ管理ツールソフト『EaseUS MobiMover( モビ ・ ムーバー)』のレビュー記事です。数クリックだけで楽にiOSデバイス上のデータを移行/編集/添削することができる便利なソフトウェアです。, Hypamer『【高度昇級&安定性抜群】ノートパソコンスタンド PC タブレットスタンド 無段階高さ調整可能 姿勢改善 腰痛/猫背解消 人間工学設計 折りたたみ式 滑り止め アルミ合金製』のサンプル品提供頂いたのでレビュー記事作成しました。, Windows上でパーテーション操作や管理などのディスク管理ソフトウェア『MiniTool Partition Wizard 12』のレビュー記事です。無料版以外にプロ版、プロ・デラックス版、プロ・アルティメット版があります。, INDEX 1 Leawo Blu-rayコピー2 Leawo Blu-rayコピーの紹介2.1 Leawo Blu-rayコピーをインストールする2.2 Leawo Blu-rayコピーを使う!2.2.1 設定項目2.2.2 市販のDVD. 自作PCやソフトウェア、WordPressなどPC関連専用のWordPressブログサイト パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト THE THOR(ザ・トール) WordPressテーマ Cocoonの【サイドバーの見出し】を、自分のサイトカラーに合わせてカスタマイズ(スライドボタン設定時含む)してみました。と言う事で、【サイドバーの見出し】のカスタマイズについて書いたエントリー記事です。 MASAa.blog こんにちは。いたみけいこ(@keiko_itami)です。 先日、記事を書いたのでLinkshareのバナーを貼ろうと思ったら表示されませんでした。 Linkshareの広告が表示されない! この記事の記事下部なんですが、広告が表示されませんでした。こんなふうになってしまう。 からあげ棒、ありったけ