Xmasギフトはこちらからどうぞ

【WordPress】テーマ「スワロー」をカスタマイズしてみた【ラインマーカー他】

引き続きカスタマイズの紹介です。

注意
もしコードが表示されない時は、一度ブラウザを「更新」して下さい

③見出し2の角を丸くする

見出し2テスト画像
この「見出し2」を見ての通りにします。
これは「OPENCAGE」のホームページを見てコードが出ていたのでそのまま『追加CSS』で貼り付けようと思ったのですが、スワロー用ではなかったので躊躇しました。
で、サポートにメールで問い合わせをしました。
注意
カスタマイズに関する事は本来ならサポート外です
せっかく【スワロー】という良質のテーマを使用しているにも関わらず、テーマに反することをやっている様でサポートの方もあまり気分良くなかったでしょう。
しかし親切にも返事はすぐ返って来ました。m(_ _)m
これが以下のコードになります。

これは【スワロー】の『追加CSS』編集に貼り付けることによって出来ますが、他のテーマだと異なるかもしれません。ご注意ください。

④見出し2に影を付ける

ここまで分かれば、いくら初心者の私と言えど、自分でコードを書けました。

メニュー追加

最終的にこの画面のメニューに追加して選択出来る様にするのが目的です。

⑤Apple Keyboard風に実装するスタイルシート

これはこちらの方のブログを参考にさせていただきました。
ショートカットの表記をApple Keyboard風に美しく実装するスタイルシート

注意
横に長いのでご注意ください

Lite風の出力は以下の様になります。

Dark風の出力は以下の様になります。

例えばLite風はcommand+Nなら
command+N
こう言う風になります。
Dark風は
+N
こう言う風になります。

⑥ラインマーカー

以前の記事で紹介させて頂いた方のブログから抜粋しました。
こちらの記事も合わせてどうぞ
『ラインマーカー作成が出来ない』のは【ロリポップ!】の「セキュリティー設定」が原因だった!

注意
横に長いのでご注意ください

呼び出しはプラグインの「AddQuicktag」を使用します。
AddQuicktag
【WordPress】
➡️ダッシュボード
➡️プラグイン
➡️新規追加
➡️「AddQuicktag」で検索

AddQuicktagインストール画面

インストール後「有効」をタップします。

AddQuicktagの選択画面

①「設定」アイコンタップ
②「AddQuicktag」をタップすると設定画面が出てくるので、次のように入力します

AddQuicktag設定画面

設定
① ボタン名    ➡️ラインマーカー:黃(お好きな名称で)
② ダッシュアイコン➡️お好きなアイコンを選べます
③ ラベル名    ➡️お好きな名称もしくは無記入でも可
開始タグ
<span class="marker_Yellow">
終了タグ
</span>

アイコン選択画面
用途に合わせて、アイコンをお選びください。

注意
色を指定する場合最初は必ず大文字です。黄色➡️Yellowという風に

入力を済ませたら、「一番右のチェックボックス」をタップして完了です。

チェックを入れた画面
ラインマーカーで緑色を引きました
ラインマーカーで青色を引きました
ラインマーカーで黄色を引きました
ラインマーカーで赤色を引きました

こういう感じになります。

まとめ

「CSS 編集」で検索すればいっぱい出てきますが、総じて皆さんコピペOKというスタンスを取っていますね。
これはお互い「情報」は共有しましょう、「コンテンツ」で競い合いましょうという解釈と私は捉えています。
私も本を開くまではCSS やらHTMLって聞くだけで、すごく難解な代物だと言う先入観がありました。
しかし今は本当に少しづつですが、内容が理解できる様になりつつあります。
要するに「正しい文法(CSS)でコードを書き、(HTML)で出力してあげる」
この基本を大事にすれば良いわけですね。
しかし、プラグインをなるべく使わないようにするためにCSSの本を買って勉強しているのに、結局プラグインを使っている事に対して小一時間…(`・ω・´)
以上、お読みいただきありがとうございました
こちらの記事も合わせてどうぞ
アイキャッチ画像【WordPress】テーマ「スワロー」のカスタマイズ BOXの追加方法