サービス 1. メニュー #02
2020年05月22日に公開

Cuntentfulを使ったNuxt.js製のブログサイト構築します

サービス内容・金額・相談窓口

Nuxt.jsであなたのブログサイトを構築します。

サービス内容

  • ブログサイトの構築
  • Contentfulのモデル設計・構築

サービスに含まれないもの

  • 保守・運用代行は本サービスには含まれません。
  • 文章・画像など、本番用のコンテンツの製作代行は行っておりません。お客様ご自身でご用意ください。

金額

198,000円(税込)

※ 実費についてはお客様ご負担。

決済

2回の決済をいただきます。

  • 業務着手前 … 金額の50%
  • ブログ納品後 … 金額の50%

決済方法

クレジットカード決済のみ対応。

ご依頼・ご相談先

下記メールアドレスよりご依頼ください。

info.cloudacct+blog@gmail.com

使用する技術

各種サービスのアカウントについて

各種サービスのアカウントはお客様ご自身で作っていただきます。

メンバーとして招待してください。

ドメインについて

SSL化(https)に対応するにはDNS設定が必要です。

  • ドメインをまだ持っていない場合

    => Netlify内で新たにドメインを購入し、DNS設定までをこちらで行います。

  • 既にあるドメインを使用する場合

    => DNS設定をお客様ご自身で行っていただく必要があります。(管理画面が見れないため)

対応ブラウザ

対応ブラウザはVuetifyに依存します。下記リンクをご覧ください。

https://vuetifyjs.com/ja/getting-started/browser-support/

こんなブログを作ります

基本レイアウトは以下の通りです。

なお、レイアウトの大きな変更には対応しておりません。予めご了承ください。

トップページ

メインカテゴリーの新着記事リストを表示。

layout top

レイアウト設計

基本レイアウト。

レイアウト幅はお好きな幅に変更できます。

  • 2カラム

  • 最大幅 1280px

  • メインコンテンツ 916px

  • サイドバー 300px

ヘッダー

ヘッダーの基本機能。

  • サイト名

    トップページへのリンク

  • 検索BOX

    Enterキーで検索ページに遷移

  • カテゴリー別、記事一覧ページへのリンク

    3~4つのメインカテゴリーを表示

  • スクロール固定ヘッダー

    ページによってスクロール連動型に切り替え可能

メインサイドバー

指定がない限り常に表示されるメインサイドバー。

広告の有無、コンテンツの中身はご指定ください。

  • メインコンテンツとスクロール連動しない固定型

    スクロールの途中で一時的に固定される機能には対応していません。

(下記は参考コンテンツ)

  • アドセンス

    300px × 250px の固定サイズ広告

  • 筆者について

    会社のロゴ、筆者のアイコン

    自己紹介文

  • 自社の提供するサービスリンク

  • Twitterタイムラインの埋め込み

フッター

全ページに表示されるフッターコンテンツ。

カラム数は自社コンテンツ量に合わせ、お好きな数をご指定ください。

(下記は3カラムの場合の参考コンテンツ)

  • SNSリンク
  • フッター用カテゴリーに紐付く記事一覧
  • プライバシーポリシーへのリンク
  • お問い合わせ先のメールアドレス

layout footer

カテゴリーページ

カテゴリーに紐付く記事一覧を表示するページ。

サイドバーがカテゴリー毎に自動で切り替わります。

layout category

検索ページ

Contentfulの全文検索APIを使った検索ページ。

検索ヒットした記事リストを20件ずつ表示します。

  • もっと見るボタン

    クリックで次の20件を表示

※ 検索アルゴリズムはContentfulの仕様となり、こちらで変更することはできません。

layout search

記事ページ上部

記事ページの上部コンテンツ。

サイドバーは記事の目次リンク(h2、h3タグ)が表示されます。

  • パンくずナビ

    記事に属するカテゴリーの表示

  • 公開日・更新日

    更新された場合、更新日を自動表示

    公開日はマウスホーバーの際にツールチップで表示

  • 記事タイトル

    フォントサイズ

    • ウィンドウサイズ600以上 => 40px

    • ウィンドウサイズ599以下 => 32px

  • アドセンス

    レスポンシブ記事内広告

  • 記事本文

    マークダウン対応

    フォントサイズ

    • ウィンドウサイズ600以上 => 18px

    • ウィンドウサイズ599以下 => 16px

  • サイドバー

    アイキャッチ画像(記事タイトル下に表示変更可能)

    2h,h3タグの自動目次リンク生成

  • ヘッダー

    上スクロールでヘッダー非表示

    下スクロールでヘッダー表示

post slug top

記事ページ下部

記事ページの下部コンテンツ。

読者が離脱しないためのコンテンツを表示します。

  • クロージングコンテンツ

    自社が提供するサービスの説明・サービスリンク

  • アドセンス

    「300px × 250px」 or 「332px × 280ox」のレスポンシブ広告

  • 関連記事

    同じカテゴリーの記事をミニリストで表示

post slug bottom

その他

  • プライバシーポリシー

    特に指定がない限り、プライバシーポリシーのコンテンツ内容はこのブログと同じ内容になります。

    https://blog.cloud-acct.com/privacy

終わりに

ご紹介した全ての実装イメージはこのブログと同じです。

ご自身のブログをイメージしながら改めて各ページをご覧ください。

ご連絡お待ちしております。

info.cloudacct+blog@gmail.com

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス