H4タグの改善及び個別記事のカテゴリー表示の改善

投稿日:2017年4月1日 更新日:

※この記事は『2017/04/01の更新内容』を兼ねています。

雑記ブログや情報ブログとして記事数を増やすことも大事なことですが、この『創作資料庫』はテーマの構築をゼロからやっているため定期的にテーマを改善していかなければいけません。

今現在もとりあえずは記事が見られる状態にしているだけなので、これからもサイトの構築をしている間はサイトの表示がおかしくなることが多々あります。

そんなものローカルの環境でやればいいじゃないかと思われそうですが、今現在でもいる数少ない閲覧者の方や、ゼロからワードプレスのテーマを少しづつ構築していっても検索で上位表示できるようになるということを示すためにあえてローカルではやっていません。

また、今までは更新内容を月ごとに一纏めにしていましたが、これからは更新した場所をどのように更新したのか? というのを掲載していき、ゼロからテンプレートを構築する方の参考になればなと思います。

スポンサーリンク

2017/04/01の更新内容とその中身

H4タグの改善及び、H1,H2,H3タグの設定内容

今までH4タグはあまり使っていなかったので定義していなかったのですが、タイトルをH2からH1タグに切り替え、コンテンツごとに内容を掘り下げていくようにと考えた結果、使用する機会が出てきたので定義することにしました。

H4タグの定義内容

H4タグのCSSの記述は以下の通りです。

h4{font-size:16px;
margin:0; padding:0;}
h4:before{
font-family:"FontAwesome";
content:"\f046";
color:#60B99A;
font-size:16px;
margin-right:6px;}

これでH4タグの隣にチェックボックスがつくわけですが、これはFont Awesomeというものを導入しているからであって、何も導入していない状態ではチェックボックスは表示されません。

Font Awesomeの導入方法に関しては、検索をかければ詳しく説明してくれる方が多数おられるので省きますが、私が参考にしたサイトを掲載しておきます。

フリーのアイコンwebフォント『Font Awesome』の使い方

ここを見れば導入方法がわかります。
見てもわからないという方は他のサイトを検索するなりして、自分に分かりやすいサイトを見つけてください。

H1,H2,H3タグのCSS設定

H1,H2,H3タグの設定内容はこんな感じです。

h1{
font-size:18px;
text-decoration: none;
border-left: 6px solid #4188C9;
border-bottom: 1px solid #4188C9;
padding-left:10px;
margin:0px;}

h2{
font-size:20px;
padding: 4px 8px;
background-color: #f6f6f6;
border-left: 6px solid #60B99A;
border-bottom: 1px solid #60B99A;}

h3{position: relative; padding: 4px; font-size:18px;}
h3:after{
width: 100%;
position: absolute;
bottom:0 ;
left: 0;
content: '';
height: 3px;
background: repeating-linear-gradient(-45deg, #60B99A, #60B99A 3px, #fff 3px, #fff 6px);}

見てもらえばわかるとは思いますが、H1とH2の違いはボーダーの色とバックグラウンドに背景色をつけているかいないかの違いだけです。

H3タグに関しては下部に斜めの破線を入れたかったので、このような記述になっています。どうしてこのようになっているのかを今現在はある程度理解していますが、当初は意味がわからないと思うので、

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

このようなサイトを参考にしていけば良いのでは無いかなと思います。

個別記事のカテゴリー表示の改善

以前まではカテゴリーしか表示していなかったのですが、トップページのリストも付け加えました。これによりサイトを見て回る際に少しでも見やすくなればなと。

本当はパンくずリスト化したいのだけれど、どうやっても思っているように表示されないorz

パンくずリストにできれば検索結果などにも表示されるようになるので、上位階層にどんなものがあるかわかりやすくて良いんですけどね。複数のカテゴリー(親子関係ではない)を跨ぐパンくずリストは難しいのだろうか?

というか、複数のカテゴリーを跨ぐような記事が適切なのかどうかも考えないといけない。

スポンサーリンク

-ワードプレス
-, , , , ,

Copyright© ビブリオテーク , 2017 All Rights Reserved.