月別アーカイブ: 2015年10月

8.子テーマでデザインをカスタマイズ

子テーマの作成とインポート

そろそろ半年近くなってきてしまったので、子テーマを作成し
デザインのカスタマイズします。

と言ってもこれだけ

wordpress 子テーマ style.css

style.cssのファイルを作成してzipでインポートして有効化するだけ。

注)このままでも日本語に対応していて問題ないんですが、
Theme Nameは英字にしたほうがいいとの記述も見かけたので、特別事情がなければ英字がいいと思います。(これは某参考書のTwenty Twelve用子テーマのダウンロードサンプルをテーマ名だけ変更してそのまま使用したもの)

問題が出たのは以下の2点

元テーマのTwentythirteenで取り替えたヘッダー画像がデフォルトに戻ってしまったので、ペン次の画像に変更。

グローバルナビでブログのカテゴリーのプルダウンメニューが表示されなくなってしまったのでメニューをチェック。

グローバルメニュー

ナビゲーションメニューのチェックが外れていたのでチェックを入れたら
表示されました。

元テーマに加えたfooterなどの変更はそのまま継承され、以前と何も変わって
ない様子、これからこのcssファイルに随時加筆しながらデザインを変更して
いきます。

デザインをカスタマイズ

ナビゲーションの背景色をグレーに変更

色はWebセーフカラーを参照

#navbar {
    background-color: #cccccc;
}

斜体字になってるフォントを修正

body * {
    font-style: normal  !important;
}

サイトのタイトルと説明文の色を臙脂色に

.site-title, .site-description {
         color: #330033;
}

参考書ではヘッダーのid属性#mastheadも併せて指定されていますが
class属性の.site-titleだけで問題なさそうなのでこのままいきます。

記事のタイトル文字を小さく

#content article .entry-title{
             font-size: 36px;
}

スマホ用の説明文のサイズを小さく

幅400pxぐらいのディスプレーになると「男もすなる美文字日記」が絵にかぶってしまうのでサイズを小さくします。

が、子テーマでメディアクエリ643px以下で設定しようとしたものの、適応されず
しょうがないので親テーマのTwenty Thirteenの方に追記

@media (max-width: 643px) {
 .site-title {
 font-size: 30px;
 }
 .site-description {
 font-size: 16px;
 }

しかしFirefoxとSafariでは小さくなったもののChromeでは変化せず。

2017  2  24    

記事が増えてきた上、一本の記事が長いので
カテゴリー別のページが見づらくなったため久々のカスタマイズ。

抜粋文の表示に変更して、1ページあたり10本に。

記事を出力するcontent.phpにif文で検索結果を抜粋文で表示する仕様になってる事を発見。 the_excerpt()が抜粋文のコード。

 <?php if ( is_search() ) : // Only display Excerpts for Search ?>
 <div class="entry-summary">
 <?php the_excerpt(); ?>
 </div><!-- .entry-summary -->
 <?php else : ?>
 <div class="entry-content">

ならば カテゴリーとタグのテンプレートもここに加えればいいので 追加。

 <?php if ( is_search() || is_tag() || is_category() ) : // Only display Excerpts for Search ?>
 <div class="entry-summary">
 <?php the_excerpt(); ?>
 </div><!-- .entry-summary -->

見やすいようにデザインを変更。

class = “entry-title”にスタイルをつける。

タイトル背景色を白にして、タイトルを太字に。

ボーダーをborder-style:doubleで二重線にしてborder-radiusで角丸めときました。

wordpress the_excerpt()

で こうなりましたと。

サイドウィジェットにかぶって見苦しかったアーカイブヘッダーも
この際、修正。

.archive-header {
 background-color: none;
}
.archive-title {
 max-width:65%;
 float:left;
 background-color : rgba(0,0,255,0.3);
 border-radius: 10px;
 font-weight:bold;
 padding:20px;
 margin:20px;
}
@media (max-width: 643px) {
 .archive-title {
 font-size:20px;
 }

#content article .entry-title {
 font-size:28px;
 }
}
@media (max-width: 359px) {
 .archive-title {
 font-size:14px;
 }
 #content article .entry-title {
 font-size:20px;
 }

メディアクエリーでデバイスのサイズによって
タイトルのフォントサイズを切り替えるように設定。

もちろん 追記はすべて子テーマを使ってのオーバーライドです。

今回は子テーマでもメディアクエリー反映した。

ペン字検定3段突破 でも前途多難。

何とか三段合格いたしました。

提出作品1    五言絶句  書体自由

使用ボールペン ZEBRA SARASA CLIP 0.5

前回0.7を使ってタイトルが太くなって書きづらかったので0.5に変えました。
スッキリしたと思います。

kentei3dan_2-1

提出作品2 和歌 佐佐木信綱(手本あり)

使用ボールペン uni  JETSTREAM0.5

前にも言いましたが和歌はどう書いていいかわからないので
とにかく丁寧に手本通りに書きました。
キリキリした線なので油性ボールペンにしました。
左に曲がっていってますが、それも手本通りです。

ペン字検定3段 和歌

提出作品3  夏目漱石「坊ちゃん」 行書体

使用ボールペン ZEBURA SARASA CLIP0.5

ひと月しかなかったので、急にレベルアップすることは無理なんで
とにかく前回より丁寧に書くことだけ心がけました。

ペン字検定3段 夏目漱石

どうでしょう

前回と大きく変わったわけではないので自信なかったのですが
おそらくギリギリ通過したのでしょう。

前回落ちたのと比較してみてください。

和歌の壁?ペン字検定3段 連綿に死す。

で、次は4段となるわけですが
この半年の審査結果を改めて確認してみると
4、5段はあまり人名の動きがない つまり昇段してない。
5段にいたっては半年で1名だけです。

内容も和歌が手本なしの創作になるのを始め
楷書はやっかいな横書きです。

あとひと月じゃ次の検定提出は厳しいかなと思いますが
現状でベストの物ができた時点でいきなり検定にチャレンジするか
前もって添削受けるか(同じ金額で添削が受けられる。その回は検定に
同時には出せない。)判断したいと思います。

追記

昔 毛筆の検定受けていた当時の検定結果誌を
参考になるペン字昇段者の作品は載ってないかと見ていたら
現在4段の方の名前を発見。

なんと2009年の検定で3段です。

つまり6年たってる。

他にも今も受けてらっしゃる方の名前がチラホラ
5段に昇段された1名の方もこの2009年時点で2段です。

いや〜〜〜〜〜〜こりゃ思ってる以上に大変だぞ

5段落ち続けてる人は4段受かる実力を持った人なわけですからね

もうなんか 受かる気しません。