2014年1月27日月曜日

Bloggerでテキストリンク色を変更する|Blogger修行

Bloggerで一通り記事を完成させてみたら、直したい部分が見えてきました。
まず、Bloggerのテキストリンクの色は、どうやって変更するのでしょう?

画像にするとなおわかりづらいです。
テキスト色の設定は、当然選んだテンプレートのデザインごとに異なりますが、もともと自分で使うつもりがないけど、質問されたらいつでも操作できる状態にしておきたかっただけで、このテンプレートを選んだ理由も何もかもすっぽり忘れていました。
クリック済みのリンクテキストの色が、本文のテキスト色に非常に似通っているので、もう少し違いを出したいだけ、しかし設定画面がどこにあるのか単純に判らないだけなんです。

Googleに魂売った脳みそ=Google入ってるプロセッサ搭載のため、解らないことは反射的にGoogleりますし、友だちから「ネットで○○の操作が進まない」「ソフトの操作方法が」「パソコンからエラーが」「立川で新しい飲み屋あぁ」みたいなヘルプコールをされた時も、「自分はわかんないけど、Googleったらこういう情報あったよ」と返すことが少なくありません。
最近も、会社で作業環境がリプレイスされた途端、知らない誰かが作ったマクロが止まったので、デバッグで止まったエラー内容をGoogleり倒し、ピンポイントで補修して綱渡り状態で仕事回したところです。マクロ学んだこともないのに、Googleさまさまです♪

しかし、そのGoogle様が提供しているサービスに関しては、私がどんくさいからか、公式ヘルプで知りたい情報にたどりつくことがなかなかできません(泣)。
Googleウェブマスター ツールを使おうとした時も、二段階認証を登録しようとした時も、公式ヘルプを読んでもなんだかピンと来ず、それこそGoogleりまくり、公式ではないサイトの情報からようやく理解したような次第なのです。

そんな初心者レベルからスタートするので、やっぱりまずはGoogleってみましょう!
「Blogger テキストリンク 色」
Blogger リンク 文字色 変更
Blogger テキストリンク カスタマイズ
連敗……1ページ目に何もヒットしない場合は、2ページ目以降は見ないのが吉です。

Blogger テキストリンク テンプレート
しゃぁ!上位5つまでがよそのBlogなんだけど(笑)、1ページ目で公式がヒットしたので進みます!

初めまして、Blogger テンプレート デザイナーのヘルプさん!
公式の貴方にお逢いするまでに無駄に5分ほど費やしました♪
では!Googleさまのお導きによるめぐり遭い・『Bloggerテンプレート デザイナー』の、ヘルプを読んでみましょう♪

「テンプレート デザイナーにアクセスするには、灰色の [投稿リスト] アイコンのプルダウン メニューをクリックし、[テンプレート] をクリックします。そこで、テンプレートを選択してカスタマイズすることができます。」

……はい?どこすか?


結局こうやって開きました。

1.https://www.blogger.com/home(自分がログインしたアカウントの、Bloggerの管理画面トップ)から、目的のBlogの管理画面へ移動。
(または、ログインした状態で自分のBloggerの記事を開くと、画面右上の[デザイン]のリンクをクリックし、2.へ進むことができます。こっちの方が速いです)



2.左側に表示されるメニューから[テンプレート]をクリック。

3.次のメニューで[上級者向け]をクリック。
※ここで自分が選んだテンプレートの名称が『シンプル』であったことに気づかされました(笑)。

4.次の画面のメニューで、[リンク]が選択でき、編集可能になります!

……はぁ。
灰色の [投稿リスト]」って、
ここで言う2の画面のメニューのことだったんですね♪
……これだから公式は。

[ページのテキスト]設定画面。本文のフォントタイプ・pt、
ボールドやイタリック、カラーが選択できます。
……気を取り直して、ここまでくればよくあるBlogの画面に似てるので、早速テキスト色の設定を変えてみましょう。

まず本文となる[ページのテキスト]をチェックします。
画像だともやっとしてますが、メリハリが出ました♪
#666666なので、背景色が明るく設定されていると、モニタの輝度によっては見えづらい場合があるかもしれません。そのため、先にページのテキストを濃いめにしてみたいと思います。

[おすすめの色]にある#333333をクリックし選択、画面右上のオレンジ色のボタン[ブログに適用]をクリックして決定します。

プレビューしてみると、テキストリンクの色はそのままでも、本文テキストのカラーが濃くなっただけかなり見やすくなりました!

次に気になるのは、クリック前のテキスト色の設定です。本文のテキスト色の濃度を上げたので、クリック前のテキストの色が物足りなくなってきました。

今度は[リンク]のメニューをクリックして[リンクの色]を変えます。変更方法は同じです。[表示済みの色]、[カーソルを合わせたときの色]を合わせて設定できます。

[リンクの色]を#2288bbから濃いめの色に変更するにあたり、今度は好きな色を指定することにします。方法としては2つから選べまして、

1と2の設定画面です。
1.色の16進数がわかれば、直接入力してEnterキーを押下の上、画面右上の[ブログに適用]ボタンをクリックし、反映させる。

2.下向き三角ボタンをクリックし、スライダ、カラーピッカ、カラーパレットのいずれかでお好みの色を選んでから、画面右上の[ブログに適用]ボタンをクリックし、反映させる。

色は#003300という濃いめのグリーンにしたのですが、画面をキャプチャすると、背景が明るいせいでやはりもやっとして見えるため割愛いたします。

[メインの背景]を#cccc99に変更後。目にやさしい。
で、背景色も変えました。[メインの背景]を、目に優しそうな#cccc99にとりあえず。

こうやってちまちま変えていくとキリがないし、
いいかげん肩甲骨が固まってきたので、途中だけど、今日はこれまでにします。

さらに操作してみて実感してきた、Bloggerの編集がしづらく感じる面も、徐々に対処方法を見つけていきたいと思います。

0 件のコメント:

コメントを投稿