株式会社ぴよたんの癒しの森(@piyomorichannel)のシステムエンジニアのMOGUです!
今日は、ワードプレス無料テーマ「Cocoon」の目次に画像を入れるカスタマイズの紹介です。
弊社は、目次のカスタマイズなど無料で承ります
目次に画像を入れるカスタマイズしたい人は、ぜひコピーしてお使いください。
コードをコピーして貼り付ける
作業手順はこれだけです。それではカスタマイズを一緒に行っていきましょう
ワードプレスのメディア画像のurlを調べる方法
参考サイトの目次を確認後、カスタマイズ作業をしてください
参考サイト ぴよたんブログ
目次に入れる画像のurlの調べる方法はこちらになります。
画像サイズは、150X150で調整しています
Cocoonの目次に画像を入れる方法
style.cssに「コード」を貼り付けましょう。
カラーは、各サイトに合わせた色に変更しましょう。
10番目の箇所 → background: url(※STEP4) → 上記の画像URLをコピーして貼り付けてください。
/* 目次全体デザイン */
.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内
右にスクロール >>
html | HTML文章を表す。HTML文章において基本となる要素。 |
head | HTML文章のヘッダ部分。この中に検索エンジンのための説明文やCSSファイルへのリンク、ページタイトルを記述する。 |
meta | 言語や説明文など、ページの情報記述 |
title | この部分がブラウザやブックマークしたときに表示される |
link | 参照する外部ファイル、主にCSSファイルを読み込む時に使う |
body | HTML文章のコンテンツ部分 |
コンテンツ内
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 | ページ内の記事となる部分 |
section | 1つのテーマをもったグループ |
main | ページのメインコンテンツ部分 |
aside | 本文ではない補足情報 |
footer | ページ下部にある要素 |
div | 意味を持たないブロック要素 |
以上、ブログでも使えるコーディング初学者が最初に勉強するタグの紹介でした。
よくある質問
カスタマイズのよくある質問をまとめました。
- コードが反映されない
- 手入力すると
反映されないことがあります。
- 画像の枠について
- 画像は透過してお使いください。