株式会社ぴよたんの癒しの森(@piyomorichannel)のシステムエンジニアのMOGUです！
今日は、ワードプレス無料テーマ「Cocoon」のトップボタンに戻るカスタマイズの紹介です。
弊社は、トップボタンの動きを加えるカスタマイズなど無料で承ります
トップボタンをカスタマイズしたい人は、ぜひコピーしてお使いください。
コードをコピーして貼り付ける
作業手順はこれだけです。それではカスタマイズを一緒に行っていきましょう
WordPressテーマ「Cocoon」とは？
Cocoonは、2018年に日本人の「わいひら」さんによって制作された無料のWordPressテーマです。同じく無料のテーマ「Simplicity」の後継として制作されました。
Cocoonのトップボタンを画像に変える
それでは、Cocoonのトップへ戻るボタンを画像に変える方法について解説します。
参考サイトのトップに戻るボタンを確認後、カスタマイズ作業をしてください。
参考サイト ぴよたんブログ
チェックを入れてください
デフォルト設定
150 x 150サイズの画像にしてください。
Cocoonのトップボタン画像に動きを加える
style.cssにコードを入れてください。
/************************************
** トップボタン
************************************/
.go-to-top-button-image{
-webkit-transition: all 1s;
transition: all 1s;
}
.go-to-top-button-image:hover{
-webkit-transform: rotate(720deg);
transform: rotate(720deg); /* 720度回転 */
opacity: 0.7; /* 透過率70% */
}
.go-to-top {
right: 10px;
bottom: 20px;
}
.go-to-top-button {
background:#bde1dc;
width: 60px; /* 横幅指定 */
height: auto;
max-width: 60px; /* 最大横幅 */
}作業は以上です！
他のカスタマイズ
カスタマイズレベル( )
カスタマイズレベル( )
カスタマイズレベル( )
カスタマイズレベル( )
他のテーマのカスタマイズ
ワードプレス有料テーマの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 | 表の１行を囲む |
| th | 表の見出しとなるセルを作成する |
| td | 表のデータとなるセルを作成する |
フォーム
ユーザーがデータを入力することの出来る「お問い合わせページ」や「アンケートページ」などを作成することができます。
右にスクロール >>
| form | フォームを作成する |
| <input type=”text”> | １行テキストを入力 |
| <input type=”radio”> | ラジオボタン。選択項目のうち1つだけ選択可能 |
| <input type=”checkbox”> | チェックボックス。複数の項目を選択可能 |
| <input type=”submit”> | 送信ボタン |
| select | セレクトボタン |
| option | セレクトボックスの選択項目を作成 |
| textarea | 複数行テキスト入力欄 |
| label | フォームのラベル。フォームのパートと各項目に名前を関連付けられる |
ブロック要素
現在は CSS においてフローレイアウトの中で定義されています。
| header | ページ上部にある要素 |
| nav | メインのナビゲーションメニュー |
| article | ページ内の記事となる部分 |
| section | 1つのテーマをもったグループ |
| main | ページのメインコンテンツ部分 |
| aside | 本文ではない補足情報 |
| footer | ページ下部にある要素 |
| div | 意味を持たないブロック要素 |
以上、ブログでも使えるコーディング初学者が最初に勉強するタグの紹介でした。
よくある質問
カスタマイズのよくある質問をまとめました。
- トップボタンのサイズは調整できますか？
- はい、調整可能です。
上記の手順で、style.cssにコードを入れてください。
.go-to-top-button {
width: 100px;
height: 100px;
}
100pxを変更しながら調整してください。
- コードが反映されない
- 手入力すると
反映されないことがあります。
