サイト運営

【Stinger3⇒MAG】有料テーマのメリット、変更後に記事本文の行間を調整する方法をメモっておきます!

どうも、心一です!

この度僕のブログが生まれ変わりました!^^

有料テーマのMAGに変更したのですが、いやーMAGやばいね、、、。

シンプルでシャープでキレイ!美しい!好き!!笑

毎度のことですが、ブログなんて誰かに習ったものでもないので今回も苦戦しました。(前回はSSL化で苦戦)

参考:【ど素人のSSL化】注意点7つ紹介!初心者は.htaccess記述、SNSボタン削除に手こずるかも?

せっかくなので今回も記事にしてみます。テーマ変更のイメージや、解決になれば嬉しいです!

特に、MAG変更後の詰まりまくった行間を何とかしたい人に届いて欲しい!笑

 


有料テーマに変更した理由:素人でもデザインをキレイにできる!

きっかけは、ブログを添削してもらったことです。
「デザインがシンプルすぎる」とアドバイスをもらったので、有料テーマの「MAG」を買いました。


これは小林亮平さんの2週間マンツーマン指導に応募した後のお返事です。

まぁMAGにしたところでシンプルな路線は変わらない気がするんですがね(笑)

自分のブログデザインに関しては「何かいかにも素人が作った感じがするなぁ」とは思っていたものの「でもCSSとかいじるのってこわい、いじれない…」と結局ほったらかしでした。

それに無料テーマと有料テーマでSEOへの影響は特に差がないって情報も耳にしたものですから、もうデザインに関しては完全に放置しますよね^^;

そんな状況でしたが、プロブロガーからデザインについて指摘を受けたからにはちゃんと考えようってことで、色々調べてMAG購入に至りました。

有料テーマなら初めからデザインは出来上がっているので、基本的にCSSをいじらなくてもキレイな記事を書けますからね。

それにMAGのようにTCDから発売されているテーマは「TCDテーマオプション」っていうページからコードを書くことで安全にCSSをいじれます。CSSの編集に必要以上にびびってた僕にはすごく魅力的でした。

有料テーマはお金がかかりますが、そのお金でCSSをイチから勉強したり、試行錯誤する時間をショートカットできるわけです。
ちなみにMAGは10,800円でしたが、複数のブログに使えるのでかなり割安な気がします。)

本業や趣味のかたわらブログをやる人にとっては悪くない選択だと僕は思いました。

また、先ほど素人のくせにSEOがウンタラカンタラといっちょまえにいいましたけど、記事を読むのはgoogleじゃなくて結局は人ですしね。

やはり第一印象を良くするためにも、デザインは始めからちゃんとしておくべきだったなと反省しました^^;

手順

正直「ブログ テーマ 変更」とか「wordpress テーマ変更」とかをぐぐれば詳しく書かれた記事が出てきますので、基本的にそっちを参考にしてください。

以下の記事が非常に勉強になりました。

参考①:【初心者】失敗しない!WordPressのテーマの変更方法と注意点
参考②:WordPressでテーマ変更時の注意点と事前にやることをリストアップ

僕の場合は子テーマのカスタムとかウィジェットとかのカスタムは凝っていなかったので、こんな感じでざっくり変更しました(笑)
  1. MAGを購入
  2. ブログのバックアップを取る(プラグインのBackWPupを使用)
  3. テーマのライブプレビューでテーマ変更後の画面を様子見
  4. テーマ変更を有効化
  5. Google Analytics・Search Console・AdSense コード張りなおし
  6. 記事デザインなど徐々に調整
4のテーマ有効化後は調整が必要な箇所に対処していく流れになります。

テーマ変更直後は画像の表示が崩れてブログがぐちゃっとしたりしますが、仮想のサイトを作ってからテーマ変更したり、現在メンテナンス中と表示させる方法もあるそうです。

まぁ、僕の場合は、就活中の学生さんが情報を求めてアクセスしてくれることが多い&僕に高度なブログ編集はない(笑)、そして何より早くMAG使いたいwということで、多少デザインが崩れていても記事は公開してゆっくり調整していこうと思いました。

 


CSS初心者の僕が丸5日解決できなかったこと:記事の行間

えぇ、恥ずかしながら「記事本文の行間」を変更するのに丸5日かかりました。

なんなら調べつくした挙句、自力で解決できずTCD技術担当の方に直接メールという技術力の無さw

初歩的過ぎることを聞いてかなり申し訳なかったのですが、案の定サクッと解決しました…。

販売元がこういう質問を受け付けてくれるのは本当に助かります。

一応、僕みたいなCSS超初心者のために、その時のメールを書いておきますね。

TCDご担当者様

お世話になっております。
以前MAGを購入させていただいた月島と申します。

初歩的な質問となり大変恐縮ですが、
ご教示いただけますと幸いでございます。

【現状】
ブログテーマをStinger3からMAGに変更したのですが、
記事本文の行間が詰まり過ぎていて困っています…。

ただ、行間の詰まりがひどいのはStinger3時代から存在している記事に限った話で、
MAG変更後に作成した記事はとてもいい感じに行間が空いています。

【質問】
Stinger3時の記事の行間をMAG変更後記事のように空ける方法はないでしょうか?

【試した事】
◆https://tcd-manual.net/?p=328を拝見し、以下を試しました。
・追加CSSにp { line-height:2 !important; }を記述
⇒サイドバーのプロフィール紹介文の行間は広くなりましたが、
記事本文には効果なしでした。

・TCDテーマオプション→基本設定→カスタムCSSの欄に
p { line-height:2 !important; }を記述
⇒効果なし

◆style.cssの117行目(基本設定の箇所)のline-heightを1から2に変更
⇒効果なし

【備考】
・現在、弊ブログの「test」という名前の記事がMAG変更後に作成した記事ですので
ご確認いただければと思います。当記事のパスワードはxxxxです。
・それ以外の記事は全てStinger3時作成の記事です。
・Wordpressを使用しています。

以上です。
お手数おかけして申し訳ありませんが、
どうぞ宜しくお願いいたします。
月島心一

すると、

[外観]→[テーマオプション]→[基本設定]→[カスタムCSS]に以下のコードを記述すると直る。

とのお返事をもらえました。

#article {
line-height: 2;
}

※「2」の数値部分は任意の数値で変えて大丈夫なところです。

僕はこれで無事に直りました。直った瞬間「ウオオオオッッ!!」って言うくらい嬉しかったです(´;ω;`)

質問文の通り自分でも色々調べたのですが、#articleの部分をpにしていたままだったり、line-heightじゃなくてmarginとかを記述していたり、本当にトンチンカンなことしてましたw

徐々に調整中なこと

記事本文の色使い

MAGはシャープな雰囲気で使っていきたいなと思ったので、太字部分は基本的になくすように編集していってます。

あとはスタイリッシュさを出すために、色は原色のようなハッキリした色ではなく、少しくすませたり、原色と同系色の中間のような色にしたりですね。

僕は強調したいときにオレンジ×太字を使っていましたが、MAG変更後はくすませたオレンジにしようとしています。

以下、プラグインSearch Regexにて、

<strong><span style=”color: #ff6600;”>(⇒オレンジ太字のことです)

<span style=”color: #f07524;”>(⇒くすみオレンジに変えるということ)

とすれば一発で終わる。
かと思いきやオレンジ×太字は残っている箇所があったので、人気記事からせっせと直していってます。(汗)

他にも、弊ブログは原色を使うとポップな雰囲気というより安っぽい感じになってしまうので、赤色の文字ならピンクがかった赤にするなど、中間色がかかるようにもしていこうと思っています。

見出しと本文の間のスペース

MAG変更と同時に見出しもCSSでデザインを加えました。

その関係か、もともとMAGの機能かは知らないのですが、段落の次に見出しがくると自動的にスペースが空くようになってますので、これも手打ちでポチポチ直しています。(汗)

まとめ

色々書きましたが今回言いたかったことはこの3つです!
  • 有料テーマでデザインの勉強時間を超短縮できる
    (時間はないけど収入はブログ以外にある副業ブロガーにおすすめ)
  • ウェブデザイン初心者でも「販売元に質問できる」という最後の砦がある
  • 簡単にデザインをキレイにできるからモチベーションがあがる!
つまり、自分のブログデザインがちょっと気になるけど「どこから手をつけていいか分からない…」っていう初心者は一度検討してみる価値ありだと思います^^

色んな有料テーマがありますが、それぞれの違いが分かりやすいのはやっぱりデザインかなと思います。

なので、①まずはデザインから気になるものをピックアップ、②自分のブログ内容と雰囲気・テーマ特有の機能がマッチするかを考えれば選ぶのは簡単だと思います。

MAGのようにシンプル・シャープな印象のものがあれば、ポップで目に優しいsangoみたいなテーマもありますので、見ていて楽しいと思います(笑)

今回は以上です、ありがとうございました!

 

 

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP