CSSでボックスの角をベベルデザインに！

グローバルメニューのボタンをReDesign

Xeory Extensionのグローバルメニューはテキストサイズに可変する長方形ブロックの並ぶデザインである。
これはこれでフラットな感じで良いのであるが、ちょこっとだけデザインを追加してみる。

ベベル（角丸でない）を一部の角に追加

  background:
    linear-gradient(45deg,  transparent 10px, #0099ff 10px),
    linear-gradient(135deg, transparent 10px, #0099ff 10px),
    linear-gradient(225deg, transparent 10px, #0099ff 10px),
    linear-gradient(315deg, transparent 10px, #0099ff 10px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;

backgroundの要素に上記CSSを足すことで角丸にしてみる。そのまま追加するとうまく形成出来なかったので、部分的に修正。
で、足した全体像がこれ

#gnav ul li a { 
  display: block;
  padding: 32px 12px;
  line-height: 28px;
  color: #fff;
  background:
    linear-gradient(0deg,  transparent 10px, #dcdcdc 0px),
    linear-gradient(45deg, transparent 10px, #dcdcdc 0px),
    linear-gradient(0deg, transparent 10px, #dcdcdc 0px),
    linear-gradient(135deg, transparent 5px,  #dcdcdc 0px) !important;
  background-position: bottom left, bottom right, top right, top left !important;
  background-size: 55% 60% !important;
  background-repeat: no-repeat !important;
  text-decoration: none;
  -webkit-transition: background .3s ease-in-out;
          transition: background .3s ease-in-out;
}

うまくいった。

投稿ページのタイトル部分…？

固定ページを投稿ページに指定してみたところ、タイトルにサイト名が表示される。
ヘッダーロゴの直下にもう一度同じモノが表示されるのに違和感があるので編集。
編集するPHPは「index.php。
因みにトップページを設定項目でオリジナルで作成した固定ページに指定した場合は「home.php」だったり「front-page.php」だったり。Xeoryでは「front-page.php」。
ソースが非常に解りやすく上部にH1タグで囲まれた部分があるのでそちらを編集。

実に解りやすいソース。