カスタマイズ

【JINカスタマイズ】タイムライン導入方法を初心者にわかりやすく説明!

夏目C4
夏目C4
今回は「ワードプレステーマJIN」で使える「タイムライン」を紹介します!

タイムラインとは?

下記のような手順を紹介する時に使える表示のことです

  • STEP1
    ○○にアクセスする
    ここからアクセスして下さい⇒○○
  • STEP2
    ログインをする
    ログインをして下さい

参考にさせて頂いたコードは「ぽんひろ」様になります。

手順書を書く方は一気に見やすくなりますので、是非導入してみて下さい。

夏目C4
夏目C4
それでは、タイムラインの導入方法を紹介していきますね!

 

タイムラインの導入方法

タイムラインの導入方法はたったの2ステップです!

  1. style.cssにコードをコピペします
  2. function.phpにコードをコピペします

コードをコピペする前には、必ず「function.php」をメモ帳などにコピーしておいてくださいね!

夏目C4
夏目C4
まずは、style.cssにコードをコピペして行きましょう!

 

style.cssにコードをコピペします

「外観→テーマエディター→style.css(子テーマ)」

もしくは、「外観→カスタマイズ→追加CSS」に貼り付け

ぽんひろさんのサイトより下記のコードをコピーしてから、style.cssもしくは追加CSSにペーストしてください。

タイムライン

こちらよりコードをコピーして下さいね⇒HTMLとCSSでタイムラインデザイン!WordPressでショートコードも!

 

◆私は外観→カスタマイズ→追加CSSへ追加しました。

タイムライン

 

function.phpにコードをコピペします

コードをコピペする前には、必ず「function.php」をメモ帳などにコピーしておいてくださいね!

下記コードをfunction.php(子テーマ)にコピペしてください。

ぽんひろさんのサイトより下記のコードをコピーしてから、function.php(子テーマ)にペーストしてください。

タイムライン

こちらよりコードをコピーして下さいね⇒HTMLとCSSでタイムラインデザイン!WordPressでショートコードも!

 

◆function.phpの場所

  • 外観 ⇒テーマエディター ⇒テーマのための関数

コードをペーストしてから「ファイルを更新」をしてくださいね。

タイムライン

 

タイムラインのアレンジ(デザイン)

タイムラインの色や形などを自在に変更出来ます!

デフォルト

変更なしのHTMLを使用すると「ブルー」になります。

  • STEP1
    タイトル1
    ここにテキストここにテキストここにテキスト
  • STEP2
    タイトル2
    ここにテキストここにテキストここにテキスト
  • STEP3
    タイトル3
    ここにテキストここにテキストここにテキスト
  • STEP4
    タイトル4
    ここにテキストここにテキストここにテキスト
  • STEP5
    タイトル5
    ここにテキストここにテキストここにテキスト

 

ピンク

最初の「ptimeline」の後に「color=”pink”」を追加するとピンク色に変わります。

  • STEP1
    タイトル1
    ここにテキストここにテキストここにテキスト
  • STEP2
    タイトル2
    ここにテキストここにテキストここにテキスト
  • STEP3
    タイトル3
    ここにテキストここにテキストここにテキスト
  • STEP4
    タイトル4
    ここにテキストここにテキストここにテキスト
  • STEP5
    タイトル5
    ここにテキストここにテキストここにテキスト
夏目C4
夏目C4
他にも●の部分をイラストに変えられたり出来ます!詳しくはぽんひろさんのサイトにてご確認をしてみて下さいね。

 

ショートコードの貼り付け位置

ショートコードの貼付け位置はワードプレスの「テキスト」になります。

以下のAddQuicktagを使用する場合は「ビジュアル」に貼り付けるのでお間違え無いように。

タイムライン

 

「Add Quicktag」に登録する方法

タイムラインのショートコードをAdd Quicktageに登録しておくと、使う時に便利です。

  • STEP1
    Add Quicktageを開く
    設定からAdd Quicktageを開きます

    タイムライン

  • STEP2
    タイムラインの登録
    自分で分かりやすい名前を付けてから、開始タグにショートコードをコピペします。

    1番右にありますチェックボタンにチェックを入れてから「変更を保存」を押します。

    タイムライン

  • STEP3
    タグの呼び出し
    ワードプレスの編集画面「ビジュアル」で「Quicktags」より先程登録したタグを呼び出します。(今回はピンクを呼び出しました)

    タイムライン

▼関連記事:AddQuicktagの導入方法が書いてあります。

【ブログ初心者】コピペ不要!AddQuicktagインストール~使い方こんにちは!専業主婦の夏目C4(@Ntm625C4)です♪ ブログを書く時に 定型文やHTMLタグを自分で打ち込...

 

【JINカスタマイズ】タイムライン導入方法を初心者にわかりやすく説明!|まとめ

今回は「JINカスタマイズのタイムライン導入方法」を紹介してきました。

▼タイムライン一例

タイムライン

使用させて頂いたコードは「ぽんひろ様」です。

参考サイト⇒HTMLとCSSでタイムラインデザイン!WordPressでショートコードも!

手順書などを書く方にはおすすめのカスタマイズになっております。

是非、導入してみて下さいね!

何か分からない事がありましたら、左(右)にあるポストよりお問い合わせをください。

ここまで読んで頂き、ありがとうございました。

▼関連記事はこちらになります。

ワードプレステーマJINで使えるおすすめカスタマイズ一覧のまとめ ブログを自分好みの見た目に変えてみたい! と思ったことはありませんか? 「カスタマイズ」というものをすると、...
ABOUT ME
アバター
夏目 C4
小学校からのプログラミング教育に不安を感じ、マインクラフトとLEGO好き6歳の息子にレゴロボット教材を購入。そのレビューをお届け!プログラミング教育関連やプログラミング教室・教材の情報を発信し、AI時代に子供が困らない『プログラミング』を少しでも身近に▶︎『なつスタ』運営中✨
ピックアップ

こどものロボット・プログラミング

ロボット プログラミング教室 選び方5つのポイント ロボット教室おすすめランキング3選 おうちで学べる教材6種類 ロボット プログラミング ロボット教材のレビュー なつスタ

https://c4ntm.com/

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください