(@matsuzakamio)です。ゆるけみをご覧いただき、ありがとうございます。ゆるけみでは文才もないマーケティング経験も営業経験もない私が副業ブログを運営していくために調べたことをまとめています。JINを購入して2か月、慣れてきたところでちょこちょこ修正をしたくなり、いくつかCSS変更を行いました。いった目的で何を変更したかがわからなくなるので、備忘録的にCSS変更点をまとめました。変更と修正を行っています。この記事ではJINでCSS変更した点をまとめています。ご不明な点やご質問等がございましたら、お気軽に記事下のコメント欄にコメントください。Awesomeまとめカスタマイズ前に子テーマのインストールプラグインではありませんが、一番最初に子テーマを導入しておきます。カスタマイズ前の準備サイトから子テーマをインストール。テーマでjin-childを有効にする。以下にまとめているCSS変更はすべて子テーマのスタイルCSSに記載します。親テーマのCSSに書いてしまうと、親テーマのバージョンアップをしたときに消えてしまって、これまでの努力がすべて消えてしまうので注意してください。目次に戻るphp・cssの変更には最新の注意をfunctions.phpは一文字でも間違えると真っ白になったりします。私も一度、ブログが全く表示されなくなりました。(5~10分程度でなおりましたが)functions.phpを変更する場合には最新の注意を払ってください。カスタマイズまでには必ずバックアップを取ってから行ってください。必要以上に多く色や装飾を使ってしまうと、見にくいブログになってしまいます。私はブログの配色は以下のサイトを参考にしました。Canva|デザインをセンスアップする“いけてる配色”100選!目次に戻るJINのCSSカスタマイズ子テーマを導入した後、CSS追加を行っています。WordPressテーマ「JIN」のカスタマイズ方法(順次追加)記事リストの文字を大きくするカスタマイズ一覧の通りですね。ユーザービリティの向上のために変更。文字の大きさってとても大事だと思います。読みにくいサイトなんてイヤだもの。内部リンクのボックスに「続きを読む」という文字を追加しました。一応次のアクションを書いてあった方が、読者の行動を促せるかなという話ですね。CSSに追記するだけでOK。WordPressテーマ「JIN」のカスタマイズ方法(順次追加)色も合わせてテキストリンクと同じ色に変更。目次に戻るくまさんカスタマイズJINのカスタマイザーで有名かつ実力者なのが、for-JINのくまさんです。JINをもっとおしゃれにかわいく、使いやすくカスタマイズしたいとお考えの方は、まずfor-JINをご覧になることをおすすめします。カスタマイズの参考にさせていただくと、見やすくて美しいサイトになります。JINユーザーはぜひFANBOX経由でも応援がおすすめです。限定カスタマイズも閲覧可能になります。2019このブログでもボタンの表示が崩れていたので、以下のCSSで修正しました。内部リンクのブログカードの抜粋文を非表示にして、すっきりさせています。ディスクリプションではなく、ブログの冒頭。私のブログの場合、ユーザーファーストの抜粋文ではないので、情報がごちゃごちゃしてしまうと判断して、抜粋文を非表示にしています。/*説明文を消す*/.blog-card-excerpt{display:none;}地味にいろいろ検索しちゃった。【Simplicity】ブログカードの本文抜粋を消すCSSの書き方。サイドバーのみの設定も可リンクカードのリンク色変更リンクカードのブログの題名の色を黒から青に変更しました。以下のCSSの青の部分を変更すると好きな色に変更できます。【Simplicity】ブログカードの本文抜粋を消すCSSの書き方。サイドバーのみの設定も可スマホの固定フッターの変更スマホの固定フッターの文字の色と背景色を変更しました。赤の部分のコードを変更すると文字色を、緑のコードを変更すると背景の色を変更できます。記号だけがあっても、人によっては何のアイコンかわからないこともあります。ユーザーにやさしくないし、クリックもしてもらいにくそう...「」と「」の下に「MENU」「SEARCH」の文字を追加するCSSが以下のサイトに載っていました。変更WordPressでは「<blockquote>~</blockquote>」で囲むことで下のような引用枠がつくれます。そこで、引用枠のデザイン変更、JINのデフォルトのデザインから背景色だけ変更したような感じです。CSSで作る!魅力的な引用デザインのサンプル30(blockquote)グローバルメニューのアイコンを動かすこのサイトの場合は、mobile限定に設定しているのですが、グローバルメニューと固定フッターのアイコンにアニメーション動作を入れています。JINの設定方法は簡単で「メニュー」→「説明」にアイコンのclassとアニメーションのclassを追加するだけで設定できます。Awesomeの使い方:Webアイコンフォントを使おうTablePressの表の横スクロール表作成プラグイン「TablePress」で作成した表が大きすぎてページに入らないときに、横スクロールで表示させるようにするカスタマイズです。HTMLはテキストエディタ画面で、横スクロースさせたい表のテーブルタグを挟むように入力します。/]</div>CSSはJINの「外観」→「CSS編集」→「追加CSS」に追加しました。#f0f0f0;}アコーディオンボックス:クリックで表示・非表示するBOX以下のように、クリックすると内容が見えるBOXがつくれます。ネタバレを防ぎたいときや、必要な人だけ確認してほしい情報をBOXに入れることで、読み手の人のストレスを軽減できます。子テーマにCSS追加...「外観」→「CSS編集」でCSS追加。コピペでできる、クリックで要素の表示非表示を切り替えるHTML&CSS【WordPress対応版】タイムライン表示JINでも以下のSANGOみたいなタイムライン表示ができます。title=”追記”]JIN専用プラグインCARATを導入するとカスタマイズをしなくてもタイムラインが使えるようになります。実際に使って感じた便利なCARATの機能についてまとめてみました。CARATの購入を検討している方はご覧ください。...URLとタイトルをコピーするボタン「URLとタイトルをコピーするボタンがあるとSNSで拡散されやすくなる」と言われています。そこでいろいろ調べて、JINとSANGOでコピーボタンを実装できたので、その方法をまとめてみました。JINとSANG...アイキャッチ高さの統一アイキャッチ画像とか適当にしか設定しておらず、高さがまちまち。リサイズしてアップしなおしとか、面倒なので放置...していたら、コピペで比率変更できるCSS!以下のサイトを参考にさせていただきました。WordPressテーマ「JIN」アイキャッチの高さを揃える目次に戻る装飾関連JIN特有ではありませんが、サイト運営をする上、よりユーザビリティを向上させるためのHTMLやCSSです。チェックボックス作成チェックボックスを入れる場合は、以下のHTMLをテキストに入力します。<input>チェックボックスの見た目を変更したいときのCSSは以下の記事を参考にさせていただきました。</label></div>ページ内ジャンプ見出しへ移動する目次以外にも箇条書きボックスを作成して、見出しへページ内ジャンプできるようにします。★の部分にリンクさせたい見出しの番号を入力します。アンカー作成リンクさせたい箇所に、半角英数字のアンカーをつける。<a>クリップボードにコピーボタン読者の人がボタンを押すと文章がコピーできるようにするHTMLです。プラグインでも実装可能ですが、プラグインの数を減らすために、極力プラグインには頼らないようにしたいと思い検索。...ちょっと難しくてよくわからないので放置。JINなら「シンタックスハイライター」という機能で疑似的にコピーボタンを実装できたので、とりあえずそれで対応。表に題名をつけるにはcaptionを使います。<caption>タイトル</caption>captionを挿入する位置は以下の通りです。カスタマイズRinkerをちょこちょこカスタマイズしました。変更したらクリック率が上昇しました。しくは以下の記事にまとめています。【基本から応用まで図解で完全解説】Rinker(リンカー)の使い方と実例|Amazon・楽天・Yahoo!だけじゃないWordPressプラグインAmazon・楽天・Yahoo!を一括で紹介できる、物販ブロガーには必須のWordPressのプラグインRinker(リンカー)。登録方法から基本的な使い方、さらには損をしないためのASP選択についてまとめています。JINプロフィールプロフィールを充実させました。誰が有名人でもない一個人に興味を持つのだろう?と思っていたのですが、素性がわからないよりは筆者の概要が分かった方が、情報の発信元として信頼感が増すかな、と判断しました。オリジナルアイコンプロフィールのアイコンも変更しました。「オリジナルアイコンでPV増えた」っていうのも耳にして、「本当かな?」と思ったのですが、実際に使ってみたら収益が上がりました。詳細とメリットは「【ブログを収益化したい】ならオリジナルアイコンを作るべき4つの理由」にまとめています。上がった収益でイラスト料金の元が取れました。時系列のトップページではなく、おすすめの記事を表示するようなトップページへ変更中。始めにWordPressの基本的な操作の一部をメモ的にまとめています。ショートカットWordPressにもショートカットキーがあります。Windowsとそんなに変わりません。編集JINはデフォルトで「シンプルな表」を選べば、美しい表を挿入できます。項目名ここに説明文を入力してください。項目名ここに説明文を入力してください。項目名ここに説明文を入力してください。項目名ここに説明文を入力してください。項目名ここに説明文を入力してください。(「ここに説明文を入力してください」の文面を変更はできないのかなー?いちいち消すのが少し面倒。ユーザービリティ考えたら仕方がないか)ですが、2列しかないので、必要に応じて編集する必要があります。編集するときの注意点は、幅にpx数値を入力するとレスポンシブルではなくなりますので注意。記事一覧に最新記事を文頭に持ってくる特定の記事を記事一覧の先頭に表示させたい場合、編集画面で「公開(先頭に固定表示)」を選べばOKです。目次に戻る番外編:アイキャッチ画像JINはアイキャッチ画像があった方がよりきれいなサイトに仕上がるようになっています。ブログを始めたけど、WordPressのテンプレートをJI...目次に戻るその他デフォルトのデザインの変更とかプラグインの文面変更とか。文字のスタイル指定を増やしたい場合のspanで囲むCSSを使ったフォントのスタイル指定。プラグインの「AddQuicktag」に登録しました。Reference<strong>でも<b>でも良くないそうです。検索して「<b>が良い」というサイトしか発見できなかったポンコツとしては衝撃。Plus」を使っています。~読みたい場所へジャンプ」に変えてみました。Awesomeをスマホメニューに導入できます。追記:JINにはオリジナルアイコンが導入されました。Awesomeを少し使いたいなーとのことでCSSを少し追加。追加するのに地味にいろいろ大変だったのですが、あっているのかな?JINのボタンって色と大きさと丸みしか変更できない...よね...?簡単な方法あるのかな?いろいろ、試行錯誤を行って設定したこともあり、参考サイトがやや多め。【保存版】クリック率を上げる!アフィリエイトリンクのボタン化デザイン6選。Awesomeアイコンを探すときに、以下のサイトが便利です。気に入ったアイコンを「AddQuicktag」に登録しています。Awesomeアイコンを素早く検索しコピー。CSS変更した事柄をまとめました。手探りのSEO対策...ユーザビリティ、わかりやすい文章...課題は山積みです。目次に戻る3平凡な会社員主婦ブロガーの損をしないためのMEMOどこにでもいるふつうの会社員で主婦です。文才もないし、Web関連のIT知識もなくて、マーケティング経験もなしのブログ初心者。ブログで月20万円の収益が出るまでの1年間に行ったことブログを始めた頃はわからないことがたくさんあって苦労した...初心者に高いお金を払わせている人になんとなくモヤッとしてるので、自分備忘録をかねて有益そうなブログ関連の情報をまとめています。トップへ戻る目次に戻る最後までご覧いただき、ありがとうございました。ご質問等ございましたら、記事下のコメント欄よりご連絡ください。よかったらシェア&気になったらブクマして後で読んでください。Twitter(@matsuzakamio)もフォローお願いします。ゆるけみ雑記ブログで運営していたところ増えてしまったブログの記事。書店を駆けずり回って、第一版を手に入れて一読しました。...ご不明な点やご質問等がございましたら、お気軽に記事下のコメント欄にコメントください。Pressの表をスマホでスクロールできるようにしたくて辿り着きました。貼り付けの場所について質問です。PressのプラグインのオプションのカスタムCSSで合っているのでしょうか?初心者で分からなかったので、教えていただければ幸いです。Pressの表ですが、1HTMLはテキストエディタ画面で横スクロールしたい表を挟むように入力しました。2CSSはJINの「外観」→「CSS編集」→「追加CSS」に追加しました。本ブログの環境では以上の操作で実装できました。AM教えて頂き、ありがとうございました!お礼が遅くなってしまって申し訳ないです。これからも、参考にさせて頂きます。コメントをキャンセルメールアドレスが公開されることはありません。上に表示された文字を入力してください。澪)どこにでもいるふつうの主婦で会社員。文才もないし、Webの知識もなし。無料ブログの下積み経験もないブログ初心者。ブログを始めた頃はわからないことがたくさんあって苦労した...初心者に高いお金を払わせている人になんとなくモヤッとしてるので、自分備忘録をかねて有益そうなブログ関連の情報をまとめています。