夢を実現・かわいい・癒し・楽しいを創造する企業

当サイトでは記事内に広告を掲載している場合があります
誇大な宣伝や表現とならないよう配慮しコンテンツを制作しておりますのでご安心ください
問題のある表現が見つかりましたらお問い合わせよりご一報いただけますと幸いです。

Cocoonの目次に画像を入れるカスタマイズ

Cocoonの目次に画像を入れるカスタマイズ

株式会社ぴよたんの癒しの森(@piyomorichannel)のシステムエンジニアのMOGUです!

今日は、ワードプレス無料テーマ「Cocoon」の目次に画像を入れるカスタマイズの紹介です。

弊社は、目次のカスタマイズなど無料で承ります

目次に画像を入れるカスタマイズしたい人は、ぜひコピーしてお使いください。

MOGU
MOGU

作業方法は以下の通りです!

ダッシュボード
外観
テーマファイルエディター
style.css

コードをコピーして貼り付ける

作業手順はこれだけです。それではカスタマイズを一緒に行っていきましょう

ワードプレスのメディア画像のurlを調べる方法

参考サイトの目次を確認後、カスタマイズ作業をしてください

参考サイト ぴよたんブログ

目次に入れる画像のurlの調べる方法はこちらになります。

ダッシュボード
メディア

画像サイズは、150X150で調整しています

右メニューURLをコピー

Cocoonの目次に画像を入れる方法

style.cssに「コード」を貼り付けましょう。

カラーは、各サイトに合わせた色に変更しましょう。

10番目の箇所 → background: url(※STEP4) → 上記の画像URLをコピーして貼り付けてください。

CSS
/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#ffb1d8;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
background: url(※STEP4) right bottom no-repeat;
background-size: 50px;/* 画像の大きさ(好きに指定してください) */
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #ffb1d8; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#ffb1d8;/* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #ffb1d8;/* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

作業は以上です。

他のカスタマイズ

目次をカスタマイズ

カスタマイズレベル( )

検索ボタンをカスタマイズ

カスタマイズレベル( )

ボックスメニューを新しいタブで開くカスタマイズ

カスタマイズレベル( )

フッタータイトルを消す方法

カスタマイズレベル( )

他のテーマのカスタマイズ

ワードプレス有料テーマのSANGOのカスタマイズもいくつか紹介していますので、ぜひこちらの記事も参考にしてください。

wordPressのカスタマイズでも使える基本のタグ一覧

最後に使用頻度の高いタグをまとめました。コーディング初学者が最初に勉強するタグです。ブログでも使えます。

基本構造、head内

右にスクロール >>

htmlHTML文章を表す。HTML文章において基本となる要素。
headHTML文章のヘッダ部分。この中に検索エンジンのための説明文やCSSファイルへのリンク、ページタイトルを記述する。
meta言語や説明文など、ページの情報記述
titleこの部分がブラウザやブックマークしたときに表示される
link参照する外部ファイル、主にCSSファイルを読み込む時に使う
bodyHTML文章のコンテンツ部分

コンテンツ内

HTML要素は、その要素内に入れられる要素が「カテゴリ指定」で決まっています。

右にスクロール >>

h1-h6見出しを表示
p文章の段落
img画像を表示
aリンクを貼る
ul番号のない箇条書きリスト
ol番号付き箇条書きリスト
liリストの各項目
br改行
strong太文で表示される
blockquote引用文
small著作権表示・法的表記
span意味をもたないインライン要素
audio音声データを埋め込みに使用する
video動画データを埋め込みに使用する
scriptスクリプトデータを埋め込んだり参照する。通常JavaScriptのコードを使う

tableタグとは、HTMLで表組みを作るためのタグの1つです。

table表を示すタグ
tr表の1行を囲む
th表の見出しとなるセルを作成する
td表のデータとなるセルを作成する

フォーム

ユーザーがデータを入力することの出来る「お問い合わせページ」や「アンケートページ」などを作成することができます。

右にスクロール >>

formフォームを作成する
<input type=”text”>1行テキストを入力
<input type=”radio”>ラジオボタン。選択項目のうち1つだけ選択可能
<input type=”checkbox”>チェックボックス。複数の項目を選択可能
<input type=”submit”>送信ボタン
selectセレクトボタン
optionセレクトボックスの選択項目を作成
textarea複数行テキスト入力欄
labelフォームのラベル。フォームのパートと各項目に名前を関連付けられる

ブロック要素

現在は CSS においてフローレイアウトの中で定義されています。

headerページ上部にある要素
navメインのナビゲーションメニュー
articleページ内の記事となる部分
section1つのテーマをもったグループ
mainページのメインコンテンツ部分
aside本文ではない補足情報
footerページ下部にある要素
div意味を持たないブロック要素

以上、ブログでも使えるコーディング初学者が最初に勉強するタグの紹介でした。

よくある質問

カスタマイズのよくある質問をまとめました。

コードが反映されない
手入力すると
反映されないことがあります。
画像の枠について
画像は透過してお使いください。