スポンサーリンク

テーマ「First」のカスタムで土日が潰れる Part1

休日返上

ブログを始めてから3週間が経ちました。記事数も増えてきたのでそろそろブログの外観をカスタマイズしようと思い立ち・・・土日が潰れました。

やっぱり知識が無いと一つ外観を変えるのにもかなり時間が掛かりますね・・・。
備忘録も兼ねて土日でどんなことをしたか書いていきますが、長いので今回は土曜編ということでPart1です!「続きを読む」のカスタマイズがメインになります。

WordPressのテーマ「First」

まずは私がブログ開設当初から使用しているテーマ「First」を簡単にご紹介します。

First

上の画像はテーマの見本ですがシンプルで素敵です。日本人のTakao Utsumiさんという方が作成されたテーマです。

ちなみに私がブログを始めた頃の外観はこんな感じでした。

初期ブログ

ほとんど初期状態ですね(笑)。まずは記事数を増やさねばと思い、外観にはあまり手をつけていませんでした。

「続きを読む」をカスタム

とりあえず簡単そうなものからやっていこうということで、最初に注目したのは「続きを読む」でした。メインページの各記事の下に表示されているアレです。
テーマ「First」ではcontent.phpや、content-XXX.phpの中にarticle要素が記述されています。記事の部分ですね。「続きを読む」について記述されているのはどこだろうと探してみると、content.phpの中にありました。そのarticle要素の中に、

<span class="continue-reading">Continue reading &rarr;</span>

このように記述された箇所が2か所あるはずですので、2か所とも同じように変えていきます。

アイコンフォントを入れた「続きを読む」

spanで囲まれたContinue reading &rarr;の部分が実際に表示される文字になるので、「続きを読む→」が気に入らない場合はここを変更します。ここで初めて知ったんですが、「&rarr;」ってHTML上で「→」を表すんですね。このような特殊文字をHTMLで記述するときは&から始まるコードを使ったりするみたいです。

私はここにFont Awesomeを使ってアイコンを入れました。←これです。
Font Awesomeの使い方は非常に簡単で、

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

このコードをheader.phphead要素内に記述するだけです。4.7.0の部分はバージョンになるのでFont Awsomeの最新のバージョンを記述すればOKです。
そうすればあとは「Font Awesome」のメニュー内「icons」から好きなアイコンを選ぶとソースコードが表示されるので、アイコンを表示させたい場所にそのコードを入れます。私の場合は、

<i class="fa fa-hand-o-right fa-lg" aria-hidden="true"></i>続きを読む

と記述することで、「続きを読む」のように表示させることにしました。アイコンフォントの大きさは「fa-lg」などの大きさを定義したclassを追加で指定してやればOKです。
fa-lg → fa-2x → fa-3x → fa-4x → fa-5xの順で大きくなります。

「続きを読む」をCSSで装飾する

文字だけではやはり物足りないのでCSSで装飾することにしました。先ほどの、

<span class="continue-reading">Continue reading &rarr;</span>

ですが、「continue-reading」というclass指定がされていますね。というわけでこのclassに対してCSSで装飾します。私の場合はstyle.cssの中に、

.continue-reading {
 font-weight:bold;
 display: inline-block;
 width: 160px;
 height: 48px;
 text-align: center;
 float: right;
 text-decoration: none;
 line-height: 48px;
 outline: none;
 }
 .continue-reading::before,
 .continue-reading::after {
 position: absolute;
 z-index: -1;
 display: block;
 content: '';
 }
 .continue-reading,
 .continue-reading,
 .continue-reading::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
 }
 .continue-reading {
 position: relative;
 z-index: 2;
 background-color: #fff;
 border: 2px solid #333;
 color: #333;
 line-height: 46px;
 }
 .continue-reading::after {
 top: 4px;
 left: 4px;
 width: 148px;
 height: 36px;
 border: 2px dashed #333;
 opacity: 0;
 }
 .continue-reading:hover::after {
 opacity: 1;
 }

 という記述を加えました。そうすることで、

続きを読む

 こんな感じになりました!ですが実はこの時大きな問題が起こっていたのです・・・。

「float」の使用でレイアウトが崩れる

「続きを読む」はデフォルトでは左寄せになっています。そこで右寄せにしようと思い、CSSで「float: right;」と記述し、右に寄せることができました。しかし・・・

レイアウト崩れ

通常のメイン画面では崩れていなかったのですが、検索結果などで表示された画面では上の画像のようにレイアウトが崩れてしまっていたのです。よく見るとわかりますが、記事の下に引いてあるボーダーラインからはみ出てしまっていますよね。
調べてみたところfloatを使うとこのようにレイアウトが崩れてしまうことがあるようです。結論から言うと私は「clearfix」という方法でこの問題を解決しました。やり方は、

.clearfix:after {
 content: "";
 clear: both;
 display: block;
 }

上のコードをstyle.cssに記述し、 content.php内1つ目の<span class=”continue-reading”>の親要素である、<div class=”entry-summary”>に「clearfix」というclassを追加します。

<div class="entry-summary clearfix">

こうなります。これだけで先ほどのレイアウト崩れが解決しました!

以上で「続きを読む」のカスタムは終わりです。長くなってしまいました・・・。
テーマ「First」のカスタムで土日が潰れる Part2に続きます。

スポンサーリンク

シェアする

トップへ戻る