実証ブロックの作り方 | SkillhubAI(スキルハブエーアイ)

実証ブロックの作り方

実証ブロックは、ポートフォリオサイトではブログ部分が該当します。 専門的でユーザーの役に立つブログを更新することで、知識や技術をしっかりと持った専門家であると実証するわけです。

 

デザインを調整しましょう

ブログ部分は、コンテンツとしても非常に重要な部分。 一度作って終わりという事もありません。

実際には、WordPressを使って記事を投稿していく形になります。 まずはHTMLファイルの方でデザインを固めてしまいましょう。

効果的なブログ記事を書くコツは当講座の後半でご紹介いたします。

 

実演:ブログ部分のデザイン変更

デモのポートフォリオでは大きな変更はしません。 html/cssの微調整+実際の稼働時を想定してアイキャッチやタイトルを入れ替えました。これだけでも大分雰囲気が変わって見えますね。

file

【変更点】

  • 余白の微調整をする
  • 個人のポートフォリオサイトなので、投稿者の表示・card-footerを削除
  • リンクを付けるとホバー時に下線が表示されるので、cssで非表示にする

file

 

素材には入っていませんが、ブログページをデザインしたhtmlファイルもあると思います。 こちらもトップ画像を差し替えたり、アクセントカラーを合わせるなど、トップページと釣り合いがとれるデザインに調整します。

【例】 file

 

課題

オリジナルのポートフォリオサイトに合うように、ブログカード部分のデザインを変更しましょう。 実演のように色の調整だけでも良いですし、装飾を加える・カードレイアウトを変更するなど大きく変えて頂いても構いません。

トップページだけではなく記事ページ(index.phpやsingle.phpになる部分)のファイルがある方は、そちらも調整しておきましょう。WPテーマの修正がスムーズに出来ますよ。