在る団体の部会からホームページの作成依頼を受け、WordpressのテーマCocoonを使ってブログを作りました。
作成した部会のブログを団体のホームページからリンクしてもらうに、団体のホームページのメニューはフレーム構成で作成されており、フレームのメニュー下に作成した部会のブログが表示されます。
作成したブログは、ＰＣやタブレット・スマートフォンなどの異なる画面サイズで観ても、自動的に最適な表示サイズに変わる「レスポンシブWebデザイン」としていましたが、フレーム内では適したサイズに変わらず、拡大や横スクロールしないと観にくくなってしまいました。
そこで、リンクはフレームから外すように設定してもらいましたが、メニューが無くなり、他の部会のホームページ閲覧が不便になりました。
対策として、作成したブログのヘッダーimg【添付図A】の上部に、団体のホームページのヘッダーimg【添付図B】を置き、それぞれのページにリンクすることとしました。
二つのヘッダー設置やヘッダークリック時の外部リンクの方法が分からず、ネットをググってやっと作成しました。
正しい方法か分かりませんが、自分が思うように表示され、リンクも張る事が出来ました。
下記コード追加しました。
ダッシュボード＞外観＞テーマエディター
■ Cocoon Child: tmp-user/body-top-insert.php
<div align=”center” class=”logo-image”><a href=”http://団体ホームページ.ne.jp/”> <img src=”https://団体ホームページimg.jpg” alt=”団体ホームページ”></a></div>
■ Cocoon Child: style.css
/*************************************************
** ●ヘッダーとグローバルメニュー間余白カスタマイズ
*************************************************/
.logo-image {
padding: 0;
}
.logo-image * {
display: block;
margin: auto;
}
