Cherieの筆記体のロゴについて

当デモサイトのロゴは、筆記体でデザインされています。

で、みなさん気になるのはこの部分かもしれません。

キャッチフレーズと重なって表示されているではありませんか。デモサイトでは、CSSでロゴの表示位置を調整しています。

#header_slider_catch_area .logo { margin:0 0 -55px -35px; }

@media screen and (max-width:800px) {
#header_slider_catch_area .logo { margin: 0px 0 -30px -10px; }
}

PCとモバイル用の位置調整をTCDのオリジナル機能「カスタムCSS」に記載しています。テーマファイルを触らずにCSSを追加できる機能です。

ですので、何も入力していないデフォルトでは次のように表示される仕様となっています。

当デモのような位置に表示したい場合は、設定箇所にもCSS例を記載していますので、そのままコピペしてお使いいただけます。設置するロゴに合わせて適宜数値を調整してみてください。

ロゴ画像は、白い部分が透過するPNG形式のものを設置するのが一般的です。ロゴ作成に関する記事はこちらも参考にご覧ください。

ロゴ作成が無料でできるジェネレーターツール12選 – ワードプレステーマTCD

この記事では、無料でロゴが作れる12個のジェネレーターツールをご紹介します。今の時代、ロゴ作成は無料で簡単にできます。

ロゴ素材が無料・有料でダウンロードできるWebサービス9選 – ワードプレステーマTCD

会社やお店、商品のロゴマークは、サービスの特徴をイメージさせる重要なものです。ロゴはプロに制作してもらうのがベストだと筆者も考えています。

企業やWebサイトのロゴが無料で自動生成できるWebサービス「hatchful」 – ワードプレステーマTCD

企業や商品ブランド、Webサイトのロゴを作成するフリーのWebサービス「hatchful」をご紹介します。簡単な情報入力だけでWeb上で豊富なロゴを作成できる便利なサービスです。