ロゴ画像の大きさ(高さ)について
引用元 Toshi 2021年10月20日, 3:51 PM中お世話になります。
ロゴ画像については.l-header__logo .has-image内の.c-headLogo
で定義されていて、
.l-header__body .l-container
内にロゴやdrawerBtn、navが入っているものと理解しております。
マニュアルは一読したもののArkheについてわからないことばかりで恐縮です。
下記に画像のリンクを貼ったのですが、このようにロゴの高さがnavの高さよりも大きくすることは可能なのでしょうか?
カンプを作った時点ではnavを全幅にして、logoをz-indexで上に重ねる想定でおりました。※ナビゲーションの下はメインビジュアルです。
追伸: マニュアルはこちら(https://arkhe-theme.com/ja/manual/)のページについては一読したのですが、他のマニュアルがあればお知らせいただければありがたいです。子テーマを使うことが推奨されているのか、またオリジナルCSS(Sass)を別ファイルで記述する方法など知りたいと思っています。2つの質問についてはトピックを立てる要件ということであればお知らせいただきたいと思います。
お世話になります。
ロゴ画像については
.l-header__logo .has-image内の.c-headLogo
で定義されていて、
.l-header__body .l-container
内にロゴやdrawerBtn、navが入っているものと理解しております。
マニュアルは一読したもののArkheについてわからないことばかりで恐縮です。
下記に画像のリンクを貼ったのですが、このようにロゴの高さがnavの高さよりも大きくすることは可能なのでしょうか?
カンプを作った時点ではnavを全幅にして、logoをz-indexで上に重ねる想定でおりました。
※ナビゲーションの下はメインビジュアルです。
追伸: マニュアルはこちら(https://arkhe-theme.com/ja/manual/)のページについては一読したのですが、他のマニュアルがあればお知らせいただければありがたいです。子テーマを使うことが推奨されているのか、またオリジナルCSS(Sass)を別ファイルで記述する方法など知りたいと思っています。2つの質問についてはトピックを立てる要件ということであればお知らせいただきたいと思います。
引用元 Qtaro 2021年10月20日, 5:16 PM中横から失礼いたします。
制作案件でArkheを複数回使用しており、Arkhe Showcaseというサンプルサイトの開発経験もある者です。
別件で調べ物をしていたところこちら見かけまして回答できそうな内容でしたのでコメントさせていただきます。
もし良ければご参考ください。
▼ 1点目:ロゴをnavの高さよりも大きくすることは可能か?
可能です。
但し、テーマの機能として特にそういう便利機能があるわけではありませんので、ご自身で調整・実装していただく形になるかと思います。
やり方は色々ありますが方法としては「①CSSで調整する」「②フックでロゴの出力箇所(内容)を変更する」のどちらかになるかと思います。
前者①ですと、一例ですが以下のようにlogo部分をposition:absoluteで絶対配置にすることでnavの高さに関係なくロゴの高さを設定できるはずです(添付画像のようにできます、logoの高さはお好みで)。
.l-header__logo { /* 略 */ position: absolute; top: 0; left: 0; }
後者②に関してはマニュアルにフックの仕様が記載されていますので、そちらを参考に実装されると良いかと思います。出力内容を自由に変更できますので、より細かく調整したい場合はフックを利用するほうがおすすめです(こちらはテーマの機能や使い方とは別の話になりますので省略させてください)。
▼ 2点目:子テーマ推奨なのか?と、オリジナルCSS(Sass)の用意・記述方法について
まず子テーマについてですが、本公式サイト内で関連した記載は見当たりませんので特に推奨も禁止もされていないと思います。
よって今回の用にnavのlogoを修正する場合も、対応されるご案件や製作者様ご本人の判断で「子テーマのCSSで調整するか」「プラグインやfunctions.phpで調整するか」適切な方法を選択されるのが良いかと思います。
ちなみに子テーマもプラグインもArkhe関連製品の購入者であればマイページから雛形がダウンロードできますので、必要な場合はそちらをご活用されるのが良いかと思います。
次にオリジナルCSS(Sass)に関してですが、こちらもArkhe関連製品をご購入されている方は「Arkhe CSS Editor」というWordPress管理画面上からオリジナルCSSを追加できるプラグインがありますので、とりあえずはこちらを使ってみると良いのではないかと思います。あるいは軽微なものであれば「WordPress管理画面>外観>カスタマイズ」内の【追加CSS】でも追記可能です。(こちらはテーマに関係ない、WordPress本体の機能になりますので詳細は割愛します)
最後に1点目、2点目両方に共通することですが
テーマの機能にないものに関する詳細な実装方法(デザインを実現するためにはCSSをどう書けばいいのか、フックの使い方を知りたい、etc...)について知りたい場合、そちらはArkheテーマの使い方や機能の解説の範疇を超えたものになりますので、製作者様がサポートするのは難しいと思います。テーマの機能自体は上記の通りですので、以降の詳しい実装方法についてはご自身でお調べすることをおすすめいたします。
以上、参考になりましたら幸いです。
よろしくお願いいたします。
横から失礼いたします。
制作案件でArkheを複数回使用しており、Arkhe Showcaseというサンプルサイトの開発経験もある者です。
別件で調べ物をしていたところこちら見かけまして回答できそうな内容でしたのでコメントさせていただきます。
もし良ければご参考ください。
▼ 1点目:ロゴをnavの高さよりも大きくすることは可能か?
可能です。
但し、テーマの機能として特にそういう便利機能があるわけではありませんので、ご自身で調整・実装していただく形になるかと思います。
やり方は色々ありますが方法としては「①CSSで調整する」「②フックでロゴの出力箇所(内容)を変更する」のどちらかになるかと思います。
前者①ですと、一例ですが以下のようにlogo部分をposition:absoluteで絶対配置にすることでnavの高さに関係なくロゴの高さを設定できるはずです(添付画像のようにできます、logoの高さはお好みで)。
.l-header__logo {
/* 略 */
position: absolute;
top: 0;
left: 0;
}
後者②に関してはマニュアルにフックの仕様が記載されていますので、そちらを参考に実装されると良いかと思います。出力内容を自由に変更できますので、より細かく調整したい場合はフックを利用するほうがおすすめです(こちらはテーマの機能や使い方とは別の話になりますので省略させてください)。
▼ 2点目:子テーマ推奨なのか?と、オリジナルCSS(Sass)の用意・記述方法について
まず子テーマについてですが、本公式サイト内で関連した記載は見当たりませんので特に推奨も禁止もされていないと思います。
よって今回の用にnavのlogoを修正する場合も、対応されるご案件や製作者様ご本人の判断で「子テーマのCSSで調整するか」「プラグインやfunctions.phpで調整するか」適切な方法を選択されるのが良いかと思います。
ちなみに子テーマもプラグインもArkhe関連製品の購入者であればマイページから雛形がダウンロードできますので、必要な場合はそちらをご活用されるのが良いかと思います。
次にオリジナルCSS(Sass)に関してですが、こちらもArkhe関連製品をご購入されている方は「Arkhe CSS Editor」というWordPress管理画面上からオリジナルCSSを追加できるプラグインがありますので、とりあえずはこちらを使ってみると良いのではないかと思います。あるいは軽微なものであれば「WordPress管理画面>外観>カスタマイズ」内の【追加CSS】でも追記可能です。(こちらはテーマに関係ない、WordPress本体の機能になりますので詳細は割愛します)
最後に1点目、2点目両方に共通することですが
テーマの機能にないものに関する詳細な実装方法(デザインを実現するためにはCSSをどう書けばいいのか、フックの使い方を知りたい、etc...)について知りたい場合、そちらはArkheテーマの使い方や機能の解説の範疇を超えたものになりますので、製作者様がサポートするのは難しいと思います。
テーマの機能自体は上記の通りですので、以降の詳しい実装方法についてはご自身でお調べすることをおすすめいたします。
以上、参考になりましたら幸いです。
よろしくお願いいたします。
アップロードファイル:
引用元 Toshi 2021年10月20日, 5:54 PM中Qtaroさま
ご回答大変参考になりました。また運営されているサイトについてもお知らせいただき、ありがとうございます。ご回答の中で
テーマの機能にないものに関する詳細な実装方法
(デザインを実現するためにはCSSをどう書けばいいのか、フックの使い方を知りたい、etc...)について知りたい>場合、そちらはArkheテーマの使い方や機能の解説の範疇を超えたものになりますので、製作者様がサポートするのは難しいと思います。とございました。
手取り足取り教えていただこうと思っていたのではないのですが、そのような印象をいただかせてしまったようで、お恥ずかしい限りです。フォーラムに対する認識が誤っていたようです。
初めてさわるArkheのテーマだったのでわからないことも多く、投稿させていただいたのですが、今後は少し慎重に投稿したいと思います。失礼しました。
Qtaroさま
ご回答大変参考になりました。また運営されているサイトについてもお知らせいただき、ありがとうございます。
ご回答の中で
テーマの機能にないものに関する詳細な実装方法
(デザインを実現するためにはCSSをどう書けばいいのか、フックの使い方を知りたい、etc...)について知りたい>場合、そちらはArkheテーマの使い方や機能の解説の範疇を超えたものになりますので、製作者様がサポートするのは難しいと思います。
とございました。
手取り足取り教えていただこうと思っていたのではないのですが、そのような印象をいただかせてしまったようで、お恥ずかしい限りです。フォーラムに対する認識が誤っていたようです。
初めてさわるArkheのテーマだったのでわからないことも多く、投稿させていただいたのですが、今後は少し慎重に投稿したいと思います。失礼しました。
引用元 Qtaro 2021年10月20日, 6:12 PM中Toshi様
早速のご確認ありがとうございます。
手取り足取り教えていただこうと思っていたのではないのですが、そのような印象をいただかせてしまったようで、お恥ずかしい限りです。フォーラムに対する認識が誤っていたようです。
いえいえとんでもございません...!
むしろ余計な心配をさせてしまいこちらこそ申し訳ありません。Arkheをお使いになって間もないということでテーマの機能についてご疑問があるのは当然ですし、ご質問自体は全く問題ないと思います。
先に書かせていただいた通りですが、私の回答踏まえた上で、今後もしテーマの機能にないことの実装方法を知りたい場合はテーマ製作者様にお聞きするのではなく、自分で調べた方が良いと思います、ということをお伝えさせていただいた次第です。
「こういうことをやりたいのですがArkheにこういう機能はありますか?」「もし機能にない場合、どういう方法を推奨していますか?」という類の質問でしたら、フォーラムは活用方法として全く間違っておりませんし、私も積極的に利用しておりますので、今後も是非疑問等ありましたら投稿いただければと思います。
よろしくお願いいたします。
Toshi様
早速のご確認ありがとうございます。
手取り足取り教えていただこうと思っていたのではないのですが、そのような印象をいただかせてしまったようで、お恥ずかしい限りです。フォーラムに対する認識が誤っていたようです。
いえいえとんでもございません...!
むしろ余計な心配をさせてしまいこちらこそ申し訳ありません。
Arkheをお使いになって間もないということでテーマの機能についてご疑問があるのは当然ですし、ご質問自体は全く問題ないと思います。
先に書かせていただいた通りですが、私の回答踏まえた上で、今後もしテーマの機能にないことの実装方法を知りたい場合はテーマ製作者様にお聞きするのではなく、自分で調べた方が良いと思います、ということをお伝えさせていただいた次第です。
「こういうことをやりたいのですがArkheにこういう機能はありますか?」「もし機能にない場合、どういう方法を推奨していますか?」という類の質問でしたら、フォーラムは活用方法として全く間違っておりませんし、私も積極的に利用しておりますので、今後も是非疑問等ありましたら投稿いただければと思います。
よろしくお願いいたします。