wordpressで記事を書いているとき、自身の他の記事を紹介することありますよね。そんなときWordpressの埋め込み機能を使って、他の記事へのリンクを作成すると思います。
こんな感じで
スマホ版はこんな感じ
こういう感じで簡単に表示できるのですが、CSSを変更したいときありますよね。
コメントのアイコンはいらないし、スマホ版だと縦長でスタイルが崩れているなどなど、
このWordpressの埋め込み記事も自分でカスタマイズできます。その方法を書いていきたいと思います。
ちなみに私はこんな感じにカスタマイズしました。
スマホ版
のちにコードも記載するので自由にコピペして使ってもらって構いません。
cssを自身のthemeディレクトリから任意のcssファイルが読み込まれるように追記しましょう。コードはこんな感じです。
これでcssが読み込まれるディレクトリが変更できました。
元々のテンプレートファイルは wp-includes/theme-compat/embed-content.php ですのでこれを自分のWordpressのthemeディレクトリにコピペしてください。themeディレクトリ内にembed-content.phpファイルがあればそちらが適応されるので、自分で好きなようにphpファイルをいじることができます。
私のembed-content.phpのコードはこんな感じにしました。
1で設定したcssファイルを作成して記述していきましょう。ここも自分の好きなようにスタイルを変えていけばOKです。
私が作成したcssのコードはこんな感じです。
また、元々のスタイルから少しだけ変えたい、というのであれば、元々のcssファイルはwp-includes/css/wp-embed-template.cssにありますので、コピペして持ってきて編集すればOKです。
編集方法は以上です。意外と簡単にできるので、スタイルを変えたいという方は試してみてください!
Next Post
おすすめのゲーミングチェアGtracing
快適な椅子はないかな〜と探していた結果、ゲームングチェアに...
Prev. Post
WordPressで引用符の付け方
先日初めて私のブログでも引用を使ったのでそのやり方について...
コメント
名前 *
次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
先日初めて私のブログでも引用を使ったのでそのやり方について記載したいと思います。 Wordp...
先日初めて私のブログでも引用を使っ...
2020年12月14日
WPの投稿にコードを記述②
ワードプレスの投稿にコードを記述する方法を以前記載しましたが、環境のせいか、プラグインが干渉して...
ワードプレスの投稿にコードを記述...
2020年11月19日
[Cocoon]WordPressに無料テーマをインストールする方法
私はこのブログは自分でテーマを作成していますが、今回新たに無料テーマを使ってワードプレスでサイトを...
私はこのブログは自分でテーマを作成...
2021年1月10日
githubのコードをスクロールで表示
GithubのコードをWordpress等のブログに掲載する時、そのまま貼り付けるだけだとコードで...
GithubのコードをWordpr...
2020年12月20日