こんにちは！米田賢太郎です。今日は、会社の歴史、だったり社史を作るのにぴったりなワードプレスプラグイン のCool Timelineをご紹介します。ダンススクールを２０１６年から運営してて、その時からの歴史をまとめれたらなーと思っていました。外部の人向けというよりは、自分が楽しむ感じで作りたかったのでCool Timelineは良さそうです。
Cool Timelineとは
最近は動画制作にはまっていてせっかくなので、実際にやっているところを録画してみました。
動画をみるのはめんどくさいという方もいるので、少し画像でも説明します。Cool Timelineはオフィシャルのサイトを見ればすぐわかるんですけど、タイムラインは、縦だったり、横だったり、いろいろなデザインのテンプレートが準備されています。ここがWEBサイトのタイトルです。僕は結構このサムネイルでプラグイン の良し悪しを判断してしまうんですけど、結構微妙じゃないですか？
デザインが日本人向けはない印象をぱっと見受けました。そして使ってみて、デモを見てもいまいちだったんですが、実は無料プランでもCSSを自由にいじれることがわかりました！！
CSSをいじる
ここに書いてあるように自由にCSSを追加できます。これがあればどんなサイトでも自分の思い通りにできますね。
タイムラインの設定には、新たにストーリーを投稿する必要があります。もし自分の今までのポストをタイムライン上で表示したい場合は、違うプラグイン をオススメします。僕みたいにエレメンターを利用している場合には、下の画像にあるように、Cool TimelineのElementor Timeline Widget Addonを入れるといいでしょう。
動画に写ってるCSSどうやったの？
ちなみに動画に写ってるようにするには下記のCSSを入れてください。
.ultimate-style .timeline-post .timeline-content .content-title:before {
border: 0px solid transparent;
}
.ultimate-style .timeline-post.even .timeline-content .content-title:before {
border: 0px solid transparent;
}
.cool-timeline .timeline-post .timeline-content {
box-shadow: 0 1px 2px rgba(0,0,0,.19);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.19);
}
.ultimate-style .timeline-post .timeline-content .content-title {
color: #000!important;
}
.cool-timeline.white-timeline .timeline-post .timeline-meta .meta-details, .ctl_road_map_wrp li.odd .ctl-story-year, .ctl_road_map_wrp li.odd .ctl-story-title, .ctl_road_map_wrp li.odd .ctl-story-title a, .ctl-popup-content h2 {
color: #545454!important;
}
.cool-timeline.white-timeline .timeline-post .icon-dot-full, .cool-timeline.one-sided.white-timeline .timeline-post .icon-dot-full {
background: #545454!important;
}
このCSS用のクラスとかどこで見つけたの？っていう方はぜひ、プログラミングのデバッグの仕方を覚えましょう！それでは、また！