カスタマイズ

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

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

タイムラインとは?

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

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

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

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

momonさんより「タイムラインはJINの子テーマでのみ実装できる」との情報をいただきました。情報をありがとうございます!

親テーマでブログ運営をしている方は、JIN公式サイトの「02|JINをアップデートする前に・子テーマを活用しよう」の内容を確認後、子テーマをダウンロードしてくださいね。

子テーマのダウンロードはこちらから

タイムラインの導入方法

タイムラインの導入方法はたったの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 Quicktagに登録しておくと、使う時に便利です。

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

    タイムライン

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

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

    タイムライン

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

    タイムライン

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

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

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

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

▼タイムライン一例

タイムライン

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

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

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

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

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

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

ワードプレステーマJINで使えるおすすめカスタマイズ一覧のまとめ ブログを自分好みの見た目に変えてみたい! と思ったことはありませんか? 「カスタマイズ」というものをすると、...
ABOUT ME
夏目 C4
夏目 C4
小学生の子供にプログラミングを習わせたい親向けに、プログラミングを楽しく勉強する方法(独学・教材・教室)を紹介しています。息子の小学校入学を機に、彼の将来を考えプログラミングの勉強を開始。未経験から簡単なゲームを作れるまでになりました!息子の自己肯定感アップのために「ほめ育子どもコーチング」の資格取得しました✨『なつスタ』管理人

POSTED COMMENT

  1. アバター アキ@iaki1121 より:

    JINでタイムラインを表示する方法を調べ、こちらに行き着きました。
    詳しい流れが分かり、助かりました。
    ありがとうございます。
    1つ質問させて下さい。
    この方法では、グーテンベルクで使用するのは、ムリなのでしょうか?
    自分でショートコードを入力する方法を調べたのですが、解決できませんでした。
    もし知っていたら、教えて頂けると助かります。
    よろしくお願い致します。

    • 夏目 C4 夏目 C4 より:

      アキさん、
      記事を読んで頂き、ありがとうございます!(^^

      グーテンベルクのショートコードの貼り付け方ですが、
      まずは、ぽんひろさんのショートコードをメモ帳などにコピーします。
      次に、クラシック版の段落を選んで、ショートコードを貼り付ると表示できると思います。

      私は、AddQuickTagにショートコードが入っていたので、それを呼び出したら表示出来ました!
      ワードプレスが最新版ではないので、もしかすると最新版では出来ないかもしれません。
      その時はまたご連絡をおねがいします。(^^

      • アバター アキ@iaki1121 より:

        夏目さん、回答ありがとうございます!

        あとあと、JINのマニュアルを読み返したところ

        余白を空ける

        ということで、解決できました!!

        WordPressデビューしたばかりなので、操作自体が分からず時間がかかっています…

        また、分からないことがあったら、こちらのサイトで調べさせて下さい!!
        本当にていねいなお返事ありがとうございました。

        • 夏目 C4 夏目 C4 より:

          アキさん、解決できたそうでよかったです。
          余白をあけるとできるんですね!( ..)φメモメモ

          グーテンベルクはちょっと初心者には難しいですよね(^^;
          私は今までクラシックエディターを使っていて、グーテンベルクは最近始めたばかりです。

          ブログのカテゴリーを変えてしまって、ブログ用記事が探しにくいかもしれませんが…
          何か分からないことがあればいつでも聞いてくださいね。(^^♪

  2. アバター momon より:

    どこのブログを見てもタイムライン機能が実装できずにここまでたどり着きました。

    結果的に「子テーマ」じゃないとできないとわかりました、ありがとうございます。T-T

    ただ本当のガチ初心者はそんなことわからないと思います。どこ見ても、同じように貼り付けても出来ない理由がわからなすぎて諦めそうになりました。笑

    jinのテーマをダウンロードするときに、子テーマの存在とか一切出てきませんでしたもん。T-T

    他の皆さん子テーマに関してあっさり解説しすぎて、子テーマって何?てすらならなかったので、親テーマのままやって出来ない人もいるんじゃないかな?と個人的には思います。

    子テーマすらわからないリアル初心者の今後のために参考になれば!

    • 夏目 C4 夏目 C4 より:

      momonさん、
      タイムライン導入出来たようでよかったです(^^
      JINの子テーマじゃないと出来ないんですね…!
      情報をありがとうございます。
      私は何も考えずに子テーマを入れてブログを運営していたので気づきませんでした!

      親テーマ、子テーマは初心者には難しいですよね…(^^;

COMMENT

メールアドレスが公開されることはありません。

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