Squarespaceに簡単なフッタを追加するカバーページテンプレート "Premier"

Question

あなたがSquarespace Cover Pageを使いこなしているのかどうかはわかりませんが、コード通りに移動するのは難しいです。私は「プレミア」カバーページを使用しているので、カバーページとビデオだけを必要とするスタンドアロンのプロモーションサイトをやっています。しかし、法律上の理由から、私は著作権情報と私たちのプライバシーに関する声明へのリンクを含むフッターを持っていなければなりません。私の最初のアイデアは、フルサイズのdivを含めるためにcss :: afterでヘッダインジェクションを使用することでしたが、カバーページをフルスクリーンで表示し、フッタを表示するためにスクロールできるようにします。私は、変更しようとした

一つの例は、このコードを使用してhttps://answers.squarespace.com/questions/109923/adding-footer-text-on-cover-page-code-injection.htmlた：

<style> 
#collection-559df309e4b026e5cd65a4b4 
[data-slide-id="559df309e4b026e5cd65a4b5"] 
.sqs-slice-group.group-social::after { 
    content: "some general text"; 
    padding: 5px 0; 
    margin: 0 auto; 
    text-align: center; 
    font-size: 10px; 
    color: #fff; 
} 
</style> 

私はこのコードに私のコレクションのIDおよびデータ・スライド-IDをスワップアウトされたが、それは上部の「一般的なテキスト」ブロックを置きます再生ボタン、および画面の右上隅に表示されます。私は無駄に周りの要素を変更しようとした - 任意の助けをいただければ幸いです。

Answer 1

私はJavascriptの使用を避けることを望むなら、ここで何をしますか。カバーページの "Code Injection"ヘッダー領域に次のHTMLを挿入します。これはメインのコンテンツエリアの下に表示されるdivを追加するので、ユーザーはそれを見るためにスクロールする必要があります。

<div id="coverFooter"> 
    <a id="coverPP" href="/privacy-policy/">Privacy Policy</a> <span id="coverCR">&copy; 2016 Your Company, LLC</span> 
</div> 

<style> 
    #coverFooter { 
     position: absolute; 
     z-index: 1; 
     top: 100%; 
     width: 100%; 
     padding-top: 20px; 
     padding-bottom: 20px; 
     background-color: white; 
     box-sizing: border-box; 

     text-align: center; 
     padding-right: 30px; 
     padding-left: 30px; 

     /* Use this for right aligned text instead. 
     text-align: right; 
     padding-right: 60px; 
     padding-left: 60px; 
     */ 
    } 

    #coverPP { 
     white-space: nowrap; 
    } 

    #coverCR { 
     margin-left: 10px; 
     white-space: nowrap; 
    } 
</style> 

Here is a working exampleこれは1週間オンラインで保存されます。

もちろん、hrefリンク、著作権テキスト、およびおそらく色やパディング値などのCSSルールを変更する必要があります。

これは、bodyFrameのdivにbodyFrameのdivを挿入していることに注意してください。ただし、CSSは下に表示しています。これにより、検索エンジンはSERPSのページ記述としてdiv内のテキストを索引付けすることができます。これを軽減するために、[設定] - > [基本設定]の下に[検索エンジンの説明]を追加し、SERPSのページの説明に注意してください。これが問題になる場合は、CSSをヘッダインジェクション領域に置いてください。divをbody要素の下部にdivを挿入するJavascriptに置き換えてください。

最後に、別のドメインのプライバシーポリシーにリンクするか、[ページを追加]を選択し、プライバシーポリシーページを[リンクされていない]セクションに追加する必要があります。