2017/06/22

CSS欄にコードをコピペして、このブログの「記事タイトル」と「見出し」をボーダーで装飾

私の愛犬のBloggerブログ「犬と散歩」テンプレート変更に続き、当ブログの若干のカスタマイズを試みた。
それは、「記事タイトル」と記事中の「見出し」を装飾しようというもの。

ユーザーにとって読みやすいようにBloggerブログをカスタマイズするということは、とりもなおさずWordPressで作られたブログなみのレイアウトに近づけようというもの。
そのようにWordPressで作られたブログはカッコいい。
しかも、読みやすいものが多い。

ところでWordPressとは、何か。
それは、無料で提供されているオープンソースのブログシステムソフトウェアのこと。
ソフトウェアは無料だが、WordPressで作ったブログを公開するためには「ドメイン」と「サーバー」が必要である。
レンタルサーバーのなかには、ドメイン代金が無料になるサービスもあるが、サーバーのレンタル代金は必須。
当方も、レンタルサーバーの「エックスサーバー」から、無料で独自ドメイン(.com)を一個頂いているのだが、サーバーレンタル代金は年契約で支払いをしている。

WordPressは、無料ブログサービスと違ってお金がかかる。
それに、難しい専門知識がなくても簡単に自分だけのブログを作ることができると言われているが、実際にはHTMLとCSSの一定の知識が必要である。

そんなWordPressに比べてBloggerは無料。
しかも私のような素人でも、容易にカスタマイズが可能なシステムが用意されている。
Bloggerブログでもテンプレートしだいでは、カッコいいWordPressブログのレイアウトに近づけることができる。
ということで、当ブログの「記事タイトル」や「見出し」をボーダーで飾ってみようということになった次第である。

「テーマ」をクリック。
ブログの管理画面を開くと、左側に縦並びにメニューが並んでいる。
上の画像のように、そのメニューの下側にある「テーマ」をクリックする。
すると画面が、下の画像のようになる。

「カスタマイズ」をクリック。
現在ブログで使用中の「テーマ」の囲みの下に「カスタマイズ」の赤いボタンがある。
それをクリックすると、「Bloggerテーマデザイナー」という画面に切り替わる。
ここが、ブログレイアウトをカスタマイズするためのシステムである。
左側のメニュー最下に、「上級者向け」というのがある。
「上級者向け」と書いてあるが、そんなに恐れることはない。
私でもいじれるのだから。
「上級者向け」をクリックする。

「上級者向け」をクリック
すると詳細なカスタマイズのためのメニューが、20項目ぐらい縦に並んでいる画面に切り替わる。
各メニューをクリックすると、それに応じて右側のウィンドウが切り替わる仕掛けになっている。
メニューの一番下まで、スライダーで下がると、「CSSを追加」というのがある。

「CSSを追加」をクリック。
「CSSを追加」をクリックすると、下の画像のように右側にコードを書き込むスペースが現れる。
ここに、入手したコードをコピーすると、下のモニターがその変更に対応する仕掛けになっている。
下のモニターで確認してOKなら、右上にある「ブログに適用」というオレンジ色のボタンを押す。
CSSコードの書き込みは、これで完了。

今回のコードの入手先は、「 NxWorld」さんのサイトの「シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50。」というページ。
デザインサンプルが50もあるので、CSSコードをお探しの方には、お気に入りのものが見つかるかもしれません。

ただし、使用の際に万が一障害が生じた場合でも当ブログは一切責任を負いませんので、ご使用の際は「自己責任」のもとで行ってください。

カスタムCSS追加欄にCSSコードをコピペする。

スポンサーリンク