読者登録ページスポンサー様のページお問い合わせ活ノートシリーズはこちらからいいものなんでも。詐欺情報をまとめるブログ。その4「TOPページ設定」katsuです。THOR(ザ・トール)の設定方法を順に説明しています。今回は項目「TOPページ設定」の設定方法をご紹介します。ご紹介する設定は当サイト「活ノート!」を基本としています。同じ設定を行って頂くことで、「活ノート!」と全く同じデザイン構築が可能です。基本となるデザインベースは「デモサイト04」を使用しています。Export/Import」でインポートを行った上での設定内容になります。各設定項目ごとに順次記事をアップします。本記事の項目以外の設定方法については、当ホームページの検索窓から検索を行ってみてください。THOR(ザ・トール)「TOPページ設定」メインビジュアル設定メインビジュアル設定メインビジュアルとは、トップページのヘッダーに表示される大きな画像(タイトルが書いている部分)のことです。ご覧いただいた通り、活ノートでは「表示」設定としています。実際に撮影したオリジナルの画像を使っています。細かい設定については、スマホは非表示にする:無効、表示サイズ:ワイドサイズ(デフォルト)、スマホ表示時の表示サイズ:100、PC表示時の表示サイズ:150としています。【’19.7.4追記】タイトルとタイトル画像を変更しました。それに伴い、画像の表示サイズをスマホ100、PC150としています。ここばかりは実際に表示させて確認するしかありません。このあたりの変更理由については、下記の記事で紹介しています。何となくですが、少しブログを改造してみたい気分になりました。表示モードは「静止画(デフォルト)」で使用しています。他にもYouTubeやスライドショー表示もできるようですね。YouTubeは持っていませんし、スライドショーにしても画像をパラパラと動かすとページが重くなったり、管理が大変になりそうだったので試してもいません。こだわりのサイトにしたい方には良い機能だと思います。静止画時の設定メインビジュアル画像を登録することができます。このサイトの場合は、960×260pxで36kBの画像を使っています。小さすぎるとPC表示で荒くなりますし、大きすぎると重くなります。画像のマスクは無し(デフォルト)、タイトルはご覧の通り、「いいものなんでも。」を2列に表示しています。サブタイトルは空欄にしています。ボタンも表示できるようですが、こちらは設定していません。しても押してほしいボタンを配置するとめちゃくちゃ効果的だと思います。【’19.7.4追記】タイトルはHTMLタグを使って文字の大きさと2列表示することにしました。こんな感じのHTMLです。18pt”>いいものなんでも。全てデフォルトの設定無しにしています。YouTubeは使っていませんので・・・。静止画と同じく、タイトルとサブタイトルを表示し、そのバックグラウンドで動画を動かすことができるようですね。YouTubeを使っている方は設定してもよいかもしれませんが、必然的に動画が再生されてしまうのは如何なものかと思います。スマホのデータ通信を圧迫しそうです。スライドショー時の設定こちらもYouTube設定と同じく、全てデフォルトの設定無しにしています。画像を5枚まで登録することができ、スライドショー表示とすることができるようです。特筆すべきは、5枚それぞれにタイトルとサブタイトルが個別に登録できることでしょうか。アルバム的にお気に入りの5枚を表示することができそうです。メインビジュアル下お知らせ設定メインビジュアル下の注目エリア設定メインビジュアルのすぐ下にお知らせメッセージを表示することができます。このサイトでは「非表示」にしています。共通エリア設定の「ヘッダーお知らせ」機能に似た機能ですね。「ヘッダーお知らせ」機能はメインビジュアルの上に電光掲示板のように文字を横流しする表示でしたが、こちらは文字を動かすことはできません。文字がパラパラ動くのが嫌であれば、こちらのメインビジュアル下にお知らせを記入したほうがよいでしょう。このエリアには文字列だけではなく、ボタンを表示しリンクを張ることもできます。しても紹介したいURLがある場合は効果的かもしれません。【’19.7.4追記】カルーセルスライダーを廃止したと同時に「表示」設定としました。キャッチコピーは空欄としています。こんなことをしているかというと、メインビジュアル(トップページの画像)とピックアップ3記事を同時に表示すると、これらが隙間なくピッタリとくっついてしまい、見づらいページとなってしまうからです。反則かもしれませんが、このお知らせ設定欄を帯として画像に区切りを入れています。この欄にはキャッチコピーとリンクボタンを表示することができますが、キャッチコピーを空欄とし、リンクボタンにスポンサー様ご紹介ページへのリンクを張りました。記事の執筆依頼を少しずつ頂くことができるようになりました。そんなスポンサー様とも言うべきご依頼主を紹介させて頂きたく、専用のページへリンクすることにしました。TOPページのボタンを押してみてください!カルーセルスライダー設定カルーセルスライダー設定カルーセルスライダーとは、横にスライドすることができるサムネイル(画像)付きの記事の紹介エリアのことです。活ノートでもカルーセルスライダーを使っています。トップページに戻ると、ヘッダー画像のすぐ下にパラパラと動くスライダーがあります。設定については、カルーセルスライダー「表示」とし、それ以外は全てデフォルト設定としています。表示条件を「無し(デフォルト)」にしていますので、ランダムで記事が紹介されている形です。ここを記事指定すると、指定した記事のみがスライダー表示されるので、どうしても読んでほしい記事は表示条件を設定してもよいでしょう。表示件数は10件、画像アスペクト比16:9についてもデフォルト設定のままとしています。アスペクト比については、デフォルトが一番美しく表示されると思って設定変更していませんが、サイトの雰囲気に合わせて選ぶと良いと思います。カルーセルスライダーを表示すると、トップページを表示してから記事アーカイブ(新しい記事が並んでいる部分)までが遠くなるのです。ユーザビリティを最大限に考慮し、廃止することにしました。詳しくはタイトルの変更と同じく、こちらの記事をご覧ください。何となくですが、少しブログを改造してみたい気分になりました。このブ[...]ピックアップ3記事設定ピックアップ3記事設定ピックアップ3記事とは、このような表示です。公式マニュアルからこの画像をお借りしてきました。サイト内でアピールしたい3記事を表示することができるようです。活ノートでは、記事をまんべんなく見ていただきたいということと、最新記事から順に並んでるほうがキレイと感じる理由から「非表示(デフォルト)」としています。表示するとサイトのオシャレ度は格段に上がる気もします。セクションの見出し(参考画像では「PICKUP」)や、補足情報(参考画像では「ピックアップ記事3」)など、細かい設定も行うことができます。表示したい3記事については、記事IDを入力することで任意の3記事を表示することができます。設定を変更し、ピックアップ記事を表示する設定へと変更しました!ブログ紹介カテゴリを開始しましたので、少しでも目立つようにしたいためです。設定は以下の通りです。目立つ3記事宣伝が出来上がったと感じています。大きな特徴としてIDを登録しなければ最新の3記事が自動的に選択されて表示されるようです。唯一、表示する記事を変更しようとするたびにIDを入力し直さなければならないのが手間ですね。記事ランキング設定まず、記事ランキングとは何か。公式マニュアルの画像を紹介します。このように、人気記事をランキング表示することができます。・・・ここで設定を「記事ランキングを表示するか選択:表示」にしても、活ノートでは変化がありません・・・。THORでは未だにいくつか意味不明の設定があります。活ノートの設定は、「非表示(デフォルト)」としており、以降の設定も全てデフォルト(空欄)のままにしています。サイドバーに人気記事が表示されていますが、これは「人気記事」ウィジェットを表示しています。この外観設定で変な設定をするとウィジェットとケンカしますので、非表示にするのがベストと判断しました。活ノートの設定を順にご紹介します。画像アスペクト比:1:1投稿日を表示する:する更新日を表示する:するこの設定は、サイトのトップページ(ホームのみです)に各カテゴリの最新記事を表示するかどうかの設定です。活ノートのトップページに戻り、下部へ進んでみてください。壁紙がグレーがかった「CATEGORY」という項目があります。活ノートではカテゴリを現状4種類使っていますので、4つの最新記事が紹介されています。表示条件を「無し」にしておけば、全カテゴリの最新記事が表示されます。カテゴリを指定したければ、「指定したカテゴリ」または「指定したカテゴリ以外」を表示することができます。この設定は、基本的にほぼデフォルトのまま使っています。意外と簡単に表記を変えられますので、好みに応じて変更してみると良いでしょう。そもそも、サイトをできる限りシンプルにしたい人は非表示にするのもありだと思います。カテゴリのページに進めば必然的に最新記事はすぐに探せますからね。以上が「TOPページ設定」の全てです。次回「アーカイブページ設定」の設定方法をご紹介します。活ノートでは最新記事の投稿情報をメールでお伝えしています。This:メールアドレス:配信例はこちらにあります。↑2いいやん!されています。良い記事でしたら「いいやん!」クリックお願いします。下のSNSボタンから記事拡散にもご協力お願い致します。コメントをキャンセルメールアドレスが公開されることはありません。Me/「活ノート」管理人のkatsuです。管理職サラリーマンの傍らビジネス書を300冊読破。人生を楽しく生き抜く独自の知恵をお伝えします!とにかく皆様のお役に立ちまくるブログを目指します。皆様のお役に立つことを仕事にできれば最高です。そんな夢を実現するため初めてのブログ運営を頑張っています。記事の投稿情報をメールでお知らせすることができます。初心者のブログ作成備忘録katsuのスーパーブログリンク最近の人気記事オフラインのためランキングが表示できません最近のコメントブログのアクセスアップ対策!ブログを登録するサイトをまとめてみる。【注意喚起】ネット通販詐欺サイトに騙されて振り込みしたその後。【注意喚起】ネット通販詐欺サイトに騙されて振り込みしたその後。【注意喚起】ネット通販詐欺サイトに騙されて振り込みしたその後。【注意喚起】ネット通販詐欺サイトに騙されて振り込みしたその後。記事にはお気軽にコメントをどうぞ!ご意見、ご質問、記事の執筆依頼などなどお待ちしております。ブログ『活ノート』シリーズ・活ノート・詐欺情報をまとめるブログ。by活ノート・コミュボード。by活ノートブログランキングに参加中です。順位の確認はこちらです。