ねこぜろぐ

猫背の大学生による趣味や雑感のブログ

『とほほのWWW入門』でデザイン更新! タイトル・見出し・ソーシャルボタンなど

広告

f:id:nekozemaru:20160205004637j:plain

こんばんは。ねこぜまるです。

 

またまたブログデザインを更新しました。

とはいっても僕は自分でHTMLとかCSSが書けるわけではないので、人様のブログを拝見して試行錯誤している次第でございます。

いつかは自分で書けるようになりたいと最近思い始めていますが…。

 

さて、今回更新したのは

  • 見出し
  • 記事タイトル
  • 続きを読むボタンの幅を大きく
  • ソーシャルボタン
  • 合わせて読みたいG

ですかね。順番に見ていきますが、まずはこの話から…。

 

 

 読者ボタン減らしました

二日前思い付きで読者ボタンを9個設置しました。

nekozemaru.hatenablog.jp

 プロフィールの下とかもういやがらせみたいになってました。

f:id:nekozemaru:20160204231543p:plain

実際この二日間でも読者の方何名か増えてくださってるので効果がないとは言えないんですが、さすがに自分で見てても「邪魔だな~」と思ったのでやめました。

現在は3つですかね。

それでは本題へ。まず、僕がブログデザインをいじるときのざっくりした方針から先にご紹介。

初心者へおすすめのブログデザインの凝り方

 前述の通り、僕は自分で一からHTMLやCSSが書けるわけではありません。

(※多少予備知識はあるので、雰囲気は掴んでいます。)

そのため、ほかのはてなブロガーの方の記事を見てコピペしています。

ですが、「もうちょっとここを右に寄せたい…」とか「ここの色は、太さは~」とか気になってくることはやっぱりあります。

ブログの全体の雰囲気の問題もありますし、特に色は気を付けたいですね。

 

さて、そんなときどうするか?

僕は「とほほのWWW入門」というサイトを参考にしています。

とほほのWWW入門

この中の”HTMLリファレンス”と”CSSリファレンス”を使います。

f:id:nekozemaru:20160204233426p:plain

各ページを開くと、辞書のようにHTMLやCSSの要素が並んでいると思うので、必要なものを探してクリックしてください。実例が載っているので自分のブログにコピペしたものと見比べていろいろいじってみましょう。

例えば、CSSで背景色を変えたいなら「CSSリファレンス」の"background"をみて、「あーここがこんな感じ?」とか確認しながらやっていきましょう。色は#444444みたいになってるとこを色見本を参考にしながら変えればいいです。

www.color-sample.com

「とほほ」のどこのページを参考にすればいいかわからない時はググりましょう。多少時間はかかりますが、なんだかんだでだいたい解決します。

 

さて、前置きが長くなって恐縮ですが、今回の更新内容の一つ目から。 

 

見出し

見出しを簡略化しました。

以前は 

f:id:nekozemaru:20160204235104p:plain

 みたいな感じで、その次はねこの画像消して青いL字の枠にグレーの背景にしたのですが、いかんせん目立ちすぎて記事タイトルが霞んでいる気がしたんですよね。

そこで今回は左に縦棒のみにしました。

参考にしたエントリーはこちら。

www.yukihy.com

 

ちなみに中くらいの見出しは

中見出し

です。小さい見出しはあまり使わないので設定していません。

ちなみに、CSSの上では見出しは大・中・小の順でh3・h2・h1として扱われています。

このカスタマイズにおいて自分でできるマイナーチェンジは、色・線の太さなどでしょうか。色は#以下を変えてください。線の太さはpx数が書かれている場所を探して数字だけ書き換えましょう。

また、「とほほ」のCSSリファレンスのborderのページが参考になります。背景をつけたいときはbackgroundを参照してください。

 

記事タイトル

記事タイトルを特に工夫してみました。

以前はデフォルトのままで、先ほども言ったように見出しに負けていたんですよね。なので文字の大きさと枠で差別化しました。

基本的には見出しと同じやり方です。h3のように、CSS上で記事のタイトルはentry-titleとして扱われています。

 

せっかくなので、恥ずかしながら自分のコードを晒してみます。

色付きの部分が自分でいじったところです。


.entry-title{
font-weight: normal;
font-size: 30px;
padding: 20px 0px;
margin: 10px 5px 10px 5px;←余白をとった
color: #444444;
border-bottom: 3px solid #3f3f3f;←枠線を設定 底辺が一番大きい
border-top: 1px solid #3f3f3f;
border-right: 1px solid #3f3f3f;
border-left: 1px solid #3f3f3f;
word-break: keep-all;←スペースがあると改行する設定
text-align: center;←中央寄せ
background: #ffffff;
border-radius: 10px; ←角を丸める

 こんな感じです。無駄な部分もある気がしますが…。

もし気に入ったらコピペして使ってもらえるとブロガー冥利につきます。

 

「続きを読む」を大きく

 「続きを読む」ボタンの大きさを変えることができます。参考にしたエントリーはこちら。目次から該当箇所を見てください。

www.yukihy.com

 

大きさは「50%」と書かれた数字のとこを変えれば自由に変更できます。ちなみに999%とかにすると見事にはみ出ます。

 

ソーシャルボタンを別デザインへ

 記事下にあるはてブフェイスブックなどのボタンのことです。

この記事にある通りに行えば、すっきりしてまとまったデザインに変えられます。デフォルトのがちょっとこまごまして嫌だなと思ってたんですよね。

www.yukihy.com

 

ついでに記事下のほかのボタンも中央揃えに変更しました。記事タイトル・続きを読む・ソーシャルボタンがすべて左右対称の配置になっていたので合わせようかと思って。

中央揃えにするやり方はとほほを参考に。

<center> - 中央揃え

また、読者ボタンがちょっと左寄りでバランス悪かったので右寄せに修正。やり方は知恵袋から。

文字や画像を少しずらす方法。 - htmlで画像や文字を動かす時... - Yahoo!知恵袋

 

合わせて読みたいG

記事下に「合わせて読みたい」を表示したかったのでつけました。

表示されるメッセージを「こちらもどうぞ」に変更してあります。

ちなみに、GはガチャのGだそうです。

bulldra.hatenablog.com

 

 

おわりに

いかがでしたか。参考になった情報があれば幸いです。

 

三日坊主の僕がブログを続けられているのは、ブログデザインの奥深さのおかげかもしれません。自分で思い描いたことが形になっていろんな人に見てもらえるのは面白いですよね。

 

これからも気になったポイントがあれば、どんどんアップデートしていきたいと思います!がんばるぞ。

 

それでは。

にほんブログ村 大学生日記ブログ 男子大学生へ
にほんブログ村

なるしかない、読者に↓