ここあです。
私はブログテーマのカスタマイズ記事を中心に書いていることが多いのですが、
ブログのテーマ別に記事を書いていると、徐々にネタが尽きてきます（笑）
とは言え、ただブログテーマのカスタマイズ方法だけではなく
いろんなテーマに使えるブログパーツがあると便利だと思い、
私自身もブログカスタマイズの記事を書くこともあって
今更ながらこんなパーツを作ってみました。
↓それがこれ！「タイムライン」の表示です。
STEP1
HTMLをコピペ
HTMLコードをコピーして、テキスト編集モードでペーストします。STEP2
CSSをコピペ
追加CSSにCSSコードをコピペします。STEP3
AdQuickTagに登録
タイムラインのコードはAdQuickTagに登録しておくと便利です。
「タイムライン」というのは、上記のように
作業をステップ形式で伝えたい場合やそれ以外にも
このように、年表としても使うことができます。
2017年 夏
会社を辞め独立
過度のストレスにより体調を崩し会社を退職。フリーランスに転身することを決意。2017年 秋
デザイン専門学校に入学
印刷系デザインとWeb系デザインができれば最強だと考え、改めて専門学校に通いWebデザインのスキルを学ぶ。2018年〜
WordPressでブログ運営開始
ネットビジネスのため本格的にブログ運営を始める。
ということで、アニメーションを付けたりとか複雑なことまではできませんが
シンプルに見栄えだけ整えたいというあなたには
使いやすいパーツに仕上げておりますので、
「タイムラインでスッキリ見せたい！」というあなたは
ぜひ参考にしてください！
コードのコピペと文字の打ち替えだけで表示できます。
CSSでタイムラインを実装する方法
今回は上記、タイムラインの実装をHTMLとCSSのみで行います。
ですので、タイムラインのCSSコードを記述する場合は
ダッシュボードメニューから、
外観 → カスタマイズ → 追加CSSをクリックし
以下の部分に
私が今回あなたにお伝えさせていただくCSSコードをコピペしてくださいね。
また、色の変更方法などもお伝えさせていただきますので、
色を変更したい場合は、ここに記述するCSSコードで微調整ください。
タイムラインを表示させるHTMLとCSS
今回あなたにご紹介するタイムラインのデザインは
HTMLとCSSをコピペするだけで実装できます。
なので、あなたがやるべきことは、
あなたのサイトイメージに合わせた色変更だけ！
ということで、タイムラインを表示させたい場合は
以下のHTMLとCSSコードをコピペしましょう。
ちなみにHTMコードをブログの記事に反映させる場合は
必ず「テキスト編集モード」に切り替えてコピペしてくださいね。
- HTMLコード
- <ul class=”timeline”>
<li>
<p class=”timeline-date”>STEP1</p><div class=”timeline-content”><span class=”midashi”>STEP1の見出し</span>
STEP1の内容をここに記入。</div></li>
<li>
<p class=”timeline-date”>STEP2</p><div class=”timeline-content”><span class=”midashi”>STEP2の見出し</span>
STEP2の内容をここに記入。</div></li>
<li>
<p class=”timeline-date”>STEP3</p><div class=”timeline-content”><span class=”midashi”>STEP3の見出し</span>
STEP3の内容をここに記入。</div></li>
</ul>
- 追加CSSにコピペ
- .timeline {
list-style: none;
}.timeline li {
margin-bottom: 30px;
}div.timeline-content {
margin-top: 1rem;
}ul.timeline {
background-color: #fffef6;
border:dashed 1px #e5e5d1;
}.timeline span.midashi{
font-weight:500;
font-size:120%;
color: #fdc44f;
}ul.timeline li::before {
font-family: “Font Awesome 5 Free”;
content: “\f111”;
transform: scale(1.0);
font-weight: bold;
color: #fdc44f;
font-size:80%;
}@media ( min-width : 640px ){
.timeline li {
overflow: hidden;
margin: 0;
position: relative;
}.timeline-date {
width: 110px;
margin-top: 0px;
font-size:80%;
}.timeline-content {
width: auto;
float: left;
border-left: 3px #e5e5d1 solid;
padding-left: 20px;
}
}
基本的には上記HTMLとCSSコードがきちんとコピペできれば
タイムラインのデザインは実装できます。
タイムラインの色をカスタマイズする方法
タイムラインの表示方法についてはPHPファイルを使って
ショートコードで表示させたりと、便利な方法を解説されている方もいるのですが、
PHPファイルは誤って触るとブログが表示されなくなるリスクもあります。
また、タイムラインはそこまで頻繁に使うこともないかと思いますので、
できるだけリスクの少ない方法、かつ、見た目に綺麗なデザインということで
HTMLとCSSのみで組んでいます。
ただ、ブログによってはカラーイメージが合わない
という場合もあるかと思いますので、
タイムラインの色変更をする方法だけ個別に解説していきます。
●の色を変更する方法
タイムライン上の●の色を変更したい場合は
CSSコードの以下の部分でご調整ください。
font-family: “Font Awesome 5 Free”;
content: “\f111”;
transform: scale(1.0);
font-weight: bold;
color: #fdc44f; ←●の色はここで変更
font-size:80%;
}
見出しの色を変更する方法
今回私がご紹介しているタイムラインのデザインは
ある程度、どんなサイトにも差し支えないよう黄色ベースにまとめてますが
見出しの色も変更したい場合があるかと思います。
そんな時は、以下のコードでご調整ください。
font-weight:500;
font-size:120%;
color: #fdc44f; ←見出しの文字色はここで変更
}
背景色の色を変更する方法
背景色の黄色は、当たり障りのない薄めの色に設定していますが、
それでもおそらくはタイムラインの背景色を変更したいと
考えられることもあるかと思います。
そんな時は、以下のコードでご調整ください。
background-color: #fffef6; ←タイムラインの背景色はここで変更
border:dashed 1px #e5e5d1;
}
以上、タイムラインの色はあなたのサイトデザインに併せて
お好みで調整してくださいね。
タイムラインのデザインはスマホのレスポンシブにも対応
タイムラインのデザインはスマホ対応にもしてあります。
実際に、画面を縮小していただくと分かると思いますが、
デザイン崩れ防止のために、スマホ表示の場合のみ
縦線の表示だけが消えるようにしてあります。
また、本文テキストは、そのまま入力していただければ、
テキストの量に応じて改行されるようになってますので、
ぜひ一度コピペして試してみてくださいね。
タイムラインの使い方は無限大！
今回は、HTMLとCSSだけで簡単に実装できる
タイムラインの表示方法について解説させていただきました。
タイムラインはプラグインを使って実装できるものもあるみたいですが、
わざわざタイムラインの表示だけのためにプラグインを使うのは
サイトの表示速度を考えても無意味ですし、
それほど頻繁に使う要素でもないかと思います。
ただ、こうしたタイムラインのデザインも気軽に使えるようにしておくと
先にもお伝えさせていただいたように、作業手順のステップを書いたり、
ちょっとした年表を使う時などにも便利なのも確かです。
ですので、タイムラインの用途は、
使い方次第で色々とあるかと思いますので、ぜひあなたならではの
タイムライン活用法を見出していただけると嬉しいです。
最後に、AdQuickTagの登録方法も記載しておきますので、
タイムラインのデザインをたまには使いたいと考えているあなたは
AdQuickTagにもご登録ください。
AdQuickTagへの登録方法
すでにワードプレスのプラグイン
「AdQuickTag」を導入されている場合は
設定画面を開くと、以下のような画面になりますので
HTMLコードの最後の行以外は上のボックスに、
最後の行</ul>のみ下のボックスに入力し、
名前とアイコンをお好みで決めてご登録ください。
そうすることで、いつでも記事編集の際に、
「AdQuickTag」からタイムラインのデザインを
いつでも呼び出せるようになりますので、
PHPでショートコードを作らなくても、
それなりにタイムラインが使いやすくなります。
もちろん、PHPで組む方が圧倒的に便利なんですけど、
私はちょっと抵抗があるので（笑）
あえてHTMLとCSSで一手間かけてタイムラインを表示させることにしました。
ということで、何かしらタイムラインのデザインを導入したいと考えているあなたは
ぜひコピペしてカスタマイズしてみてください。
以上、最後までお読みいただきありがとうございました！
