わがままに自由に自分らしく人生を描こう
会社のお給料に振り回されて、人間関係で疲れ果て・・そんな人生はもう終わり。【ブロトレ】をキッカケに”わたしらしく自由に思い描けるライフスタイル”を手に入れよう!
WordPress

【JIN】トップページに画像を挿入&画像リンクに触れると動くようにする設定方法

こんにちは、kana(旧HN/nako)です。

 

今回は私の備忘録として、ワードプレステンプレートJINのカスタマイズ方法でTOPページに画像を挿入し、更に画像リンクに触れるフワッと動く方法についてのやり方を残していきたいと思います。

もし、どうやるんだろうと思われている方がいたら、参考にしていただければ幸いです^^

TOPページに画像を挿入する方法(JINテーマ)

TOPページ画像とは↑コレの事。

JINのアップデート後のトップページ上部バナー設定方法【最新】

JINのアップデート(バージョン: 2.460)後は下記やり方ではなく、ウィジットから簡単に挿入できるようになっておりますね。

もしバージョンアップしている場合は昔のやり方では反映されないのでコチラのやり方を参考にしてみてください。

WP管理画面のウィジット「トップページ上部」で設定できます。

ここに「テキスト」、「カスタムHTML」、「画像」で入れるという方法があるのですが、私の個人的なおススメとしては、「画像」で画像を挿入する方法です。

画像枠文字入れ大きさ
テキスト
挿入
あり記事一覧の幅より少々小さい
カスタム
HTML挿入
なし記事一覧の幅より少々小さい
画像挿入あり×記事一覧と同じ大きさ

テキストだと外枠がある、カスタムHTMLだと外枠がないけど幅が小さくなるのでスマホ表示が気になる・・・という所で画像の入れ方がしっくりでした。

もし文字を画像の上に入れたいなどの場合は、「カスタムHTML」で文字を入れて、その下に「画像」を入れればいいかと思います。

ちなみに、このウィジット設定ではトップページ上部だけではなくて

トップページ下部

記事上部

も同じやり方で設定できます。

どのように設定しているんだろうと私はかなり探してたので、もし同じような人がいたら参考にしてみてくださいね!

旧バージョンのやり方【備忘録】

簡単に手順をまとめていきます!!

※カスタマイズをする場合は必ずバックアップをしてから行うようにしてください

①まず下記コードをコピーし自分仕様にする

<center>

<a href=”リンクで飛ばしたいページのURL” rel=“nofollow” target=“_blank”>

<img src=”画像のUL” max width=”100%” align=”center” >

</a>

</center>

<br>

②コードをスタイルシートに貼り付ける

「外観」

「テーマの編集」

右側にある「編集するテーマを選択」で「JIN」を選ぶ

「投稿ページ(home.php)」を選択

画像の赤枠の場所にコードを貼り付ける(私の場合は36~46部分)


「設定を更新」

これでトップページに画像を挿入することができます。

画像リンクに触れると画像が動く設定方法

①下記のコードをコピーする

 ②追加CSSに貼り付ける

「外観」

「カスタマイズ」

「追加CSS」

空いているところにコードを貼り付ける

以上で動く画像リンクを作成する事ができます。


blog trainer:kana(旧HN/nako)

◆わがままに・自由に・自分らしく◆

HSPで人間関係に疲れて副業からPC1台で自由になった女


1983年6月生まれ

[マイブーム]
・映画をひたすら鑑賞する事
・シュールな動画や画像を集める事
・ショールームの前田さん
・お金を数える事(←)

[Activity content]
●ブログコンサル
●webマーケター
●マインドメンタリング
●人材育成研修トレーナー

2020年1月より日本最大級webビジネスコミュニティAugustaAcademyZEROのSEOコンサルタント就任。

M.ダックスのそら君11歳と、自宅を職場に時間や場所や人に束縛されないストレスフリーなライフスタイルを描き中♪

[history]
なくなんとなくの10代、MLMで大失敗して自己破産をした20代。
仕事では人間関係に病み、30代では理不尽な理由でクビ宣告。

何もかも疲れ切って追い込まれ
「もう人や会社に依存する生き方から抜け出して人生を変えたい」
と思った時に出会ったのがインターネットビジネスでPC1台で稼ぐという世界でした。

副業から飛び込んで5か月目にはPC1台の収入で生きられるようになり、今では誰に振り回されることもなく時間や場所にとらわれず、クレジットカードも復活できてPC1台で約30万円程度稼ぎながら自由きままな生活をしています。

『わがままに・自由に・自分らしく生きる』をテーマにただいま絶賛奔走中!

過去の私と同じようなジレンマを抱えて悩んでいる方へむけて、ブログで自立した生き方ができるという事を広める為にコンテンツ配信を開始。
私が今まで失敗や成功を繰り返して身に付けてきたノウハウを詰め込んだ、無料メール講座と教科書を発行しています。

もしあなたが、PC1台でライフスタイルを変えていきたいけどどうしていいかわからないという場合は、無料ですので【ブログが勝手に収益を生んでくれる仕組みを作る為の月収+10万円の秘訣】を下記バナーよりを入手してみてくださいね。