株式会社ぴよたんの癒しの森(@piyomorichannel)のシステムエンジニアのMOGUです!
今日は、ワードプレスの有料テーマ「SANGO」の画像比較を卵型にするカスタマイズを紹介します。
弊社は、画像比較を卵型にするカスタマイズなどすべて無料で承ります
画像比較を卵型にしたい人は、ぜひコピーして使用してください。
SANGOの画像比較ブロック
SANGO Blocksから、SANGO公式の画像比較ブロックをコピーしてください。
デフォルトは以下の通り。
画像比較ブロックは有料レベルだと思うのですが、SANGOでは無料で公開をしています。
デフォルトのままでも十分過ぎますが、もう少しインパクトを強めたいと思います。
SANGOの画像比較ブロックをカスタマイズ
.icv__img { pointer-events: none; user-select: none; max-width: none; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; top: 0; display: block
}
.icv__img { border-radius: 41% 59% 30% 70% / 54% 59% 41% 46%;
}
上記のように変更することで、卵型のような独特な画像にチェンジできます。
ブロックをコピーか、デフォルトのカスタムCSSに上記のコードをお使いください。
他のカスタマイズ
カスタマイズレベル( )
カスタマイズレベル( )
カスタマイズレベル( )
カスタマイズレベル( )
他のテーマのカスタマイズ
ワードプレス無料テーマのCocoonのカスタマイズもいくつか紹介していますので、ぜひこちらの記事も参考にしてください。
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 | 意味を持たないブロック要素 |
以上、ブログでも使えるコーディング初学者が最初に勉強するタグの紹介でした。
よくある質問
カスタマイズのよくある質問をまとめました。
- 他のテーマでもコードは使えますか?
- SANGOのコードになります。
他のテーマでは使用できません。
- コードが反映されない
- 手入力はせず
コピーしてお使いください。