見出し画像

[Blogger #003] Author部分を編集

前回フッターを作ったけど、殺風景だよね。今日はAuthor 部分をいじる。
まずは、プロフ写真やら、自己紹介やらを書く。

ユーザープロフィールを設定

記入場所は、設定の中の一番下、全般のユーザープロフィールから編集画面へ。各項目を適当に記入。プロフ写真はここからアップロードする。

画像1

プロフィール部分のCSS追加

、前回フッターをつけたので、その他の部分も真似る。とりあえず、フッターの後ろに追加してみる。前回は色部分はコメントアウトしたが、マウスのっけた時に色変わる設定を使いたいので、適当な色に設定しておいた。

/* プロフィール ウィジェット */
.Profile .widget-content {
	text-align: center;
}

#Profile1 {
	margin-bottom: 2em!important;
}

#Profile1 a:hover {
	/*color: #eee;*/
}

.profile-name-link {
	color: #111!important;
	font-size: 18px;
	line-height: 1em;
	padding-left: 15px;
	font-weight: normal;
	background-image: none!important;
}

.profile-name-link:hover {
	color: #4da6ff!important;
}

.profile-textblock {
	font-size: 14px;
	margin: 1em 0;
}

.profile-link{
	font-size: .7em;
}

.profile-img {
	width: 70px;
	height: 70px;
	border: 2px solid #fff;
	border-radius: 50%;
	margin-bottom: 5px;
	transition: .3s;
}

.profile-img:hover {
	opacity: .8;
}

.profile-link {
	display: none;
}

/* フォローボタン */
.follow-button {
	display: flex;
	justify-content: space-around;
	max-width: 80%;
	margin: 1em auto 0;
}
.follow-button a:hover {
	transform: scale(1.2,1.2);
	transition: .3s;
}

#twitter {
	color: deepskyblue!important;
	font-size: 27px;
}
.follow-button .svg-twitter {
	margin-bottom: -1px;
}
.buttonname {
	font-size: 10px;
	color: #000!important;
}

/* SVG アイコン */
.feedlysvg {
	width: 40px;
	height: 40px;
	margin: -4px 1px -4px 0;
}

.hatebusvg {
	height: 35px;
	width: 35px;
	padding-bottom: 3px;
}
.googlephoto {
	width: 30px;
	height: 30px;
	margin: 2px 1px 0 5px;
}
.amazon-wish {
	width: 27px;
	height: 27px;
	margin: 3px 0 2px;
}
.linesvg {
	fill: #fff;
	height: 24px;
	width: 24px;
	padding-bottom: 2px;
}
.blogger-follow {
	width: 25px;
	height: 25px;
	margin: 5px 6px 2px 7px;
}

/* Font Awesome */
.svg {
	fill: currentColor;
	height: 1em;
	width: 1em;
	margin-left: 2px;
	margin-right: 2px;
	vertical-align: -8%;
}
.svg-external-link-alt {
	margin-left: 5px;
	vertical-align: -3%;
}
.svg-exclamation-triangle {
	fill: orange;
	margin-right: 5px;
	vertical-align: -8%;
}
.svg-youtube {
	margin-left: 4px;
	margin-right: 4px;
	fill: orangered;
	height: 1.1em;
	width: 1.1em;
	vertical-align: -10%;
}
.svg-spotify {
	fill: #1ede62;
	font-size: 19px;
	vertical-align: -10%;
}
.svg-info-circle {
	fill: skyblue;
	vertical-align: -5%;
}

ここまでで、こんな感じ

画像2

SNSアイコンをつける

参考にしている本家ふじろじっくさんのページはこの下にSNSアイコンがある。これは付けたいよね。まず、SVGセクションをBody内に入れとく。ついでだから、Twitter以外も片っ端から入れておく。後にいらないものは整理しよう。

<!--SVG コード-->
<svg style='display:none' xmlns='http://www.w3.org/2000/svg'>
<defs>
<symbol id='hatebusvg' viewbox='50 120 400 400'>
<g fill='#fff'>
<path d='M278.2,258.1q-13.6-15.2-37.8-17c14.4-3.9,24.8-9.6,31.4-17.3s9.8-17.8,9.8-30.7A55,55,0,0,0,275,166a48.8,48.8,0,0,0-19.2-18.6c-7.3-4-16-6.9-26.2-8.6s-28.1-2.4-53.7-2.4H113.6V363.6h64.2q38.7,0,55.8-2.6c11.4-1.8,20.9-4.8,28.6-8.9a52.5,52.5,0,0,0,21.9-21.4c5.1-9.2,7.7-19.9,7.7-32.1C291.8,281.7,287.3,268.2,278.2,258.1Zm-107-71.4h13.3q23.1,0,31,5.2c5.3,3.5,7.9,9.5,7.9,18s-2.9,14-8.5,17.4-16.1,5-31.4,5H171.2V186.7Zm52.8,130.3c-6.1,3.7-16.5,5.5-31.1,5.5H171.2V273h22.6c15,0,25.4,1.9,30.9,5.7s8.4,10.4,8.4,20S230.1,313.4,223.9,317.1Z'></path>
<path d='M357.6,306.1a28.8,28.8,0,1,0,28.8,28.8A28.8,28.8,0,0,0,357.6,306.1Z'></path><rect height='151.52' width='50' x='332.6' y='136.4'></rect>
</g>
</symbol>
<symbol id='feedlysvg' viewbox='0 0 500 500'>
<path d='M420.2,241.3L279.9,101c-16.5-16.5-43.2-16.5-59.7,0L79.9,241.3c-16.5,16.5-16.5,43.2,0,59.7 l99.8,99.8c6.7,6.7,15.9,10.6,25.4,10.6h90.7c7.6,0,18.4-4.4,23.9-9.9l100.5-100.5C436.6,284.5,436.6,257.8,420.2,241.3z' fill='#2fba2f'></path>
<path d='M274.9,182.6l-21-21c-2.1-2.1-5.6-2.1-7.8,0L140.2,267.5c-2.1,2.1-2.1,5.6,0,7.8l16.2,16.2h17.4 l101-101.1C277,188.2,277,184.7,274.9,182.6z' fill='#fff'></path>
<path d='M274.3,267.8l-21.1-21c-2.1-2.1-5.6-2.1-7.8,0l-35.4,35.4l-27.5,27.5c-2.1,2.1-2.1,5.6,0,7.8 l16.6,16.6h16.7l23.1-23.1l35.4-35.4C276.4,273.5,276.4,270,274.3,267.8z' fill='#fff'></path>
<path d='M274.8,353l-21-21c-2.1-2.1-5.6-2.1-7.8,0l-11.1,11.1l-9.5,9.5c-2.1,2.1-2.1,5.6,0,7.8 l16.3,16.3h17.2l15.9-15.9C276.9,358.7,276.9,355.2,274.8,353z' fill='#fff'></path>
</symbol>
<symbol id='googlephotosvg' viewbox='0 0 192 192'>
<path d='M43.6 49.4C67 49.4 86 68.4 86 91.8v3.9H5.1c-2.1 0-3.8-1.7-3.9-3.9 0-23.4 19-42.4 42.4-42.4z' fill='#ffbf05'></path>
<path d='M132.2 53.2c0 23.4-19 42.4-42.4 42.4H86V14.7c0-2.1 1.7-3.9 3.8-3.9 23.5 0 42.4 19 42.4 42.4z' fill='#fc5244'></path>
<path d='M128.4 141.9c-23.4 0-42.4-19-42.4-42.4v-3.9h80.9c2.1 0 3.9 1.7 3.9 3.8 0 23.5-19 42.5-42.4 42.5z' fill='#5293ff'></path>
<path d='M39.8 138c0-23.4 19-42.4 42.4-42.4H86v80.9c0 2.1-1.7 3.8-3.9 3.9-23.4 0-42.3-19-42.3-42.4z' fill='#3dba60'></path>
</symbol>
<symbol id='amazonsvg' viewbox='0 0 260 260'>
<g fill='none' fill-rule='evenodd'>
<path d='m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z' fill='#f90' fill-rule='nonzero'></path>
<path d='m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095' fill='#282828'></path>
<path d='m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z' fill='#f90' fill-rule='nonzero'></path>
<path d='m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095' fill='#fff'></path>
</g>
</symbol>
<symbol id='linesvg' viewBox='0 0 315 300'>
<path d='M295.838,115.347l0.003-0.001l-0.092-0.76c-0.001-0.013-0.002-0.023-0.004-0.036c-0.001-0.011-0.002-0.021-0.004-0.032   l-0.344-2.858c-0.069-0.574-0.148-1.228-0.238-1.974l-0.072-0.594l-0.147,0.018c-3.617-20.571-13.553-40.093-28.942-56.762   c-15.317-16.589-35.217-29.687-57.548-37.878c-19.133-7.018-39.434-10.577-60.337-10.577c-28.22,0-55.627,6.637-79.257,19.193   C23.289,47.297-3.585,91.799,0.387,136.461c2.056,23.111,11.11,45.11,26.184,63.621c14.188,17.423,33.381,31.483,55.503,40.66   c13.602,5.642,27.051,8.301,41.291,11.116l1.667,0.33c3.921,0.776,4.975,1.842,5.247,2.264c0.503,0.784,0.24,2.329,0.038,3.18   c-0.186,0.785-0.378,1.568-0.57,2.352c-1.529,6.235-3.11,12.683-1.868,19.792c1.428,8.172,6.531,12.859,14.001,12.86   c0.001,0,0.001,0,0.002,0c8.035,0,17.18-5.39,23.231-8.956l0.808-0.475c14.436-8.478,28.036-18.041,38.271-25.425   c22.397-16.159,47.783-34.475,66.815-58.17C290.172,175.745,299.2,145.078,295.838,115.347z M92.343,160.561H66.761   c-3.866,0-7-3.134-7-7V99.865c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7v46.696h18.581c3.866,0,7,3.134,7,7   C99.343,157.427,96.209,160.561,92.343,160.561z M119.03,153.371c0,3.866-3.134,7-7,7c-3.866,0-7-3.134-7-7V99.675   c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7V153.371z M182.304,153.371c0,3.033-1.953,5.721-4.838,6.658   c-0.712,0.231-1.441,0.343-2.161,0.343c-2.199,0-4.323-1.039-5.666-2.888l-25.207-34.717v30.605c0,3.866-3.134,7-7,7   c-3.866,0-7-3.134-7-7v-52.16c0-3.033,1.953-5.721,4.838-6.658c2.886-0.936,6.045,0.09,7.827,2.545l25.207,34.717V99.675   c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7V153.371z M233.311,159.269h-34.645c-3.866,0-7-3.134-7-7v-26.847V98.573   c0-3.866,3.134-7,7-7h33.57c3.866,0,7,3.134,7,7s-3.134,7-7,7h-26.57v12.849h21.562c3.866,0,7,3.134,7,7c0,3.866-3.134,7-7,7   h-21.562v12.847h27.645c3.866,0,7,3.134,7,7S237.177,159.269,233.311,159.269z'></path>
</symbol>
<symbol id='bloggersvg' viewBox='0 0 512 512'>
<path d='M58.5,510c-9.6-2.5-17.8-6.2-25.5-11.4c-6.4-4.4-15.8-13.5-19.4-18.8c-4.4-6.4-9.4-17.5-11.4-25.1 C0.1,446.9,0,443.7,0,256.4C0,70,0,65.9,2.1,57.9C9.3,29.5,31.7,8,60.6,1.6c8.3-1.8,379.6-2.2,388.5-0.3 c24.3,5,43.3,19.6,54.4,41.6c8.8,17.5,8-1.8,8.4,206.4c0.3,132.4,0,188-0.8,194.9c-4,32.4-26.3,57.6-58.4,65.8 c-8.2,2.1-11.1,2.1-197.6,2.1C74.8,511.9,65.5,511.8,58.5,510z' fill='#fa9428'></path>
<path d='M328.7,412.9c22.9-3.1,40.9-12.3,57.8-29.6c12.2-12.5,19.8-26,24.8-43.9c2.1-7.4,2.2-11.1,2.6-54.7 c0.3-33,0-48.4-0.8-52.3c-1.2-5.6-4.8-10.9-8.8-13.1c-1.2-0.7-9.2-1.5-17.6-1.9c-14.2-0.6-15.8-0.9-20.2-3.5 c-7.1-4.2-9-8.6-9.1-20.8c0-23.3-9.7-44.9-28.9-64.4c-13.6-13.9-28.9-23.3-46.2-28.6c-4.2-1.3-13.5-1.7-44.7-2.1 c-48.9-0.6-59.8,0.4-76.5,7.1c-30.7,12.2-52.8,38-60.8,71.1c-1.5,6.2-1.8,16.2-2.2,73.3c-0.4,71.6,0,82.1,4.5,96.3 c3.7,11.7,7.4,18.9,15.1,29.1c14.6,19.4,36.6,33.5,58.5,37.4C186.7,414.3,315.5,414.7,328.7,412.9z' fill='#fff'></path>
<path d='M324.6,300.9c8.5,7.9,6.7,22-3.5,27.8l-10.5,1.7l-61.9,0.7c-41.7,0.4-54.3-0.4-56.8-1.4l-0.1,0 c-5-2.2-9.7-8.3-10.5-13.7c-0.8-5.1,1.8-12.2,5.8-15.8l0.9-0.8c3.9-3.2,8.4-3.8,45.3-3.9l42.6,0C319,295.4,319.4,296,324.6,300.9z M263.9,184.2c6.6,3.3,9.4,8,9.4,15.5c0,6.5-2.5,11.1-8,14.8l-1.1,0.7c-2.7,1.6-5.3,1.9-26.1,2l-13.4,0.1 c-16.6,0-29.4-0.3-31.5-0.9c-11.7-3.2-16.1-20.1-7.5-28.8l0.8-0.8c4.6-4.5,7.5-4.9,34.6-5l20.4,0 C258.8,181.9,260.2,182.3,263.9,184.2z' fill='#fa9428'></path>
</symbol>
<!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
<symbol id='svg-twitter' viewBox='0 0 512 512'>
<path d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'></path>
</symbol>
<symbol id='svg-facebook-f' viewBox='0 0 320 512'>
<path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'></path>
</symbol>
<symbol id='svg-external-link-alt' viewBox='0 0 512 512'>
<path d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'></path>
</symbol>
<symbol id='svg-get-pocket' viewbox='0 0 448 512'>
<path d='M407.6 64h-367C18.5 64 0 82.5 0 104.6v135.2C0 364.5 99.7 464 224.2 464c124 0 223.8-99.5 223.8-224.2V104.6c0-22.4-17.7-40.6-40.4-40.6zm-162 268.5c-12.4 11.8-31.4 11.1-42.4 0C89.5 223.6 88.3 227.4 88.3 209.3c0-16.9 13.8-30.7 30.7-30.7 17 0 16.1 3.8 105.2 89.3 90.6-86.9 88.6-89.3 105.5-89.3 16.9 0 30.7 13.8 30.7 30.7 0 17.8-2.9 15.7-114.8 123.2z'></path>
</symbol>
<symbol id='svg-youtube' viewbox='0 0 576 512'>
<path d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'></path>
</symbol>
<symbol id='svg-spotify' viewbox='0 0 512 512'>
<path d='M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z'></path>
</symbol>
<symbol id='svg-rocket' viewbox='0 0 512 512'>
<path d='M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z'></path>
</symbol>
<symbol id='svg-home' viewbox='0 0 576 512'>
<path d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'></path>
</symbol>
<symbol id='svg-blogger' viewbox='0 0 512 512'>
<path d='M162.4 196c4.8-4.9 6.2-5.1 36.4-5.1 27.2 0 28.1.1 32.1 2.1 5.8 2.9 8.3 7 8.3 13.6 0 5.9-2.4 10-7.6 13.4-2.8 1.8-4.5 1.9-31.1 2.1-16.4.1-29.5-.2-31.5-.8-10.3-2.9-14.1-17.7-6.6-25.3zm61.4 94.5c-53.9 0-55.8.2-60.2 4.1-3.5 3.1-5.7 9.4-5.1 13.9.7 4.7 4.8 10.1 9.2 12 2.2 1 14.1 1.7 56.3 1.2l47.9-.6 9.2-1.5c9-5.1 10.5-17.4 3.1-24.4-5.3-4.7-5-4.7-60.4-4.7zm223.4 130.1c-3.5 28.4-23 50.4-51.1 57.5-7.2 1.8-9.7 1.9-172.9 1.8-157.8 0-165.9-.1-172-1.8-8.4-2.2-15.6-5.5-22.3-10-5.6-3.8-13.9-11.8-17-16.4-3.8-5.6-8.2-15.3-10-22C.1 423 0 420.3 0 256.3 0 93.2 0 89.7 1.8 82.6 8.1 57.9 27.7 39 53 33.4c7.3-1.6 332.1-1.9 340-.3 21.2 4.3 37.9 17.1 47.6 36.4 7.7 15.3 7-1.5 7.3 180.6.2 115.8 0 164.5-.7 170.5zm-85.4-185.2c-1.1-5-4.2-9.6-7.7-11.5-1.1-.6-8-1.3-15.5-1.7-12.4-.6-13.8-.8-17.8-3.1-6.2-3.6-7.9-7.6-8-18.3 0-20.4-8.5-39.4-25.3-56.5-12-12.2-25.3-20.5-40.6-25.1-3.6-1.1-11.8-1.5-39.2-1.8-42.9-.5-52.5.4-67.1 6.2-27 10.7-46.3 33.4-53.4 62.4-1.3 5.4-1.6 14.2-1.9 64.3-.4 62.8 0 72.1 4 84.5 9.7 30.7 37.1 53.4 64.6 58.4 9.2 1.7 122.2 2.1 133.7.5 20.1-2.7 35.9-10.8 50.7-25.9 10.7-10.9 17.4-22.8 21.8-38.5 3.2-10.9 2.9-88.4 1.7-93.9z'></path>
</symbol>
<symbol id='svg-search' viewbox='0 0 512 512'>
<path d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'></path>
</symbol>
<symbol id='svg-chevron-left' viewBox='0 0 320 512'>
<path d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'></path>
</symbol>
<symbol id='svg-chevron-right' viewBox='0 0 320 512'>
<path d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'></path>
</symbol>
<symbol id='svg-clock' viewbox='0 0 512 512'>
<path d='M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z'></path>
</symbol>
<symbol id='svg-sync' viewbox='0 0 512 512'>
<path d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z'></path>
</symbol>
<symbol id='svg-comment' viewbox='0 0 512 512'>
<path d='M144 208c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zM256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z'></path>
</symbol>
<symbol id='svg-info-circle' viewbox='0 0 512 512'>
<path d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'></path>
</symbol>
<symbol id='svg-exclamation-circle' viewbox='0 0 512 512'>
<path d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'></path>
</symbol>
<symbol id='svg-envelope' viewbox='0 0 512 512'>
<path d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'></path>
</symbol>
<symbol id='svg-caret-down' viewbox='0 0 320 512'>
<path d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'></path>
</symbol>
<symbol id='svg-exclamation-triangle' viewbox='0 0 576 512'>
<path d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'></path>
</symbol>
<symbol id='svg-copyright' viewBox='0 0 512 512'>
<path d='M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 448c-110.532 0-200-89.451-200-200 0-110.531 89.451-200 200-200 110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200zm107.351-101.064c-9.614 9.712-45.53 41.396-104.065 41.396-82.43 0-140.484-61.425-140.484-141.567 0-79.152 60.275-139.401 139.762-139.401 55.531 0 88.738 26.62 97.593 34.779a11.965 11.965 0 0 1 1.936 15.322l-18.155 28.113c-3.841 5.95-11.966 7.282-17.499 2.921-8.595-6.776-31.814-22.538-61.708-22.538-48.303 0-77.916 35.33-77.916 80.082 0 41.589 26.888 83.692 78.277 83.692 32.657 0 56.843-19.039 65.726-27.225 5.27-4.857 13.596-4.039 17.82 1.738l19.865 27.17a11.947 11.947 0 0 1-1.152 15.518z'></path>
</symbol>
<symbol id='svg-coffee' viewBox='0 0 640 512'>
<path d='M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z'></path>
</symbol>
<symbol id='svg-list-ol' viewBox='0 0 512 512'>
<path d='M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z'></path>
</symbol>
<symbol id='svg-trash-alt' viewBox='0 0 448 512'>
<path d='M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z'></path>
</symbol>
<symbol id='svg-user' viewBox='0 0 448 512'>
<path d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'></path>
</symbol>
<symbol id='svg-comments' viewBox='0 0 576 512'>
<path d='M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z'></path>
</symbol>
<symbol id='svg-comment-medical' viewBox='0 0 512 512'>
<path d='M256 32C114.62 32 0 125.12 0 240c0 49.56 21.41 95 57 130.74C44.46 421.05 2.7 466 2.2 466.5A8 8 0 0 0 8 480c66.26 0 116-31.75 140.6-51.38A304.66 304.66 0 0 0 256 448c141.39 0 256-93.12 256-208S397.39 32 256 32zm96 232a8 8 0 0 1-8 8h-56v56a8 8 0 0 1-8 8h-48a8 8 0 0 1-8-8v-56h-56a8 8 0 0 1-8-8v-48a8 8 0 0 1 8-8h56v-56a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v56h56a8 8 0 0 1 8 8z'></path>
</symbol>
<symbol id='svg-angle-double-down' viewBox='0 0 320 512'>
<path d='M143 256.3L7 120.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0L313 86.3c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.5-24.6 9.5-34 .1zm34 192l136-136c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0L160 352.1l-96.4-96.4c-9.4-9.4-24.6-9.4-33.9 0L7 278.3c-9.4 9.4-9.4 24.6 0 33.9l136 136c9.4 9.5 24.6 9.5 34 .1z'></path>
</symbol>
<symbol id='svg-tag' viewBox='0 0 512 512'>
<path d='M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z'></path>
</symbol>
<symbol id='svg-sort' viewBox='0 0 320 512'>
<path d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'></path>
</symbol>
<symbol id='svg-pen' viewBox='0 0 512 512'>
<path d='M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z'></path>
</symbol>
<symbol id='svg-calendar-alt' viewBox='0 0 448 512'>
<path d='M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z'></path>
</symbol>
</defs>
</svg>

Twitter リンクを貼り付ける

html 中のフッター3、プロファイルセクションを探す。ここ。

<b:section id='フッター3'>
 <b:widget id='Profile1' locked='false' title='AUTHOR' type='Profile'>

ここの、</dl><a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a> 部分のあとに、リンクを追加。こんな感じのタグ。

      <a href='//twitter.com/learnanything7' id='twitter' rel='noopener' target='_blank' title='@LearnAnything7'><svg class='svg svg-twitter'><use href='#svg-twitter'></use></svg><div class='buttonname'>Twitter</div></a>

ここまでで、めでたくアイコンが表示されました。

画像3

Blogger のフォローボタンも追加

追加するリンクは以下。

	<a href='//www.blogger.com/follow.g?view=FOLLOW&amp;blogID=6450298121806207978' id='blogger' rel='noopener' target='_blank' title='このブログをフォローする'><svg class='blogger-follow'><use href='#bloggersvg'/></svg><div class='buttonname'>Follow</div></a>

ここのblogIDを変えないといけないんだが、見当たらないので、標準のフォロワーウィジットを一旦埋め込んでみて確認する。

画像4

埋め込んだら、表示してみて、フォローするボタンのリンクをコピーする。このボタン。

画像5

リンクがこんな感じで、太字部分がID。

javascript:openPopup("https://www.blogger.com/follow.g?view\x3dFOLLOW\x26blogID\x3d6450298121806207978",300)

これを、リンクのID部分へ埋め込む。

FontAwesomeとかjQueryとかを入れておく

今回使ってないけど、カスタマイズ記事よんでると導入することになりそうだったし、svgを入れる時に近くにFontAwesomeがあったので、ついでで入れておく。

Font Awesome アイコンを準備する </head>前に追加

<link href='//use.fontawesome.com/releases/v5.14.0/css/all.css' rel='stylesheet' type='text/css'/>

さっきの<!--SVG コード-->の前に、jQueryを追加

<!--jQuery-->
<script async='async' src='//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js'></script>

本日は、ここまで。配置が気に入らないけど、また今度。

いいなと思ったら応援しよう!