自分のブログ記事に合わせてQooQの表示をカスタマイズ
色の変更
テーマに合った色にデザインを構成する色を変更します。
アップロードしたQooQのファイルをhtmlから編集します。
赤丸で囲った①の部分がメインのカラー、②の部分がサブカラーをコードで指定する部分です。青丸で囲った①の部分が文字色を指定する部分です。色味を指定する色は16進法で表されるカラーコードというもので指定します。
色を変更した後は忘れずに右上の保存ボタンを押して、設定を保存しておきます。
サムネの画像を丸型から四角に変更する
次にデフォルトでは円形になっているサムネイルの画像の形を四角に変更します。好みの問題になるかと思いますが、当ブログでは真面目な内容を扱っているので四角の方がイメージに合うかと思い変更しました。
色の変更を行った際と同じHTMLの編集のページから、以下の画像の赤丸で記した部分を探します。関連記事に関する記述の部分と、記事一覧に関する記述の部分と2か所あります。
それぞれの部分の
”border-radius: 50%”→”border-radius: 0%”
に変更することで、円形のサムネイルが四角に変更されます。
ついでに画像のサイズも少々変更しました。
"height: 72px"→"height: 100px"
"width: 72px"→"width: 100px"
変更前（関連記事の箇所）
変更後（記事一覧の箇所）
以下のサイトを参考にさせていただきました。
目次の追加
記事に最終更新日を表示する
ブログを長期にわたり運営していく上では、記事のリライト、ブラッシュアップが必要不可欠です。 常に最新情報に更新していくことで間違いのない情報を提供することができます。 ブログを見てくださる方の目線から見た場合も、古い情報よりも新しい情報の方が信頼性が高くなります。 ブログをリライトした際に、新しい情報に更新していることが一目でわかるように最終更新日をサムネなどにも表示できるように変更しました。
サイトマップの追加
サイトマップはhtml形式のものとxml形式のものがあります。htmlは実際にサイトを訪問する人間向けのもの、xmlはクロールを行うGoogleなどのクローラー向け、非人間向けのものと大きく分けることができるようです。Bloggerではxmlのサイトマップは自動生成されるようですが、html形式のものは自分で設置しなくてはなりません。そこで以下のページを参考にさせていただいて設置しました。
ナビゲーションメニューの配置場所をブログタイトルの下に配置変更
ナビゲーションバーの配置場所がデフォルトではブログタイトルの上になっていますが、これをブログタイトルの下に変更しました。他のサイトでもよく見かける配置になるので、ユーザー目線から見て惑いがなくなると思います。
テーマをhtmlで編集するページに移動します。
<body>の一番上に<div id="navigation">から始まるナビゲーションメニューがあります。下の画像で網がかかっている部分が全てナビゲーションメニューの記述になります。これをカットして、下の画像の位置であるタイトルバーの下側に張り付けします。
サイドメニューのガジェット、人気の記事の表示変更
デフォルトのままの設定だと、タイトルとそれ以降の記事の内容が表示されて上の画像のように見づらくなってしまっています。この為、人気の記事の表示をタイトルのみとし、記事本文の抜粋を表示しないように変更します。
記事の抜粋はスニペットと呼ばれています。テーマのhtmlの編集にて、スニペットの設定を変更していきます。まずはテーマのhtml編集画面でCtrlボタンとFボタンを同時押しして検索窓を出し、”snippet”と打ち込んで検索します。検索結果はいくつか出てくるのですが、このうちpopular-postに関するところを編集していきます。
ここのtrueをfalseに書き換えるとスニペットは非表示設定になります。見た目もすっきりと見やすくなります。
0 件のコメント:
コメントを投稿