アスキーアートを枠内に収めたいが、枠外にはみ出てしまう。
解決したいこと
WordPress用のテーマを自作しており、アスキーアートを枠の中に収めたいです。
環境
Local by flywheel Version 9.0.5
WordPress Version 6.6.1
PHP Version 8.3.8
発生している問題・エラー
ヘッダーロゴをアスキーアートで表示し、読み込みが入るたびに配列の中に格納されているいくつかのアスキーアートの中からランダムに表示するコードを書いたのですが、
CSSで指定しても枠に収まらず、枠外にはみ出てしまいます。
それと同時にCSSで縦横の幅を指定しているはずなのですが、アスキーアートのサイズに合わせて枠の幅が長くなったり、狭くなったりします。
該当するソースコード
functions.php
<?php
function theme_enqueue_scripts() {
$template_url = get_template_directory_uri();
wp_enqueue_style( 'theme-style', $template_url . '/style.css', array(), '1.0.0' );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
require_once get_template_directory() . '/fnc/fnc-get_random_ascii_art.php';
fnc-get_random_ascii_art.php
<?php
function get_random_ascii_logo_and_message() {
$logos_and_messages = array(
array(
'logo' => '
／:::::::::::::::::::::::::::::::::;イ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::、
′::::::::::::::::::::::::::::::::/ |:::::!::::::::::::::::::::::::::::::::::::::::::::::::::::::::::、
/::::::::::::::::::::::::::::::::::::,:′ ! ::!:::::::::::::::::::::|::::::::::::::::::::::::::::::::::::::、
/:::::/::::::::::::::::!::: |:::::/ !::|\';:::::::::::::::::l:|.!:::::::::::::::::::::::::::::::::::::、
/:::;:ｲ::::::::::::::::::|､/|::/｀丶､ !:|.l:::::::::::::::: |:! \';:::::::::::::::::::::: : : : : : 、
,\':::/ / :::::::::::::::::|ｱ"て`ヽ、､ヽ.!| !::::::::::::::: |! |:::::::::::::::::: : : : : : : :.、
i::/ / ::::::::/!::::::::lヽ.{:::い:ﾘY ! ヽ::::::::::ﾑ!,,__!:::::::::::::::: : : : : : : : :.、
i/ /:::::::::人|::::::::ｉ. ´ ー\' ＼://＿_|:/|::::::::: : : : : : : : : : 、
/ / :::::::::::::::|::::::::ﾄ､ ,ｲ::い ﾘ｀ヽイ:::: : :./:: : : |＼: :、
/ :::::::::::::::: ＼::::l \', ゝ=シ, ､\'" \':::: : :/|:::: : :, ＼
/::::::::::::::::::::::ﾊ ＼ / /::: : :/: !:::::::,\'
/ :::::::::::::::::::::::::ﾊ /:::: : /:::\',|:::::/
/ :::::::::::::::::::::::::::: ﾍ. マ_ｰ_、 <\'::::.: /::::::::|:::ハ
―＝ ――|::::::::::::::::「￣:|.＼ - .ｲ:/::::.∠-=＝|/￣｀丶
／:. :. :. :. :. :. :. :. : !::::::::::::::::|:.:..λ ヽ _...:ｧ\'´:. /ィ":. :. :. :. :/ :. :. :. :. :. ＼
／ :. :. :. :. ＼ :. :. :. :. |::::::::::::::::|:.:.:.:.:}. 丶--‐ ´/:.:.:.:.:.:.:.:./ :. :. :. :. :. :. :. :. :. :. :. :. : ヽ
／:. :. :. :. :. :. :. :ヽ :. :. :. ヽ::::::::::::::!:.:.:.: !\', /:.:.:.:.:.:.:.:.:.l:. :.／:. :. :. :. :. :. :. :. :. :. :. :. ヽ
／:. :. :. :. :. :. :. :. :. : ヽ :. :. :. ヽ:::::::::ヽ:.:.: | } /:.:.:.:.:.:.:.:.:.:.|:. / :. :. :. :. :. :. :. :. :. :. :. :. :. :. ヽ
/ :／:. :. :. :. :. :. :. :. :. :. ヽ:. :. :. :.ヽ ::::::::ヽ:.:l \' /:.:.:.:.:.:.:.:.:.:.:.| /:. :\' :. :. :._:._:._:._:._:. :. :. :. :. :. :. :ヽ
. /:./. :. :. :. :. :. :. :. :. :. :. :. :.ヽ : :. :. : }::::::::::::ヽ! ＼ ／ /:.:.:.:.:.:.:.:.:.:.:.:.|/:. \'. :. ／:. :. :. :. :. :.:｀丶、:. :. :. :. :ヽ
. ! :l :. :. :. :. :. :. :. :. :. :. :. :. :. ヽ: : :. :. |:::::::::::::::ヽ /:.:.:.:.:.:.:.:.:.:.:.:.:.:! /.:. ,. : : . :. :. :. :. :. :. :. :. ＼ :. :. :. :. i
. |:. !:. :. :. :. :. :. :. :. :. :. :. :. :. :. }:. :. :. :|::::::::::::::::::} /:.:.:.:.:.:.:.:.:.:.:.:.:.:.:|/:. :/:. :. :. :. :. :. :. :. :. :. :. :. :.｝:. :. :. :. i
'
,
'message' => 'こんにちは！'
),
array(
'logo' => '
ィ: : :/: : /: : : :|: : | |: : : : | : :|: : : : : : :, :. :, ::,
. ／:/: :../: : : : :..:|:i |: : | |: : : : | : :|: : : ｉ: : : i.: : ::, ::,
//７: : : : : :ｉ..: :|:.:|:i |＼| 、:.:|＼|＼: |: : : |: :..:..:i: ′
. // |: : :|: : : | i| |斗リ⌒ ＼｝ ´￣リヽリ{: :..:..:|: :i
: ′│ : |: : : |八{ ____ ____ N : : : |: :|
i:| |: : :|: : : | 斗-=ミ 斗-=ミ |: : : :|: :|
i:| |: : :|: : : | 〃ん/う ん/う‘，1..: :..:|: :|
i:| |: : :|: : : |,__j{ |i://:i| |i://:i| }i_,|: : : :|: :|
i:| i八: :.|: : : ﾄ､‘:弋⌒ｿ 弋⌒ｿ ’,j|: : : :|::.′
ゝ i| }:.:|: : : |ハ //¨¨// ′ //¨¨/// |: : : :|/
i| : |: : : |､_ , /__,|: : : :|
i| v|: : :∧ 入 r__， ｲ:ｉ:Ⅵ: :..:.:|
ξ⌒⌒⌒|: : : :∧:.:.:丶. イ:.:.|:.:.:.:j : : : |⌒⌒⌒ぅ、
¨¨ﾌ⌒⌒~|: : : : :∧二ニ} ＞―‐＜ i--､: :|:.:.:/ : : : ′⌒ヾ⌒ヾ
ξ／￣,八: : : : :小、ﾆヽ |ﾆﾆ}＼:/:/:/:/¨丁¨liヽう
/ヾﾆニ＼: : : ゝ二二＼ ー‐|ﾆ/:/:/:/ﾆﾆﾊ }i
. ′ ＼=ニ＼_:_:_:＼ﾆニﾑ ｰ==彡ﾆｲ:/ﾆﾆニ|ヽj
i| ＼ﾆﾆﾆﾆﾆﾆﾆﾆﾆﾆ}=彡￣ミ=}ﾆﾆj/ﾆ二二| i
'
,
'message' => 'こんにちは！'
)
);
$random_pair = $logos_and_messages[array_rand($logos_and_messages)];
return $random_pair;
}
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div class="container">
<header class="header">
<?php $logo_and_message = get_random_ascii_logo_and_message(); ?>
<div class="ascii-logo-container">
<pre class="ascii-logo"><?php echo $logo_and_message['logo']; ?></pre>
<p class="ascii-message"><?php echo $logo_and_message['message']; ?></p>
</div>
</header>
index.php
<?php get_header(); ?>
style.css
*{
background-color: black;
}
.container{
width: 1200px;
max-width: 1200px;
margin: 0 auto;
color: #00FF00;
}
.header{
margin: 20px;
border: 2px solid #00FF00;
}
.ascii-logo-container{
display:flex
}
.ascii-logo{
width: 300px;
height: 300px;
margin: 10px;
border: 2px solid #00FF00;
font-size:10px;
line-height:12px;
font-family: 'ＭＳ Ｐゴシック','MS PGothic',RobotoJAA,Monapo,'IPA モナー Pゴシック',IPAMonaPGothic,Mona,'梅Pゴシック',Textar,aahub_light,sans-serif !important;
}
.ascii-message{
margin: 10px;
border: 2px solid #00FF00;
width: 1200px;
height: 300px;
}
自分で試したこと
・font-sizeとline-heightでサイズを調整
アスキーアートによってはサイズが大きい物もあるので根本的な解決には至らず、枠の幅も固定されない。
・ChatGPTを使用して解決できるか。
CSSにwidthとheightを指定すると枠が固定される等、求めている解決策は得られず。
0
