むなかたと申します。
今回は『ザ・トール』でブログの「TOPページ設定」をカスタマイズしてみましたので、ご紹介したいと思います。
『ザ・トール』
ブログ「TOPページ設定」カスタマイズ
『TOPページ設定』では、「メインビジュアル設定」「メインビジュアル下お知らせ設定」「カルーセルスライダー設定」「ピックアップ3記事設定」「記事ランキング設定」「カテゴリ最新記事設定」を設定します。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/05/61EED43B-98F4-49F6-B26D-436F7E4DA105-1024x768.png)
メインビジュアル設定
まずは「外観」から「カスタマイズ」に行きます。
そこから「TOPページ設定」へ行き、「メインビジュアル設定」に入ります。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/AACC3A3D-0B9E-4446-BE3F-D29E31322CC1-1024x768.png)
まずは、「メインビジュアル設定」をおこないます。メインビジュアルを「表示する」か、「非表示にする」かを聞かれますので、選択します。
私は「表示する」を選択します。
![](http://munakata-ya.com/wp-content/uploads/2019/06/F4F33189-B8B9-4AEC-8741-8F73513AC022-1024x768.png)
次は、「表示サイズを選択」します。「ワイドサイズ」「ノーマルサイズ」「ビッグサイズ」がありますので、全部を試してみてお好みで選んで下さい。
私は宗像大社が大きく表示されて、余白が出来ない「ワイドサイズ」を選択しました。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/CF4EEDE0-CEDF-436C-8C68-9DCD35CABAFF-1024x768.png)
後は、「スマホは非表示」と「スマホ表示時の縦サイズ設定」、「PC表示時の表示サイズ設定」がありますが、細かいデザインが必要そうなので、最初の設定のままにしています。
スマホメインなので、非表示はあり得ません。そもそもメインビジュアル無しにするなら、ほかのdemoにしてたと思いますし。
次は、「メインビジュアルの表示モード設定」です。
表示モードは、「静止画」「YouTube背景動画」「スライドショー」の3つがあります。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/E5926717-3A7F-4C3B-9F85-DE276C407BEA-1024x768.jpeg)
TOP画面に動きは欲しいと思っていますが、メインの画像が動くのは落ち着かないので、「静止画」にしようと思います。
次は、いよいよ画像を設定します。
「画像を選択」をクリックします。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/D577B710-F33C-4A93-924F-42462274C85E-1024x768.jpeg)
そうすると次のような画面になりますので、メインビジュアルにする画像を選びます。
「ファイルをアップロード」にすると写真データの中から、ブログの方へ画像のデータをコピー出来ます。
「メディアライブラリ」はブログにコピーされた画像が保管されている場所になります。
一度ブログで使った画像は「メディアライブラリ」から、新しく画像を使う場合は「ファイルをアップロード」から画像を選択することが多くなると思います。
後はメインの画像を選択して、「画像を選択」のボタンを押すだけです。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/7A35B87B-191D-4686-9538-359FF97536DC-1024x768.jpeg)
そうするとこのように画像が反映されます。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/8EE780B3-46A0-492B-9455-D4E9121A4192-1024x768.png)
次は、「画像のマスクを選択」します。
「無し」「ブラック」「ブラックメッシュ」「カラー」「カラー+画像グレー」があります。
「ブラックメッシュ」はこんな感じです。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/1FC0FA2C-7633-4028-89A2-8F0E032A2DF5-1024x768.png)
スマホだとこんな感じです。
ちょっと暗い印象ですね。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/53575E72-1E15-4A3A-B832-28C45F380B38-576x1024.jpeg)
「カラー」で赤を選択するとこんな感じです。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/AE257DDA-987A-4764-917C-AAF46B3DC3B2-1024x768.png)
スマホだとこんな感じになります。
ちょっとヤバい雰囲気のブログになってしまいました。赤はちょっと無いですね。
「カラー+画像グレー」で、カラーは薄い紫にすると、こんな感じでした。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/7F062EFA-F04F-4E52-A4D2-F20FDFF5A2A8-1024x768.png)
スマホでは、こんな雰囲気になりました。やっぱり暗い印象ですね。
最後は「無し(default)」です。
![](http://munakata-ya.com/wp-content/uploads/2019/06/6CF33087-7C16-4075-AE42-BF226D899AA9-1024x768.png)
スマホではこのような画面になりました。これが一番良い気がします。やはりdefaultが最強ですかね。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/9E41475A-2669-4274-946C-6EE7B1E0AEE5-576x1024.jpeg)
次は、「タイトルを入力」になります。文字通りブログのタイトルを入れても良いですし、デザインによっては他のものが入るかもしれません。
私のブログでは、普通にブログのタイトルを入力します。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/06/E6FB3F5C-5F46-4B8B-AC11-80C6EB18AD05-1024x768.jpeg)
そうすると、メインビジュアルのセンターにタイトルが入りました。
その先は特に入れてませんので、未入力のままで終了です。
メインビジュアル下お知らせ設定
私のブログでは、ここも非表示にしていますので、特に入力することも無く終了しています。
カルーセルスライダー設定
「カルーセルスライダー」とは、横にスクロールするスライドギャラリーの一種で、WEBデザインにおけるスライダーの代表格のひとつです。
Workshipmagazineより
アコーディオンスライダーとは異なり、一枚絵の画像をスライドするものとなっており、一つひとつのコンテンツを目立たせたいときに使われます。読んでほしいコンテンツや特集コンテンツをまとめたりなど、読者の注目を集めたいときに便利です。
写真などの画像が横に動いていく、アレですね。
私はここに、自分が読んで欲しい記事を載せていきたいと思っているので、それを踏まえた設定にしていきたいと思います。
まずは、「カルーセルスライダーを表示するか選択」します。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/07/6B6025CF-1097-473B-8AF9-0503E9962A56-1024x768.jpeg)
「非表示」か「表示」かの選択があり、私は表示しますので、「表示」にチェックを入れます。
次に、「表示条件を選択」します。
「無し」「指定した投稿を表示」「指定した投稿以外を表示」「指定したカテゴリの投稿を表示」「指定したカテゴリ以外の投稿を表示」があります。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/07/9C05644F-FC97-4426-940C-21B40617E793-1024x768.jpeg)
その後に、「指定するIDを入力」して、「表示件数」を指定します。
最後に「公開」ボタンを押すとブログに反映します。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/07/8B6267A8-22DD-4FD1-A477-BAF518CE5CE7-1024x768.jpeg)
ピックアップ3記事設定
これも私のブログでは表示していないので、「非表示」を選択します。
記事ランキング設定
これも表示していないので、「非表示」を選択します。
カテゴリ最新記事設定
まずはカテゴリ最新記事を表示するかどうかを選択します。選択肢は「非表示」と「表示」の2つで、私は「表示」を選択しています。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/07/B74AFD16-8B65-4E4E-8112-B3E6CF958DB1-1024x768.jpeg)
次は表示条件を選択します。選択肢は「無し」「指定したカテゴリを表示」「指定したカテゴリ以外を表示」の3つがあります。
私はどの記事も読んで欲しいので、指定はせずに全てのカテゴリで表示したいので、「無し」を選択しました。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/07/49D85233-E4A3-4AC8-BF23-3838FCD1ACAC-1024x768.jpeg)
あとは、「セクションの見出しを入力」「見出しの右に表示する補足情報を入力」「画像アスペクト比を選択」などを設定していきます。
見出しや補足情報はご自分の好みで良いと思います。画像アスペクト比を調整すると画像と文章の割合が変わります。私は画像に頑張って欲しいので、1:1を選択しました。
![](https://munakatano-bloguniversity.com/wp-content/uploads/2019/07/669A6547-CFB8-4DFC-8EF9-9B402C8E07FF-1024x768.jpeg)
最後に「公開」ボタンを押してブログに反映させれば終了です。
まとめ
TOPページはブログに来てすぐに目にするところなので、非常に重要ですし、その人の個性も出る所だと思います。
TOPページ設定をしっかり行うことで、自分らしいブログになると思いますので、ここはしっかりと作っていきたいと思いました。
それでは、今回はこの辺で失礼いたします。
コメントを残す