【作画】Snowmonkey　ヘッダー部に画像を追加

SOTOBORI — Tue, 27 Apr 2021 14:23:31 +0000

どうやら２ヶ月ぶりに更新。wordpressを久々に触ると何かと仕様が変わっていて、変更した箇所を確認するだけで大変。

ロゴデザイン

以下の画像を、ヘッダー部に追加してみたりして気分転換。

以前に撮った写真にKeynoteで文字を入れだだけ。

フォントはF5.6と筑紫A丸ゴシック。サイズは6000×800で作ったけど、デカすぎかも。

ピクトサインはpictogram2.com様の素材を利用。

human pictogram 2.0 (無料人物ピクトグラム素材 2.0)

人間ピクトグラム素材のギャラリー

pictogram2.com

アクションフック

ヘッダー部に何かを入れる場合は、フックで”snow_monkey_prepend_contents”をmy snow monkeyの構文に入れてやると良いらしい。以下のように挿入。

add_action(
    'snow_monkey_prepend_contents',
    function() {
        ?>





どうやら画像にborder-radiusとpaddingがとってあったので、CSSで0指定に



.c-btn, .snow-monkey-posts__more {
    border-radius: 0;
    padding: 0;
}



レスポンシブ対応



携帯サイトは非表示で良いと思ったので、CSSで非表示に。



@media (max-width: 1025px) {
.c-btn, .snow-monkey-posts__more
  {
display: none;
}
}

【作画】埋め込み動画をレスポンシブ化する

SOTOBORI — Sat, 03 Oct 2020 15:00:00 +0000

埋め込み動画をレスポンシブ化する

YoutubeとVimeoをブログに掲載することが多いのですが、wp-block-embedでCSSのカスタマイズをすると、どうやらブログカードまで一緒にレスポンシブ化されてしまい、上下に余白が出来るのが気になっていた。

何かと調べてみると、wp-block-embedでCSSを書き換えてやるのではなく、youtubeとvimeoにそれぞれクラス指定をしてやれば良いということが分かった。

Youtube

左が変更前、右が変更後のページ。iframeの縦横比が改善された。

CSSに以下を記載

（1）CSSに以下を追記

.youtube-container { 
padding-bottom:56.25%;
position:relative;
overflow:hidden;
}

.youtube-container iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

自分のブログだと、.youtube-containerというclassが始めから割り当てられていたので、上記のCSSで事足りた。

Vimeo

左が変更前、右が変更後のページ。上下にあった無駄な余白を削除した。

function.phpに以下を追記

vimeoの埋め込みにclassを指定をしたい。何処かのページを参考にさせてもらったけど、参照元のURLを忘れた。以下のソースで”vimeo”の所を変更すれば、他の投稿サイトでもレスポンシブ化に対応できるかも。

//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {
    //vimeo動画にラッパーを装着
    $the_content = preg_replace('/]+?vimeo\.com[^<]+?<\/iframe>/is', '${0}', $the_content);
  }
  return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

CSSに以下を追記

.vimeo { 
padding-bottom:56.25%;
position:relative;
overflow:hidden;
}

.vimeo iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

レスポンシブ化 – あとは頼みます。

【作画】Snowmonkey ヘッダー部に画像を追加