Artisteerで作ったテーマの改造とか

僕の作ったサイトはお金もないためにデザイナーさんに頼むよりも先に、ざっくりと表示結果を確認しながらデザインを決められるArtisteerを使っています。

Powered by WordPress and WordPress Theme created with Artisteer.

って画面下部に出てるとおりですね。
これは、便利な反面、バックグラウンドやヘッダー画像が若干重いかなと思います。(圧縮率が低いとか、やたら重ねられるので、数が増えていて単純に重いとか）

ちょっとだけ、改造したことをまとめられればなと思って、不定期にこのテーマを扱っていこうかなと思います。

最初はBlockquoteの斜体を直してみた単純なこと。

WordPressのダッシュボードから「外観」→「テーマ編集」→「スタイルシート (style.css)」と進みます。
そこで下記の部分を変更します。

<span>/* begin PostQuote */
blockquote,
blockquote p,
.art-postcontent blockquote p
{
  color: #091315;
  //font-style: italic;
  text-align: left;
}
blockquote,
.art-postcontent blockquote
{
  border: solid 1px #B6BAD3;
  margin: 10px 10px 10px 50px;
  padding: 5px 5px 5px 27px;
  background-color: #D9DBE8;
  background-image: url('images/postquote.png');
  background-position: left top;
  background-repeat: no-repeat;/* makes blockquote not to align behind the image if they are in the same line */
  overflow: auto;
}</span>

font-style: italic; を// でコメントアウトしただけです。

ちょっと気になるのは、.art-postcontent の部分でしょうか。確かこれがついているとartisteerで作った綺麗なテーマが使えるはず。
TinyMCE Advancedを使っているのなら、「属性の挿入/削除」から「Style属性」で選べると思います。

Style属性のテスト

あれ？
「Style属性のテスト」に「art-postcontent」を挿入してみたのですがソース上では変わっても、見た目は変わらないですね。

<blockquote style=”art-postcontent”><p>ヘッダーのテスト<br /> </p></blockquote>

よく見たら両方とも同じ設定っていうことでしたね。
これを書いてて思うのですが、一度blockquote になったら、解除しない限りずっとblockquote内の記述になっちゃうんですね。
引用じゃない部分の文書を書いてからボタンを押して解除するという手間・・・

追記。
このArtisteerのテーマはちょっとした見出しに「背景塗りつぶし囲い」を使っているので気に入っていたのだけれど、
自由に表示させるのが大変だと感じていました。

ようやく、出し方が分かったので記載。
まず、HTMLだけれど、こんな風に記載するとよい。

<div class="art-blockheader">
    <div class="l"></div>
    <div class="r"></div>
<div class="t">WEBシステム</div>
</div>

WEBシステム

上記はHTMLの例を/pre入れないで書いたもの。
このサイトは見出しをおとなしくしているのでそれほど目立たないけれど、右のカテゴリーメニューみたいな雰囲気が出ていると思います。

下記はそれぞれのclassを記載したもの。最初はclass=”t” だけでいいと思ったのだけれど、
class=”I”,class=”r” がないと、矢印アイコンが出なかったり、背景が染まらなかったり。

/* begin BlockHeader */
.art-blockheader
{
  position: relative;
  z-index: 0;
  height: 32px;
  margin-bottom: 2px;
}
 
.art-blockheader .t
{
  height: 32px;
  color: #EDEDED;
  margin-right: 10px;
  margin-left: 10px;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 14px;
  text-transform: uppercase;
  margin:0;
  padding: 0 10px 0 31px;
  white-space: nowrap;
  line-height: 32px;	
}
 
.art-blockheader .l, .art-blockheader .r
{
  display: block;
  position: absolute;
  z-index: -1;
  height: 32px;
  background-image: url('images/blockheader.png');
}
 
.art-blockheader .l
{
  left: 0;
  right: 25px;
}
 
.art-blockheader .r
{
  width: 898px;
  right: 0;
  clip: rect(auto, auto, auto, 873px);
}

‘images/blockheader.png’これがみそなのかな？と思っています。その通りでした。

SeedsLight

Server and Development Blog

Artisteerで作ったテーマの改造とか

最初はBlockquoteの斜体を直してみた単純なこと。