【THE THOR】コピペで作るタイムライン52選:CSSカスタマイズ

みなさんこんにちは。

THE THORユーザーの JonyとAi(@10to1_travel)です。

ある日、カスタマイズの手順を解説する記事を書いてる時フと思ったのです。

「THE THORにもタイムラインみたいなステップフローがあったら良いな〜」

そうなんです。THE THOR(ザ・トール)にはWordPress有料テーマ SANGOのようなタイムラインがありません。(何で無いの …?)

 
Ai
タイムラインボックス絶対に必要ですよね。
逆に無いとめーっちゃ不便ですよね。
 
Jony
コメントやからショートコードで作ることにしたで!
THE THORに実装されるのなんか待ってられへんからな!

今回は THE THOR(ザ・トール)にタイムライン(ステップフロー)を作るカスタマイズの方法を紹介していきます。

タイムラインとは?【完成図】

タイムライン ボックスとは文字通り時系列で手順を表すボックスのことです。

ステップフローとも呼ばれてますね!

よく、旅行の時刻表やハウツー手順などで使用されています。

以下が私たちが THE THOR(ザ・トール)の機能だけで作った精いっぱいのタイムラインです。

【タイムラインを作る手順】
1. functions.phpを編集する
2. CSSをコピペする
3. HTMLをコピペ

 
Ai
これでも頑張った方です笑
でもわかりにくいし、デザインが制限過ぎて見栄えは良くないよね。

そして以下が今回 THE THOR(ザ・トール)に実装するタイムライン(ステップフロー)の完成図です。

タイムラインを作る手順
  • STEP1
    functions.phpを編集する
    THE THOR(ザ・トール)でタイムラインを実装させるコードを functions.phpに貼り付けます。
  • STEP2
    CSSをコピペする
    タイムラインのデザインを整える CSSを THE THORの「追加CSS」にコピペします。

  • STEP3
    HTMLをコピペする
    HTMLコードを記事内に貼ってタイムラインを使用します。
 
Jony
めっちゃオシャレで見やすいやん!
しかもリンクとか画像も入れられるねんな♪

タイムラインボックス(ステップフロー)があれば手順を分かりやすく読者に解説していくことができるので、とっても便利ですね。

それではさっそくタイムライン(ステップフロー)の作り方を解説していきます!

今回のカスタマイズは Rirarinoを運営するるこさんの記事を参考にさせていただきました。THE THORに関する記事があるのでぜひご覧ください。

りらりの

この記事では、PHPファイルを編集して【THE THOR】でショートコードからタイムラインボックス(ステップフロー機能)…

THE THORでタイムラインを作る手順 STEP3

THE THOR(ザ・トール)にタイムライン(ステップフロー)を作る手順を解説していきます。

今回のカスタマイズはレスポンシブと言って、 PC・モバイル共に同じサイズで表示されます。

※今回は functions.phpを編集しますので、カスタマイズ前に必ずバックアップを取っておいてください。1文字でも編集を間違えるとサイトが真っ白になってしまう可能性があります。

※カスタマイズは自己責任でお願いします。

STEP1. functions.phpを編集する

まずはタイムライン(ステップフロー)を動作させるためのコードを functions.phpに貼り付けます。

以下のコードをコピーしてください。

 ショートコードをコピーする
//timelineショートコードコンテンツ内に余計な改行や文字列が入らないように除外
if ( !function_exists( 'remove_wrap_shortcode_wpautop' ) ):
function remove_wrap_shortcode_wpautop($shortcode, $content){
//tiショートコードのみを抽出
$pattern = '/\['.$shortcode.'.*?\].*?\[\/'.$shortcode.'\]/is';
if (preg_match_all($pattern, $content, $m)) {
$all = null;
foreach ($m[0] as $code) {
$all .= $code;
}
return $all;
}
}
endif;

//タイムラインの作成(timelineショートコード)
add_shortcode('timeline', 'timeline_shortcode');
if ( !function_exists( 'timeline_shortcode' ) ):
function timeline_shortcode( $atts, $content = null ){
extract( shortcode_atts( array(
'title' => null,
), $atts ) );
$content = remove_wrap_shortcode_wpautop('ti', $content);
$content = do_shortcode( shortcode_unautop( $content ) );
$title_tag = null;
if ($title) {
$title_tag = '<div class="timeline-title">'.$title.'</div>';
}
$tag = '<div class="timeline-box">'.
$title_tag.
'<ul class="timeline">'.
$content.
'</ul>'.
'</div>';
return apply_filters('timeline_tag', $tag);
}
endif;

//タイムラインアイテム作成(タイムラインの中の項目)
add_shortcode('ti', 'timeline_item_shortcode');
if ( !function_exists( 'timeline_item_shortcode' ) ):
function timeline_item_shortcode( $atts, $content = null ){
extract( shortcode_atts( array(
'title' => null,
'label' => null,
), $atts ) );
$title_tag = null;
if ($title) {
$title_tag = '<div class="timeline-item-title">'.$title.'</div>';
}

$content = do_shortcode( shortcode_unautop( $content ) );
$tag = '<li class="timeline-item">'.
'<div class="timeline-item-label">'.$label.'</div>'.
'<div class="timeline-item-content">'.
'<div class="timeline-item-title">'.$title.'</div>'.
'<div class="timeline-item-snippet">'.$content.'</div>'.
'</div>'.
'</li>';
return apply_filters('timeline_item_tag', $tag);
}
endif;

※クリックするとショートコードが表示されます。

コピーしたら次は THE THOR(ザ・トール)の子テーマの「テーマのための関数(functions.php)」に貼り付けます。

外観 → テーマエディター → テーマのための関数(functions.php)

と進んでください。

※この時、必ず子テーマ(the-thor-child)を選択してることを確認し、子テーマを編集してください。

最後に「ファイルを更新」をクリックして functions.phpの編集は完了です。

STEP2. 「追加CSS」にコピペする

STEP2では CSSコードを THE THOR(ザ・トール)の「追加CSS」にコピペします。

CSSコードはタイムライン(ステップフロー)のデザインを整えることができるコードです。

以下の CSSをコピーしてください。

 CSSをコピーする
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
/*タイムラインの内容*/
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #c0c0c0;/*内容の下の破線*/
color: #505050;/*内容の文字色*/
}
/*タイムラインボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
background:#fffbf4;/*ボックスの背景色*/
box-shadow:0 2px 4px rgb(0 0 0 / 15%);/*ボックスのシャドー*/
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイムラインのタイトル*/
.timeline-title {
font-weight: bold;/*太文字*/
font-size: 1.1em;/*フォントサイズ*/
text-align: center;/*フォント位置*/
margin-bottom:2rem;
border-bottom: solid 3px #f89174; /*タイトルの下ボーダー色*/
padding: 10px 0;
background-color: #f89174; /*タイトルの背景色 */
color: #ffffff; /*タイトルの文字色 */
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*タイムラインのラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 18px;
margin-left: 1.4em;
color:#90969a;/*ラベルの文字色*/
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*タイムラインの見出し*/
.timeline-item-title {
font-size: 1.1em;/*見出しのフォントサイズ*/
font-weight: 700;
line-height: 1.5;
color:#333;/*見出しの文字色*/
}
/*タイムラインの●カラー(上)*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;/*●のカラー*/
}
/*タイムラインの●カラー(中)*/
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;/*●のカラー*/
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #6bb6ff;
}
/*タイムラインの●カラー(下)*/
.content .timeline-item:last-of-type:before {
background: #6bb6ff;/*●のカラー*/
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*タイムラインの縦線*/
.content .timeline-item:after {
content: "";
width: 3px;/*ラインの太さ*/
background: #ccd5db;/*ラインの色*/
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

※クリックすると CSSが表示されます。

コピーしたら THE THOR(ザ・トール)の「追加CSS」に貼り付けます。

外観 → カスタマイズ → 追加CSS

と進んで、枠内に貼り付けてください。

ちなみに上記の CSSは、34.SANGO風(影あり)のデザインです。

希望のデザインにしたい場合は、CSSを直接カスタマイズするか、後半に紹介するデザインサンプルから好きな CSSを選び使用してください。

「追加CSS」の使い方をもっと詳しく知りたい人は、以下の記事をご覧ください。

関連記事

みなさんこんにちは。 THE THORのデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。 でも コピペってどこに?追加 CSSって何?どうやって[…]

これでタイムライン(ステップフロー)を機能させるための設定は完了です!

お疲れ様です。

STEP3. HTMLをコピペする

あとは、記事にタイムライン(ステップフロー)を使用するための HTMLコードをコピペするだけです

[timeline title="タイトル"]
   [ti label="ラベル" title="見出し"]内容[/ti]
   [ti label="ラベル" title="見出し"]内容[/ti]
   [ti label="ラベル" title="見出し"]内容[/ti]
[/timeline]

HTMLとは簡単に言うと文字や表などをブログ内で表示するためのコードです。

家で言うと、
・HTML:骨組み
・CSS:外壁などの外観

って感じですね。

上記の HTMLタグをコピーして、記事の好きなところに貼り付けて使用してください。ちゃんとタイムライン(ステップフロー)が表示されてれば完了です!

AddQuickTagがオススメ!

上記の HTMLコードをいちいちコピペするの大変ですよね。

そんな時はチョー便利なプラグイン「AddQuickTag」を利用しましょう。

AddQuickTagは文章や HTMLを保存し、ワンクリックで呼び出すことができるブログ必須プラグインです。

もちろん無料。

使い方は「AddQuickTag 使い方」でググってくださいすいません。。。

タイムライン(ステップフロー)の使い方

タイムライン(ステップフロー)の使い方を説明します。

また、HTMLや CSSが何か分からないけど、自分だけのオリジナルデザインにアレンジしたいあなたのために、コードの説明もしておきますね。

タイムラインの使い方

① タイトル:タイムラインが何を紹介してるかのタイトル

② ラベル:どの工程部分かを表すラベル

③ 見出し:作業の内容のタイトル

④ 内容:その作業の内容

ひとつずつ説明していきます。

① タイトル

何のタイムライン(ステップフロー)かを示すタイトルです。

あまり長くなると 2列になって見た目がブサイクになるので短く簡単にまとめましょう。

10文字前後が目安です。

例)
× タイムライン(ステップフロー)を作るカスタマイズ手順
タイムラインを作る手順

② ラベル

ラベルはタイムラインの段階を説明する役割があります。

ラベルは 1〜5文字以内で収めましょう。

例えば以下のワードがメジャーです。

  • 手順1
  • STEP1
  • その1

③ 見出し

見出しは手順を説明するタイトルです。

見出しも簡単に説明しましょう。大まかなタイトルにして、細かい説明は「内容」で説明してください。

テーマの設定にもよりますが、私たちの検証では 10〜15文字が目安です。

コツは、ユーザーが見出しだけで何をするかが理解できるものが良いでしょう!

④ 内容

内容はその手順で何をするかを説明する部分です。

本文で詳しく説明するので、内容ではそれを要約したものを設置すると良いでしょう。

特に文章の長さは決まってませんが、長すぎると逆に読まれません。
50字以内でまとめると分かりやすいタイムラインになります。

上記で紹介した通り、リンクテキストや画像、ボックスなども挿入が可能です。

THE THOR タイムラインのデザインサンプル52選

それでは私たちが作ったおしゃれなタイムライン(ステップフロー)のデザインを紹介していきます!

気に入ったデザインがあればコピペしてご利用ください。

※「CSSをコピペ」のボタンをクリックするとデザインの CSSが表示されます。

1. シンプル

シンプルタイムライン

タイトルや枠がなく、シンプルなデザインです。
必要最低限のデザインですね。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
display: none;
width:0;
height:0;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #555;
}
.content .timeline-item:last-of-type:before {
background: #555;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #555;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

2. シンプル(ピンク)

シンプルタイムライン(ピンク)

シンプルデザインのピンクバージョンです。
女の子に人気のデザインです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
display: none;
width:0;
height:0;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#f0908d;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #f4b3c2;
}
.content .timeline-item:last-of-type:before {
background: #f4b3c2;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #f4b3c2;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#e8d3c7;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

3. シンプル(ブルー)

シンプルタイムライン(ブルー)

シンプルデザインのブルーバージョンです。
Webっぽいデザインですね。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
display: none;
width:0;
height:0;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#9ea1a3;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #e7e7eb;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

4.シンプル(イエロー)

シンプルタイムライン(イエロー)

シンプルデザインのイエローバージョンです。
少しカジュアルになりました。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5de;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
display: none;
width:0;
height:0;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#9ea1a3;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #ffcc66;
}
.content .timeline-item:last-of-type:before {
background: #ffcc66;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #ffcc66;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #c0c6c9;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

5. シンプル(枠あり)

シンプルタイムライン(枠あり)

シンプルデザインに枠を付けました。
一番使い勝手が良さそうです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 3px gray;
background:#fcfcfc;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#afafb0;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #555555;
}
.content .timeline-item:last-of-type:before {
background: #555555;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #555555;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

6. シンプル(枠あり・ピンク)

シンプルタイムライン(枠あり)

シンプルデザイン枠ありのピンクです。
女の子のブログに合いそうです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 3px #e8d3c7;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #f4b3c2;
}
.content .timeline-item:last-of-type:before {
background: #f4b3c2;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #f4b3c2;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #e8d3c7;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

7. シンプル(枠あり・ブルー)

シンプルタイムライン(枠あり)

シンプルデザイン枠ありのブルーです。
こちらも使いやすそうですね。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 3px #bbc8e6;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

8. シンプル(枠あり・イエロー)

シンプルタイムライン(枠あり)

シンプルデザインのイエローです。
カジュアルなブログにぴったりですね。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 3px #fddea5;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #ffcc66;
}
.content .timeline-item:last-of-type:before {
background: #ffcc66;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #ffcc66;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

9. シンプル(枠あり・角丸)

シンプルタイムライン(枠あり・角丸)

シンプルデザイン枠ありの角を丸くしてみました。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 4px #afafb0;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#afafb0;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #555555;
}
.content .timeline-item:last-of-type:before {
background: #555555;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #555555;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

10. シンプル(枠あり・角丸・ピンク)

シンプルタイムライン(枠あり・角丸)

シンプルデザイン角丸のピンクです。
こっちの方が可愛さが出てますね。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 4px #e8d3c7;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #f4b3c2;
}
.content .timeline-item:last-of-type:before {
background: #f4b3c2;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #f4b3c2;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #e8d3c7;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

11. シンプル(枠あり・角丸・ブルー)

シンプルタイムライン(枠あり・角丸)

シンプル角丸のブルーです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 4px #bbc8e6;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

12. シンプル(枠あり・角丸・イエロー)

シンプルタイムライン(枠あり・角丸)

シンプル角丸のイエローです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 4px #fddea5;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #ffcc66;
}
.content .timeline-item:last-of-type:before {
background: #ffcc66;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #ffcc66;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

13. シンプル(破線)

シンプルタイムライン(破線)

ボックスを破線にして、線を太くすることによりカジュアルなデザインになりました。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:dashed 4px #fcd69e;
border-radius: 10px;
background: #fffff9;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#afafb0;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #f89174;
}
.content .timeline-item:last-of-type:before {
background: #f89174;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #f89174;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

14. シンプル(点線)

シンプルタイムライン(点線)

ボックスの線をドット(dotted)にすることにより、可愛さが出ましたね。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:dotted 5px #bbc8e6;
border-radius: 10px;
background:#f7fcfe;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#f19072;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #0268b7;
}
.content .timeline-item:last-of-type:before {
background:#0268b7;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #0268b7;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

15. シンプル(二重線)

シンプルタイムライン(二重線)

枠線を二重線にすることにより少しクールで知的な感じになりました。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:double 5px #668ad8;
background:#f1f8ff;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#668ad8;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #668ad8;
}
.content .timeline-item:last-of-type:before {
background:#668ad8;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #668ad8;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

16. 上下ボーダー

シンプルタイムライン(上下ボーダー)

上下にボーダーを設置して、クールな印象のデザインにしました。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border-top:solid #1e366a 3px;
border-bottom:solid #1e366a 3px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#1e366a ;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#1e366a ;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#1e366a ;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #1e366a ;
}
.content .timeline-item:last-of-type:before {
background:#1e366a ;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #1e366a ;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

17.左右ボーダー

シンプルタイムライン(左右ボーダー)

左右ボーダーで二重線にしてみました。
少しカジュアルになりました。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #93b69c;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border-right:double #93b69c 5px;
border-left:double #93b69c 5px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#93b69c ;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #93b69c ;
}
.content .timeline-item:last-of-type:before {
background:#93b69c ;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #93b69c ;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

18. 左のみボーダー

シンプルタイムライン(左線のみ)

ブログの見出しデザインをモチーフにしました。
こちらも見やすいですね!

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border-left:solid #f8b500 5px;
background:#f7f7f7;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #555555;
}
.content .timeline-item:last-of-type:before {
background:#555555;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #555555;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

19. クール

クールなタイムライン

タイムラインの枠線を点線(dotted)にして、全体をスッキリした印象にまとめてみました。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:dotted 1px #1e366a;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#1e366a;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#1e366a;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #1e366a;
}
.content .timeline-item:last-of-type:before {
background:#1e366a;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #1e366a;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#1e366a;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

20. シャドーボックス

シャドーボックスタイムライン

ボックスシャドーを付けることで、タイムラインが見やすくなりましたね。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
box-shadow :0px 0px 5px silver;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#1e366a;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#1e366a;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #1e366a;
}
.content .timeline-item:last-of-type:before {
background:#1e366a;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #1e366a;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#1e366a;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

21. ステッチ風

タイムライン(ステッチ風)

ステッチ風の可愛いデザインです。shadowを使ってステッチを再現してます。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
background: #fffde8;
box-shadow: 0px 0px 0px 10px #fffde8;
border: dashed 3px #ffb03f;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#ffb03f;
}
.content .timeline-item:last-of-type:before {
background:#ffb03f;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #ffb03f;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#e0e0e0;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

22. ステッチ風(ブルー)

タイムライン(ステッチ風)

上記のブルーバージョンです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
background:#f1f8ff;
box-shadow: 0px 0px 0px 10px #f1f8ff;
border: dashed 3px #668ad8;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#668ad8;
}
.content .timeline-item:last-of-type:before {
background:#668ad8;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #668ad8;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#e0e0e0;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

23. ステッチ風(ピンク)

タイムライン(ステッチ風)

ステッチ風のピンクバージョンです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
background:#fef4f4;
box-shadow: 0px 0px 0px 10px #fef4f4;
border: dashed 3px #d6c6af;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#d6c6af;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#d6c6af;
}
.content .timeline-item:last-of-type:before {
background:#d6c6af;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #d6c6af;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#e0e0e0;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

24. 四角タイムライン

タイムライン(四角)

「●」の部分の縦と横の長さを 0にして四角にしました。少し雰囲気が変わりますね!

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#4865b2;
}
.content .timeline-item:last-of-type:before {
background:#4865b2;
}
.content .timeline-item:before {
content: '';
width: 15px;
height: 15px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border: solid 4px #4865b2;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#e0e0e0;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

25. 四角タイムライン(枠あり)

タイムライン(四角)

四角のデザインに枠(border)を付けました。
この方がタイムラインが見やすいです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border: solid 3px #f08300;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#f08300;
}
.content .timeline-item:last-of-type:before {
background:#f08300;
}
.content .timeline-item:before {
content: '';
width: 15px;
height: 15px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border: solid 4px #f08300;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#e0e0e0;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

26. 四角タイムライン(角丸)

タイムライン(四角)

四角デザインの枠を角丸(border-radius)にしてみました。
やや四角とバランスが悪い気もしますね。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border: solid 4px #ffcc66;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#ffcc66;
}
.content .timeline-item:last-of-type:before {
background:#ffcc66;
}
.content .timeline-item:before {
content: '';
width: 15px;
height: 15px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border: solid 4px #ffcc66;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#e0e0e0;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

27. 四角タイムライン(枠あり・角丸・影)

タイムライン(四角)

上記のデザインにさらに影(shadow)を付けました。これは見やすいデザインですね。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border: solid 3px #777777;
border-radius: 10px;
box-shadow :0px 0px 5px silver;
background:#fffcf4;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#ffcc66;
}
.content .timeline-item:last-of-type:before {
background:#ffcc66;
}
.content .timeline-item:before {
content: '';
width: 15px;
height: 15px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border: solid 4px #ffcc66;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#e0e0e0;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

28. SANGO風

タイムライン(SANGO風) サルワカ

WordPressの有料テーマ SANGOのデザインを再現しました。さすがサルワカさんのデザイン、見やすさとオシャレさは抜群ですね!

→サルワカさんのサイトを見る

タイトルの背景(background)に色を入れてます。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #c0c0c0;
color: #505050;
}
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
background:#fffbf4;
}
/*ボックス*/
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
border-bottom: 3px solid #f89174;
padding: 10px 0;
background-color: #f89174;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 18px;
margin-left: 1.4em;
color:#90969a;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#333;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

29. SANGO風(イエロー)

タイムライン(SANGO風) サルワカ

SANGO風デザインの黄色バージョンです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #c0c0c0;
color: #505050;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
background:#fffbf4;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
border-bottom: 3px solid #fcd69e;
padding: 10px 0;
background-color: #fcd69e;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 18px;
margin-left: 1.4em;
color:#90969a;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#333;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

30. SANGO風(ブルー)

タイムライン(SANGO風) サルワカ

SANGO風タイムラインのブルーです。一番見るデザインかもしれません。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #c0c0c0;
color: #505050;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
background:#fffbf4;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
border-bottom: 3px solid #6bb6ff;
padding: 10px 0;
background-color: #6bb6ff;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 18px;
margin-left: 1.4em;
color:#90969a;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#333;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

31. SANGO風(角丸)

タイムライン(SANGO風) サルワカ

こちらも SANGOのデザインを参考にしました。border-radiusを使って角丸にしてます。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #f89174;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
border-bottom: 3px solid #f89174;
padding:10px;
margin-right:-1px;
background-color: #f89174;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

32. SANGO風(角丸・イエロー)

タイムライン(SANGO風) サルワカ

上記のデザインのイエローバージョンです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #fcd69e;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
border-bottom: 3px solid #fcd69e;
padding:10px;
margin-right:-1px;
background-color: #fcd69e;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

33. SANGO風(角丸・ブルー)

タイムライン(SANGO風) サルワカ

上記のデザインのブルーバージョンです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #6bb6ff;
border-radius: 10px;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
border-bottom: 3px solid #6bb6ff;
padding:10px;
margin-right:-1px;
background-color: #6bb6ff;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

34. SANGO風(影あり)

タイムライン(SANGO風) サルワカ

SANGO風で一番見るデザインです。私たちのブログでも採用してるデザインで、とても使い勝手が良いです!

他の色も紹介しようか迷ったんですが、これ一択で良いだろう!と思うくらいハイセンスなデザインでしたので、この色のみ紹介することにしました。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #c0c0c0;
color: #505050;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
background:#fffbf4;
box-shadow:0 2px 4px rgb(0 0 0 / 15%);
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
border-bottom: 3px solid #6bb6ff;
padding: 10px 0;
background-color: #6bb6ff;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 18px;
margin-left: 1.4em;
color:#90969a;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#333;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

35. SANGO風(枠あり・角丸・影あり)

タイムライン(SANGO風) サルワカ

SANGO風デザインの角丸バージョンです。border-radiusを使って角を丸くしてます。

これも見やすくオシャレですね!

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #f89174;
border-radius: 10px;
box-shadow:0 2px 4px rgb(0 0 0 / 15%);
background:#fffbf4;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
padding:10px;
margin-right:-1px;
background-color: #f89174;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

36. SANGO風(枠あり・角丸・影あり・イエロー)

タイムライン(SANGO風) サルワカ

上記のデザインのイエローバージョンです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #fcd69e;
border-radius: 10px;
box-shadow:0 2px 4px rgb(0 0 0 / 15%);
background:#fffbf4;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
padding:10px;
margin-right:-1px;
background-color: #fcd69e;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

37. SANGO風(角丸・影あり・ブルー)

タイムライン(SANGO風) サルワカ

上記のデザインのブルーバージョンです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #6bb6ff;
border-radius: 10px;
box-shadow:0 2px 4px rgb(0 0 0 / 15%);
background:#fffbf4;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
padding:10px;
margin-right:-1px;
background-color: #6bb6ff;
color: #ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

38. SANGO風(枠あり)

タイムライン(SANGO風) サルワカ

サルワカさんが使っているデザインです。薄いグレーに赤をポイントで入れてます。

超絶オシャレですね!

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #f1efec;
background:#fffbf4;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
padding:10px;
margin-right:-1px;
background-color: #f1efec;
color: #333333;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#f89174;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#f89174;
}
.content .timeline-item:last-of-type:before {
background:#f89174;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #f89174;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

39. SANGO風(枠あり・ブルー)

タイムライン(SANGO風) サルワカ

上記のデザインのブルーバージョンです。

色を少し淡くすることにより、マテリアルデザインやパステルカラーのブログに合いそうです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #c1e4e9;
background:#fffbf4;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
padding:10px;
margin-right:-1px;
background-color:#c1e4e9;
color: #333333;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#f89174;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#f89174;
}
.content .timeline-item:last-of-type:before {
background:#f89174;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #f89174;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

40. SANGO風(枠あり・イエロー)

タイムライン(SANGO風) サルワカ

上記のデザインのイエローバージョンです。

逆にパキッとしたビビッドデザインのブログ向けです。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #ffcc66;
background:#fffbf4;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
padding:10px;
margin-right:-1px;
background-color:#ffcc66;
color: #333333;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#f89174;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#f89174;
}
.content .timeline-item:last-of-type:before {
background:#f89174;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #f89174;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

41. SANGO風(枠あり・影あり)

タイムライン(SANGO風) サルワカ

上記のデザインに影(shadow)を付けてみました。

こちらも見やすいデザインですね!

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: 3px solid #cee4ae;
background:#fffbf4;
box-shadow:0 2px 4px rgb(0 0 0 / 15%);
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
padding:10px;
margin-right:-1px;
background-color:#cee4ae;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#f89174;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#f89174;
}
.content .timeline-item:last-of-type:before {
background:#f89174;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #f89174;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

42. AFFINGER5風

タイムライン(AFFINGER5風)

WordPressの有料テーマ AFFINGER5のタイムラインを参考にしました。

→AFFINGER5の公式ページを見る

シンプルですが、始めと終わりがわかりやすいデザインです。

上下の●の大きさ(width,height)を調節してます。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
padding:10px;
margin-right:-1px;
color:#555555;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#ff6347;
border: solid 3px #ff6347;
width:20px;
height:20px;
}
.content .timeline-item:last-of-type:before {
background:#ff6347;
border: solid 3px #ff6347;
width:20px;
height:20px;
}
.content .timeline-item:before {
content: '';
width:20px;
height: 20px;
background:#8ad3fb;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50%;
border: solid 3px #8ad3fb;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 2px;
background: #8ad3fb;
display: block;
position: absolute;
top:17px;
bottom:0px;
left: 7.8px;
}

43. THE THORのデフォルト風

タイムライン(THE THORのデフォルト風)

THE THOR(ザ・トール)のデフォルトっぽいデザインにしてみました。

THE THORユーザーさんは分かると思いますが、モチーフは地味で有名な目次のデザインです笑

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:1px dotted #D8D8D8;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#7f7f7f;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #333333;
}
.content .timeline-item:last-of-type:before {
background: #333333;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #333333;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#f2f2f2;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

44. Twitterナイトモード風

タイムライン(Twitterのナイトモード風)

Twitterのナイトモードのデザインをイメージしてます。

カラーバランスが読者の目に優しく、「見たことある!」と言う遊び心を出してみました。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: solid 1px rgb(47, 51, 54);
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
background:black;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#ffffff;
background:#1da1f2;
padding:10px;

}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
color:#d9d9d9;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#6e767d;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#d9d9d9;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background:#1da1f2;
}
.content .timeline-item:last-of-type:before {
background:#1da1f2;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: black;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #1da1f2;;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#6e767d;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

45. Googleマップ風

タイムライン(Googleマップ風)

Googleマップのタイムラインをモチーフにしました。

手順を紹介すると言うより、時系列でスケジュールを紹介する時などに重宝しそうです。

 CSSをコピペ
/*タイムライン*/
.timeline-box {
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 16px 5px;
box-sizing: border-box;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0;
margin: 0;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0;
position: relative;
}
/*ラベル*/
.timeline-item-label {
width: 110px;
float: left;
font-weight:bold;
text-align: right;
padding-right: 1em;
font-size: 14px;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-weight: bold;
}
.timeline-item-content {
width: calc(100% - 110px);
float: left;
padding: .8em 1.4em;
padding-top:0px;
border-left: 5px #4285F4 solid;
}
.timeline-item:before {
content: '';
width: 15px;
height: 15px;
background: #ffffff;
border:solid 3px #333333;
position: absolute;
left: 105px;
top: 24px;
border-radius: 100%;
}

/* for Smartphone */
@media screen and (max-width: 480px) {
.timeline-box .timeline {
padding-left: 10px;
}
.timeline > li.timeline-item {
overflow: visible;
border-left: 3px #e5e5d1 solid;
}
.timeline-item-label {
width: auto;
float: none;
text-align: left;
padding-left: 16px;
}
.timeline-item-content {
width: auto;
padding: 8px;
float: none;
border: none;
}
.timeline-item:before {
top: 19px;
width: 21px;
height: 21px;
}
}
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
}
.content .timeline-item-snippet {
margin-top:0;
}
/* for PC */
@media screen and (min-width: 481px) {
.timeline-box ul > li:before {
left:105px;
}
}
/* for Smartphone */
@media screen and (max-width: 480px) {
.timeline-box ul > li:before {
left:-12px;
}
}

46. manablog風

タイムライン(manablog風)

誰もが知るブロガー界のインフルエンサー manablogさんのデザインをイメージしてます。

ミニマリストっぽいデザインが使いやすさ抜群ですね!

→manablogさんのサイトを見る

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #e0e0e0;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:dashed 1px #4865b2;
background:#f8f9ff;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color:#333333;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#333333;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #333333;
}
.content .timeline-item:last-of-type:before {
background:#333333;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #555555;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

47. クール&シンプル

オシャレなタイムライン

シンプルかつオシャレなデザインです。タイトルの下にボーダー(border-bottom)をつけ、さらに点線(dotted)にしてます。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #c0c0c0;
color:gray;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
background:#fffff9;
border: solid 2px #dcdddd;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
border-bottom: 3px dotted #dcdddd;
padding: 10px;
color:#6bb6ff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 18px;
margin-left: 1.4em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:gray;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:last-of-type:before {
background: #6bb6ff;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

48. クール&カジュアル

オシャレなタイムライン

少し高度なデザインです。

タイトルの左にアイコンを設置、ボーダー(border-bottom)を付けてます。

さらに●をチェックアイコンに変更してます。

アイコンは Font Awesomeを使ってますので、変更したい場合はこの後に紹介する Font Awesomeの使い方をご覧ください。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dotted 3px #c0c0c0;
color:#555555;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
background:#fffff9;
border: solid 3px #dcdddd;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
padding: 15px;
color:#555555;
}
/*タイトル前のアイコン*/
.timeline-title:before{
font-family: "FontAwesome";
content:"\f15c";
margin-right:5px;
}
.timeline-title:after {
border-bottom: solid 3px #555555;
width:50%;
margin-right:auto;
margin-left:auto;
margin-top:5px;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 18px;
margin-left: 1.4em;
color:gray;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#555555;
}
/*●部分*/
.content .timeline-item:before {
position: absolute;
left: 0;
top: 7px;
font-family: "icomoon";/*Icomoon*/
content: "\ea53";/*アイコン*/
color: #6bb6ff;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 4px;
background: #dddcd6;
display: block;
position: absolute;
top: 40px;
bottom: 0px;
left: .4em;
}

※このカスタマイズでは Font Awesomeのアイコンを使用しています。デザインを利用したい場合は以下で紹介している Font Awesomeの設定をしてからご使用ください。

49. MASAa.net風

MASAa.net風タイムライン

私たちが THE THOR(ザ・トール)のデザインカスタマイズで常に参考にさせていただいてる MASAa.netさんのデザインをモチーフにしてます。

かなりオシャレなデザインです。実はかなり高度なカスタマイズだったりするので一番気に入ってます。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dotted 2px #ff7abc;
color:#555555;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
box-sizing: border-box;
border: solid 3px #ff7abc;
border-radius:15px;
padding-top:10px;
background: linear-gradient(to bottom right, #ffdbed 70%, #ffffff);
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-size: 1.1em;
text-align: center;
padding:10px;
color:#ffffff;
font-weight:bold;
margin:25px;
border: solid 3px #ff7abc;
border-radius:50px;
background: linear-gradient(to right , #ffffff , #ff93c9, #ffffff);
}
/*タイトル前のアイコン*/
.timeline-title:before{
font-family: "icomoon";
content:"\e9c1";
margin-right:5px;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 13px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 18px;
margin-left: 1.4em;
color:#ff7abc;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
color:#333333;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #ff7abc;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #ff7abc;
}
.content .timeline-item:last-of-type:before {
background: #ff7abc;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #dddcd6;
display: block;
position: absolute;
top: 40px;
bottom: 0px;
left: .3em;
}

MASAa.netさんではとても役に立つ THE THOR(ザ・トール)のカスタマイズを多く紹介されています。大半がコピペだけで OKなので、初心者の方でもぜひ参考にしてください。

※ちなみに私たちは MASAa.netさんでカスタマイズの勉強をさせていただいてます。

MASAa.net

WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト…

50. アイコン付き

アイコンありタイムライン

タイトルの左とボックスの右下に Font Awesomeのアイコンを設置しました。

かなりオシャレなタイムライン(ステップフロー)になったと思います。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: dashed 1px #93b69c;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 3px #93b69c;
background:#fffff9;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-bottom:2rem;
color: #505050;
}
/*タイトル前のアイコン*/
.timeline-title:before{
content: "\e92f";
font-family: "icomoon";
margin-right:5px;
color:#93b69c;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
color:#afafb0;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #93b69c;
}
.content .timeline-item:last-of-type:before {
background: #93b69c;
}
.content .timeline-item:last-of-type:after{
content: "\f212";
position: absolute;
font-family: "FontAwesome";
left:80%;
font-size: 6em;
opacity: 0.1;
}
@media screen and (max-width : 480px){
.content .timeline-item:last-of-type:after{
content: "\f212";
position: absolute;
font-family: "FontAwesome";
left:63%;
font-size: 5em;
opacity: 0.1;
}
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 3px #93b69c;
}

.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background:#ccd5dd;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

※このカスタマイズでは Font Awesomeのアイコンを使用しています。デザインを利用したい場合は以下で紹介している Font Awesomeの設定をしてからご使用ください。

51. 背景ありラベル

ラベル強調タイムライン

ラベルに背景(background)を付けてわかりやすい表にしました。意外と一番使いやすいかもですね!

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
border-bottom: solid 1px #ccd5db;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border:solid 3px #fddea5;
border-radius:15px 15px 0 0;
background:#fffff9;
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align:center;
margin-bottom:2rem;
border-bottom:solid 3px #fddea5;
padding-bottom:10px;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
display:inline-block;
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
background:#ffcc66;
padding:5px;
margin-bottom:5px;
border-radius:10px;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #ffcc66;
}
.content .timeline-item:last-of-type:before {
background: #ffcc66;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #ffcc66;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: #ccd5db;
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

52.グラデーション

グラデーションタイムライン

ボックスをグラデーションで色つけしました。background: linear-gradient(#ffcc66 1px, #ffffff);の部分のカラーコードを希望の色にして使用してください。

 CSSをコピペ
/*タイムライン*/
.timeline-box ul > li:before {
content: "";
}
.partsUl-1 .timeline-box ul {
background-color: transparent;
}
.timeline > li.timeline-item {
padding-left: 0;
}
.content .timeline-item-content {
margin-top:0;
margin-left: 5px;
padding: 0 0 1.5em 1.1em;
width: 95%;
}
.content .timeline-item-snippet {
margin-top: .5em;
padding: 0 0 1.5em;
}
/*ボックス*/
.timeline-box {
margin-bottom: 20px;
padding-top: 10px;
box-sizing: border-box;
border-radius:15px 15px 0 0;
background: linear-gradient(#ffcc66 1px, #ffffff);
}
.timeline-box *{
box-sizing: border-box;
}
.timeline-box .timeline {
list-style: none;
padding: 0 0 6px 0;
margin: 0;
}
.content .timeline ul {
margin-bottom: 20px;
}
/*タイトル*/
.timeline-title {
font-weight: bold;
font-size: 1.1em;
text-align:center;
margin-bottom:2rem;
padding-bottom:10px;
color:#ffffff;
}
.timeline > li {
margin-bottom: 60px;
}
.timeline > li.timeline-item {
overflow: hidden;
margin: 0 0 0 10px;
position: relative;
}
/*ラベル*/
.timeline-item-label {
padding-top: 2px;
font-weight: 700;
font-size: 14px;
margin-left: 1.8em;
background: linear-gradient(to right ,#ffcc66, #ffffff);
padding:5px;
margin-bottom:5px;
}
@media screen and (max-width : 480px){
.timeline-item-label {
font-size:16px;
}
}
/*見出し*/
.timeline-item-title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.5;
}
/*●部分*/
.content .timeline-item:first-of-type:before {
background: #555555;
}
.content .timeline-item:last-of-type:before {
background: #555555;
}
.content .timeline-item:before {
content: '';
width: 14px;
height: 14px;
background: #ffffff;
position: absolute;
left: 0;
top: 7px;
border-radius: 50%;
border: solid 2px #555555;
}
.content .timeline-item:last-of-type:after {
background: 0 0;
}
/*縦線*/
.content .timeline-item:after {
content: "";
width: 3px;
background: linear-gradient(blue, pink);
display: block;
position: absolute;
top: 25px;
bottom: 0;
left: 5px;
}

Font Awesomeを設定する手順

Font Awesomeの設定

Font Awesomeは、数多くのウェブアイコンを扱う Webサイトです。
無料、有料ありますが、無料のアイコンで十分です。

→Font Awesome5

今回 Font Awesomeのアイコンを使用するので少し準備をする必要があります。っと言ってもコードをコピペするだけなのでカンタンです。

手順1:以下のコードをコピー

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

あなたのサイトで Font Awesomeを反映させるためのコードです。

手順2:headタグ内に貼り付け

THE THORheadタグに貼り付け
外観 → 基本設定[THE] → 高度な設定

コピーしたコードを THE THOR(ザ・トール)の</head>タグ直上に貼り付けます。

以上で準備は完了です。

Font Awesomeの使い方を簡単に説明

Font Awesomeの使い方を簡単に説明しますね!

まずアイコンを表示するには、アイコンコードと言うものを使っています。

\f015 ←これがアイコンコードです。

このアイコンコードを変更したい CSSの箇所に入力して使います。

例えば、今回で言うと以下の部分です。

.content .timeline-item:last-of-type:after{
position: absolute;
font-family: “FontAwesome”;
content: “\f212”;

left:80%;
font-size: 6em;
opacity: 0.1;
}

上記のように、font-familiy:”FontAwesome”;と合わせて使います。

※アイコンコードの前に必ずバックスラッシュ( \ )を付けてください。そうじゃないとアイコンが反映されません。

Font Awesomeのアイコンを使う手順は以下の通りです。

1. サイト上部の「Icons」からアイコンを選ぶ
2. そのアイコン画面からコードをコピペ

Font Awesomeのアイコンコード

あとは希望の部分にアイコンコードを貼り付けて完了です。

続いてタイムラインの色をカスタマイズする方法を解説していきますね!

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

タイムライン(ステップフロー)の色を変更する方法を解説していきます。

各デザインテンプレートによって多少 編集する部分は変わってますが、やり方は基本的に同じです!

CSSの色を変える方法

デザインの色を変更するには、カラーコード(#)を変更します。

#000000となってる #プラス 6桁の番号がカラーコードです。

例えば、以下のコードだと #555555がカラーコードですね。

background: #555555;

カラーコード以外にも、「gray,red,blue」など、単色なら英語表示で設定することもできます。

例) background: red;

カラーコードを知りたい場合は原色大辞典がとても分かりやすく、見てて楽しいのでオススメです。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

フォントの色を変更する

文字の色を変更したい場合は、以下の CSSを編集してください。

color:;

colorはフォントのカラーを示しています。ここに希望のカラーコードを入れて文字の色を変えてお楽しみください。

例) color: #555555;

背景の色を変更する

ボックスやタイトルの背景を変更したい場合は、以下の CSSを編集してください。

background:;

backgroundは文字通り、背景を意味します。ボックスの背景の色を変更したい場合は background内のカラーコードを変えてください。

例) background: #555555;

枠線の色を変更する

枠線の色を変更したい場合は、以下の CSSを編集します。

border:;

borderを使用する場合は、カラーコードだけではありません。このコード内には、「線の種類、線の太さ、カラーコード」の 3つを書き加える必要があります。

■ 線の種類

  • solid:一本線
  • double:二重線
  • dashed:破線
  • dotted:点線

他にもいくつかありますが基本的には上記で十分です。

■ 線の太さ

線の太さは数字+pxで示します。

例) 5px

数字が大きいほど線が太くなりますが、太くても 5pxがマックスかなと思います。それ以上太くするとタイムラインより枠線が目立ちます。

上記のことを踏まえた CSSの書き方の例は以下の通りです。

例) border: solid 3px #555555;

上記だと、一本線太さは 3px、カラーは濃いグレーと言う枠線になります。

THE THORでタイムライン(ステップフロー)を作るカスタマイズ:まとめ

今回は THE THOR(ザ・トール)でタイムライン(ステップフロー)を作るカスタマイズを紹介しました。

最後に作り方をおさらいしておきましょう。

タイムラインを作る手順
  • STEP1
    functions.phpを編集する
    THE THOR(ザ・トール)でタイムラインを実装させるコードを functions.phpに貼り付けます。
  • STEP2
    CSSをコピペする
    タイムラインのデザインを整える CSSを THE THORの「追加CSS」にコピペします。
  • STEP3
    HTMLをコピペ
    HTMLコードを記事内の好きな場所に設置してタイムラインを使用します。

タイムラインは旅行のスケジュールや、手順などを紹介する時にとても役に立ちます。それが残念ながら THE THOR(ザ・トール)にはデフォルトで搭載されていません。

今回のカスタマイズでより読みやすい、オシャレなブログを作ってくださいね!

他にも THE THOR(ザ・トール)に関するカスタマイズを紹介してるので読んでみてください♪

何か質問やカスタマイズの要望があればぜひご連絡ください。お便り待ってます♪

Twitterで問い合わせる

最後まで読んでいただきありがとうございます。

おわり