THE THOR【ザトール】マーカーの色を変更する方法(超初心者向け)

  • 2019年9月11日
  • 2019年9月11日
  • 学び

「ザ・トール」を購入したのは、ブログを書くにあたってどんなテーマを入れようかと考えた時、いろんなブログでおススメされているのをみて「なんか良さそう!」と思ったのがきっかけです。

ただし、購入当時から分かっていてその上で覚悟を持って購入したものの、初心者にはとにかく難しい。「こんなことをやりたい」と思ったことがスムーズに出来ない。使っている人がまだ多くないせいか、ネットでやり方や分からないことを検索してもピンポイントで解説してくれているところにたどり着けないし、仮にたどり着いたとしても、専門的すぎて何を言っているのかさっぱり・・・という状態だったりします。

難しいパソコン用語なんて分からないし、途中の手順を省かれるとさっぱり分からないし。
誰かもっと丁寧に説明して~~

そこで、超初心者のわたしがこの「ザ・トール」を使っていくにあたり、学んだことを「超初心者向け」に解説しようと思います。何しろ、私自身も超初心者なので、「分からない気持ちは誰よりも分かります」継続的にずっと分からないことばかりなので、勉強のしがいがあるというものです。

今回は、投稿ページでのマーカー色の変更の仕方について説明します。

【ザ・トール】マーカーの色の変更の仕方

ザ・トールでは、もともとの仕様でマーカーが使えるようになっていますが、かなり薄め。
このようになっています。
レッド
ブルー
イエロー
ピンク
グリーン
グレー

全体的に淡い色ですね。

もっと濃い色の方が好きなんですか、色の変更は出来ますか?
できます!でも初心者には厄介です。
5分や10分やそこらで出来るとは思わないで。

この色、かなり最初から「うーーーーーん」と思っていたのです。でもやり方が分からないから放置していました。記事を作ることにくらべてマーカーの色なんですごく細かいことなので放置でもいいのですが、気になりだすとどんどん気になってしまって止まらないのでやってみることにします。

せっかくブログをやっているなら好きなようにいじりたいし、なにより「色を変えてみたい」と思うなら我慢せずに変えてみたいですよね。そこで、今回はザトールにもともと備わっているデフォルトの淡いマーカー色をチェンジ!濃い蛍光カラーに変更していきます。この作業をすると、

レッド
ブルー
イエロー
ピンク
グリーン
グレー

このように変わります!

この作業後も「記事作成の画面ではマーカーの色は変わりません」が、
プレビューで見ると色が変わっているのが確認できます。
*以下の作業を行うと、パソコンでブログを見た時にはマーカーの色が変更されていますが、ipad上で見るとこれまで通りの色で、変わっていませんでした。これについては、今のわたしの力ではお手上げなので、変更の仕方が分かり次第追記します。以下の記事は参考までにお読み下さい。分かる方がいらっしゃいましたら、ご連絡いただけますと大変ありがたいです。

【ザトール】マーカー変更の具体的なやり方

もともとのマーカーの色はかなり淡い。レッドなんてほぼピンク。これが記事を書くにあたってじわりじわりとわたしにストレスを与えていました。わたしはもっとぱっきりした色が好き!こんな淡い感じじゃなくてバッキバキのピッカピカにしたい!!でもいったいどうやって?初心者のわたしにはさっぱり分かりません。

そこでネットで調べまくりました結果、ザトールでは、マーカーの色の変更はワードプレス上で「style.css」を書き換えるのでははなく「style.min.css」というファイルを書き換えていくという方法で変更する必要があるということが分かりました。


この変更には「ワード(テキストエディタ)とサーバーのファイルマネージャー」が必要です。親テーマにアクセスする形で変更していきます。

わたしはエックスサーバーを使っているので、エックスサーバーで変更する方法です。

エックスサーバーのトップ画面右上、ログイン→ファイルマネージャーをクリック

「ファイルマネージャ ログイン」画面で、FTPユーザーIDとFTPパスワードを入力

FTPユーザーIDはサーバーID,FTPパスワードもサーバ―パスワードと同じです。

サーバーIDとサーバ―パスワードは、エックスサーバーと契約した時に送られてきたメール内にあるので確認しましょう。

ファイルをダウンロードして変更をする。

○○○○○(作っているブログのアドレス)>public html>wp-content>themes>the-thor>style.min.css
この順番にアクセスをしていきます。
1.ファイル一覧から、該当ブログをクリック
2.「public html」をクリック
テキスト

右上のパスには、選んでいく順番に「選んだものが」後ろにくっついていきます。

3.「wp-content」をクリック
4.「theme」をクリック
5.「the-thor」をクリック

すぐ下に子テーマがあるので、間違わないようにしましょう

 

6.「style.min.css」左のチェックボックスにチェックを入れて、編集をクリック
「style.min.css」は下の方にありました!
上に戻って、右横の、ファイルの操作・編集をクリック
7.ファイルの編集ボタンを押して出てきたデータ全文(下の赤枠部分)をワードにはり付ける
はりつけられたら、データ中にある「marker」を見つけてください。
この文字量の中から普通に探すとすごく大変なので(やってみましたけど、見落としてばかりでムダに時間かかります)検索窓を使ったほうが良いです
ワード・検索窓の使い方
ワードの上の方「ファイル・編集・表示・・・」というところの、編集→検索とすすみ、検索窓に markerと入力して検索します。

検索すると、このような部分が出てきます。

marker-thickRed{background:linear-gradient(transparent 35%,#FFC6C6 35%)}.content

検索で見つけた「marker」のコードの後ろの方に「#FFC6C6」という文字がありますね。これがテーマに設定されているマーカーのカラーコードとなります。カラーの濃さを変えたい場合は、このカラーコードを変更します。

コードには、マーカーの太さも書かれています。

太文字「thick」
中文字「half」
細文字「thin」
先ほどのコードの意味は、
marker
thickRed{background:linear-gradient(transparent 35%,#FFC6C6 35%)}.content

マーカー太い#FFC6C6 という色」ということになります。
実際の画面でみるとこのようになっています。
黄色アンダーラインラインの太さと色(記事作成の画面で、「スタイル→マーカー→マーカー太→レッド」と表示されるところ
赤色アンダーラインカラーコード
それぞれのマーカー(thickRedとか、thickBlueとか)に対応するカラーコードを、好きな色コードに変更してください。(カラーコードはネットで調べると出てきます)、中文字・細文字も同じように行います。
わたしの場合はこのように変えました。
6.変更が終わったら、編集後のデータを赤枠部分に張り付け、「保存する」をクリック。
 これで終了です。
保存を押してすぐには変更されていなかったのですが、しばらくたつと反映されるようです。
わたしの場合は午前中に変更をして夕方に投稿画面で確認したところ、マーカーの色が変わっていました。

おすすめのマーカー色

今回変更した色をご紹介します。

出来るだけド派手な色を選んでいます。色が濃くなった分、存在感が強調されて「線を引いているぞ!!」という感じになります。

比べてみると、違いが分かりやすいですね。

マーカー配色変更前変更後
レッド#FFC6C6#fc0505
ブルー#cce5ff#05f5f5
イエロー#ffffbc#ffff00 
ピンク#FFDFEF#FF47A3
グリーン#D2FFD2#b5ff14
グレー#d8d8d8変更なし

THE THOR【ザトール】マーカーの色を変更する方法・まとめ

ぱしからさん

超初心者のわたしにとって、マーカーの色の変更手順は複雑で難しく、丸一日かかりました。それでも一度変更の手順を覚えてしまえばいろいろと応用もできそうですし、気になる時に簡単に別の色に変更することも出来ますね。わたしの備忘録としてとにかく詳しく解説しましたので、この通りにやれば、きっと出来ます。ぜひ、色んな色に変更して楽しんで下さいね!ただし、おかしなところをいじって画面が変になってしまっても初心者には簡単に対応が出来ないので、バックアップはしっかりとってからやった方がよいかと思います。

最新情報をチェックしよう!