自己紹介セクションの作り方

トップページ

今回は上の画像にあるような自己紹介セクションの作り方について解説していきます。

カスタマイザーを開く

管理画面の左側「外観」から「カスタマイズ」を開きましょう。

ここで開いた画面のことを「カスタマイザー」と言います。

カスタマイザーを開いたら一番上に「トップページのカスタマイズ」があります。

今回はここから自己紹介セクションを編集していきます。

自己紹介の見出し

当サイトでは「こんにちは。センリです。」と書いてある部分です。

ここを入力すると自己紹介セクションが表示されます。

自己紹介の見出しを非表示にしたい場合

カスタマイザーの追加CSSに下記のコードを入力しましょう。

/*自己紹介セクションの見出しを非表示*/
.introduce_container h2{
	display:none;
}

自己紹介セクションの背景画像

背景画像は縦方向はセンターが、横方向は左端が基準となって表示されます

表示する画面の横幅が狭くなると、右側から表示されなくなるということですね。

標準の仕様では、右側に文章が表示されるので、人物写真を載せる場合は左側に載せるのがおすすめです。

テキストをセンター表示にしたい場合

カスタマイザーの追加CSSに下記のコードを入力しましょう。

/*自己紹介セクションのテキストをセンター表示*/
.introduce_l_box {
	display:none;
}

@media screen and (min-width: 760px) {
	.introduce_r_box {
	width:700px;
}
}

自己紹介の文章

自己紹介の文章を表示することができます。

自己紹介の文章中にリンクを含めたい場合は下記を参考にしてみてください。

テキストにリンクを含めたい場合

テキストの入力画面に

わからないところはSlackで質問し放題。ちょっとしたデザインのカスタマイズも全部聞けます。また、<a href="https://nihongosensei.online/manual/">マニュアル</a>も作成中です。

自己紹介のリンク

  • リンクテキスト
  • リンク先URL
  • リンクボタンの色

この3つを設定することが可能です。

リンクボタンはURLを入力すると表示されるようになります。

ボタンの色は初期設定では青っぽい色になっています。

変更したい方は「色見本 原色大辞典」を参考にして色コードを調べましょう。

コメント

タイトルとURLをコピーしました