THE SONIC(ソニック)はアイキャッチ画像なしでもタイトルがクールに表現できるので見てほしい

2 min
こんなご要望にお応えします
  • 実はバイラル風アイキャッチにあこがれている
  • バイラル風アイキャッチを画像なしで実現できると聞いて
  • タイトルが味気ないけどCSSが解らないからあきらめている

この記事のタイトルは「アイキャッチ非表示」×「バイラル風」のコンボによって表現しています。

これは、THE SONIC を試使用させていただいている最中に偶然見つけた機能。

・・・と思っていたのはつかの間。

「このアイキャッチ素敵っす!」とまっさーさんにお伝えしたところ、くまさんやよいさんのコンボ技なのだと回答が。

細部まで行き届いた心づかいと計算され尽くしたデザイン。感動しております。

ことり

ことり

そして「一番に見つけたのワイ」という小さな喜びを感じております。

ドヤ顔はガマンね。

ねね

ねね

ことり

ことり

・・・・・・はい。

ドヤ顔をガマンしつつ、実装の方法を詳解いたしますね。読みながら設定してみてください。

スポンサーリンク

バイラル風アイキャッチを表示させる手順

  1. STEP

    ダッシュボード > 外観 > カスタマイズを開く

  2. STEP

    「記事設定」を開く

  3. STEP

    「投稿ページの設定」を開く

  4. STEP

    「アイキャッチを非表示にする」にチェックを入れる

  5. STEP

    「公開」をクリックする

  6. STEP

    「公開済み」に変わっていることを確認する

  7. STEP

    左上の「×」をクリックしてダッシュボードに戻る

  8. STEP

    記事の編集画面を開く

    • 新規投稿の場合は投稿 > 新規追加
    • 既存の記事の場合は投稿 > 投稿一覧 > 該当する記事
  9. STEP

    右上の「たて三点リーダー」をクリックする

  10. STEP

    「オプション」をクリックする

  11. STEP

    「文書パネル」の「ページ属性」にチェックが入っていることを確認する

    チェックが入っていない場合はチェックを入れます。

  12. STEP

    右上の「×」をクリックして閉じる

    なお、「保存」「戻る」ボタンはありません。

  13. STEP

    「文書」タブが開いていることを確認する

  14. STEP

    投稿の属性 > テンプレート のプルダウンメニューを開いて「バイラル風」を選択する

  15. STEP

    記事を作成(編集)して公開(更新)する

    • 新規投稿の場合 ⇒ 記事を作成 ⇒ 公開
    • 既存記事の場合 ⇒ 記事を編集 ⇒ 更新
  16. STEP

    完成!

スポンサーリンク

お伝えしておくべきこと

ことり

ことり

実は、今ごらんになっているアイキャッチは CSS でカスタマイズしてるんです。

現在、タイトルは▼こんなふうに表示されていると思います。

このアイキャッチには主に以下のような CSS カスタマイズを施しています。

  1. 余白の調整
  2. 背景色の調整
  3. 文字サイズ・色の調整
  4. これらに伴って生じたズレや余白などの調整

カスタマイズしない場合のアイキャッチは▼こんな感じです。

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スパム対策:日本語が含まれないコメントは無視されます。ご注意ください。