【コピペだけ!】CSSでタイムラインのデザインを作る方法!

デザインコンサルタントのここあです。

 

私はブログテーマのカスタマイズ記事を中心に書いていることが多いのですが、

ブログのテーマ別に記事を書いていると、徐々にネタが尽きてきます(笑)

 

とは言え、ただブログテーマのカスタマイズ方法だけではなく

いろんなテーマに使えるブログパーツがあると便利だと思い、

 

私自身もブログカスタマイズの記事を書くこともあって

今更ながらこんなパーツを作ってみました。

 

↓それがこれ!「タイムライン」の表示です。

  • STEP1

    HTMLをコピペ
    HTMLコードをコピーして、テキスト編集モードでペーストします。
  • STEP2

    CSSをコピペ
    追加CSSにCSSコードをコピペします。
  • STEP3

    AdQuickTagに登録
    タイムラインのコードはAdQuickTagに登録しておくと便利です。

 

「タイムライン」というのは、上記のように

作業をステップ形式で伝えたい場合やそれ以外にも

このように、年表としても使うことができます。

 

  • 2017年 夏

    会社を辞め独立
    過度のストレスにより体調を崩し会社を退職。フリーランスに転身することを決意。
  • 2017年 秋

    デザイン専門学校に入学
    印刷系デザインとWeb系デザインができれば最強だと考え、改めて専門学校に通いWebデザインのスキルを学ぶ。
  • 2018年〜

    WordPressでブログ運営開始
    ネットビジネスのため本格的にブログ運営を始める。

 

ということで、アニメーションを付けたりとか複雑なことまではできませんが

シンプルに見栄えだけ整えたいというあなたには

使いやすいパーツに仕上げておりますので、

 

タイムラインでスッキリ見せたい!」というあなたは

ぜひ参考にしてください!

コードのコピペと文字の打ち替えだけで表示できます。

 

CSSでタイムラインを実装する方法

今回は上記、タイムラインの実装をHTMLとCSSのみで行います。

 

ですので、タイムラインのCSSコードを記述する場合は

ダッシュボードメニューから、

外観 → カスタマイズ → 追加CSSをクリックし

 

以下の部分に

追加CSSのスペース

 

私が今回あなたにお伝えさせていただくCSSコードをコピペしてくださいね。

 

また、色の変更方法などもお伝えさせていただきますので、

色を変更したい場合は、ここに記述するCSSコードで微調整ください。

 

タイムラインを表示させるHTMLとCSS

今回あなたにご紹介するタイムラインのデザインは

HTMLとCSSをコピペするだけで実装できます。

 

なので、あなたがやるべきことは、

あなたのサイトイメージに合わせた色変更だけ!

 

ということで、タイムラインを表示させたい場合は

以下のHTMLとCSSコードをコピペしましょう。

 

ちなみにHTMコードをブログの記事に反映させる場合は

必ず「テキスト編集モード」に切り替えてコピペしてくださいね。

HTMLコード
<ul class=”timeline”>
<li>
<p class=”timeline-date”>STEP1</p><div class=”timeline-content”><span class=”midashi”>STEP1の見出し</span>
STEP1の内容をここに記入。</div></li>
<li>
<p class=”timeline-date”>STEP2</p><div class=”timeline-content”><span class=”midashi”>STEP2の見出し</span>
STEP2の内容をここに記入。</div></li>
<li>
<p class=”timeline-date”>STEP3</p><div class=”timeline-content”><span class=”midashi”>STEP3の見出し</span>
STEP3の内容をここに記入。</div></li>
</ul>
  表示上の問題により、大変お手数ですが、上記HTMLコードの「”」は、テキスト編集モードに入力後、改めて欧文半角の「”」に全て打ち替えてください。全20箇所あります^^;

 

追加CSSにコピペ
.timeline {
list-style: none;
}

.timeline > li {
margin-bottom: 30px;
}

div .timeline-content {
margin-top: 1rem;
}ul.timeline {
background-color: #fffef6;
border:dashed 1px #e5e5d1;
}

.timeline span.midashi{
font-weight:500;
font-size:120%;
color: #fdc44f;
}

ul.timeline > li::before {
font-family: “Font Awesome 5 Free”;
content: “\f111”;
transform: scale(1.0);
font-weight: bold;
color: #fdc44f;
font-size:80%;
}

@media ( min-width : 640px ){
.timeline > li {
overflow: hidden;
margin: 0;
position: relative;
}

.timeline-date {
width: 110px;
margin-top: 0px;
font-size:80%;
}

.timeline-content {
width: auto;
float: left;
border-left: 3px #e5e5d1 solid;
padding-left: 20px;
}
}

fontawesome5を導入していない場合は、タイムラインのアイコンはデフォルトの○になりますので、あらかじめご了承ください。

 

基本的には上記HTMLとCSSコードがきちんとコピペできれば

タイムラインのデザインは実装できます。

 

タイムラインの色をカスタマイズする方法

タイムラインの表示方法についてはPHPファイルを使って

ショートコードで表示させたりと、便利な方法を解説されている方もいるのですが、

PHPファイルは誤って触るとブログが表示されなくなるリスクもあります。

 

また、タイムラインはそこまで頻繁に使うこともないかと思いますので、

できるだけリスクの少ない方法、かつ、見た目に綺麗なデザインということで

HTMLとCSSのみで組んでいます。

 

ただ、ブログによってはカラーイメージが合わない

という場合もあるかと思いますので、

タイムラインの色変更をする方法だけ個別に解説していきます。

 

●の色を変更する方法

タイムライン上のの色を変更したい場合は

CSSコードの以下の部分でご調整ください。

 

ul.timeline > li::before {
font-family: “Font Awesome 5 Free”;
content: “\f111”;
transform: scale(1.0);
font-weight: bold;
color: #fdc44f; ←の色はここで変更
font-size:80%;
}

 

見出しの色を変更する方法

今回私がご紹介しているタイムラインのデザインは

ある程度、どんなサイトにも差し支えないよう黄色ベースにまとめてますが

見出しの色も変更したい場合があるかと思います。

 

そんな時は、以下のコードでご調整ください。

ここに文字.timeline span.midashi{
font-weight:500;
font-size:120%;
color: #fdc44f; ←見出しの文字色はここで変更
}

 

背景色の色を変更する方法

背景色の黄色は、当たり障りのない薄めの色に設定していますが、

それでもおそらくはタイムラインの背景色を変更したいと

考えられることもあるかと思います。

 

そんな時は、以下のコードでご調整ください。

ここに文字timeline {
background-color: #fffef6; ←タイムラインの背景色はここで変更
border:dashed 1px #e5e5d1;
}

 

以上、タイムラインの色はあなたのサイトデザインに併せて

お好みで調整してくださいね。

 

タイムラインのデザインはスマホのレスポンシブにも対応

タイムラインのデザインはスマホ対応にもしてあります。

 

実際に、画面を縮小していただくと分かると思いますが、

デザイン崩れ防止のために、スマホ表示の場合のみ

縦線の表示だけが消えるようにしてあります。

 

また、本文テキストは、そのまま入力していただければ、

テキストの量に応じて改行されるようになってますので、

ぜひ一度コピペして試してみてくださいね。

 

タイムラインの使い方は無限大!

今回は、HTMLとCSSだけで簡単に実装できる

タイムラインの表示方法について解説させていただきました。

 

タイムラインはプラグインを使って実装できるものもあるみたいですが、

わざわざタイムラインの表示だけのためにプラグインを使うのは

 

サイトの表示速度を考えても無意味ですし、

それほど頻繁に使う要素でもないかと思います。

 

ただ、こうしたタイムラインのデザインも気軽に使えるようにしておくと

先にもお伝えさせていただいたように、作業手順のステップを書いたり、

ちょっとした年表を使う時などにも便利なのも確かです。

 

ですので、タイムラインの用途は、

使い方次第で色々とあるかと思いますので、ぜひあなたならではの

タイムライン活用法を見出していただけると嬉しいです。

 

最後に、AdQuickTagの登録方法も記載しておきますので、

タイムラインのデザインをたまには使いたいと考えているあなたは

AdQuickTagにもご登録ください。

 

AdQuickTagへの登録方法

すでにワードプレスのプラグイン

「AdQuickTag」を導入されている場合は

 

設定画面を開くと、以下のような画面になりますので

AdQuickTag設定画面

 

HTMLコードの最後の行以外は上のボックスに、

最後の行</ul>のみ下のボックスに入力し、

名前とアイコンをお好みで決めてご登録ください。

 

  「AdQuickTag」登録時は、HTMLコード、各見出しの後に</br>を入れておくと、ご利用時に綺麗に表示されます。(例)STEP1の見出し</span></br>←こんな感じで</span>の後に</br>を追加して登録。

 

そうすることで、いつでも記事編集の際に、

「AdQuickTag」からタイムラインのデザインを

いつでも呼び出せるようになりますので、

 

PHPでショートコードを作らなくても、

それなりにタイムラインが使いやすくなります。

 

もちろん、PHPで組む方が圧倒的に便利なんですけど、

私はちょっと抵抗があるので(笑)

あえてHTMLとCSSで一手間かけてタイムラインを表示させることにしました。

 

ということで、何かしらタイムラインのデザインを導入したいと考えているあなたは

ぜひコピペしてカスタマイズしてみてください。

 

以上、最後までお読みいただきありがとうございました!

 

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG