WordPress
本文中の画像を挿入したい位置にカーソルを合わせる。
画像を左右に配置する場合、横に表示したい文章の行頭にカーソルを合わせる。
ここでは、１行目の文章の行頭にカーソルを合わせて「画像を追加」ボタンをクリックしました。
しかし、このままでは画像の横に文章が表示されないので、スタイルシートで配置を指定します。
p.postinfo {
color: #2b76cc;
text-align: right;
margin: 20px 0 0;
clear: both
}
/* 記事内の画像 */
.alignleft {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
画像の横には文章だけを表示するため投稿日のところで回りこみを解除する。
そこで、投稿日をマークアップした<p class="postinfo">にたいして「clear: both」を指定する。
/* 記事内の画像の位置を中央に配置 */
.aligncenter {
display: block
margin-left: auto;
margin-right: auto;
}
/* 画像のまわりの枠線を削除する。 */
div.post img {
border: none;
}
画像を中央に配置することに成功。
画像をアップロードするウィンドウで、「画像を中央に配置」という項目を選択しても、適用されなかったのは、
自分でHTMLとCSSをリセットしてしまったためだったことがわかりました。
WordPressの投稿でソースコードを楽に表示させるために、
pluginの”SyntaxHighlighter Evolved”を入れてみたが、
ソースコードが表示させるだけで、その他の見た目は全く反映されない。
そのうち、なんとかしたい。。。
以下は、syntaxHighlighterで表示させているソースコード。
背景は、自分でCSSで設定したもの。
<html> <head> <title>test</title> </head> <body> <p>このソースコードは、英語で言う"This is a pen."のようなものですね</p> </body> </html>
ここで何時間も詰まってしまっている。
わからないことは後に回して、できることからやっていくことも大切かも？
でもそれって悔しいし、何か気分がモヤモヤしてしまう。。。
＝＝＝ 追記 ＝＝＝
SyntaxHighlighter無事表示できるようになりました。
原因は、templateをカスタマイズしたため、SyntaxHighlighterに必要なテンプレートタグを削除してしまったためでした。
<?php wp_head(); ?>を<head>内に入れとかないと、SyntaxHighlighterで必要なjavascriptが動かないようです。
SyntaxHighlighter以外にも、<?php wp_head(); ?>を入れないと、機能しないpluginがあるそうなので気をつけたほうがいいですね。
<head> …中略… <?php wp_head(); ?> </head> <body> …中略… <?php wp_footer(); ?> </body>
SyntaxHighlighterでは、<?php wp_head(); ?>の他に、
上記のコードのように</body>の前に<?php wp_footer(); ?>もソースに書かないといけないようです。
