-

スポンサーサイト

一定期間更新がないため広告を表示しています

  • Hatena Bookmark
カスタマイズ

リッチエディダーを使って記事を投稿している方へ

computer-coffee_cupブログの記事の行間が空きすぎのように感じている方はいませんか?
リッチエディダーを使うと改行した際、<p>文章</p>と記述されるのですが、p要素に囲まれた内容は1つの段落としてブラウザに解釈され、前後に一行分の空白ができる仕様になってます。
それに倣い、当テンプレートのスタイルシートにも、p要素には下マージン(余白)が設定してあるため、行間が空きすぎる傾向があります。
今回は、そのp要素に付与されたマージンを狭める、また、なくす方法を書きたいと思います。

スタイルシートのBlock-level Elements項目の

p {
  margin: 0 0 1.429em;
  margin: 0 0 2rem;
}

この部分がp要素のスタイルになります。

この部分を削除して頂くか、あるいは

p {
  margin: 0;
}

として頂ければ、p要素の余白をなくすことができます。
また、狭めるには、数字を小さくして頂ければと思います。

※なぜmarginを二重に設定しているか?
remという単位は比較的最近導入された単位なので、古いブラウザ(IE8以下)用にemを重ねて設定してます。
スタイルは優先順位により、下にあるものが上書きされる仕組みになってます。remが対応してないブラウザは、下の設定は無視されます。
詳しい説明は割愛しますが、既定フォントのサイズにもよりますが2rem=20pxになります。

カスタマイズ

メニューの設定方法

menu-signboard当テンプレートにはメニューを設けているのですが、変更、増減方法を書きたいと思います。(今更ですが・・)
テンプレートに使用してあるメニューはだいたい下記のように表記されています。

<!-- メニューの設定 #を任意URLに、Menuを任意テキストに変更 -->
<nav id="global-nav">
<ul>
<li><a href="./">Home</a></li>
<li><a href="./?pid=1">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</nav>
<!-- メニューここまで -->

まずは変更方法から。ガイダンスに従い#を任意URLに、Menuを任意テキストに変更します。
例えば、私のサイトはテンプレートをメインに活動しているので

<!-- メニューの設定 #を任意URLに、Menuを任意テキストに変更 -->
<nav id="global-nav">
<ul>
<li><a href="./">Home</a></li>
<li><a href="./?pid=1">About</a></li>
<li><a href="./?eid=2">Contact</a></li>
<li><a href="./?cid=3">Template</a></li>
<li><a href="./?cid=4">Diary</a></li>
</ul>
</nav>
<!-- メニューここまで -->

という風に改変できます。
「#」の部分は、リンクしたいカテゴリのURLを記述するといいでしょう。URLは「./?cid=カテゴリID」になると思います。
特に、カテゴリでなくても個別ページのURLでメニューを構成してもいいかもしれません。その場合は「./?eid=投稿ID」になりますね。

次に増減方法。
<li>〜</li>で囲まれた部分を追記ないし削除して下さい。
しかし、メニューの数があんまり多すぎると、デザインが崩れてしまうかもしれないので6、7個が丁度いいと思います。

ソーシャルアイコンも同じように増減可能ですので試してみて下さい。

カスタマイズ

strong要素とem要素の見た目を変える方法

computer-typing 当テンプレートでは、strong要素を使うと黄色の蛍光ペンでマーカーをひいたような感じになります。
サンプル
また、em要素は赤字に色付けされます。
サンプル

strong要素は、コンテンツに対して強い重要性を表すテキストに使用し、em要素は、コンテンツの強勢(アクセント)強調するテキストに使用します。
それらの用途を考え、以上のデザインを指定したわけですが、デフォルトの形(単なる太字とイタリック体)が望ましいという方のために、変更方法をお教え致します。

Continue Reading
カスタマイズ

JUGEMで作るパンくずリストについて

breadcrumb-list

長くなったので個別の記事にします。
JUGEMではパンくずリストが作れるか、○か×でいうと○かな・・?って感じです。
作れるっちゃあ、作れますが、全てのページにおいて機能的なパンくずリストを設置することは難しいと思います^^;

JUGEMでパンくずリストを作る方法を参考に少し拡張したものを作ってみました。

パンくずリストは、ユーザーに対して今どのページを見ているかを示すための機能である他に、SEOにも効果的なので独自タグが開発されるとありがたいですね。

Continue Reading