掲示板作成中

ネオシティ愛東札幌館

匿名で気軽に書き込める

掲示板を作成しようと考え

無料で作成できるgoogleサイトにリンクを作成しました


html を 埋め込むことができるのでソースコードの共有です！！

同じようにマンションの管理組合などでHPを活用したい方

に使っていただけると幸いです

方法


google サイト　作成
以下の画面で　埋め込む　を選択

ウェブからの埋め込み　で　埋め込みコード　を選択　

以下のソースコードを挿入

<html>

<head>
  <title>neosity_AI_higasisapporo_掲示板</title>

<style>
h1 {
  position: relative;
  padding: 8px 15px;
  margin-left: 40px;
  background: #f4f4f4;
  border-radius: 20px;
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  position: absolute;
  font-size: 15px;
  left: -40px;
  bottom: 0;
  color: #80c8d1;
}

h1:after {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  position: absolute;
  font-size: 23px;
  left: -23px;
  bottom: 0;
  color: #def3ff;
}

h2 {
  position: relative;
  border-top: solid 2px #80c8d1;
  border-bottom: solid 2px #80c8d1;
  background: #f4f4f4;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
}

h2:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f0a7\ click';
  background: #80c8d1;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}

    p  {
  position: relative;
  padding: 1.5rem 1.5rem calc(1.5rem + 10px);
  border: 2px solid #000;
}

    p :after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  border-top: 2px solid #000;
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

</style>

  <!-- bootstrap CDN -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>


<body>
<div id="headline">
  <h1>掲示板の作成</h1>
  <p>気軽に書き込める掲示板が欲しい・・・。<br>
そんな住民の皆様からの意見を反映し掲示板を作成しました</p>
  <h2>
  <a href="移動したいサイトのURL">掲示板サイトへ</a>
  </h2>
</div>
</body>


上記のソースコードで
関連リンクに飛ぶように変更ができました

関連リンクは　以下の部分の　
移動したいサイトのURL　を変更していただけると幸いです　

  <h2>
  <a href="移動したいサイトのURL">掲示板サイトへ</a>
  </h2>


参考URL

この記事が気に入ったらサポートをしてみませんか？