Twenty sixteenの設定

style.css と functions.php の作成(子テーマを作る)

(1). wp-content/themes/twentysixteen-child ディレクトリを作成する。
(2). 新しいディレクトリ内に「style.css」「functions.php」を作成する。

twentysixteen-child/style.css

/*
 Theme Name:   Twenty Sixteern Child
 Description:  Twenty Sixteern Child Theme
 Author:       ************
 Author URI:   **************
 Template:     twentysixteen
 Version:      1.0.0
 Text Domain:  twentysixteen
*/

twentysixteen-child/functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

 chmod -R www-data:www-data と chmod -R 755 をしておくこと。

子テーマの有効化

作成したテーマを有効化し、サイトを子テーマで表示します。
(1)1. 管理画面の「外観」>「テーマ」で「Twenty Sixteen Child」を選択し、「有効化」をクリックする。

プロフィールをテキストで入れる

 サイドバーにテキストを追加。以下のように内容を入れる。

<center>
<img src="http://mifmif.mydns.jp/masterkudo/wp-content/uploads/img/mifjpns.gif" border="0" />
</center>
 応用化学(量子化学)のマスターです。でも、現在は法律やさん。さらに、業務課に移り、札幌の本局に移りました。
量子化学ではBSD,SUNを、今ご家庭ではUbuntuを使ってWeb+Printerサーバ、Fileサーバを作っています。

各背景を入れる。

 unsplashから持ってきて白めにしたものを
htttp***masterkudo/wp-content/uploads/img/へ入れる
追加CSSで以下のように追加。

.site-content {
    background-image: url(http://mifmif.mydns.jp/masterkudo/wp-content/uploads/img/stil-wtqe5nd5MYk-unsplash.png);
    opacity: 1.0;}

広告フッター(ddo.jp)

 全体のフッターには入れられませんでしたが、サイドバーのフッターに、カスタムHTMLとして、小さめのddo.jpからもらった広告をいれられました。

パーマリンクをデフォルトにする

 検索後に、記事を追えませんでした。

文字

フォントが見づらいので、変えました。
twentysixteen-child/style.css

body, button, input, select, textarea,
.entry-title,           /* 以下、明示指定されているものを上書き */
.main-navigation,       /* 画面右上のメニュー */
.comment-metadata,      /* コメントの日付 */
.comment-reply-link,    /* コメントの返信ボタン */
input[type="submit"],   /* 送信ボタン */
.post-navigation,       /* 投稿単位のページナビゲーション */
.post-navigation .post-title,
.post-navigation div + div,
.comments-title,        /* コメント */
.comment-reply-title,
.comment-notes,
.comment-form label,
.widget .widget-title,
.logged-in-as {
    font-family: "Trebuchet MS","Arial","Helvetica","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}

 追加CSSに以下を入れました。

.site-branding .site-title {    /* サイトのメインタイトル */
    font-size: 2.1rem;
    font-weight: 400;
    letter-spacing: -0.1rem;    /* 文字間を少し寄せる */
}
.site-description {
    font-size: 1.1rem;
    margin: 0;
}
/*投稿タイトルのフォント*/
.entry-title {
    font-size: 1.5rem;
}
/*投稿記事のおおきさ*/
.entry-content > p:nth-child(1) {
 font-size: 16px;
 letter-spacing: 0.017em;
 line-height: 23px;
}

.site-header {
    padding-top: 0rem;      /* サイトタイトルの上が広すぎるので */
    padding-bottom: 0rem;   /* サイトタイトルの下が広すぎるので */
}
@media screen and (min-width: 61.5625em) {
  .custom-logo {
	  /* カスタムロゴを小さく */
     max-width: 60px;
  }
}

コメントは見当違いのところに、移動してるので消しました。


トップ   編集 凍結解除 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-02-05 (水) 00:18:13