OXYGENというテンプレートをカスタムしてみた

この記事書いた人はHTMLもCSSもPHHもJSもほとんどわかっていないこと前提だから、間違っても鵜呑みにしないでね!

ただの個人的なメモなので!!

基本的にお気に入りのテンプレートを使います

わりかしいろんなところで紹介されてるので知ってる人は知ってると思います。
OXYGENというかなり豪華なテンプレートです。
※ 配付サイト https://alienwp.com/themes/oxygen

記事によって配置が変えられるし
何よりも見た目が新聞みたいで好きです←

だけどシンプルで味気ないのです。
わちゃーっとしたサイトが好きなのです

ということで、カスタムします!!

基本的に何をいじるか決める

通常のカスタムでも以外にいじれるんですが
背景を設定した瞬間
全てが終わりますた(´・ω・`)

見づらすぎワロタサイトになってるじゃん…

原因は<div class=”wrap”>さんが背景指定がなくて
抜けちゃったみたいです。

たぶんそうだと信じてる
(´・ω・`)

色々と試行錯誤

PHPとかJSはよくわからないので
わかりそうなHMTLを見てみる(`・ω・´)

そんなんだろうとは思った!!
知ってた知ってた(´;ω;`)

PHP読みながらCSSいじっていきます…

説明できないからメモしていたものを書き出します。
簡単に言えば、カスタムしたところのメモです!!

①<div class=”post-content”>内の<div class=”byline”>のデザイン変更

好きなバランスに改行したり削除しました

②背景をを追加したいので

background-color: rgba(255, 255, 255, 0.75);
白背景でアルファを0.75で
手当たりしたい<div>に追記していきます。

  • #content .entry-header-gbc
  • #content .hfeed-more-bgc
  • #sidebar-subsidiary .widget
  • #sidebar-secondary .widget
  • #content .entyr-bgc

③entry-headerがあらぬことになった

ので
修正を無理やりしてみる

次のメモはそのままのメモを書き出してるのですが、カオスなの覚悟してね!!

⇒flont page php の話
<div id=”content”>
<div class=”hfeed”>
<?php $args= ~  psts-pre-pag”
        →primaruの3がむー
もしも ~ while なら が oxygen-befront-entry で
open-entry だお get the img !!
→width and hight px
<div class=”entry-header”>
<h2 class=”post-title entry-title”>
<div class=”byline byline-date”>
<div class=”byline byline-edit”>
</div> ← entry header ね!
<div class=”byline byline-cat”>
  画面右上カデゴリーのなす fontcolor#fff

これによってprimaryの記事の背景の設定の際に起きるガテゴリーのfloatが旅に出なくなりました。

④premaryの抜粋の文字数が気になる…

function.php
function oxygen-excrept-length ~
return 25;} << 25!!

⑤premaryのタイトルを上に…

<div class=”entry-header”>から<h2>を外に出す

⑥見出しの調整

  • breadcrumb-trail.breadcrembs >> padding-right
  • h4.section-title >> padding-right

ここまでの作業で

大体こんな感じな成ります

まだまだ一部がおかしい状態ではありますが
何とか自分好みには変更できました。

widthのサイズがうまく調整できないので、まだまだ悩みどころですが…