wordpressロゴ
Blog運営

WordPressカスタマイズ! タイムラインを実装してみました!(HTMLとCSS)

mark
mark
こんにちは、Webマーケターのmark(@markbloggg)です。
この記事ではタイムラインの実装方法を備忘録として書きました。

完成版のプレビュー

  • STEP1
    タイトル1

    ここにテキストを入力

  • STEP2
    タイトル2
    ここにテキストここにテキストここにテキスト
  • STEP3
    タイトル3
    ここにテキストここにテキストここにテキスト
  • STEP4
    タイトル4
    ここにテキストここにテキストここにテキスト
  • STEP5
    タイトル5
    こにテキストここにテキストここにテこにテキストここにテキストここにテこにテキストここにテキストここにテこにテキストここにテキストここにテこにテキストここにテキストここにテパソコン学習

実装の下準備

STEP1:CSSをコピペする

/*********************************
* タイムライン
*********************************/
.ptimeline-wrap{
margin:0 auto 2rem;
}
.ptimeline-wrap .ptimeline{
padding:0 !important;
list-style:none !important;
}
.ptimeline-wrap .ptimeline-label {
padding: 3px 0 0 2px;
color: #aaa;
font-size: 14px;
font-weight: 500;
}
.ptimeline-wrap .ptimeline-title {
font-size: 1.5em;
font-weight: bold;
line-height: 1.8;
color:#0c0000;
}
.ptimeline-wrap .ptimeline-main {
margin-top: 0.5em;
padding: 0 0 1.5em;
font-size: 1.2em;
line-height: 1.8;
border-bottom: dashed 1px #ddd;
color:#555;
}
.ptimeline-wrap .ptimeline-main img{
display:block;
margin:1em auto;
}
.ptimeline-wrap .ptimeline-item {
position: relative;
padding: 0 0 1em 1.5em !important;
margin-bottom:0 !important;
border:none;
}
.ptimeline-wrap .ptimeline .ptimeline-item:before {
content: "";
width: 3px;
background: #eee !important;
display: block;
position: absolute;
top: 25px;
bottom: -3px;
left: 5px;
}
.ptimeline-wrap .ptimeline-item:last-child:before{
content:none;
}
/*********************************
* タイムライン マーカー
*********************************/
.ptimeline-wrap .ptimeline-marker{
display: block;
position: absolute;
content: "";
top: 6px;
left: 0;
width: 14px;
height: 14px;
border-radius: 50%;
border: solid 3px #0c0000;
}
.ptimeline-wrap .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .ptimeline-item:last-child .ptimeline-marker{
background:#0c0000;
}

 

STEP2:function.phpにコピペする

/*********************************
* タイムライン
*********************************/
.ptimeline-wrap{
margin:0 auto 2rem;
}
.ptimeline-wrap .ptimeline{
padding:0 !important;
list-style:none !important;
}
.ptimeline-wrap .ptimeline-label {
padding: 3px 0 0 2px;
color: #aaa;
font-size: 14px;
font-weight: 500;
}
.ptimeline-wrap .ptimeline-title {
font-size: 1.5em;
font-weight: bold;
line-height: 1.8;
color:#0c0000;
}
.ptimeline-wrap .ptimeline-main {
margin-top: 0.5em;
padding: 0 0 1.5em;
font-size: 1.2em;
line-height: 1.8;
border-bottom: dashed 1px #ddd;
color:#555;
}
.ptimeline-wrap .ptimeline-main img{
display:block;
margin:1em auto;
}
.ptimeline-wrap .ptimeline-item {
position: relative;
padding: 0 0 1em 1.5em !important;
margin-bottom:0 !important;
border:none;
}
.ptimeline-wrap .ptimeline .ptimeline-item:before {
content: "";
width: 3px;
background: #eee !important;
display: block;
position: absolute;
top: 25px;
bottom: -3px;
left: 5px;
}
.ptimeline-wrap .ptimeline-item:last-child:before{
content:none;
}
/*********************************
* タイムライン マーカー
*********************************/
.ptimeline-wrap .ptimeline-marker{
display: block;
position: absolute;
content: "";
top: 6px;
left: 0;
width: 14px;
height: 14px;
border-radius: 50%;
border: solid 3px #0c0000;
}
.ptimeline-wrap .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .ptimeline-item:last-child .ptimeline-marker{
background:#0c0000;
}

 

ショートコード

「[ p」全角スペースを削除して使用

[ ptimeline]
[ ti label="STEP1"title="タイトル1"]ここにテキスト[/ti]
[ ti label="STEP2" title="タイトル2"]ここにテキス[/ti]
[ ti label="STEP3" title="タイトル3"]ここにテキス[/ti]
[ ti label="STEP4" title="タイトル4"]ここにテキス[/ti]
[ ti label="STEP5" title="タイトル5"]ここにテキス[/ti]
[ /ptimeline]