web-dev-qa-db-ja.com

ヘッダー内に画像を追加するにはどうすればよいですか?


私はDrupalに不慣れで、現在ゼロからテーマに取り組んでいます。チュートリアルを使用しています シンプルなDrupal最初から7つのテーマ 助けになりました。私が取り組んでいるサイトに必要な作業の大部分は、ヘッダーとは別になっています。ヘッダーにフロートされる画像をヘッダーに追加したいと思いますテキストの左側。

これまでに私は試しました画像付きのコンテンツタイプを作成し、作成したヘッダーブロックに割り当てました。コンテンツタイプを割り当てようとしたところ、ヘッダーが表示されなくなりました。

助言がありますか?

1
Jonathan Evans

いずれの場合も、ヘッダーに1つの画像を追加するためだけにコンテンツタイプを作成することはしませんが、この場合は、ウェブサイトのロゴのように見えるので、さらにそうです(そうですか?)。

それがあなたのロゴであるなら、これを達成する最良の方法はあなたのテーマの設定を経由することです。ほとんどすべてのテーマには、ロゴ画像の設定があります。

Admin/appearanceに移動し、テーマの設定リンクをクリックします。設定フォームに「ロゴ画像の設定」セクションが表示されます。通常、デフォルトでは「デフォルトのロゴを使用する」チェックボックスがあり、デフォルトでチェックされています。

このチェックボックスをオフにしてから、ロゴイメージファイルへのパスを入力できますが、より簡単で優れた方法は、チェックボックスをオンのままにして、テーマディレクトリでデフォルトのロゴを独自のロゴに置き換えることです。 imageをlogo.pngにコピーし、すでにあるものにコピーします。

そのテーマ設定ページには、「表示の切り替え」のセクションもあります。このセクションでは、「ロゴ」がチェックされていることを確認します。

次に、サイトはロゴを使用します。これは通常、デフォルトですでにヘッダーにあります。

次に、小さなcssを使用して希望どおりに配置するか、適切な場所にない場合は、テーマのpage.tpl.phpを編集して、ロゴを目的の場所に移動します。必要に応じてCSSでスタイルを調整します。

ホームページにロゴのみが必要な場合は、テーマにpage.tpl.phpのコピーを作成し、それをpage--front.tpl.phpと呼びます。これは、フロントページにのみ適用されることを意味します(- drupal 7テンプレートの提案 詳細については)。

その後、フロントページにロゴを印刷できますが、通常のpage.tpl.phpからロゴを削除して、他のページに表示されないようにすることができます。

それがあなたのサイトのロゴであるか、それがロゴであるのが間違っていたが、他の理由でサイトのロゴ設定を使用したくない場合は、いくつかのことの1つを行うことができます。

画像が純粋に装飾的なものである場合、それをcssの背景画像にすることは一般的に良い考えです。その場合、画像をテーマの画像ディレクトリに追加し、テーマにcssを追加して、それをあなたの背景画像として設定します。ヘッダーのテキストブロックとパディングを使用して、コンテンツが画像と重ならないようにします。

画像が純粋に装飾的なものではなく、実際にユーザーにとって意味がある場合は、スクリーンリーダーで画像として読み上げ、障害者が見ることができるようにします。

この場合、imgタグを使用する必要があります。

したがって、次のいずれかを実行できます。

ページを作成します--front.tpl.phpを使用して、目的の場所にimgタグを手動で追加し、テーマの画像ディレクトリに画像を配置してから、CSSでスタイルを設定します。

もう1つのオプションは、ブロックUIを介してカスタムブロックを作成することです。

これを行うには、admin/structure/blockに移動して、「ブロックの追加」リンクをクリックします。ブロック本体フィールドに、必要なimgタグを追加します。これを行う最も簡単な方法は、wysiwygテキストエディター(たとえば、 ckeditor または wysiwyg module)があることを確認し、それをブロックの作成に使用することです。その後、手動でサーバーにファイルをアップロードするのではなく、wysiwygエディターを介して画像を直接アップロードできます。これは理想的ではありません。

このようにして、画像のブロックと画像の右側にテキストのブロックを作成するか、それらが互いに直接関連している場合は、同じブロックに追加することができます。

次に、ブロックの表示設定で、ホームページにのみ表示されるようにすることができます(または、必要に応じて他のブロック管理システムを使用してそれを行うことができます)。

1
rooby

私が考えることができるより簡単な解決策はCSSだけです。

その画像を背景として持つようにブロックをスタイルし、左パディングを十分に広く設定して、ブロックの内容がそれを覆わないようにすることができます。

0
Astrayus