HTMLソースの中にHTMLソースの例を書きたい時があります。
そのような場合、挿入するソースが複数行に渡るような場合は
SyntaxHighlighterやgoogle-code-prettifyの助けを借りなければなりませんが、たかだか1行のHTMLの引用をするためには面倒すぎます。
そこで、簡単に使えつのがHTMLの特殊記号表記です。
つまり、HTMLソースの中にHTMLソース書く場合、引用するHTMLソースがHTMLとして判断されなければ良いので、<タグ>記述の<と>を半角の&で始まる文字列表記に書き換えます。
通常使う文字とその記号表記法は次の通り
<は<
>は>
&は&
なお、半角のスペースを何個続けて書いてもスペース一個分しかブラウザーは受け付けませんが、 と書けば書かれた数分カーソルを送ります。この時の表記は …です。
id名に対しては #name { styleKey : styleValue; }
class名に対しては .name { styleKey : styleValue; }
ですが、複数のid名、class名に同じstyle指定をする場合は,で区切り
#name, .name { styleKey : styleValue; }
一方、id名、class名時にはタグ要素名を積み重ねて、style指定の対象を限定する場合はスペースで区切り
#name .name a { styleKey : styleValue; }
とします。
style指定の対象を限定する指定法は、あるページのp文字フォントだけを変更したい場合などに有効です。
.page-id-1914 #content p{font-family: “AR P丸ゴシック体M”;
}
コマンドボタンに付ける名称に白の影付けをするとよりボタンがリアルになります。指定は以下のCSSのtext-shadowです。
#AppButton {
border-radius: 10px;
background-color: #cccccc;
background: -moz-linear-gradient(top, #eeeeee, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
text-align: center;
margin-bottom: 20px;
}
#AppButton a {
text-shadow: 2px 2px 0 #ffffff;
display: block;
padding: 20px 0;
color: #444444;
text-decoration: none;
font-size: x-large;
font-weight: bold;
}
コマンドボタンなどは地の色(背景色)にグラデーションを掛けると、文章の中にあるよううな場合は、区分けも出来て見栄えも良くなります。
しかし、グラデーションはCSSの属性情報としてベンダー間の違いが多く、FirefoxなどのMozilla系ブラウザ、SafariやGoogle Chromeなどのwebkit系ブラウザで書式が違います。
そこで、ベンダープレフィックスを付けてブラウザーごとのグラデーション指定を行います。
background: -moz-linear-gradient(top, #eeeeee, #cccccc); /*FF*/
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc)); /*Chrome Safari*/
一方、IEはバージョンごとに仕様が違うのでサポートをあきらめています。
サイドバーの親ページに対し、複数の子ページを作成した場合、各子ページのページ属性の[順序]を指定しない（デフォルトは０）場合、子ページの表示順は固定ページ一覧に表示されている順序になります。
この子ページの表示順を指定したい場合は、ページ属性の[順序]を0から昇順で各ページに振れば、その順序に画面上の子ページの表示順が変わります。
![子ページのページ属性の[順序]を指定](http://fksekiguchi.sakura.ne.jp/wp/wp-content/uploads/2015/07/set_a_display_order-of-child-page.png)
BizVektor1.0.0以降は、
サイドバー（Informationページ） — sidebar-info.php
サイドバー（投稿ページ） — sidebar-post.php
サイドバー（固定ページ） — sidebar-page.php
サイドバー（共通・上下） — 上記の各サイドバー内で表示
サイドバー（トップページ） — front-page.phpの「id=”sideTower”」で表示
サイドバー（投稿タイプが取得できなかった場合） — sidebar.php
サイドバー幅を広くしたい、と思った時には、子テーマのstyle.cssに
@media (min-width: 970px) {
#main #container #content { float:left; width:640px; }
#main #container #sideTower { float:right; width:280px; } }
を追加します。
290px以上を指定するとサイドバーが表示されなくなったりレイアウトが崩れることがあったので。280pxを上限とすると良い。
サイドバーに何も表示したくない場合はウィジェットを空にすれば良いのですが、デフォルトのアイテムは表示されてしまいます。
そこで、サイドバーについているsideTowerというIDに対して「display:none;」するCSSを子テーマのstyle.cssに追加します。
#main #container #sideTower {
display:none;
}
BizVektorのトップページはサイドバーとメインコンテンツで構成されます。
また、トップページはカスタムリンクで作られています。
サイドバーのレイアウトは[外観] – [デザイン] – [レイアウト]から、
サイドバーの内容の詳細は[外観] – [カスタマイズ] – [ウィジット]から設定できます。
まず、サイドバーの中の対象情報を選び、
対象情報を展開して、情報内容を直接記入します。
BizVektorのトップページはサイドバーとメインコンテンツで構成されます。
また、トップページはカスタムリンクで作られています。
メインコンテンツは[設定] – [表示設定] からお知らせとBlogの投稿(最新の投稿)か固定ページの貼り付けかが選択できます。
お知らせとBlogの投稿で作成する場合は、その設定を[外観] – [テーマオプション] – [お知らせ&Blog]で設定します。
お知らせの実体は[お知らせ] – [新規追加]で作成し、[更新]します。
