【THE THOR】タイムラインボックス(ステップフロー)をショートコードで利用可能にするカスタマイズ

この記事では、PHPファイルを編集して【THE THOR】でショートコードからタイムラインボックス(ステップフロー機能)を利用可能にするカスタマイズ方法について掲載しています。

リンク先にある紹介サイトの配布CSSをそのまま使用すると、【THE THOR】固有のCSSの影響を受けるためレイアウトが崩れます。

それを調整した配布CSS(修正版)、SANGO風CSS(3種)、アレンジCSS(1種)の計5種類のCSSデザインを用意しました。
CSSデザインは、コピー&ペーストするだけで利用可能になっています。

 

この記事のカスタマイズではPHPファイルを編集します。
バックアップ等を行った上で、必ず子テーマのfunction.phpファイルを編集して下さい。

 

スポンサーリンク

function.phpファイルの編集

 

function.phpファイルの編集については、「寝ログ」を参考にさせていただきました。

 

上記サイトの手順通りにfunction.phpを編集すれば使用可能になります。
※【THE THOR】側で個別に編集等をする必要はありません。

 

カスタマイズデザインCSS(計5種)

【THE THOR】固有のレイアウト崩れを調整した配布CSS(修正版)、SANGO風CSS(3種)、アレンジCSS(1種)の計5種類を用意しました。
お好みのデザインCSSを【style-user.css】にコピー&ペーストして使用して下さい。
 

配布CSS(修正版)の表示サンプル

  • 配布CSSのレイアウト崩れのみ調整
  • 外枠あり

PC表示

タイムラインCSSサンプル

スマホ表示

タイムラインCSSスマホサンプル

 

配布CSS(修正版)のソースコード

  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;				
	padding-top: 18px;				
	text-align: right;				
	padding-right: 1em;				
	font-size: 14px;				
}							
.timeline-item-title {				
	font-weight: bold;				
}							
.timeline-item-content {				
	width: calc(100% - 110px);				
	float: left;				
	padding: .8em 1.4em;				
	border-left: 3px #e5e5d1 solid;				
}								
.timeline-item:before {				
	content: '';				
	width: 12px;				
	height: 12px;				
	background: #6fc173;				
	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;			
}				
}

 

SANGO風デザイン表示サンプル(その1)

  • 外枠なし
  • タイトル表示なし
    (表示エリアそのものを削除しています)
  • ラベル横の(丸)
    先頭と末尾が青の塗りつぶし、他は白抜き

SANGO風CSS01

PC・スマホ共に同じレイアウトになります。
タイトル欄にテキストを入力してもタイトルの内容は表示されません。

 

SANGO風デザイン(その1)の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 #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;
}	
.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;
}

 

SANGO風デザイン表示サンプル(その2)

  • 外枠なし
  • タイトル表示あり
  • ラベル横の(丸)
    先頭と末尾が青の塗りつぶし、他は白抜き

SANGO風CSS02

PC・スマホ共に同じレイアウトになります。

 

SANGO風デザイン(その2)の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 #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 {			
	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;
}	
.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;
}

 

SANGO風デザイン表示サンプル(その3)

  • 外枠なし
  • タイトル表示なし
    (表示エリアそのものを削除しています)
  • ラベル横の(丸)
    全部青の塗りつぶし

SANGO風CSS03

PC・スマホ共に同じレイアウトになります。
タイトル欄にテキストを入力してもタイトルの内容は表示されません。

 

SANGO風デザイン(その3)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 #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;
}	
.timeline-item-title {	
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.5;
}
.content .timeline-item:before {	
	content: '';
	width: 14px;
	height: 14px;
	background: #6bb6ff;
	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;
}

 

アレンジデザイン表示サンプル

  • 外枠あり
  • タイトル表示あり(カラー装飾付き)
  • ラベル横の(丸)
    先頭と末尾が青の塗りつぶし、他は白抜き

 

timelineCSSarrange

PC・スマホ共に同じレイアウトになります。

カラー変更を行う場合は、CSSにコメントを入れてありますので該当箇所を変更して使用して下さい。
ボーダー色を変更する場合は、タイトル下部分とボックス枠部分の2箇所を変更する必要があります。
 

アレンジデザインの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 #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 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: 14px;
	margin-left: 1.8em;
}	
.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;
}	

 

ショートコードの書式

 
タイムラインショートコードの書式

[timeline title="タイトル"]
   [ti label="ラベル" title="サブタイトル"]内容[/ti]
   [ti label="ラベル" title="サブタイトル"]内容[/ti]
   [ti label="ラベル" title="サブタイトル"]内容[/ti]
[/timeline]

 

項目を増やす場合は

[ti label="ラベル" title="サブタイトル"]内容[/ti]

を必要数分追加して下さい。

 

[ti label="" title="サブタイトル"][/ti]

上図のように最後の項目をサブタイトルのみ入力した場合の表示サンプルは、SANGO風デザイン表示サンプル(その1)になります。

 
 

タイムラインボックス使用例

 

アレンジデザイン表示サンプル

手作り餃子を作ろう!
  • Step.1
    あんを入れて包みます
     

    手作り餃子01

  • Step.2
    フライパンで焼きます
     

    手作り餃子02

  • Step.3
    手作り餃子の完成!

    手作り餃子03

 

※プラグイン等の有無など環境によっては同じには表示されない場合がありますのでご注意下さい。