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


そこで、超初心者のわたしがこの「ザ・トール」を使っていくにあたり、学んだことを「超初心者向け」に解説しようと思います。何しろ、私自身も超初心者なので、「分からない気持ちは誰よりも分かります」継続的にずっと分からないことばかりなので、勉強のしがいがあるというものです。
今回は、投稿ページでのマーカー色の変更の仕方について説明します。
【ザ・トール】マーカーの色の変更の仕方
ザ・トールでは、もともとの仕様でマーカーが使えるようになっていますが、かなり薄め。
このようになっています。
レッド
ブルー
イエロー
ピンク
グリーン
グレー
全体的に淡い色ですね。


5分や10分やそこらで出来るとは思わないで。
この色、かなり最初から「うーーーーーん」と思っていたのです。でもやり方が分からないから放置していました。記事を作ることにくらべてマーカーの色なんですごく細かいことなので放置でもいいのですが、気になりだすとどんどん気になってしまって止まらないのでやってみることにします。
せっかくブログをやっているなら好きなようにいじりたいし、なにより「色を変えてみたい」と思うなら我慢せずに変えてみたいですよね。そこで、今回はザトールにもともと備わっているデフォルトの淡いマーカー色をチェンジ!濃い蛍光カラーに変更していきます。この作業をすると、
レッド
ブルー
イエロー
ピンク
グリーン
グレー
このように変わります!
プレビューで見ると色が変わっているのが確認できます。
【ザトール】マーカー変更の具体的なやり方
もともとのマーカーの色はかなり淡い。レッドなんてほぼピンク。これが記事を書くにあたってじわりじわりとわたしにストレスを与えていました。わたしはもっとぱっきりした色が好き!こんな淡い感じじゃなくてバッキバキのピッカピカにしたい!!でもいったいどうやって?初心者のわたしにはさっぱり分かりません。
そこでネットで調べまくりました結果、ザトールでは、マーカーの色の変更はワードプレス上で「style.css」を書き換えるのでははなく「style.min.css」というファイルを書き換えていくという方法で変更する必要があるということが分かりました。
この変更には「ワード(テキストエディタ)とサーバーのファイルマネージャー」が必要です。親テーマにアクセスする形で変更していきます。
わたしはエックスサーバーを使っているので、エックスサーバーで変更する方法です。
エックスサーバーのトップ画面右上、ログイン→ファイルマネージャーをクリック
「ファイルマネージャ ログイン」画面で、FTPユーザーIDとFTPパスワードを入力
FTPユーザーIDはサーバーID,FTPパスワードもサーバ―パスワードと同じです。
サーバーIDとサーバ―パスワードは、エックスサーバーと契約した時に送られてきたメール内にあるので確認しましょう。
ファイルをダウンロードして変更をする。
1.ファイル一覧から、該当ブログをクリック

2.「public html」をクリック

右上のパスには、選んでいく順番に「選んだものが」後ろにくっついていきます。
3.「wp-content」をクリック

4.「theme」をクリック

5.「the-thor」をクリック
すぐ下に子テーマがあるので、間違わないようにしましょう

6.「style.min.css」左のチェックボックスにチェックを入れて、編集をクリック



7.ファイルの編集ボタンを押して出てきたデータ全文(下の赤枠部分)をワードにはり付ける

この文字量の中から普通に探すとすごく大変なので(やってみましたけど、見落としてばかりでムダに時間かかります)検索窓を使ったほうが良いです
ワードの上の方「ファイル・編集・表示・・・」というところの、編集→検索とすすみ、検索窓に markerと入力して検索します。

検索すると、このような部分が出てきます。
marker-thickRed{background:linear-gradient(transparent 35%,#FFC6C6 35%)}.content
検索で見つけた「marker」のコードの後ろの方に「#FFC6C6」という文字がありますね。これがテーマに設定されているマーカーのカラーコードとなります。カラーの濃さを変えたい場合は、このカラーコードを変更します。
コードには、マーカーの太さも書かれています。
中文字「half」
細文字「thin」
marker–thickRed{background:linear-gradient(transparent 35%,#FFC6C6 35%)}.content
「マーカー太い赤は#FFC6C6 という色」ということになります。

黄色アンダーライン | ラインの太さと色(記事作成の画面で、「スタイル→マーカー→マーカー太→レッド」と表示されるところ |
赤色アンダーライン | カラーコード |

6.変更が終わったら、編集後のデータを赤枠部分に張り付け、「保存する」をクリック。

わたしの場合は午前中に変更をして夕方に投稿画面で確認したところ、マーカーの色が変わっていました。
おすすめのマーカー色
今回変更した色をご紹介します。
出来るだけド派手な色を選んでいます。色が濃くなった分、存在感が強調されて「線を引いているぞ!!」という感じになります。
比べてみると、違いが分かりやすいですね。
マーカー配色 | 変更前 | 変更後 |
レッド | #FFC6C6 | #fc0505 |
ブルー | #cce5ff | #05f5f5 |
イエロー | #ffffbc | #ffff00 |
ピンク | #FFDFEF | #FF47A3 |
グリーン | #D2FFD2 | #b5ff14 |
グレー | #d8d8d8 | 変更なし |
THE THOR【ザトール】マーカーの色を変更する方法・まとめ

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