ogu-tec

今回は３番目の個別にcssを追加する方法

これをやるにはプラグインが必要。

Custom CSS and JSというプラグインを導入する。プラグインの導入はいいですよね。
導入したら、投稿の編集画面で右上の「表示オプション」で「カスタムフィールド」にチェックをいれます。

するとエディタの下にカスタムフィールドが表示されます。

そのカスタムフィールドの「名前」の欄に下記のキーワードを入力します。
外部ファイルを追加する場合は　custom_css
コードを追加する場合は　custom_css_code
です。
「値」の欄には
外部ファイルを追加する場合は　追加するCSSの外部ファイルのパスを記述
コードを追加する場合は　追加するCSSのコードを記述
します。

便利です。これは見出しの変更ばかりでなく、大きな変更ができます。やってみてください。

しかし、見出しの変更は前回紹介した方法が一番いいと思います。使いたい様々な見出しをclass名をつけて作成し、エディタのスタイルに登録しておく方法です。

実際に見出しを作る場合はネット上にジェネレーターがいろいろありますからそれを使うといいと思います。「見出し　css」で検索すればたくさんでてきますよ。
やってみてください。

前回に続いてワードプレスのcssについての話の２回目
前回のようにテーマのcssを書き換えてしまうと全てに影響します。それでいい場合は構わないけれど、一部分のみ変更したり、ページによって変えたい場合はちがった方法をとります。
cssのclass名を使って登録する方法です。例えばh4の設定で以下のように書きます。

この設定をテーマのcssに追記して、保存し、記事中に「テキスト」で以下のように書けばいいわけです。

しかし、これでは面倒ですね。そこでこうしたcssのclassをエディタにスタイルとして登録します。
そのためにはまずエディタの拡張プラグインであるTinyMCEをインストールしておきます。このプラグインはまず入れるべきものですから使っている人が多いでしょう。
設定→TinyMCE Advansed　で以下のように設定しておきます。

要するにエディタのcssを読み込むようにチェックをいれ、ツールバーに「スタイル」アイコンを入れておきます。
その上でエディタのcssに自分が書いたclassを追記します。

editor-style.cssはwp/wp-content/themes/テーマ名/cssにあります。これを一旦DLして、追記し、UPします。こうすると「スタイル」に登録されます。

文字列を選択し、「スタイル」からこれを選択すればこのスタイルが適応されるというわけです。

これはh4の見出しです。

前回見出しのカスタマイズについて書いたけど、具体性に欠けたので、今回はその手順を示します。先ずはテーマのcssを変えてしまう方法。

Google Chromeの要素の検証を使って見出しを変更

いきなり見出しを変更するのは困難ですよね。そこでchromeの便利な機能を使います。サイトをchromeで表示して、右クリックで要素の検証を選びます。変更したいところを選ぶと

その部分のcssが右に出てきます。そこで、ここで変更ができるんです。やってみます。

色を作るのも便利です。左側には変更がみて取れます。cssは以下のようになりました。

このままでは変更はされません。この部分をコピーしておきます。これをテーマのcssの示されている行に貼り付けます。ただここで注意すべきは大抵のワードプレスのテーマはレシポンシブですので、ここも画面の解像度による設定部分になっている点です。全てに適応させたい場合はここに示されているラインcssの533行目を変えてもダメです。

テーマのcssを変更する

ワードプレスにログインし、ダッシュボード　外観　テーマの編集を開きます。

変更する部分を見つけます。

ここでは全体に適用させたいので、ここを書き換えました。ファイルを保存します。ワードプレスを再起動します。全てのページに適用できたはずです。

 

 

WordPressはブログだから選んだテーマをそのまま使っていればいいのだけれど、ちょっと見栄を変えたくなることがある。そこで見出しだけを変える方法を幾つか紹介。

いきなりcssを変える方法

当然テーマにはcssがある。そのcssを書き換えればいい。見出しだからh1からh6を記述しているところを好みのものに変えればいい。勿論cssの知識は不可欠だ。テーマのカスタマイズから行える。もし自分でcssを書く自信がなければ、ネット上にある見出しを作るジェネレーターを使うといい。

classを使って、見出しを作り登録しておく方法

いきなり変えるのはなんなんで、クラス名をつけた見出しを作っておく。これもジェネレーターで作ってもいい。これをcssファイルとして保存して登録する。勿論登録する知識は必要だ。
その上でエディターを拡張しておいて、そこから呼べるようにする。

cssを部分的に登録できるプラグインを使う方法もある

いずれにしても、チョットでもカスタムしたけりゃ、やはりcssの知識は不可欠です。
具体的には後で。

昔の原稿を用意　テキストファイル
ただ、江戸末期から明治期にかけて活動した文人についての原稿
縦書きにしたいし、表示しにくい漢字が多くある。
漢字の問題はユニコードだと多く表示できることが判明。

http://www.chise.org/

にアクセスして部品文字列を入力して検索するとコードを返してくれ、ブラウザ上の表示を示してくれる。その表示をコピペすればいい。
これでほとんどの漢字が表示できるようになる。

以上のように原稿をテキストファイルで用意する。
見出しは見出し文の前に（小見出し）を挿入する。
次に表紙の画像を用意しておく。

その上で、縦書き形式のePubファイルを作成してくれるサイト

http://books.doncha.net/epub/

にアクセスして、
本文テキスト、表紙画像をファイル指定して
タイトル、著者を入力し、
送信ボタンを押す。
すると日付がついたePub形式のファイルがダウンされる。

それをkindleの出版サイト

https://kdp.amazon.co.jp/

にアクセスして、アマゾンのアカウントがあればそれでサインインする。
これからがけっこう大変
アメリカの税務上の手続きが面倒
住所の入力等が米国式なので
わからない場合は

http://judress.tsukuenoue.com/

にアクセス。変換してくれます。
銀行口座を指定する場合は手数料がかかる銀行が多いので注意
新生銀行はかからないという話だけど、どうせそんなに儲からないから構わない。
銀行コード必要。

ここまでが登録

その上で本文と表紙をUPする。
ここで表紙については規定があるので知っておく必要あり。

あとは審査があるので待ちましょう。

ウィンドウズ環境での話

USBの用意
Xampp環境の構築
xampp-portable-lite-win32-1.8.1-VC9.7zをダウンロード
7z920-x64.msiもダウンロード
7z形式なのでこれを解凍できないといけないので7z920-x64.msiを実行
32bit環境の場合は32bit版です。
xampp-portable-lite-win32-1.8.1-VC9.7zを解凍（usbに解凍ですよ。本体HDDに解凍したらUSBに丸ごとコピーしてもいい）
xamppフォルダができる
そに中の
xampp-control.exeを実行する
apache
mysql
をスタートさせる

ブラウザでhttp://localhostにアクセス
日本語を選択
左メニューからセキュリティの設定を選択
mysqlのrootのpassを決め、
xamppのユーザーとパスも決める　（忘れないように）
xampp-control.exeに戻って、apache,mysqlをリスタートさせる。

WordPressのインストール
wordpress-4.2.2-ja.zipをダウンロード
これを展開

出来たwordpress-4.2.2-jaフォルダの中のwordpressフォルダを丸ごとコピー
xamppフォルダの中のhtdocsフォルダにペースト
ブラウザで
http://localhost
にアクセス（ユーザーとパスを聞いてきますよ）
左メニューのphpMyadminを選択（パスを聞いてきますよ）
左上のデータベースをクリック
wordpressというデータベースを作成
ブラウザで
http://localhost/wordpress
にアクセス
指示に従って設定する。
一旦ブラウザを閉じて
再び
ブラウザで
http://localhost/wordpress
にアクセス
WordPressの初期画面が出れば成功

後はWordpressの世界