★おかげさまで月12,000PV達成! 今後も楽しい記事をお届けします。ぜひブックマークを★
speed_woman_1535462533

【THE THOR ザ・トール】設定方法のすべて その11「その他」

 

THE THOR(ザ・トール)設定方法のすべて その11「その他」

katsuです。

これまで、当サイトで使っているWordPressのテーマTHE THOR(ザ・トール)の設定を全てお伝えしてきました。いよいよこれが最後の記事になります。

パーツスタイル設定」から最後の「追加CSS」設定まで6項目の設定です。なぜ一気に6項目かというと、ほぼお決まりの設定か、何もさわっていないかのどちらかなのです。そのため、この最後の記事は「活ノート!」」の設定を全て記載して終わりとなります。

これで11記事目。長い道のりでした・・・。

ご紹介する設定は当サイト「活ノート!」を基本としています。同じ設定を行って頂くことで、「活ノート!」と全く同じデザイン構築が可能です。
基本となるデザインベースは「デモサイト04」を使用しています。メーカーサイトからダウンロードの上、プラグイン「Customizer Export/Import」でインポートを行った上での設定内容になります。
各設定項目ごとに順次記事をアップします。本記事の項目以外の設定方法については、当ホームページの検索窓から検索を行ってみてください。




THE THOR(ザ・トール)「パーツスタイル設定」

さて、このパーツスタイル設定。ずらずらと設定が並んでいます。これらはサイト内で使うボタンやエフェクト設定を細かく調整できるものです。また、記事を書く時のエフェクトの細かい調整も行うことができます。変更することで、サイトの見栄えは大きく変わるでしょう。

しかし・・・今のところ活ノートで設定している項目は2項目だけです。記事を書く時のエディタは何も設定しなくても不満はありませんし、直接見栄えが大きく変わるのはこれから紹介する2項目かな、と感じたからです。

それでは、その2項目を紹介しましょう。この項目以外の設定については、全て「デフォルト」設定としています。

見出し設定

この見出し設定は、記事内の見出しのデザインを変更することができます。この記事の見出しをご覧ください。一番上にはタイトルが書いています。これはH2見出し。以降、最初の1文字目だけ色が違う見出しがH3見出し。そしてH4見出し、H5見出しとあります。

記事の読みやすさとサイトの見栄えを大きく左右する設定ですので、この設定は必ず行うべきだと思います。活ノートの設定をご紹介しますが、自分独自のお気に入り設定をぜひ見つけてくださいね。

H2見出しの設定

デザイン:背景-リボン[カラーA:文字 B:背景 C:影]
カラーA:#4d4d4d
カラーB:#f4f9f4
カラーC:#a7d7c5

H3見出しの設定

デザイン:先頭大-下線[カラーA:文字 B:先頭文字 C:下線]
カラーA:#4d4d4d
カラーB:#d34848
カラーC:#d34848

H4見出しの設定

デザイン:左線-基本[カラーA:文字 B:左線]
カラーA:#4d4d4d
カラーB:#d34848
カラーC:デフォルト(設定無し)

H5見出しの設定

デザイン:丸マーク-基本[カラーA:文字 B:マーク]
カラーA:#4d4d4d
カラーB:#d34848
カラーC:デフォルト(設定無し)

シェアボタン設定

シェアボタンデザイン設定

設定は「パターン7」です。この設定は、サイト内に表示するSNSボタンのデザインを変更することができます。活ノートの場合、投稿記事の下のほうにSNSボタンが設置してあります。記事デザインのイメージにあったボタンデザインを選んでいます。ここも好みで選びましょう。

ひとつ注意点があります。この設定は、PC・タブレット・スマホで見栄えが変わります。一度設定したあと、各画面サイズで見栄えを確認すると良いでしょう。

THE THOR(ザ・トール)「サイト基本情報」

この項目は、サイトのタイトルやキャッチフレーズ、サイトアイコンといったWordpress本来が持っている各種基本設定ができる項目です。以下の通り設定を行っています。

サイトのタイトル

その名の通り、サイトのタイトルを登録することができます。このサイトの場合は「いいものなんでも。活ノート。」です。

「TOPページSEO設定」でtitle設定を行いました。この部分の設定との使い分けはよくわかりません。いろいろな名称を登録するべきではないと思っていますので、同じ名称で登録を行っています。

キャッチフレーズ

空欄」設定としています。Wordpressの使い方をいろいろと調べたとき、キャッチフレーズは空欄のほうが良い、と大勢の方が書いていました。そのまま鵜呑みが良いのかどうかわかりませんが、今のところ空欄設定としています。

サイトアイコン

正方形のアイコンを登録します。ブラウザの上の方のタブにサイト名と、サイトアイコンが表示されていますよね。(ブラウザにもよるかもしれません)活ノートの場合は、こんな画像を登録しています。

PWA_72_72

ブラウザのタブに表示されていますよね!みなさんも自由に選んでみてください。


THE THOR(ザ・トール)「メニュー」

さて、次はメニューの設定です。簡単なように感じますが、最初はかなり戸惑うと思います。それはこの部分の設定でメニューを作ることもできますし、ウィジェットでも作ることができるからです。

僕の場合、この「メニュー」項目では「グローバルメニュー」だけを作成し、ヘッダーに表示しています。グローバルメニューはPCのみ表示設定としていますので、ここで設定したメニューはPCでしか表示されません。サイドバーやメニューボタンに表示するメニューは、「ウィジェット」項目で作ります。この使い分けが最初はややこしいと思います。

当サイトでのグローバルメニューの設定方法は以下の通りです。

メニュー

メニュー名:グローバルメニュー

ホーム(カスタムリンク)
カテゴリー(固定ページ)
→人生を変える言葉たち(カテゴリー)
→本当にいいものご紹介(カテゴリー)
→人生が変わるおすすめ本(カテゴリー)
→初心者のブログ作成備忘録(カテゴリー)
このブログについて(固定ページ)
→はじめに(固定ページ)
→サイトマップ(固定ページ)
→プライバシーポリシー(固定ページ)
→お問い合わせ(固定ページ)
ツイッター(カスタムリンク)

「→」は項目を入れ子にしていることを指します。PCでグローバルメニューを見ていただくと上記設定と実際の表示の関係がわかりやすいと思います。

メニューの位置は「ヘッダーエリア」のみ、メニュー設定のトップレベルページを自動的に追加のチェックは「オフ」にしています。

THE THOR(ザ・トール)「ウィジェット」

ウィジェットとは、サイトの指定の位置に簡単にお決まりの機能を追加できる機能のことです。たとえば、サイドバーに検索バーや、カテゴリ名を追加してみる。そんな感じです。

このウィジェット設定に関しては、ここではあえて説明いたしません・・・。ぜひいろいろとサイトのデザインをご自分で設定していただきたいなと思います。

THE THOR(ザ・トール)「ホームページ設定」

ホームページの表示

最新の投稿か、固定ページかを選ぶことができます。最近のブログでは、サイトのトップページを開くと記事がずらずらと並ぶ(アーカイブ)されています。「最新の投稿」設定とすることで、このような流行りの設定にできます。

ここで「固定ページ」を選ぶと、企業のホームページで使われるようなイメージでしょうか。トップページに常に固定ページが表示されることになります。

THE THOR(ザ・トール)「追加CSS」

スタイルシートに記述を追加したい場合に使います。基本的に上級者向け設定ですね。記述を行うことで、THE THORだけでは設定できない部分を手動で変更することができます。基本的によほどこだわらない限り、初心者はさわるべきではないでしょう。

僕もここは何も触らずデフォルト(何も記述しない)ままとしています。今ではネットで記述方法を紹介されているサイトも多いですので、参考にしてみると良いかもしれません。




さて、これでTHE THORの外観設定「カスタマイズ」の設定方法を全て紹介致しました。これからこのテーマを使おうとしていて、僕のサイトのデザインを真似してみたい!という方がおられましたら、ぜひ参考にしてみてくださいね。

THE THORにはまだまだ奥深い機能があると思います。僕もCTA機能や、タグ機能などなどまだ何も使っていません。便利な機能を勉強しつつ、またご紹介させて頂きたいと思っています。

活ノートでは最新記事の投稿情報をメールでお伝えしています。お気軽にご登録ください!


 

配信例はこちらにあります。

 
いいやん!
↑1いいやん!されています。良い記事でしたら「いいやん!」クリックお願いします。
読み込み中...

記事はいかがでしたか?
今後もぜひ応援をお願い致します!

<スポンサーリンク>


speed_woman_1535462533
最新情報をチェックしよう!
>活ノート!でつながる。

活ノート!でつながる。

記事にはお気軽にコメントをどうぞ!
ご意見、ご質問、記事の執筆依頼などなどお待ちしております。

ブログランキングに参加中です。
順位の確認はこちらです。
人気ブログランキングブログランキング・にほんブログ村へFC2ブログランキング