ブログ

HOME
ブログ
ホームページ作成
JIMDOで塗装店様のホームページを作成しました

2023年2月13日 / 最終更新日時 : 2023年2月27日 itie070 ホームページ作成

JIMDOで塗装店様のホームページを作成しました

今回は、デザイン以外の文言等はご自身でされるとのことで、
ウィジェットにHTMLを入力し、CSSでレイアウトをカスタマイズ、画像の修正加工等しました。

JIMDOはテンプレート以外のことをしようとすると、かなりCSSでの修正が必要になりました。

特にスマホ表示はずれますし…見た目より頑張りました…(^^)

感想として

非常に満足です。

とお言葉を頂け嬉しかったです。
本当にありがとうございましたm(_ _)m

制作メモ

ブロック
https://custom-tech.jimdo.com/%E6%A7%8B%E6%88%90-%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88-%E6%A9%9F%E8%83%BD/

構成
https://custom-tech.jimdo.com/%E6%A7%8B%E6%88%90-%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88-%E6%A9%9F%E8%83%BD/

オレンジ
cf5d3b

濃い青
2a2d74

普通の青
275b97

薄い青
408cc6

文字色
1a1819

背景青
A8C9E2

クリーム背景
f9f8e4

以下CSS

/pの色少し濃く/
body p{
color:#35383a;
}
/トップ画像の高さ/
.jtpl-title{
height: 900px;
}
/トップ画像中央の会社名の位置を下に/

cc-website-title{

padding-top:100px;

}
/トップスライドショースマホ用/

cc-m-11991599577{

width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
display: block;
margih-top:0px;
padding:0;

}
/メインコンテンツとトップ画像間の余白非表示/
.j-nav-variant-breadcrumb{
margin:0;
}
.jtpl-breadcrumb{
margin:0;
}
/メインコンテンツを囲むエリアmargin0を入れると中央揃えしない/
.jtpl-content__inner{
padding:0 5px;
}
/余白非表示しスマホでのズレ解消/

content_area{

margin:0px;
padding:0px;

}

/スマホ用に画像を非表示にする/
/* スマホ用の画像をパソコンでは非表示 /
.cc-pagemode-default #cc-m-11991599577 {
display: none;
}
/ パソコン用の画像をスマホでは非表示 /
@media screen and (max-width: 767px) {
.cc-pagemode-default .jtpl-title {
display: none; padding:0px; margin:0px;
}
/スマホ用の画像を表示 /
.cc-pagemode-default #cc-m-11991599577 {
display: block;
}
}
.jtpl-section cc-content-parent{
padding:0px; margin:0px;
}
/お知らせのREAD MORE*/
#cc-m-11992029577 a {
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto 0 auto;
padding: 0.5em 1em;
width: 248px;
font-size: 16px;
font-weight: 400;
border: 1px solid #010101;
color:#010101;

}

cc-m-11992029577 a::after {

content: '';

width: 5px;
height: 5px;
border-top: 1px solid #010101;
border-right: 1px solid #010101;
transform: rotate(45deg);
}

cc-m-11992029577 a:hover {

color: #fff;
background-color: #010101;
border: 1px solid #010101;
}

cc-m-11992029577 a:hover::after {

border-top: 3px solid #333333;
border-right: 3px solid #333333;
}

/NEWSのフォント変更/

cc-m-header-11989490277{

font-family: 'Arial','Courier','メイリオ',sans-serif;

}
/お知らせの下の日付など真ん中に寄せる等/

cc-m-11989098777 ul{

width:350px;
margin: auto;
font-size:0.9em;
    font-family :
    YuMincho,    /* Mac用 */
    'Yu Mincho', /* Windows用 */
    serif;

}
/THREE STRENGTHSのフォント変更/

cc-m-header-11989477677{

font-family: 'Arial','Courier','メイリオ',sans-serif;

}

/01 03を左に寄せる等/

k-001 h3{

text-align:left;
color:#275b97;
font-family: 'Arial','Courier','メイリオ',sans-serif;
font-size:1.7rem;
font-weight: 600;

}
/01 03の下のh2を左に寄せる等/

k-001 h2{

text-align:left;
font-size:3rem;

}
/01の文章の左に青線と文字少しインデント/

cc-m-11989516177{

border-left: 1px solid #275b97;
padding:30px;

}
/02を左に寄せる等/

k-002 h3{

text-align:left;
color:#275b97;
font-family: 'Arial','Courier','メイリオ',sans-serif;
font-size:1.7rem;
font-weight: 600;
padding-left:10px;

}
/02の下のh2を左に寄せる等/

k-002 h2{

text-align:left;
font-size:3rem;
padding-left:10px;

}

/02の文章の右に青線と文字少しインデント/

cc-m-11989519177{

border-left: 1px solid #275b97;
padding:30px;
margin:0px;

}

/03の文章の左に青線と文字少しインデント/

cc-m-11990728377{

border-left: 1px solid #275b97;
padding:30px;

}
/縦書き/

cc-m-11990733577 h3 {

writing-mode: vertical-rl;
    font-family :
    YuMincho,    /* Mac用 */
    'Yu Mincho', /* Windows用 */
    serif;
font-size:1.7rem;
font-weight: 600;

}
/施工事例の画像の左に線/

cc-m-11990735177{

border-left: 1px solid #1a1819;

}

/スマホ用に画像を非表示にする/
/* スマホ用の画像をパソコンでは非表示 /
.cc-pagemode-default #cc-m-11990750577 {
display: none;
}
/ パソコン用の画像をスマホでは非表示 /
@media screen and (max-width: 767px) {
.cc-pagemode-default #cc-m-11989519377 {
display: none;
}
/ スマホ用の画像を表示 /
.cc-pagemode-default #cc-m-11990750577 {
display: block;
}
}
/会社情報ワイドパソコン用*/

cc-m-11990757577{

width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
height: auto;
display: block;
background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=1980x10000:format=jpg/path/sfc4a21a4ff15ecc8/image/i6a04ff191f5272c0/version/1675663307/company-wide.jpg);
background-repeat: repeat-x;
text-align:center;
color:#ffffff;
height:700px;
text-shadow: 3px 4px 5px #424242;

}
/会社情報/

cc-m-11990757577 h1{

color:#ffffff;
margin-bottom:30px;

}
/COMPANY/

cc-m-11990757577 h3{

color:#ffffff;
margin-top:200px;
margin-bottom:10px;

}
/加藤建装は職人としての誇りを持って丁寧な仕事を行います/

cc-m-11990757577 p{

font-size:1.5em;
padding:20px 20px 50px 20px;
color:#fff;

}
/会社案内ボタン READ MORE/

cc-m-11990757577 a {

display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0.5em 1em;
width: 258px;
font-size: 16px;
font-weight: 400;
border: 1px solid #fff;
color:#fff;

}

cc-m-11990757577 a::after {

content: ”;
width: 5px;
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
}

cc-m-11990757577 a:hover {

color: #fff;
text-decoration: none;
background-color: #010101;
border: 1px solid #010101;
}

cc-m-11990757577 a:hover::after {

border-top: 3px solid #333333;
border-right: 3px solid #333333;
}

/会社情報ワイドスマホ用/

cc-m-11991588577{

height:600px;
background-image: url("https://image.jimcdn.com/app/cms/image/transf/none/path/sfc4a21a4ff15ecc8/image/i6b6df202347981e6/version/1675784504/image.jpg");
background-repeat: no-repeat;
background-position: center;
color:#ffffff;
padding-top:270px;
width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
display: block;
text-align:center;
text-shadow: 1px 2px 3px #424242;

}
/会社情報/

cc-m-11991588577 h1{

color:#ffffff;
margin-bottom:30px;

}
/COMPANY/

cc-m-11991588577 h3{

color:#ffffff;
margin-bottom:10px;

}
/加藤建装は職人としての誇りを持って丁寧な仕事を行います/

cc-m-11991588577 p{

font-size:1.3em;
margin-bottom:50px;
color:#fff;

}
/会社案内ボタン READ MORE/

cc-m-11991588577 a {

display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0.5em 1em;
width: 248px;
font-size: 16px;
font-weight: 400;
border: 1px solid #fff;
color:#fff;

}

cc-m-11991588577 a::after {

content: ”;
width: 5px;
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
}

cc-m-11991588577 a:hover {

color: #fff;
text-decoration: none;
background-color: #010101;
border: 1px solid #010101;
}

cc-m-11991588577 a:hover::after {

border-top: 3px solid #333333;
border-right: 3px solid #333333;
}

/スマホ用に画像を非表示にする/
/* スマホ用の画像をパソコンでは非表示 /
.cc-pagemode-default #cc-m-11991588577 {
display: none;
}
/ パソコン用の画像をスマホでは非表示 /
@media screen and (max-width: 767px) {
.cc-pagemode-default #cc-m-11990757577 {
display: none;
}
/ スマホ用の画像を表示 */
.cc-pagemode-default #cc-m-11991588577 {
display: block;
}
}

/よくあるご質問ワイドパソコン用/

cc-m-11990776677{

width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
height: auto;
display: block;
background-image: url("https://image.jimcdn.com/app/cms/image/transf/dimension=2048x2048:format=jpg/path/sfc4a21a4ff15ecc8/image/i91df70b8195aa76b/version/1676028064/image.jpg");
background-repeat: no-repeat;
color:#010101;
height:700px;
padding-top:200px;
background-position: center;

}
/よくあるご質問/

cc-m-11990776677 h1{

color:#010101;
margin-bottom:30px;
font-size:2em;

}
/FAQ/

cc-m-11990776677 h3{

color:#010101;
margin-top:100px;
margin-bottom:10px;

}
/塗り替えはどうして必要なのか… 塗装の費用はどのくらいかかるのか…などお客様から寄せられるご質問集です/

cc-m-11990776677 p{

font-size:1em;
padding:20px 20px 50px 20px;
}
/よくあるご質問ボタン READ MORE/

cc-m-11990776677 a {

display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0.5em 1em;
width: 258px;
font-size: 16px;
font-weight: 400;
border: 1px solid #010101;
color:#010101;

}

cc-m-11990776677 a::after {

content: '';

width: 5px;
height: 5px;
border-top: 1px solid #010101;
border-right: 1px solid #010101;
transform: rotate(45deg);
}

cc-m-11990776677 a:hover {

color: #fff;
background-color: #010101;
border: 1px solid #010101;
}

cc-m-11990776677 a:hover::after {

border-top: 3px solid #333333;
border-right: 3px solid #333333;
}
/白枠/
div #k-004{
border: 1px solid #fff;
background-color:#fff;
width:450px;
height:450px;
text-align:center;
padding:10px;
margin: 0 auto;
opacity: 0.8;
}
/よくあるご質問ワイドスマホ用/

cc-m-11991561177{

height:600px;
background-image: url("https://image.jimcdn.com/app/cms/image/transf/none/path/sfc4a21a4ff15ecc8/image/i464cc2aa60355cc1/version/1675958310/image.jpg");
background-repeat: no-repeat;
background-position: center;
color:#010101;
padding-top:270px;
width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
display: block;

}
/よくあるご質問/

cc-m-11991561177 h1{

color:#010101;
margin-bottom:30px;
font-size:1.2em;

}
/FAQ/

cc-m-11991561177 h3{

color:#010101;
margin-top:20px;
margin-bottom:10px;

}
/塗り替えはどうして必要なのか… 塗装の費用はどのくらいかかるのか…などお客様から寄せられるご質問集です/

cc-m-11991561177 p{

font-size:0.8em;
padding:20px 20px 50px 20px;

}
/よくあるご質問ボタン READ MORE/

cc-m-11991561177 a {

display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0.5em 1em;
width: 170px;
font-size: 16px;
font-weight: 400;
border: 1px solid #010101;
color:#010101;

}

cc-m-11991561177 a::after {

content: '';

width: 5px;
height: 5px;
border-top: 1px solid #010101;
border-right: 1px solid #010101;
transform: rotate(45deg);
}

cc-m-11991561177 a:hover {

color: #fff;
text-decoration: none;
background-color: #010101;
border: 1px solid #010101;
}

cc-m-11991561177 a:hover::after {

border-top: 3px solid #333333;
border-right: 3px solid #333333;
}
/白枠/
div #k-005{
border: 1px solid #fff;
background-color:#fff;
width:250px;
height:350px;
text-align:center;
padding:10px;
margin: 0 auto;
opacity: 0.8;
}

/スマホ用に画像を非表示にする/
/* スマホ用の画像をパソコンでは非表示 / .cc-pagemode-default #cc-m-11991561177 { display: none; } / パソコン用の画像をスマホでは非表示 / @media screen and (max-width: 767px) { .cc-pagemode-default #cc-m-11990776677 { display: none; } / スマホ用の画像を表示 */
.cc-pagemode-default #cc-m-11991561177 {
display: block;
}
}

/15年の信頼と、安心の技術/

cc-m-11989507577{

background-image: url(“https://image.jimcdn.com/app/cms/image/transf/none/path/sfc4a21a4ff15ecc8/image/id3aab7655cede7ff/version/1675791605/image.png”);
background-repeat: no-repeat;
background-position: 0% 0%;
display:block;
padding-top:50px;
height:150px;
}
/全ての施工にアフター5年保証/

cc-m-11989518977{

background-image: url(“https://image.jimcdn.com/app/cms/image/transf/none/path/sfc4a21a4ff15ecc8/image/i19f0b07647eb4b4c/version/1675791605/image.png”);
background-repeat: no-repeat;
background-position: 0% 0%;
display:block;
padding-top:50px;
height:150px;
}
/お見積りは無料/

cc-m-11990728177{

background-image: url(“https://image.jimcdn.com/app/cms/image/transf/none/path/sfc4a21a4ff15ecc8/image/ic6fd1e93fe8ba77a/version/1675791605/image.png”);
background-repeat: no-repeat;
background-position: 0% 0%;
display:block;
padding-top:50px;
height:150px;
}
/下部のお問い合わせ電話とメール/

cc-m-11991937877{

text-align:center;

width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
display: block;
padding-top:50px;

}

cc-m-11991937877 p{

padding-top:10px;

}

cc-m-11991937877 ul{

padding-left:0;
margin:0;
padding:0;

}

cc-m-11991937877 li:first-child{

list-style:none;
margin:10px 0 0 0;
padding:0;

}

cc-m-11991937877 li:last-child{

list-style:none;
margin:0;
padding:0;

}

/マップをワイドに/

cc-m-11991959277{

width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
display: block;

}

/一番下の水平線ワイドに/

cc-m-11991975677{

width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
display: block;

}
/(c)の上を少しあける/

cc-m-11991971477{

margin-top:7px;

}

１回のレッスンでビジネスの効率がUP！仕事の時短に！　レベルアップにも！（スマホを持った女性の画像あり）

来てほしい時だけ家に来てほしい。スマホ教室で分からない事の復習したい。困った時だけ事務所にパソコン教室で習ったこと以外をしたい。困った時だけ事務所に来てほしい。書類を修正して下さい。子どもが一緒でも大丈夫かしら。最短で問題解決！（車いすの方、スマホを持つシニア男性、パソコンを触るビジネスマン、パソコンを触るシニア女性、子どもを抱く女性、書類の山とパソコンで困る会社員の女性のイラストあり）

困ったときだけ呼んでもいい。定期的に通わなくていい！気軽な出張パソコン教室。（どうしよう…とパソコンで困っている男性の画像あり）

仕事、資格、生活。学びたいことだけ学べます。意外と必要なことだけできる教室は少ない？！（パソコン、スマホ、タブレットのイラストあり）

お問い合わせはこちら

カテゴリー: ホームページ作成

教室紹介

2023年2月11日

ホームページ作成

2023年2月27日

JIMDOで塗装店様のホームページを作成しました

制作メモ

以下CSS

授業以外でのご質問について

堺市一般社団法人音楽教育推進協会様のホームページ制作