【wordpress】BizVektorの子テーマのstyle.cssが、上書き保存できない。

Question

ワードプレス初心者です。

リンク内容からBizvektorの子テーマをDLしたのですが、フォルダの中に入っている「style」のページが上書き保存できずに困っています。

そもそもBizvektorのヘッダーにロゴ画像を設置したのですが、あまりにも設定サイズが小さいのでもっと大きくしたいと考えていました。
そして上記のサイトから子テーマをDLし、サイトの指示通りにwordpressでも適応を行いました。

それからリンク内容を参照して、

#header #site-title a img { max-height:100px; }

をbiz-vektor-child/styleの順番で（メモ帳で）開いたファイルに打ち込み、上書き保存を行おうとしました。
しかしなぜか「名前を付けて保存」の画面が出てしまい、さらに保存先の候補には「biz-vektor-child」のファイルが入っておりませんでした。
保存形式を「txt」から「すべてのファイル」に変換して保存し、再度biz-vektor-childのファイルを開こうとしたら画面が真っ白になってしまったので、もう一度子テーマのDLからやり直しました。

どうすれば上書き保存を行うことが出来るでしょうか？
初心者なのでどこかの手順が間違っていると思う（「子テーマ」という言葉も、先ほど知りました）ので、アドバイスを頂けたらと思います。

OSはwindows。レンタルサーバーはロリポップ。
wordpressのテンプレートはBizVektor(リンク内容の書籍を持っているので、NEATという拡張ファイルを設定済み)です。
ファイルの編集は「メモ帳」で行います。

なお、biz-vektor-child/styleのファイルには、

@charset "utf-8";
/*
Theme Name: ★BizVektor子テーマサンプル★
Theme URI: http://bizvektor.com
Template: biz-vektor
Description:
Author: ★あなた ｍ９っ・ｗ・）ｂ★
Tags:
Version: 0.1.0
*/

というコード（？）が既に書かれていたのですが、この続きに

#header #site-title a img { max-height:100px; }

を書けばよろしいのでしょうか？
こちらもお答えいただければと思います。

長くなりましたが、よろしくお願いします。

Answer 1

こんにちは。

メモ帳をテキストエディタとして使用しているかぎり、ファイルを編集するうえでの問題は起こります。

今回のようにファイルを保存する際に手間取ったり、下の画像のように改行が無視されたりする場合もあり、このような状態でファイルを編集するのはかなり困難になります。

Jumseiさんが、今後もこうした作業をつづけていくつもりなのでしたら、メモ帳ではなく専用のテキストエディタ（コードエディタ）をお使いになることをおすすめします。
下記に紹介させていただくほか、数多くの高機能なテキストエディタ（コードエディタ）が無料で公開されていますので、Jumseiさんが使いやすいものをお選びいただければと思います。

Sublime Text 3（リンク）：Web開発の現場でよく見かけるエディタ（Win/Mac）
Brackets（リンク）：Adobeが提供しているコードエディタ（Win/Mac）

Windowsをお使いのようですので、最低限の編集ツールとしてサクラエディタ（リンク）はインストールしておいてもよいのではないでしょうか。

そのほか、WordPress編集用のテキストエディタについてくわしくは、WordPress Codexの用語集（リンク）をごらんください。

なお、下記のコード

#header #site-title a img { max-height:100px; }

のあつかいですが、参考リンクの説明を読むかぎりでは、biz-vektor-child/style.cssの最終行に追記するだけで機能するように設計されているようです。

以上、ご参考いただければ幸いです。

Comments

[退会済みユーザー]

お返事ありがとうございます。
返信が遅れまして、申し訳ありません。

先ほどサクラエディタをDLしてファイルの書き込みを行おうとしたら、文字化けが発生してしまいました。

そもそも
１・サクラエディタを起動
２・「ファイルを開く（Ctrl　＋　O）」を選択
３・該当するフォルダをクリック
４・該当するファイルをクリック
ここまでの手順で該当するファイルを開き、編集するのが一般的だと思います。

しかし私の場合は、
１・サクラエディタを起動
２・「ファイルを開く（Ctrl　＋　O）」を選択
３・該当するフォルダをクリック
までしか行えず、フォルダの内容（ファイルのタイトル等）が文字化けして表示されます。

ファイルを開きたいのに、フォルダまでしか開くことが出来ません。
どうすれば良いでしょうか？

[退会済みユーザー]

Jumseiさん、コメント（フィードバック）をいただきありがとうございます。

ファイルを開く前に、まずサクラエディタの環境設定をおこなってください。

【拡張子】設定 > タイプ別設定一覧
テキスト、PHP、HTML、JavaScript、CSS などを（必要に応じて）選択して「設定変更」をクリック。
【文字コード】設定 > タイプ別設定 > サポート
デフォルトの文字コード：おそらくShift_JIS（S_JIS）になっていると思われますので > UTF-8 に、改行コードは LF にして「OK」をクリック。

僕は Windowsユーザーではなく、サクラエディタを実際にさわったことがありませんので、上記の設定方法は一般的なエディタをイメージして手順を書いています。名称など細部が異なっている場合がありますので、Jumseiさんご自身で確認してみてください。

設定がおわった段階で、「ファイルを開く」から当該ファイルを選択してください。

選択フィールドにファイルが表示されていない場合は、ファイルのドラッグ＆ドロップで開いてみてください。おそらくファイルを開くことはできると思います。
一旦、サクラエディタを終了して、下記に記載したリンク先を参考にファイルとアプリケーションの関連づけをしてください。

https://dekiru.net/article/12837/

上記のをおこなってもファイルが表示されない、文字化けするなどの不具合が起きる場合は、すべての関連ファイルをアンインストールをした後、再度インストールをしてから設定をおこなってください。

Answer 2

既に回答は出ていますが
WordPressを編集するときはメモ帳以外での編集が基本です。

理由がメモ帳が勝手にBOMコードを追加するためです。
理由は下記のとおりです。
http://naifix.com/utf-8-bom/

CSSはbiz-vektor-child/style.css

@charset "utf-8";
/*
Theme Name: ★BizVektor子テーマサンプル★
Theme URI: http://bizvektor.com
Template: biz-vektor
Description:
Author: ★あなた ｍ９っ・ｗ・）ｂ★
Tags:
Version: 0.1.0
*/
より下から入力で問題ありません。