【Cocoon】レスポンシブ対応のタイムラインをカスタマイズ！

#timeline {
    list-style: none;
    margin: 50px 0 30px 120px;
    padding-left: 30px;
    border-left: 8px solid #FFC679;
}
#timeline li {
    margin: 40px 0;
    position: relative !important;
}
#timeline p {
    margin: 0 0 15px;
}
#timeline .date {
    margin-top: -10px;
    top: 50%;
    left: -158px;
    font-size: 0.95em;
    line-height: 20px;
    position: absolute;
}
#timeline .circle {
    margin-top: -10px;
    top: 50%;
    left: -44px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 5px solid #FFC679;
    border-radius: 50%;
    display: block;
    position: absolute;
}
#timeline .content {
    max-height: 20px;
    padding: 50px 20px 0;
    border-color: transparent;
}
#timeline .content:before {
    content: "";
    width: 0;
    height: 0;
    border: solid transparent;
    position: absolute;
    pointer-events: none;
    right: 100%;

    border-right-color: inherit;
    border-width: 20px;
    top: 50%;
    margin-top: -20px;
}
#timeline .content:after {
    content: "";
    width: 0;
    height: 0;
    border: solid transparent;
    position: absolute;
    pointer-events: none;
    right: 100%;

    border-right-color: #ffffff;
    border-width: 17px;
    top: 50%;
    margin-top: -17px;
}
#timeline .content p, #timeline .content p a{
    max-height: 0;
    color: transparent;
    text-align: justify;
    word-break: normal;
    hyphens: auto;
    overflow: hidden;
}
#timeline .content img{
    opacity:0;
    max-width: 0;
}
#timeline label {
    font-size: 1.3em;
    position: absolute;
    z-index: 0;
    cursor: pointer;
    top: 8px;
    transition: transform 0.2s linear;
    max-width:600px;
}
#timeline .radio {
    display: none;
}
#timeline .radio:checked + .relative label {
    cursor: auto;
    transform: translateX(42px);
    padding-top: 10px;
}
#timeline .radio:checked + .relative .circle {
    background: #f98262;
}
#timeline .radio:checked ~ .content {
    max-height: 1000px;
    border: solid #FFC679;
    border-radius: 10px;
    margin-right: 20px;
    transform: translateX(20px);
    transition: max-height 1.5s linear, border-color 0.5s linear, transform 0.3s linear;
}
#timeline .radio:checked ~ .content p {
    max-height: 1000px;
    color: #000000;
    transition: color 0.3s linear 0.3s;
    padding-top:10px;
}
#timeline .radio:checked ~ .content a {
    color: #FFC679;
    transition: color 0.3s linear 0.3s;
}
#timeline .radio:checked ~ .content img {
    opacity:1;
    width: 100%;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-in 0.5s;
}

@media screen and (max-width: 480px){
	#timeline {
		margin: 50px 0 30px 90px;
		padding-left: 10px;
	}
	#timeline li {
		margin: 40px 0 40px 25px;
	}
	#timeline .date {
		left: -126px;
		font-size: 0.65em;
	}
	#timeline .circle {
		left: -49px;
	}
	#timeline label {
		font-size: 0.9em;
		font-weight:700;
	}
	#timeline .radio:checked + .relative label {
		transform: translateX(22px);
	}
	#timeline .radio:checked ~ .content {
		font-size: 0.7em;
		transform: translateX(0px);
		transition: max-height 0.8s linear, border-color 1.0s linear, transform 0.4s linear;
		margin-right: 5px;
	}
	#timeline .radio:checked ~ .content p, #timeline .radio:checked ~ .content p * {
		transition: color 0.4s linear 0.4s;
	}
}
@media screen and (max-width: 380px){
	#timeline label {
		font-size: 0.7em;
	}
}
.wp-caption {
    border: 1px solid #ffffff;
    background-color: #ffffff;
}

//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;

//レスポンシブ対応タイムラインショートコード
add_shortcode('r_timeline', 'tl_shortcode');
if ( !function_exists( 'tl_shortcode' ) ):
  function tl_shortcode( $atts, $content = null ){
  $content = remove_wrap_shortcode_wpautop('ti', $content);
  $content = do_shortcode( shortcode_unautop( $content ) );
  $tag .= '<ul id="timeline">'.
            $content.
          '</ul>';
  return apply_filters('timeline_tag', $tag);
}
endif;
 
//レスポンシブ対応タイムラインショートコード中身
add_shortcode('ti', 'tl_item_shortcode');
if ( !function_exists( 'tl_item_shortcode' ) ):
function tl_item_shortcode( $atts, $content = null ){
  extract( shortcode_atts( array(
    'date' => null,
    'label' => null,
	'null' => null,
  ), $atts ) );
  $content = do_shortcode( shortcode_unautop( $content ) );
  $tag .= '<li>'.
            '<input class="radio" id="work1" name="works" type="radio">'.
            '<div class="relative">' .
              '<label for="work1">' . $label . '</label>' .
              '<span class="date">' . $date . '</span>' .
              '<span class="circle">' . $null . '</span>' .
            '</div>' .
            '<div class="content">' . '<p>' . $content . '</p>' . '</div>'.
          '</li>';
  return apply_filters('timeline_item_tag', $tag);
}
endif;