あずぽっどblog
今回は、このブログのトップページをいじるのに苦戦したよっていうお話をしようと思います。
普段Webサイトいじったことないよ〜っていうレベルの人が再現できるように、同じレベルのけいあずが解説記事書くのも面白いかな？と思って書いてます！
是非、参考にしてみてください！
まず、筆者のレベルは？
けいあずのレベルとしては、
- 過去にすこーしRuby on Railsを触ったことがある。
- HTMLがすこーし書ける。（あまり理解してない。）
- 簡単なCSSがすこーしわかる。（はてなブログのトップページを少しいじったことがある。）
程度です。
正直、Webサービスを1から1人で実装できるほどの技術や知識はなく、ほとんど素人と思ってください笑
タイトルロゴを実装しよう！
まずは、タイトルロゴの実装です！
以下の手順の通りやってもらえれば簡単にできると思います（多分）
1.タイトルロゴを作成しよう。
まずは、タイトルロゴを作成しましょう。
今回は、1920x1080の背景透過（重要！）の画像を準備しました！
この時、保存名は、「英名.png」にしておきましょう。（結構重要です！）
2.作成したロゴをpublicフォルダに入れる。
ロゴの作成が完了したら、これをeasy-notion-blogのプロジェクト内のpublicフォルダに格納します。
favicon.ico等を入れるのと同じフォルダですね！
3.components / header.tsx を編集する。
次は、ついにロゴの実装です！
少しややこしいので順番にやっていきましょう！
-
import Image from 'next/image'を他のimportたちの続きに追加する。 - タイトルの表示部分を書き換え
書き換え前
<h1>
<Link href="/">
{NEXT_PUBLIC_SITE_TITLE}
</Link>
</h1>書き換え後
<h1>
<Link href="/">
<Image
src="/xxx.png"
width={960}
height={540}
style={{ objectFit: 'contain', width: '100%' }}
alt={NEXT_PUBLIC_SITE_TITLE}
/>
</Link>
</h1>4. push!
あとは、githubにpushするだけ！
これで簡単に実装されます！
では、次はトップページにTwitterのタイムラインを表示してみましょう！
こっちは、さらに簡単です！
1.app / page.tsx を編集する。
やることはこれだけ！これさえできればこっちのものです！
-
1行目に
'use client'を追加 -
importたちの続きに
import {TwitterTimelineEmbed} from 'react-twitter-embed'を追加 - タイムラインを表示したい場所に以下のコードを追加
<TwitterTimelineEmbed
sourceType="profile"
screenName="twitter_id"
options={{height: 400}}
/>4.push!
あとは、githubにpushしたら完了！
めちゃくちゃ簡単ですね！
こんな感じで、react-twitter-embedのおかげでTwitterの埋め込みが非常に簡単になってますので、是非色々やってみてください！
最後に
ということで、easy-notion-blog初心者のけいあずが意気揚々と自分の頑張ったことの解説記事てきなものを作ってみました。
作成にあたり情報収集として、easy-notion-blogナレッジをめちゃくちゃ漁らせていただきました！是非皆様も参考にしていただければと思います。
また、あわせてこの記事も調べてもよくわからないって方が少しでも解決のヒントとして活用できればと思ってますので、是非拡散お願いいたします👏
ぱんぶいぶ誠意制作中！
友人のやまこうと作成中のVRSNS向けの情報共有サービス「ぱんぶいぶ」の公式noteです！
ぜひ、見てね！
活動のご支援等お待ちしております！
今後の活動の充実に向けて、ご支援お待ちしております！
送ってくださった方は、ご連絡いただければ記事の最後にご紹介コーナーを設置させていただきます！
