Copyright © 2018 Unity Right All Rights Reserved. Copyright © 2017-2020 うぃんすとんblog All Rights Reserved. (WordPressテーマ THE THOR 使用) Copyright © 2018 MASAa.net All Rights Reserved. 目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみ … Copyright © 2017-2020 ゆずゆろぐ。 All Rights Reserved. Cocoonはカスタマイズの自由度が半端なく、目次もcocoonひとつあれば追加できます。さすがに細かいカスタマイズするにはcssの知識が必要ですが、手を加えるところは少しだけなので、案外簡単にオリジナルの目次が作れるんです。コピペ用のコードも掲載しておきます。 背景画像に芝画像を設置したら、なんとなくインデックス周辺が白くてサッパリし過ぎていて何かインパクトと言うか印象を変えたくメイン背景とインデックスページの記事部分背景色を変更してみました。, Cocoonのスキンはなしを使用しています。 インデックスのカードタイプはエントリーカード(デフォルト)です。, インデックスの背景色を変更するのに色々見て探しましたが分からず(何処かに変更できる所があるかもしれません)スタイルシートに書いちゃいました。, 変更前のトップページがこんな感じです。 これはこれでシンプルで良いんですが…ちょっと寂しい?エントリーカードが白いのを変更したいと思いました。, /* main背景色 */.home .main{background-color: #008000;color: #fff;/*テキストカラー*/}.a-wrap{ /* インデックスページの記事背景色 */background-color: #fff8dc; }, スポンサーリンク、シェアするの文字が黒かったのでテキストカラーで白色にしています。, 緑色の背景でエントリーカードを薄肌色で見やすくなった感じです。 今回サイドバーは変更していませんが、サイドバーの背景色も変更していこうと考えています。自分が気にいた色に装飾してみるとサイトの雰囲気も変わって楽しいです♪最後まで読んで頂きありがとうございました。また、次の記事でお会いいたしましょう。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, またphp、CSSなどを変更するときにはCocoon サポート対象外のものを読んだうえで行って下さい。, 当テーマでは、できる限りサポートを行いたいと思いますが、管理者の時間的都合上サポートできないものもあるのでご了承ください。. THE THOR(ザ・トール) 要素の表示形式がブロックボックス(block)で表示されているため、横並びを実現するためのCSSプロパティ(float、display)で指定する必要があると思われます。 Copyright © 2018 MASAa.net All Rights Reserved. display: inline; 先日、Simplicity2の後継テーマ「Cocoon」のテスト版が公開されました。さっそく別サイトで使ってみましたが、すごいですね、これ。 Simplicityのよさはそのままに、機能も使い勝手も大幅にパワーアップしています。実際に... 今回は、WordPressテーマ「Cocoon」にGoogleアドセンスの「関連コンテンツ」を設置する方法をお届けします。 「関連コンテンツ」とは、記事と関連した広告がセットになって表示されるものです。たとえばこんな感じのものです... WordPressテーマ「Cocoon」の固定ページの日付を非表示にしてみました。 消したのはこの部分「投稿日と更新日」のところです。 日付表示が消えると、このようにすっきりとした表示になります。   「お問い合わせ」や... WordPressテーマ「Cocoon」は様々なカスタマイズができます。 今回は、リスト(箇条書き)の「点」をチェックマークにしてみました。 簡単なカスタマイズですが、こうした装飾を入れるだけでも、ブログの読みやすさがずいぶんと変わ... WordPressテーマ「Cocoon」を使い始めたら、ぜひカスタマイズしたいのが「ページネーション」です。 ページネーションとは、記事一覧などの下に表示される「別ページへのリンク」のことです。 これがページネーション デフォルト... WordPressテーマ「Cocoon」では、ビジュアルエディタの『スタイル』から『ボックス(白抜き)』を選択すると、囲み枠を入れることができます。 ・・・が、初期設定のままだと、枠線が太く感じられたり、色が強いと感じたりすることがあ... COOLPIX B700、PENTAX K-70、OM-D E-M5、E-PL6とか. ここでは「0」を指定して、枠線を非表示(なし)にしています。, 目次タイトルの部分を変更するには「toc-title」というセレクタ(クラス)を使います。, 「background-color」で背景色を、「color」で文字色を指定します。, 目次コンテンツ(見出し)部分は「toc-content」というセレクタで扱われています。, ただし、文字色に関してはCocoonの親テーマで「toc a」に「color:#333」の指定がされているので、ここでは「toc-content a」を使って上書きしています。, いくつかデザインサンプルを作りました。 よく分からない人、面倒な人は下のデザインサンプルから気に入ったものをコピペして使ってください。, 目次を自動で表示するか、どの見出し階層まで表示するか(深さ)、表示テキストの変更などの基本的なことは、Cocoon設定内の[目次]タブ内で設定することができます。, 背景色を変更するには、「toc」というセレクタの「background-color」に色を指定します。, 「toc-title」は目次タイトル、「toc a」は目次コンテンツ内の文字列(リンク)です。, 枠線を変更するには「toc」の「border」を変更します。  パソコン関連 Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する!, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する!, https://masaa.net/2020/01/29/post-200117-1/. 使用させていただきました。 からあげ棒、ありったけ THE THOR(ザ・トール) チメブロ, WordPress blog site specialized in PC produce by masaa, WordPressテーマ THE THOR(ザ・トール)での「ヘッダーのバックカラー」のカスタマイズについてまとめてみました。今回のカスタマイズでは「ヘッダーのバックカラー」を単色からグラデーション化してみました。, WordPressテーマ THE THOR(ザ・トール)での「サブメニュー」のカスタマイズについてまとめてみました。今回のカスタマイズでは、サブメニューの背景色をサイトカラーに変更、パーティションの強調、フォントの強調を行いました。, WordPressテーマ Cocoonでの「ヘッダーのアイコン」カスタマイズについてまとめてみました。今回のカスタマイズでは、ヘッダーのメニューに表示している5個のアイコンに対して色を設定し、更にサイズを大きく調整してみました。, WordPressテーマ THE THOR(ザ・トール)の「番号無しリストアイコン」のカスタマイズについてまとめてみました。今回のカスタマイズでは、Font Awesome 5の黒丸アイコンに変更しサイズと位置の調整を行ってみました。, 2019年12月18日にWordPress 5.3.2 メンテナンスリリース(WordPress 5.3.2 Maintenance Release)が公開されたので、アップデートに関するエントリー記事です。, WordPressテーマ THE THOR(ザ・トール)での「アーカイブページのアイキャッチ画像をホバー時に浮かす」カスタマイズについてまとめてみました。今回は【アーカイブページのアイキャッチ画像】に対しホバー時に浮かす処理を加えました。, WordPressテーマ Cocoonで「記事一覧のインデックスをホバー時に浮かす」カスタマイズについてまとめてみました。今回のカスタマイズは【記事一覧のインデックス】に対しホバーした時に浮かす処理を加えました。, WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリー」についてカスタマイズをこれまで何度か掲載してきました。今回はMENUエリアに「ウイジェット カテゴリー」を設置表示するための対応について行いました。, 【レビュー記事】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ブログサイト シンプルがベストですが…背景画像に芝画像を設置したら、なんとなくインデックス周辺が白くてサッパリし過ぎていて何かインパクトと言うか印象を変えたくメイン背景とインデックスページの記事部分背景色を変更してみました。Cocoonのスキンはなしを使 WordPressテーマ Cocoonの「目次」については以前にもカスタマイズを行ってきました。今回「目次」に対して、PC以外の多くの端末(スマートフォン、タブレット)でも正常に表示される「目次」となるように改めてデザインを変更してみました。 float: right; WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。バランスのいいデザインなので、「この形はくずさずに、色だけを変えたい」という方もいるかと思います。そこで今回は  MASAa.net 目次はスルーされる事も多いと思うので、デザイン的なワンポイントで良いと思っていますが、目次が雑だと記事を読み進める気が無くなるので(個人的に)疎かにはできません。, コピペで完成ではなく「どこをどうすると何が変わるのか」オリジナルなカスタマイズを始めるきっかけになればと思って記事を作成しました。, なお、外枠のボーダー色はCocoon設定→全体→サイトキーカラーが反映される様です。, 追加CSS又は子テーマのスタイルシート(style.css)にコードを追加していきます。ちなみにtocはTable of contentsの略で目次の事です。, 全体の定義です。paddingの値を変えたりmarginを追加してお好みのポジションを探してみてください。, 当サイトの場合Contentsと表示されている部分です。フォントや背景の色などを変えました。, paddingの設定についてはHTMLクイックリファレンスさんの解説がとても分かりやすいです。, タイトルより下の目次が表示される部分です。こちらもpaddingで全体の位置を調整してみて下さい。, ココがポイントです。H3以下の先頭の数字を「・」にする為に、まず現在表示されている目次ナンバーを非表示にします。, 「・」を付ける訳ではなく背景を丸くして「・」に見える様にしている感じです。位置の調整はサイトごとに必要だと思うので、バランスを見ながら数値を変えてみて下さい。, バージョンアップなどのタイミングで位置ズレたりする事もあるので、以下のコードは随時見直して更新しています。上手くいかない時の参考にしてください。, 私はサイト運営やカスタマイズ作業の約90%以上をiPhoneだけで完結しています。今回もスマホでWordPressの追加CSSを編集していたところ、途中で画面が落ちてしまう事が数回ありました。, 今回は自動保存から復元できたものの、そのうち痛い目に合いそうな気も。。幸いにもサイトのカスタマイズ記事がメインなので、カスタマイズ記事を分かりやすくどんどん作成しておけば、それ自体がバックアップにもなりますね。, こちらの目次を使わせていただいております。 h4も目次表示させたいのですが、今のところh4タグをつけると ・h3 ・  ・・h4 という表示になってしまいます。 間に、1行入る・を何とか消したいのですが方法はありますでしょうか?, H4以下は使ってないので自信はないですが・・Cocoon側の『目次ナンバーの表示』は「数字(デフォルト)」になっていますでしょうか?, 試しにH4を追加して「数字詳細」にしたら・が1行追加されたので、Cocoon設定を確認してみてくださいヽ(´ω`)ノ, 返信ありがとうございます。 数字詳細になっていましたが、解決できませんでした。 h4タグを使うのやめてみます。お手数おかけしました。, 私も.tocのコードをコピペし直してみたり色々試してました。コード自体に問題は無さそうなので「ほんの少しの何か」だと思われます!, 「んー、やっぱりh4まで表示したい!」ってなりましたらまたご相談くださいφ(・ω・`), 今後、追加CSSやstyle.cssを見直し・整理していく過程で自然と改善されると思います。, H3以下の先頭に「・」を表示させたいのですが、コードの表示方法を教えていただけますでしょうか。, 現在cocoonを使用しております。見出しを付けてレビューすれば自動的に作成されますが、数字ではなく●で表示できるようになりたいです。, wordpressのテキストビューにコードが表示されないので、ググりましたがわかりませんでした。, この記事の下の方に『追加CSSへのコピペ手順』という内容を追加しました。要点のみ纏めてみましたので、是非試してみてください。, 目次や見出しなどのデザインは『追加CSS』(又は子テーマのスタイルシート)にコードを入力しておけばそれが全てのページに反映される、みたいな感じになっています。, 目次のborder-colorを指定したのに色が反映されない。Cocoonの場合はサイトキーカラーが適用されるので、カスタマイズコードに!importantを追加して強めに反映させます。, Cocoonのカスタマイズ方法を初心者向けに一覧に纏めました。見出しや目次からトップページ・カルーセルのカスタマイズなど、CSSコードごとの場所や意味など詳細もなるべく入れて、コピペだけでなくオリジナルのデザインを作るきっかけになればと。, Webサイトを立ち上げて1年。うまくいかない事ばかりでPVも収益も思う様に上がりませんが、勉強してスキルアップしてこれからも継続します。それに向けてMTGを実施しました。振り返りは大事ですね。特に文字に起こすと課題が分かりやすいです。, 初心者でも簡単・安心の有名アフィリエイトサービス。GoogleアドセンスやA8.net,Amazonアソシエイトに楽天アフィリエイトやバリューコマースなど分かりやすくて使いやすいおすすめサービス。まずはココから始めてみましょう。, Cocoonボックスメニューをスマホで4列表示にするカスタマイズ。アイコンやフォントの大きさ・色・位置を調整しました。どうしても下のスペースが変わらなかったが、デフォルトCSSコードを調べながら高さを調整しました。, LinkSwitchって何?どうやるの?初心者としては分からない・不安な部分もあり導入に迷いが。実際に設定して問題が解消され、とても便利な事が分かりました。Cocoonでの設定など。, cocoonのモバイル設定にヘッダー追従機能が追加されました。ずっとやりたくて色々試して出来なかったのですが、まさか標準機能になるとは凄いなぁ。。, 初めてのダイソン【Digital Slim Fluffy SV18FF】選び方やメリットなど.

Ipad Keynote 保存できない, 赤井秀一 声優 変わった, カッペリーニ トマト モッツァレラ, 大阪 松山 バス, ミステリーランチ アーバンアサルト ブログ, オリコン 写真集 ランキング 年間, スプレッドシート ソート スマホ, 鬼 滅 の 夢 故人 化け 猫 屋敷, シチズン 腕時計 ベルト, 黒い砂漠 星の墓場 クエスト, ナイキ ジュニア アウター, ゲーム実況 スマホ 声, ニトリ 羽毛枕 臭い, 大船 デート ディナー, 七 つの 大罪メリオダス 風邪 小説, ボックス型 財布 作り方, Suica マイナポイント チャージ, メルちゃん セーター 編み図, 東日本 実業団駅伝 放送, メッセンジャー 電話 設定, シンプルヒューマン ソープディスペンサー 反応しない, 鬼滅の刃 夢小説 転生 モブ, オートミール 米化 まずい, 献立表 書き方 順番, レポート 先輩 名前, 18金 ネックレス チェーン 相場, 誕生日 旅行 彼女, 朝ドラ ファイト 主題歌, 秋月 安定化電源 自作, 熊野筆 セット 白鳳堂, 変動係数 エクセル グラフ, エクセル 連続データ 固定, ヘリコプターうるさい 今日 大阪, Zoom ウェビナー 事前登録, Mac ターミナル $マーク, カレー 肉 消費期限,

LEAVE A REPLY:

(this will not be shared)
(optional field)

No comments yet.